Refactor options.js for improved settings handling and localization

TenSoja · Oct 23, 2024 · f6c1cec · f6c1cec
1 parent fb87f07
commit f6c1cec
Showing 1 changed file with 27 additions and 70 deletions.
diff --git a/options/options.js b/options/options.js
@@ -1,92 +1,51 @@
 /*
-This one is based on the example seen in https://github.com/mdn/webextensions-examples/tree/master/forget-it 
 Store the currently selected settings using browser.storage.local.
 */
 function storeSettings() {
-
+  // Get the selected data types
   function getTypes() {
-    var dataTypes = [];
-    const checkboxes = document.querySelectorAll(".data-types [type=checkbox]");
-    for (var item of checkboxes) {
-      if (item.checked) {
-        dataTypes.push(item.getAttribute("data-type"));
-      }
-    }
-    return dataTypes;
-  }
-
-  const dataTypes = getTypes();
-  browser.storage.local.set({
-    dataTypes
-  });
-
-  function getReload() {
-    const reload = document.querySelector("#reload");
-    return reload.checked;
+      return Array.from(document.querySelectorAll(".data-types [type=checkbox]"))
+          .filter(item => item.checked)
+          .map(item => item.getAttribute("data-type"));
   }
 
-  function getNotification() {
-    const notification = document.querySelector("#notification");
-    return notification.checked;
-  }
+  // Store all settings at once
+  const settings = {
+      dataTypes: getTypes(),
+      reload: document.querySelector("#reload").checked,
+      notification: document.querySelector("#notification").checked
+  };
 
-  const reload = getReload();
-  const notification = getNotification();
-  browser.storage.local.set({
-    reload,
-    notification
-  });
+  browser.storage.local.set(settings);
 }
+
 /*
-Internationalization of options page works with
-https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/i18n
+Internationalization of options page
 */
-
 function localizeOptions() {
-
-  function replace_i18n(obj, tag) {
-    let message = tag.replace(/__MSG_(\w+)__/g, function(match, v1) {
-        return v1 ? browser.i18n.getMessage(v1) : '';
-    });
-
-    if(message != tag) obj.textContent = message;
-  }
-
-    let data = document.querySelectorAll('[data-i18n]');
-
-    for (let index in data) if (data.hasOwnProperty(index)) {
-      let obj = data[index];
-      let tag = obj.getAttribute('data-i18n').toString();
-
-      replace_i18n(obj, tag);
-    }
-
+  document.querySelectorAll('[data-i18n]').forEach(obj => {
+      const tag = obj.getAttribute('data-i18n').toString();
+      const message = tag.replace(/__MSG_(\w+)__/g, (_, v1) => v1 ? browser.i18n.getMessage(v1) : '');
+      if (message !== tag) obj.textContent = message;
+  });
 }
 
 /*
 Update the options UI with the settings values retrieved from storage,
 or the default settings if the stored settings are empty.
 */
 function updateUI(restoredSettings) {
-
   localizeOptions();
 
-  if (restoredSettings.reload === undefined || restoredSettings.reload === true) {
-    document.querySelector("#reload").checked = true;
-  }
-
-  if (restoredSettings.notification === undefined || restoredSettings.notification === true) {
-    document.querySelector("#notification").checked = true;
-  }
+  // Default values: true for reload and notification
+  document.querySelector("#reload").checked = restoredSettings.reload !== false;
+  document.querySelector("#notification").checked = restoredSettings.notification !== false;
 
+  // Update checkboxes for data types
   const checkboxes = document.querySelectorAll(".data-types [type=checkbox]");
-  for (let item of checkboxes) {
-    if (restoredSettings.dataTypes.indexOf(item.getAttribute("data-type")) != -1) {
-      item.checked = true;
-    } else {
-      item.checked = false;
-    }
-  }
+  checkboxes.forEach(item => {
+      item.checked = restoredSettings.dataTypes?.includes(item.getAttribute("data-type")) || false;
+  });
 }
 
 function onError(e) {
@@ -96,11 +55,9 @@ function onError(e) {
 /*
 On opening the options page, fetch stored settings and update the UI with them.
 */
-const gettingStoredSettings = browser.storage.local.get();
-gettingStoredSettings.then(updateUI, onError);
+browser.storage.local.get().then(updateUI, onError);
 
 /*
 On clicking the save button, save the currently selected settings.
 */
-const saveButton = document.querySelector("#save-button");
-saveButton.addEventListener("click", storeSettings);
+document.querySelector("#save-button").addEventListener("click", storeSettings);