diff --git a/public/static/settings.js b/public/static/settings.js index 6b18df4..42b8a4b 100644 --- a/public/static/settings.js +++ b/public/static/settings.js @@ -1,5 +1,7 @@ -// This function handles the toggling of selections of all upstream search engines -// options in the settings page under the tab engines. +/** + * This function handles the toggling of selections of all upstream search engines + * options in the settings page under the tab engines. + */ function toggleAllSelection() { document .querySelectorAll('.engine') @@ -10,25 +12,36 @@ function toggleAllSelection() { ) } -// This function adds the functionality to sidebar buttons to only show settings -// related to that tab. +/** + * This function adds the functionality to sidebar buttons to only show settings + * related to that tab. + * @param {HTMLElement} current_tab - The current tab that was clicked. + */ function setActiveTab(current_tab) { + // Remove the active class from all tabs and buttons document .querySelectorAll('.tab') .forEach((tab) => tab.classList.remove('active')) document .querySelectorAll('.btn') .forEach((tab) => tab.classList.remove('active')) + + // Add the active class to the current tab and its corresponding settings current_tab.classList.add('active') document .querySelector(`.${current_tab.innerText.toLowerCase().replace(' ', '_')}`) .classList.add('active') } -// This function adds the functionality to save all the user selected preferences -// to be saved in a cookie on the users machine. +/** + * This function adds the functionality to save all the user selected preferences + * to be saved in a cookie on the users machine. + */ function setClientSettings() { + // Create an object to store the user's preferences let cookie_dictionary = new Object() + + // Loop through all select tags and add their values to the cookie dictionary document.querySelectorAll('select').forEach((select_tag) => { if (select_tag.name === 'themes') { cookie_dictionary['theme'] = select_tag.value @@ -36,6 +49,8 @@ function setClientSettings() { cookie_dictionary['colorscheme'] = select_tag.value } }) + + // Loop through all engine checkboxes and add their values to the cookie dictionary let engines = [] document.querySelectorAll('.engine').forEach((engine_checkbox) => { if (engine_checkbox.checked === true) { @@ -43,33 +58,44 @@ function setClientSettings() { } }) cookie_dictionary['engines'] = engines + + // Set the expiration date for the cookie to 1 year from the current date let expiration_date = new Date() expiration_date.setFullYear(expiration_date.getFullYear() + 1) + + // Save the cookie to the user's machine document.cookie = `appCookie=${JSON.stringify( cookie_dictionary )}; expires=${expiration_date.toUTCString()}` + // Display a success message to the user document.querySelector('.message').innerText = '✅ The settings have been saved sucessfully!!' + // Clear the success message after 10 seconds setTimeout(() => { document.querySelector('.message').innerText = '' }, 10000) } -// This functions gets the saved cookies if it is present on the user's machine If it -// is available then it is parsed and converted to an object which is then used to -// retrieve the preferences that the user had selected previously and is then loaded in the -// website otherwise the function does nothing and the default server side settings are loaded. +/** + * This functions gets the saved cookies if it is present on the user's machine If it + * is available then it is parsed and converted to an object which is then used to + * retrieve the preferences that the user had selected previously and is then loaded in the + * website otherwise the function does nothing and the default server side settings are loaded. + */ function getClientSettings() { + // Get the appCookie from the user's machine let cookie = decodeURIComponent(document.cookie) + // If the cookie is not empty, parse it and use it to set the user's preferences if (cookie !== '') { let cookie_value = decodeURIComponent(document.cookie) .split(';') .map((item) => item.split('=')) .reduce((acc, [_, v]) => (acc = JSON.parse(v)) && acc, {}) + // Loop through all link tags and update their href values to match the user's preferences let links = Array.from(document.querySelectorAll('link')).forEach( (item) => { if (item.href.includes('static/themes')) {