function resolveCSSVar(value) { value = value.trim(); // If the value is set to a css variable resolve that variable to it's real value while (value.trim().substring(0, 2) == '--') { value = getComputedStyle(document.documentElement).getPropertyValue(value); value = value.trim(); } // If the value contains a calc() convert it to an eval() expression if (value.trim().substring(0, 5) == 'calc(') { value = value.replace("calc(", "eval("); value = eval(value); } return value; }
// Fn to set or read a css variables function cssVar(name, value) { // Find the value if not provided if (!value) { value = localStorage.getItem(name); if (!value) { value = getComputedStyle(document.documentElement).getPropertyValue(name); } } // Get the actual value (not another variable or calc() ) value = resolveCSSVar(value);
// Set the css variable and it's value to be active document.documentElement.style.setProperty(name, value);
// Store the variable and it's value in localStorage localStorage.setItem(name, value);
console.log('cssVar() ran on variable ' + name + ' with value of ' + value);
return value; }
// Fn to either show or hide a set of elements in a node list function displayElements($nodeList, $display) { // The $display argument should be either "none" or "initial" $nodeList.forEach( function (node) { node.style.display = $display; } ); }
// Fn to change language based on user's flag selection function changeLang($userLang) {
// Build the node lists for the various languages if (!$enElements) { var $enElements = document.querySelectorAll('[lang="en"]'); } if (!$esElements) { var $esElements = document.querySelectorAll('[lang="es"]'); }
// Show/Hide the appropriate languages and check the selected flag radio button if ($userLang == "es") { displayElements($enElements, 'none'); displayElements($esElements, 'initial'); document.querySelector("#select_es-mx").checked = true; } if ($userLang == "en") { displayElements($esElements, 'none'); displayElements($enElements, 'initial'); document.querySelector("#select_en-us").checked = true; }
// save 'locale' based on the flag that was selected localStorage.setItem('locale', $userLang); }
// Fn to show the user's selected lagnuage and hide the others function setLanguage() {
if (!window.localStorage.getItem('token')) { document.querySelector("#LoginBtn").innerHTML = ''; }
// Generate the node lists of all english and spanish elements if (!$enElements) { var $enElements = document.querySelectorAll('[lang="en"]'); } if (!$esElements) { var $esElements = document.querySelectorAll('[lang="es"]'); }
// Determine the user's language or set the default(es) if (!$userLang) { var $userLang = localStorage.getItem('locale'); $userLang = $userLang.trim(); if (!$userLang) { $userLang = 'es'; localStorage.setItem('locale', $userLang); } }
// Hide the language that the user has not selected if ($userLang == 'es') { document.querySelector("#select_es-mx").checked = true; displayElements($enElements, 'none'); } if ($userLang == 'en') { document.querySelector("#select_en-us").checked = true; displayElements($esElements, 'none'); }
if (!window.localStorage.getItem('token')) {
var $checkinBtn = document.querySelector('#checkinBtn'); $checkinBtn.style.display = 'none'; var $rotaBtn = document.querySelector('#rotaBtn'); $rotaBtn.style.display = 'none'; }
}