options.js

   1
   2 document.addEventListener('DOMContentLoaded', function () {
   3         restoreOptions();
   4         document.querySelector('#saveBtn').addEventListener('click', saveOptions);
   5         document.querySelector('#restoreDefaultBtn').addEventListener('click', restoreToDefault);
   6
   7         ['light', 'system', 'dark'].forEach((theme) => {
   8                 document.getElementById(`theme-${theme}`).addEventListener('click', setThemeClick);
   9         });
  10
  11         //document.querySelector('body').addEventListener('click', restoreOptions);
  12 });
  13
  14 function getSelectValue (selectId) {
  15         var select = document.getElementById(selectId);
  16         var value = select.children[select.selectedIndex].value;
  17
  18         return value;
  19 }
  20
  21 function setSelectValue (selectId, value) {
  22         var select = document.getElementById(selectId);
  23         for (var i = 0; i < select.children.length; i++) {
  24                 var child = select.children[i];
  25                 if (child.value == value) {
  26                         child.selected = "true";
  27                         break;
  28                 }
  29         }
  30 }
  31
  32 function setThemeClick() {
  33         const theme = this.textContent.toLowerCase();
  34         setThemeValue(theme);
  35         switchTheme(theme);
  36 }
  37
  38 function setThemeValue(value) {
  39         const element = document.getElementById('prefsTheme');
  40         switch (value) {
  41                 case 'light':
  42                 case 'dark':
  43                         break;
  44                 default:
  45                         value = 'system';
  46                         break;
  47         }
  48         element.value = value;
  49
  50         ['light', 'system', 'dark'].forEach((theme) => {
  51                 document.getElementById(`theme-${theme}`).className =
  52                         value == theme ? 'selected' : '';
  53         });
  54 }
  55
  56 function saveOptions () {
  57         chrome.storage.local.set({
  58                 prefs_backup_timer: getSelectValue("prefsSelectBackupPeriod"),
  59                 prefs_max_backup_items: getSelectValue("prefsSelectMaxBackups"),
  60                 prefs_theme: document.getElementById('prefsTheme').value,
  61         });
  62
  63         // Re-initialize the backup alarm
  64         chrome.runtime.getBackgroundPage((bg) => bg.initAlarm());
  65
  66         // Update status to let user know options were saved.
  67         var status = document.getElementById("statusDiv");
  68         status.innerHTML = "Options Saved";
  69         setTimeout(function() {
  70                 status.innerHTML = "";
  71         }, 3000);
  72 }
  73
  74 function restoreToDefault() {
  75         // those values are also set in background.js..
  76         setSelectValue ("prefsSelectBackupPeriod", "5");
  77         setSelectValue ("prefsSelectMaxBackups", "30");
  78         setThemeValue("system");
  79
  80         saveOptions();
  81 }
  82
  83 function restoreOptions() {
  84         chrome.storage.local.get(function(items) {
  85                 setSelectValue("prefsSelectBackupPeriod", items.prefs_backup_timer);
  86                 setSelectValue("prefsSelectMaxBackups", items.prefs_max_backup_items);
  87                 setThemeValue(items.prefs_theme);
  88         });
  89 }