Tidy up checkbox handling in the options page.

Disable linkHintCharacters textbox when filterLinkHints option is on.

Enable save button whenever there is data change in the form (keyup
event does not account for the possibility of data change via mouse
copy/paste, however unlikely that use case seems.)

1 files changed, 40 insertions, 21 deletions

diff --git a/options.html b/options.html
index 8be47f4c..f752abcd 100644
--- a/options.html
+++ b/options.html
@@ -70,7 +70,10 @@
       tr.advancedOption {
         display:none;
       }
-
+      input:read-only {
+        background-color: #eee;
+        color: #666;
+      }
     </style>
 
   <script type="text/javascript">
@@ -93,9 +96,13 @@
 
   function initializeOptions() {
     populateOptions();
-    for (var i = 0; i < editableFields.length; i++)
+
+    for (var i = 0; i < editableFields.length; i++) {
       $(editableFields[i]).addEventListener("keyup", onOptionKeyup, false);
-    $("filterLinkHints").addEventListener("click", onOptionKeyup, false);
+      $(editableFields[i]).addEventListener("change", enableSaveButton, false);
+      $(editableFields[i]).addEventListener("change", onDataLoaded, false);
+    }
+
     $("advancedOptions").addEventListener("click", openAdvancedOptions, false);
     $("showCommands").addEventListener("click", function () {
       showDialog("vimiumCommandListingContainer",
@@ -104,11 +111,14 @@
   }
 
   function onOptionKeyup(event) {
-    var isCheckbox = event.target.getAttribute("type") == "checkbox";
-    if (isCheckbox || event.target.getAttribute("savedValue") != event.target.value)
+    if (event.target.getAttribute("savedValue") != event.target.value)
       enableSaveButton();
   }
 
+  function onDataLoaded() {
+    $("linkHintCharacters").readOnly = $("filterLinkHints").checked;
+  }
+
   function enableSaveButton() { $("saveOptions").removeAttribute("disabled"); }
 
   // Saves options to localStorage.
@@ -118,19 +128,23 @@
     for (var i = 0; i < editableFields.length; i++) {
       var fieldName = editableFields[i];
       var field = $(fieldName);
-      var fieldValue = field.value.trim();
-      var defaultFieldValue = (defaultSettings[fieldName] != null) ?
-        defaultSettings[fieldName].toString() : "";
 
-      if (field.getAttribute("type") == "checkbox")
+      var fieldValue;
+      if (field.getAttribute("type") == "checkbox") {
         fieldValue = field.checked ? "true" : "false";
+      } else {
+        fieldValue = field.value.trim();
+        field.value = fieldValue;
+      }
+
+      var defaultFieldValue = (defaultSettings[fieldName] != null) ?
+        defaultSettings[fieldName].toString() : "";
 
       if (fieldValue == defaultFieldValue)
         delete localStorage[fieldName];
       else
         localStorage[fieldName] = fieldValue;
 
-      field.value = fieldValue;
       field.setAttribute("savedValue", fieldValue);
 
       if (postSaveHooks[fieldName]) { postSaveHooks[fieldName](fieldValue); }
@@ -143,24 +157,29 @@
     for (var i = 0; i < editableFields.length; i++) {
       var val = localStorage[editableFields[i]] || defaultSettings[editableFields[i]] || "";
       var field = $(editableFields[i]);
-
-      // if a true or false is stored, assume we're working with a checkbox
-      if (val == "true")
-        field.checked = true;
-      if (val == "false")
-        field.checked = false;
-
-      field.value = val;
-      field.setAttribute("savedValue", field.value);
+      setFieldValue($(editableFields[i]), val);
     }
+    onDataLoaded();
   }
 
   function restoreToDefaults() {
-    for (var i = 0; i < editableFields.length; i++)
-      $(editableFields[i]).value = defaultSettings[editableFields[i]] || "";
+    for (var i = 0; i < editableFields.length; i++) {
+      var val = defaultSettings[editableFields[i]] || "";
+      setFieldValue($(editableFields[i]), val);
+    }
+    onDataLoaded();
     enableSaveButton();
   }
 
+  function setFieldValue(field, value) {
+    if (field.getAttribute('type') == 'checkbox')
+      field.checked = value == "true";
+    else
+      field.value = value;
+
+    field.setAttribute("savedValue", value);
+  }
+
   function openAdvancedOptions(event) {
     var elements = document.getElementsByClassName("advancedOption");
     for (var i = 0; i < elements.length; i++)