Options semi sync

taboca · Apr 15, 2018 · bd74295 · bd74295
1 parent d7eda33
commit bd74295
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 9 deletions.
diff --git a/src/background.js b/src/background.js
@@ -3,6 +3,33 @@ let indexedStateMap   = new Array();
 let currentActiveTab  = null;
 let pendingApplyColor = null;
 
+/* Config and storage */
+
+var configData = {
+  enableBorder      : false,
+  toolbarHighlight  : false
+}
+
+function checkStoredSettings(item) {
+  if (!item.configData) {
+    console.log("Config: first time initializing in storage...")
+    browser.storage.local.set({configData});
+  } else {
+    console.log("Config: exists in storage...")
+    configData = item.configData;
+  }
+
+  console.log("Config settings: " + JSON.stringify(configData));
+
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+var gettingItem = browser.storage.local.get();
+gettingItem.then(checkStoredSettings, onError);
+
 /* This is more aggressive override..*/
 
 function updateActiveTab_pageloaded(tabId, changeInfo) {
@@ -49,7 +76,7 @@ function updateActiveTab(tabId, changeInfo) {
             var themeProposal = {
               colors: colorObject
             }
-            browser.theme.update(themeProposal);
+            util_custom_update(themeProposal);
           } else {
             currentActiveTab = tabURLkey;
             //setTimeout(delayedStore, 2000);
@@ -104,7 +131,7 @@ function onCaptured(imageUri) {
       indexedColorMap[currentActiveTab] = themeProposal.colors;
     }
 
-    browser.theme.update(themeProposal);
+    util_custom_update(themeProposal);
   }
   image.src=imageUri;
 }
@@ -138,19 +165,45 @@ function notify(message) {
   //console.log('Notify from page:' + JSON.stringify(message))
   if('kind' in message) {
 
+    if(message.kind=='refresh') {
+      console.log('Config:refresh...');
+
+      function refreshAsync(item) {
+        console.log("Reloading settings");
+        configData = item.configData;
+        updateActiveTab();
+      }
+
+      var gettingItem = browser.storage.local.get();
+      gettingItem.then(refreshAsync, onError);
+
+
+    }
+
     if(message.kind=='theme-color') {
         console.log('Loaded from script: ' + message.kind);
         let themeProposal = util_themePackage(util_hexToRgb(message.value));
         console.log('Setting index ' + message.value + ' from next page..');
         pendingApplyColor = themeProposal.colors;
 
-        browser.theme.update(themeProposal);
+        util_custom_update(themeProposal);
     }
   }
 }
 
 browser.runtime.onMessage.addListener(notify);
 
+function util_custom_update(themeProposal) {
+
+  if(configData.enableBorder) {
+    console.log("Enable border!!!")
+    themeProposal.colors['toolbar_bottom_separator'] = null;
+  } else {
+  }
+  browser.theme.update(themeProposal);
+
+}
+
 // https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
 function util_hexToRgb(hex) {
     var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@@ -174,8 +227,8 @@ function util_themePackage(color) {
   let colorObject = {
     accentcolor : 'rgb('+color.r+','+color.g+','+color.b+')',
     textcolor   : 'rgb('+textC+','+textC+','+textC+')',
-    toolbar_bottom_separator: 'rgb('+color.r+','+color.g+','+color.b+')',
-    toolbar : 'rgb('+color.r+','+color.g+','+color.b+')'
+    toolbar : 'rgb('+color.r+','+color.g+','+color.b+')',
+    toolbar_bottom_separator : 'rgb('+color.r+','+color.g+','+color.b+')'
   };
 
   let themeProposal = {

diff --git a/src/manifest.json b/src/manifest.json
@@ -5,6 +5,7 @@
   "name": "Chameleon Dynamic Theme",
   "permissions": [
     "tabs",
+    "storage",
     "<all_urls>",
     "theme"
   ],

diff --git a/src/options.html b/src/options.html
@@ -6,11 +6,9 @@
   </head>
 
 <body>
-  <p>storage.managed colour: <b id="managed-colour">no value found</b></p>
   <form>
-      <label>Favourite colour</label>
-      <input type="text" id="colour" >
-      <button type="submit">Save</button>
+      <label>Immersion removes highlight from the toolbar</label>
+      <input type="checkbox" id="config_immersion" value="true" >
   </form>
   <script src="options.js"></script>
 </body>

diff --git a/src/options.js b/src/options.js
@@ -0,0 +1,53 @@
+
+var configData = {
+  enableBorder      : false,
+  toolbarHighlight  : false
+}
+
+function checkStoredSettings(item) {
+
+  console.log("Storage:" + JSON.stringify(item));
+
+  if (!item.configData) {
+    console.log("Setting config first time...")
+    browser.storage.local.set({configData});
+  } else {
+    console.log("Config exists in storage...")
+    configData = item.configData;
+  }
+
+  if(configData.enableBorder) {
+    console.log('Trying to mark checked in the DOM ')
+    document.querySelector('#config_immersion').setAttribute('checked',configData.enableBorder);
+  } else {
+    console.log('Trying to uncheck ')
+    document.querySelector('#config_immersion').removeAttribute('checked');
+  }
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+var gettingItem = browser.storage.local.get();
+gettingItem.then(checkStoredSettings, onError);
+
+function updateSettings(e) {
+  let immersionSetting = e.target.checked;
+  console.log(immersionSetting);
+  configData.enableBorder = immersionSetting;
+  browser.storage.local.set({configData});
+
+  var metaData = {
+    kind  : 'refresh'
+  }
+
+  browser.runtime.sendMessage(metaData);
+
+}
+
+document.addEventListener('DOMContentLoaded',function() {
+    document.querySelector('#config_immersion').onchange=updateSettings;
+
+
+},false);