make search page checkbox options persist

ext/bg/js/api.js

@@ -21,6 +21,55 @@ function apiOptionsGet(optionsContext) {
     return utilBackend().getOptions(optionsContext);
 }
 
+async function apiOptionsSet(changedOptions, optionsContext, source) {
+    const backend = utilBackend();
+    const {depth} = optionsContext;
+    let options = await apiOptionsGetFull();
+
+    function getValuePaths(obj) {
+        let valuePaths = [];
+        let nodes = [{
+            obj: changedOptions,
+            path: []
+        }];
+        while (nodes.length > 0) {
+            let node = nodes.pop();
+            Object.keys(node.obj).forEach((key) => {
+                let path = node.path.concat(key);
+                let value = node.obj[key];
+                if (typeof value === 'object') {
+                    nodes.unshift({
+                        obj: value,
+                        path: path
+                    });
+                } else {
+                    valuePaths.push([value, path]);
+                }
+            });
+        }
+        return valuePaths;
+    }
+
+    function modifyOption(path, value, options) {
+        let pivot = options;
+        for (let pathKey of path.slice(0, -1)) {
+            if (!(pathKey in pivot)) {
+                return false;
+            }
+            pivot = pivot[pathKey];
+        }
+        pivot[path[path.length - 1]] = value;
+        return true;
+    }
+
+    for (let [value, path] of getValuePaths(changedOptions)) {
+        modifyOption(path, value, options.profiles[depth].options);
+    }
+
+    await optionsSave(options);
+    backend.onOptionsUpdated(source);
+}
+
 function apiOptionsGetFull() {
     return utilBackend().getFullOptions();
 }

ext/bg/js/backend.js

@@ -177,6 +177,7 @@ class Backend {
 
 Backend.messageHandlers = {
     optionsGet: ({optionsContext}) => apiOptionsGet(optionsContext),
+    optionsSet: ({changedOptions, optionsContext, source}) => apiOptionsSet(changedOptions, optionsContext, source),
     kanjiFind: ({text, optionsContext}) => apiKanjiFind(text, optionsContext),
     termsFind: ({text, optionsContext}) => apiTermsFind(text, optionsContext),
     definitionAdd: ({definition, mode, context, optionsContext}) => apiDefinitionAdd(definition, mode, context, optionsContext),

ext/bg/js/options.js

@@ -279,7 +279,9 @@ function profileOptionsCreateDefaults() {
             popupTheme: 'default',
             popupOuterTheme: 'default',
             customPopupCss: '',
-            customPopupOuterCss: ''
+            customPopupOuterCss: '',
+            enableWanakana: true,
+            enableClipboardMonitor: false
         },
 
         audio: {

ext/bg/js/search.js

@@ -62,17 +62,22 @@ class DisplaySearch extends Display {
                 this.query.addEventListener('input', () => this.onSearchInput(), false);
 
                 if (this.wanakanaEnable !== null) {
-                    if (this.wanakanaEnable.checked) {
+                    if (this.options.general.enableWanakana === true) {
+                        this.wanakanaEnable.checked = true;
                         window.wanakana.bind(this.query);
+                    } else {
+                        this.wanakanaEnable.checked = false;
                     }
                     this.wanakanaEnable.addEventListener('change', (e) => {
                         let query = DisplaySearch.getSearchQueryFromLocation(window.location.href);
                         if (e.target.checked) {
                             window.wanakana.bind(this.query);
                             this.query.value = window.wanakana.toKana(query);
+                            apiOptionsSet({general: {enableWanakana: true}}, this.getOptionsContext());
                         } else {
                             window.wanakana.unbind(this.query);
                             this.query.value = query;
+                            apiOptionsSet({general: {enableWanakana: false}}, this.getOptionsContext());
                         }
                         this.onSearchQueryUpdated(this.query.value, false);
                     });
@@ -89,6 +94,12 @@ class DisplaySearch extends Display {
                 }
             }
             if (this.clipboardMonitorEnable !== null) {
+                if (this.options.general.enableClipboardMonitor === true) {
+                    this.clipboardMonitorEnable.checked = true;
+                    this.startClipboardMonitor();
+                } else {
+                    this.clipboardMonitorEnable.checked = false;
+                }
                 this.clipboardMonitorEnable.addEventListener('change', (e) => {
                     if (e.target.checked) {
                         chrome.permissions.request(
@@ -96,6 +107,7 @@ class DisplaySearch extends Display {
                             (granted) => {
                                 if (granted) {
                                     this.startClipboardMonitor();
+                                    apiOptionsSet({general: {enableClipboardMonitor: true}}, this.getOptionsContext());
                                 } else {
                                     e.target.checked = false;
                                 }
@@ -103,6 +115,7 @@ class DisplaySearch extends Display {
                         );
                     } else {
                         this.stopClipboardMonitor();
+                        apiOptionsSet({general: {enableClipboardMonitor: false}}, this.getOptionsContext());
                     }
                 });
             }

ext/bg/search.html

@@ -22,7 +22,7 @@
             <div class="input-group" style="padding-top: 10px; font-size: 20px;">
                 <span title="Enable kana input method" class="input-group-text">
                     <label for="wanakana-enable">あ</label>
-                    <input type="checkbox" id="wanakana-enable" checked />
+                    <input type="checkbox" id="wanakana-enable" />
                 </span>
                 <span title="Enable clipboard monitor" class="input-group-text">
                     <label for="clipboard-monitor-enable"><span class="glyphicon glyphicon-paste"></span></label>

ext/fg/js/api.js

@@ -21,6 +21,10 @@ function apiOptionsGet(optionsContext) {
     return utilInvoke('optionsGet', {optionsContext});
 }
 
+function apiOptionsSet(changedOptions, optionsContext, source) {
+    return utilInvoke('optionsSet', {changedOptions, optionsContext, source});
+}
+
 function apiTermsFind(text, optionsContext) {
     return utilInvoke('termsFind', {text, optionsContext});
 }