From 067619766715f5aca7554a818a475419fc665e63 Mon Sep 17 00:00:00 2001
From: jez
Date: Fri, 31 Dec 2010 15:22:05 +0800
Subject: 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.)
---
 options.html | 61 +++++++++++++++++++++++++++++++++++++++---------------------
 1 file changed, 40 insertions(+), 21 deletions(-)

(limited to 'options.html')

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++)
-- 
cgit v1.2.3