forked from extern/the-glorious-startpage
decrease the usage of var
This commit is contained in:
Gerome Matilla
parent
916a127300
commit
2c490585b2
@ -1,14 +1,14 @@
|
||||
var dashboard = document.getElementById("rightDashboard");
|
||||
var dashboardOverlay = document.getElementById("dashboardOverlay");
|
||||
const dashboard = document.getElementById("rightDashboard");
|
||||
const dashboardOverlay = document.getElementById("dashboardOverlay");
|
||||
|
||||
let rightDashboardVisibility = false;
|
||||
|
||||
// Disable/Enable inputs
|
||||
var disableDashboardInputs = (status) => {
|
||||
var elems = dashboard.getElementsByTagName('input');
|
||||
var len = elems.length;
|
||||
const disableDashboardInputs = (status) => {
|
||||
const elems = dashboard.getElementsByTagName('input');
|
||||
const len = elems.length;
|
||||
|
||||
for (var i = 0; i < len; i++) {
|
||||
for (let i = 0; i < len; i++) {
|
||||
elems[i].disabled = status;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
var profileContainer = document.getElementById("profileImageContainer");
|
||||
const profileContainer = document.getElementById("profileImageContainer");
|
||||
|
||||
let profileAnimRunning = false;
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@ const phraseEvents = button => {
|
||||
event.preventDefault();
|
||||
|
||||
const phraseButtons = Array.prototype.slice.call(document.querySelectorAll('button'));
|
||||
var phraseIndex = (phraseButtons.indexOf(document.activeElement) - 1) % phraseButtons.length;
|
||||
const phraseIndex = (phraseButtons.indexOf(document.activeElement) - 1) % phraseButtons.length;
|
||||
|
||||
if (phraseIndex < 0) {
|
||||
phraseIndex = phraseButtons.length - 1;
|
||||
@ -68,7 +68,7 @@ const phraseEvents = button => {
|
||||
const autocompleteCallback = phrase => {
|
||||
|
||||
// Filter/parse the object
|
||||
var suggestion = phrase.map(i => i.phrase)
|
||||
const suggestion = phrase.map(i => i.phrase)
|
||||
.filter(s => !(s.toLowerCase() === String(searchBox.value).toLowerCase()))
|
||||
.slice(0, 4);
|
||||
|
||||
@ -80,10 +80,10 @@ const autocompleteCallback = phrase => {
|
||||
for (let phrases of suggestion ) {
|
||||
|
||||
// Create html elements
|
||||
var li = document.createElement('li');
|
||||
const li = document.createElement('li');
|
||||
li.id = 'phrase';
|
||||
|
||||
var button = document.createElement('button');
|
||||
const button = document.createElement('button');
|
||||
button.type = 'button';
|
||||
button.className = 'phraseButton';
|
||||
button.innerHTML = phrases;
|
||||
@ -115,7 +115,7 @@ searchBox.onkeyup = event => {
|
||||
}
|
||||
|
||||
// Fetch from duckduckgo
|
||||
var script = document.createElement('script');
|
||||
const script = document.createElement('script');
|
||||
script.type = "text/javascript";
|
||||
script.src = "https://duckduckgo.com/ac/?callback=autocompleteCallback&q="+String(searchBox.value);
|
||||
document.querySelector('head').appendChild(script);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
var backgroundBody = document.getElementById('bodyBackground')
|
||||
const backgroundBody = document.getElementById('bodyBackground')
|
||||
|
||||
// High quality background, we'll lazy load this
|
||||
var hqBackground = document.createElement("img");
|
||||
const hqBackground = document.createElement("img");
|
||||
|
||||
// Style body background
|
||||
const styleBodyBackground = (bgBodyStyle) => {
|
||||
@ -14,7 +14,7 @@ const styleBodyBackground = (bgBodyStyle) => {
|
||||
const lazyLoadBackground = (fileName) => {
|
||||
|
||||
// Shorten backgroundBody.style or alias it
|
||||
var bgBodyStyle = backgroundBody.style;
|
||||
const bgBodyStyle = backgroundBody.style;
|
||||
|
||||
// Set a low quality background image
|
||||
bgBodyStyle.background = "url('assets/backgrounds/" +
|
||||
@ -45,8 +45,8 @@ const lazyLoadBackground = (fileName) => {
|
||||
}
|
||||
|
||||
const initLazyLoad = () => {
|
||||
var date = new Date();
|
||||
var hour = date.getHours();
|
||||
const date = new Date();
|
||||
const hour = date.getHours();
|
||||
|
||||
if (hour >= 6 && hour < 12) {
|
||||
lazyLoadBackground("morning");
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
var centeredBox = document.getElementById("centeredBox");
|
||||
const centeredBox = document.getElementById("centeredBox");
|
||||
|
||||
let centeredBoxVisibility = true;
|
||||
|
||||
|
||||
12
js/clock.js
12
js/clock.js
@ -1,4 +1,4 @@
|
||||
var clock = document.getElementById("clock")
|
||||
const clock = document.getElementById("clock")
|
||||
|
||||
// Append 0 before time elements if less hour's than 10
|
||||
const appendZero = (k) => {
|
||||
@ -12,12 +12,12 @@ const appendZero = (k) => {
|
||||
// Update/Set clock
|
||||
const currentTime = () => {
|
||||
// Date object
|
||||
var date = new Date();
|
||||
const date = new Date();
|
||||
|
||||
// Set hour, minute
|
||||
var hour = date.getHours();
|
||||
var min = date.getMinutes();
|
||||
var midDay = "AM";
|
||||
let hour = date.getHours();
|
||||
let min = date.getMinutes();
|
||||
let midDay = "AM";
|
||||
|
||||
// Assigning
|
||||
midDay = (hour >= 12) ? "PM" : "AM";
|
||||
@ -31,7 +31,7 @@ const currentTime = () => {
|
||||
// Recursion
|
||||
// Call itself if 1 second has passed.
|
||||
// TOKIWO TOMAREEEE!
|
||||
var t = setTimeout(currentTime, 1000);
|
||||
const t = setTimeout(currentTime, 1000);
|
||||
}
|
||||
|
||||
// Start clock
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
var dock = document.getElementById('dock');
|
||||
let dock = document.getElementById('dock');
|
||||
|
||||
// Generate button from user
|
||||
const generateFromManual = (id, icon, callback) => {
|
||||
|
||||
var customButtonCallback;
|
||||
let customButtonCallback;
|
||||
|
||||
var dockButton = document.createElement('div');
|
||||
const dockButton = document.createElement('div');
|
||||
dockButton.id = 'button' + id;
|
||||
dockButton.className = 'dockButton';
|
||||
|
||||
dockButton.onmouseup = callback;
|
||||
|
||||
var buttonImage = document.createElement('div');
|
||||
const buttonImage = document.createElement('div');
|
||||
buttonImage.id = 'buttonImage' + id;
|
||||
buttonImage.className = 'dockButtonImage';
|
||||
buttonImage.style.background = "url('assets/buttons/" + icon + ".svg')";
|
||||
@ -25,24 +25,24 @@ const generateFromManual = (id, icon, callback) => {
|
||||
// Generate buttons from array
|
||||
const generateFromList = () => {
|
||||
|
||||
for (i = 0; i < (dockSites.length); i++) {
|
||||
for (let i = 0; i < (dockSites.length); i++) {
|
||||
|
||||
var site = dockSites[i].site;
|
||||
var icon = dockSites[i].icon;
|
||||
var url = dockSites[i].url;
|
||||
const site = dockSites[i].site;
|
||||
const icon = dockSites[i].icon;
|
||||
const url = dockSites[i].url;
|
||||
|
||||
// Create a href
|
||||
var aDock = document.createElement('a');
|
||||
const aDock = document.createElement('a');
|
||||
aDock.className = 'dockLink';
|
||||
aDock.href = url;
|
||||
|
||||
// Create div container
|
||||
var dockButton = document.createElement('div');
|
||||
const dockButton = document.createElement('div');
|
||||
dockButton.id = 'button' + i;
|
||||
dockButton.className = 'dockButton';
|
||||
|
||||
// Create div container for button icon
|
||||
var buttonImage = document.createElement('div');
|
||||
const buttonImage = document.createElement('div');
|
||||
buttonImage.id = 'buttonImage' + i;
|
||||
buttonImage.className = 'dockButtonImage';
|
||||
buttonImage.style.background = "url('assets/webcons/" + icon + ".svg')";
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
var greeterMessage = document.getElementById("greeterMessage");
|
||||
var dateMessage = document.getElementById("dateMessage");
|
||||
const greeterMessage = document.getElementById("greeterMessage");
|
||||
const dateMessage = document.getElementById("dateMessage");
|
||||
|
||||
var date = new Date();
|
||||
var hour = date.getHours();
|
||||
var greeterSuffix;
|
||||
const date = new Date();
|
||||
const hour = date.getHours();
|
||||
let greeterSuffix;
|
||||
|
||||
const monthsArr = [
|
||||
"January",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
const swipeEvent = (elementID, callback) => {
|
||||
|
||||
var el = document.getElementById(elementID);
|
||||
var dir;
|
||||
const el = document.getElementById(elementID);
|
||||
let dir;
|
||||
|
||||
el.addEventListener(
|
||||
'touchstart',
|
||||
@ -21,10 +21,10 @@ const swipeEvent = (elementID, callback) => {
|
||||
return;
|
||||
}
|
||||
|
||||
var xUp = event.touches[0].clientX;
|
||||
var yUp = event.touches[0].clientY;
|
||||
var xDiff = xDown - xUp;
|
||||
var yDiff = yDown - yUp;
|
||||
const xUp = event.touches[0].clientX;
|
||||
const yUp = event.touches[0].clientY;
|
||||
const xDiff = xDown - xUp;
|
||||
const yDiff = yDown - yUp;
|
||||
|
||||
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
|
||||
if ( xDiff > 0 ) {
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
var localStorage = window.localStorage;
|
||||
|
||||
var searchBox = document.getElementById("searchBox");
|
||||
var selectEngine = document.getElementById("searchEngineSelect");
|
||||
var searchEngineAsDefault = document.getElementById("searchEngineAsDefault");
|
||||
const selectEngine = document.getElementById("searchEngineSelect");
|
||||
const searchEngineAsDefault = document.getElementById("searchEngineAsDefault");
|
||||
|
||||
// Get default search engine
|
||||
var defaultEngine = localStorage.getItem('searchEngine') || 'google';
|
||||
let defaultEngine = localStorage.getItem('searchEngine') || 'google';
|
||||
|
||||
let searchQueryPrefix;
|
||||
|
||||
var placeholderPrefix = " Search with ";
|
||||
const placeholderPrefix = " Search with ";
|
||||
|
||||
// Update query string and placeholder
|
||||
const selectQueryString = () => {
|
||||
@ -51,13 +51,13 @@ const selectTheEngine = () => {
|
||||
// Update settings if the value changes
|
||||
selectEngine.onchange = () => {
|
||||
// Get Value
|
||||
var selectedEngine = selectEngine.options[selectEngine.selectedIndex].value;
|
||||
const selectedEngine = selectEngine.options[selectEngine.selectedIndex].value;
|
||||
defaultEngine = selectedEngine;
|
||||
selectTheEngine()
|
||||
}
|
||||
|
||||
searchEngineAsDefault.onclick = () => {
|
||||
var selectCurrentIndex = selectEngine.options[selectEngine.selectedIndex]
|
||||
const selectCurrentIndex = selectEngine.options[selectEngine.selectedIndex]
|
||||
alert('Success! ' + selectCurrentIndex.text +
|
||||
' is now your default search engine!');
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var searchBox = document.getElementById('searchBox');
|
||||
var searchBoxContainer = document.getElementById('searchBoxContainer');
|
||||
var centeredBoxOverlay = document.getElementById('centeredBoxOverlay');
|
||||
const searchBoxContainer = document.getElementById('searchBoxContainer');
|
||||
const centeredBoxOverlay = document.getElementById('centeredBoxOverlay');
|
||||
|
||||
let searchBoxVisility = false;
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
// Web menu
|
||||
// A list of websites that will be generated and put on the web menu
|
||||
let webSites = [
|
||||
const webSites = [
|
||||
{
|
||||
site: 'Reddit',
|
||||
icon: 'reddit',
|
||||
@ -265,7 +265,7 @@ let webSites = [
|
||||
|
||||
// Dock
|
||||
// A list of websites that will be generated and put on the dock
|
||||
let dockSites = [
|
||||
const dockSites = [
|
||||
{
|
||||
site: 'Reddit',
|
||||
icon: 'reddit',
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
var localStorage = window.localStorage;
|
||||
|
||||
var backgroundTextBox = document.getElementById('backgroundSet');
|
||||
var backgroundOpacityTextBox = document.getElementById('backgroundOpacitySet');
|
||||
var foregroundTextBox = document.getElementById('foregroundSet');
|
||||
var foregroundOpacityTextBox = document.getElementById('foregroundOpacitySet');
|
||||
const backgroundTextBox = document.getElementById('backgroundSet');
|
||||
const backgroundOpacityTextBox = document.getElementById('backgroundOpacitySet');
|
||||
const foregroundTextBox = document.getElementById('foregroundSet');
|
||||
const foregroundOpacityTextBox = document.getElementById('foregroundOpacitySet');
|
||||
|
||||
var blurTextBox = document.getElementById('blurSet');
|
||||
const blurTextBox = document.getElementById('blurSet');
|
||||
|
||||
var applyTheme = document.getElementById('themeEngineAsDefault');
|
||||
var resetTheme = document.getElementById('themeEngineReset');
|
||||
const applyTheme = document.getElementById('themeEngineAsDefault');
|
||||
const resetTheme = document.getElementById('themeEngineReset');
|
||||
|
||||
// Save CSS color variables default in localStorage
|
||||
// Save CSS color constiables default in localStorage
|
||||
// Will only save if you visit the webpage for the very first time
|
||||
const saveDefaultCSS = () => {
|
||||
|
||||
var origBaseBG = localStorage.getItem('origBaseBG');
|
||||
var origBaseColor = localStorage.getItem('origBaseColor');
|
||||
var origBlurStrength = localStorage.getItem('origBlurStrength');
|
||||
const origBaseBG = localStorage.getItem('origBaseBG');
|
||||
const origBaseColor = localStorage.getItem('origBaseColor');
|
||||
const origBlurStrength = localStorage.getItem('origBlurStrength');
|
||||
|
||||
if ((origBaseBG === null) || (origBaseColor === null) || (origBlurStrength) === null) {
|
||||
|
||||
@ -39,7 +39,7 @@ const saveDefaultCSS = () => {
|
||||
const checkColorValidity = (colorStr) => {
|
||||
|
||||
// Check if RGBA - (#RRGGBBAA)
|
||||
var colorRGBA = /^#[0-9A-F]{8}$/i.test(colorStr);
|
||||
const colorRGBA = /^#[0-9A-F]{8}$/i.test(colorStr);
|
||||
|
||||
// If not RGBA
|
||||
if (!colorRGBA) {
|
||||
@ -59,8 +59,8 @@ const checkColorValidity = (colorStr) => {
|
||||
// If three-charactered HEX Color(#RGB) with AA - (#RGBAA)
|
||||
} else if (colorStr.length == 6) {
|
||||
|
||||
var bg = colorStr.slice(0, -2);
|
||||
var op = colorStr.slice(-2);
|
||||
const bg = colorStr.slice(0, -2);
|
||||
const op = colorStr.slice(-2);
|
||||
|
||||
return bg.replace(/^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/, "#$1$1$2$2$3$3") + op;
|
||||
|
||||
@ -95,9 +95,9 @@ const updateTextBoxValues = (bgColor, bgOpacity, fgColor, fgOpacity, blurPower)
|
||||
const processTheme = () => {
|
||||
|
||||
// Retrieve custom colors
|
||||
var baseBG = localStorage.getItem('baseBG');
|
||||
var baseColor = localStorage.getItem('baseColor');
|
||||
var blurStrength = localStorage.getItem('blurStrength');
|
||||
let baseBG = localStorage.getItem('baseBG');
|
||||
let baseColor = localStorage.getItem('baseColor');
|
||||
let blurStrength = localStorage.getItem('blurStrength');
|
||||
|
||||
// If custom color doesn't exist, use the value in CSS
|
||||
if (baseBG === null) {
|
||||
@ -123,16 +123,16 @@ const processTheme = () => {
|
||||
|
||||
// Slice to separate RGB and A of background color
|
||||
// Slice alpha out
|
||||
var backgroundColor = baseBG.slice(0, -2);
|
||||
const backgroundColor = baseBG.slice(0, -2);
|
||||
// Get alpha
|
||||
var backgroundOpacity = baseBG.slice(-2);
|
||||
const backgroundOpacity = baseBG.slice(-2);
|
||||
|
||||
|
||||
// Slice to separate RGB and A of foreground color
|
||||
// Slice alpha out
|
||||
var foregroundColor = baseColor.slice(0, -2);
|
||||
const foregroundColor = baseColor.slice(0, -2);
|
||||
// Get alpha
|
||||
var foregroundOpacity = baseColor.slice(-2);
|
||||
const foregroundOpacity = baseColor.slice(-2);
|
||||
|
||||
updateTextBoxValues(
|
||||
backgroundColor,
|
||||
@ -144,20 +144,20 @@ const processTheme = () => {
|
||||
}
|
||||
|
||||
// Update colors
|
||||
const updateCSSVariables = () => {
|
||||
const updateCSSconstiables = () => {
|
||||
|
||||
// Get value from input fields
|
||||
var background = (backgroundTextBox.value || backgroundTextBox.placeholder) +
|
||||
const background = (backgroundTextBox.value || backgroundTextBox.placeholder) +
|
||||
(backgroundOpacityTextBox.value || backgroundOpacityTextBox.placeholder);
|
||||
|
||||
var foreground = (foregroundTextBox.value || foregroundTextBox.placeholder) +
|
||||
const foreground = (foregroundTextBox.value || foregroundTextBox.placeholder) +
|
||||
(foregroundOpacityTextBox.value || foregroundOpacityTextBox.placeholder);
|
||||
|
||||
var blurPower = (blurTextBox.value || blurTextBox.placeholder);
|
||||
const blurPower = (blurTextBox.value || blurTextBox.placeholder);
|
||||
|
||||
// Check color validity
|
||||
var bgColor = checkColorValidity(background);
|
||||
var fgColor = checkColorValidity(foreground);
|
||||
const bgColor = checkColorValidity(background);
|
||||
const fgColor = checkColorValidity(foreground);
|
||||
|
||||
// Change CSS colors
|
||||
document.documentElement.style.setProperty('--base-bg', bgColor);
|
||||
@ -178,12 +178,12 @@ const updateOnStartUp = () => {
|
||||
processTheme();
|
||||
|
||||
// Update settings
|
||||
updateCSSVariables();
|
||||
updateCSSconstiables();
|
||||
}
|
||||
|
||||
// Apply button event handler
|
||||
applyTheme.onclick = () => {
|
||||
updateCSSVariables();
|
||||
updateCSSconstiables();
|
||||
alert('Success!');
|
||||
}
|
||||
|
||||
@ -195,7 +195,7 @@ resetTheme.onclick = () => {
|
||||
|
||||
saveDefaultCSS();
|
||||
processTheme();
|
||||
updateCSSVariables();
|
||||
updateCSSconstiables();
|
||||
|
||||
alert('Success!');
|
||||
}
|
||||
|
||||
@ -1,20 +1,18 @@
|
||||
var localStorage = window.localStorage;
|
||||
|
||||
// Set variable
|
||||
// Set constiable
|
||||
let appID, cityID, units;
|
||||
|
||||
// Input elements
|
||||
|
||||
// Textboxes
|
||||
var apiBox = document.getElementById("apiBox");
|
||||
var cityBox = document.getElementById("cityBox");
|
||||
const apiBox = document.getElementById("apiBox");
|
||||
const cityBox = document.getElementById("cityBox");
|
||||
|
||||
// Select menu
|
||||
var weatherSelectUnits = document.getElementById("weatherSelectUnits");
|
||||
const weatherSelectUnits = document.getElementById("weatherSelectUnits");
|
||||
|
||||
// Div buttons
|
||||
var weatherSettingsReset = document.getElementById("weatherSettingsReset");
|
||||
var weatherSettingsApply = document.getElementById("weatherSettingsApply");
|
||||
const weatherSettingsReset = document.getElementById("weatherSettingsReset");
|
||||
const weatherSettingsApply = document.getElementById("weatherSettingsApply");
|
||||
|
||||
// Apply credentials
|
||||
const applyWeatherSettings = (key, city, units) => {
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
var webMenu = document.getElementById("webMenu");
|
||||
var webMenuList = document.getElementById("webMenuList");
|
||||
var webMenuListContainer = document.getElementById("webMenuListContainer");
|
||||
var webMenuSearchBox = document.getElementById("webMenuSearchBox");
|
||||
const webMenu = document.getElementById("webMenu");
|
||||
const webMenuList = document.getElementById("webMenuList");
|
||||
const webMenuListContainer = document.getElementById("webMenuListContainer");
|
||||
const webMenuSearchBox = document.getElementById("webMenuSearchBox");
|
||||
|
||||
let webMenuVisibility = false;
|
||||
var webMenuVisibility = false;
|
||||
|
||||
let webItemFocus;
|
||||
let webListIndex = 0;
|
||||
|
||||
// Disable/Enable inputs
|
||||
var disableWebMenuInputs = (status) => {
|
||||
var elems = webMenu.getElementsByTagName('input');
|
||||
var len = elems.length;
|
||||
const disableWebMenuInputs = (status) => {
|
||||
const elems = webMenu.getElementsByTagName('input');
|
||||
const len = elems.length;
|
||||
|
||||
for (var i = 0; i < len; i++) {
|
||||
for (let i = 0; i < len; i++) {
|
||||
elems[i].disabled = status;
|
||||
}
|
||||
}
|
||||
@ -39,17 +39,17 @@ const populateWebMenu = () => {
|
||||
// Generate a list
|
||||
for (let webData of webSites) {
|
||||
|
||||
var site = webData.site;
|
||||
var icon = webData.icon;
|
||||
var url = webData.url;
|
||||
const site = webData.site;
|
||||
const icon = webData.icon;
|
||||
const url = webData.url;
|
||||
|
||||
var li = document.createElement('li');
|
||||
const li = document.createElement('li');
|
||||
|
||||
// Add mouseup event
|
||||
createCallback(li, url);
|
||||
|
||||
// Create a href
|
||||
var aWebLink = document.createElement('a');
|
||||
const aWebLink = document.createElement('a');
|
||||
aWebLink.className = 'webMenuLink';
|
||||
aWebLink.href = url;
|
||||
aWebLink.tabIndex = '-1';
|
||||
@ -61,24 +61,24 @@ const populateWebMenu = () => {
|
||||
webItemDiv.id = "id" + site;
|
||||
|
||||
// Create a second div, webItemContainer
|
||||
var webItemContainer = document.createElement('div');
|
||||
const webItemContainer = document.createElement('div');
|
||||
webItemContainer.className = 'webItemContainer';
|
||||
|
||||
// Create the innermost div, contains icon and label
|
||||
var webItemBody = document.createElement('div');
|
||||
const webItemBody = document.createElement('div');
|
||||
webItemBody.className = 'webItemBody';
|
||||
|
||||
// Create div for webItemIcon
|
||||
var webItemIconContainer = document.createElement('div');
|
||||
const webItemIconContainer = document.createElement('div');
|
||||
webItemIconContainer.className = 'webItemIconContainer';
|
||||
|
||||
var webItemIcon = document.createElement('div');
|
||||
const webItemIcon = document.createElement('div');
|
||||
webItemIcon.className = 'webItemIcon';
|
||||
webItemIcon.style.background = "url('assets/webcons/" + icon + ".svg')";
|
||||
webItemIcon.style.backgroundSize = 'cover';
|
||||
|
||||
// Create webItemName
|
||||
var webItemName = document.createElement('div');
|
||||
const webItemName = document.createElement('div');
|
||||
webItemName.className = 'webItemName';
|
||||
webItemName.innerHTML = site;
|
||||
|
||||
@ -102,12 +102,12 @@ const populateWebMenu = () => {
|
||||
|
||||
// Fuzzy search
|
||||
String.prototype.fuzzy = function(term, ratio) {
|
||||
var string = this.toLowerCase();
|
||||
var compare = term.toLowerCase();
|
||||
var matches = 0;
|
||||
const string = this.toLowerCase();
|
||||
const compare = term.toLowerCase();
|
||||
const matches = 0;
|
||||
|
||||
if (string.indexOf(compare) > -1) return true; // covers basic partial matches
|
||||
for (var i = 0; i < compare.length; i++) {
|
||||
for (let i = 0; i < compare.length; i++) {
|
||||
string.indexOf(compare[i]) > -1 ? matches += 1 : matches -=1;
|
||||
}
|
||||
return (matches/this.length >= ratio || term == "");
|
||||
@ -116,7 +116,7 @@ String.prototype.fuzzy = function(term, ratio) {
|
||||
// Search through the list
|
||||
const filterWebList = () => {
|
||||
|
||||
var input, filter, ul, li, a, i, txtValue;
|
||||
let input, filter, ul, li, a, i, txtValue;
|
||||
|
||||
input = webMenuSearchBox;
|
||||
filter = input.value.toUpperCase();
|
||||
@ -124,7 +124,7 @@ const filterWebList = () => {
|
||||
li = ul.getElementsByTagName('li');
|
||||
|
||||
// Loop through all list items, and focus if matches the search query
|
||||
for (i = 0; i < li.length; i++) {
|
||||
for (let i = 0; i < li.length; i++) {
|
||||
|
||||
a = li[i].getElementsByClassName("webItemName")[0];
|
||||
txtValue = a.innerHTML || a.textContent || a.innerText;
|
||||
@ -134,8 +134,8 @@ const filterWebList = () => {
|
||||
if (txtValue.toUpperCase().fuzzy(filter, 1) === true) {
|
||||
|
||||
// Unselect/Unhightlight old active
|
||||
var oldWebItemFocus = webItemFocus;
|
||||
var oldWebItemFocusChild = oldWebItemFocus.querySelector('.webItem');
|
||||
const oldWebItemFocus = webItemFocus;
|
||||
const oldWebItemFocusChild = oldWebItemFocus.querySelector('.webItem');
|
||||
oldWebItemFocusChild.classList.remove('webItemFocus');
|
||||
|
||||
// Update webItemFocus
|
||||
@ -145,7 +145,7 @@ const filterWebList = () => {
|
||||
webListIndex = i;
|
||||
|
||||
// Get child
|
||||
var webItemFocusChild = webItemFocus.querySelector('.webItem');
|
||||
const webItemFocusChild = webItemFocus.querySelector('.webItem');
|
||||
// Add webItemFocus class to child
|
||||
webItemFocusChild.classList.add('webItemFocus');
|
||||
|
||||
@ -158,8 +158,8 @@ const filterWebList = () => {
|
||||
|
||||
// Reset focus on web menu close
|
||||
const focusReset = () => {
|
||||
var oldWebItemFocus = webItemFocus;
|
||||
var oldWebItemFocusChild = oldWebItemFocus.querySelector('.webItem');
|
||||
const oldWebItemFocus = webItemFocus;
|
||||
const oldWebItemFocusChild = oldWebItemFocus.querySelector('.webItem');
|
||||
|
||||
oldWebItemFocusChild.classList.remove('webItemFocus');
|
||||
webListIndex = 0;
|
||||
@ -167,14 +167,14 @@ const focusReset = () => {
|
||||
|
||||
// Get first item of ul
|
||||
const getFirstItem = () => {
|
||||
var ul = webMenuList;
|
||||
var li = ul.getElementsByTagName('li');
|
||||
const ul = webMenuList;
|
||||
const li = ul.getElementsByTagName('li');
|
||||
|
||||
// Focus on first item
|
||||
webItemFocus = li[0];
|
||||
|
||||
// Get child
|
||||
var webItemFocusChildren = webItemFocus.querySelector('.webItem');
|
||||
const webItemFocusChildren = webItemFocus.querySelector('.webItem');
|
||||
|
||||
// Add webItemFocus class
|
||||
webItemFocusChildren.classList.add('webItemFocus');
|
||||
@ -261,13 +261,13 @@ const toggleWebMenu = () => {
|
||||
// Remove class to focused item
|
||||
const removeClass = (el, className) => {
|
||||
// Remove webItemFocus class
|
||||
var oldWebItemFocus = el.querySelector('.webItem');
|
||||
const oldWebItemFocus = el.querySelector('.webItem');
|
||||
oldWebItemFocus.classList.remove('webItemFocus');
|
||||
};
|
||||
|
||||
// Add class to focused item
|
||||
const addClass = (el, className) => {
|
||||
var webItemFocusChild = el.querySelector('.webItem');
|
||||
const webItemFocusChild = el.querySelector('.webItem');
|
||||
|
||||
// Add webItemFocus class to child
|
||||
webItemFocusChild.classList.add('webItemFocus');
|
||||
@ -277,7 +277,7 @@ const addClass = (el, className) => {
|
||||
};
|
||||
|
||||
const navigateWithArrows = (key, len) => {
|
||||
// assign variables to key codes
|
||||
// assign constiables to key codes
|
||||
const [right, left, down, up] = [39, 37, 40, 38];
|
||||
|
||||
const getIndexByWindowWidth = () => {
|
||||
@ -356,7 +356,7 @@ const navigateWithArrows = (key, len) => {
|
||||
webMenu.addEventListener(
|
||||
'keydown',
|
||||
(event) => {
|
||||
var len = webMenuList.getElementsByTagName('li').length - 1;
|
||||
const len = webMenuList.getElementsByTagName('li').length - 1;
|
||||
navigateWithArrows(event.which, len);
|
||||
},
|
||||
false
|
||||
|
||||
Loading…
Reference in New Issue
Block a user