diff options
| author | Phil Crosby | 2010-01-17 23:44:30 -0800 |
|---|---|---|
| committer | Phil Crosby | 2010-01-17 23:44:30 -0800 |
| commit | 7eb6971dc0a4e7097bbc2adf3885e10640faec66 (patch) | |
| tree | 94f49788f39e8f3d0668b79b3fa46489cace64e9 | |
| parent | cd3859fd18ff747a349a3ffaaff48b99d54aa192 (diff) | |
| download | vimium-7eb6971dc0a4e7097bbc2adf3885e10640faec66.tar.bz2 | |
Make the save button disabled, enable it when a change is made, and then disable it again upon saving.
| -rw-r--r-- | options.html | 53 |
1 files changed, 33 insertions, 20 deletions
diff --git a/options.html b/options.html index d349ce63..588943cc 100644 --- a/options.html +++ b/options.html @@ -18,9 +18,6 @@ td { padding:5px 0; } - button#saveSettings { - margin-top:20px; - } textarea#excludedUrls { width:450px; min-height:100px; @@ -34,21 +31,32 @@ width:1px; white-space:nowrap; } + #buttonsPanel { + /* This should match the width of #excludedUrls */ + width:450px; + text-align:right; + margin-top:18px; + } </style> - </head> <script type="text/javascript"> + $ = function(id) { return document.getElementById(id); }; + + function initializeOptions() { + populateOptions(); + var elements = ["scrollStepSize", "defaultZoomLevel", "excludedUrls"]; + for (var i = 0; i < elements.length; i++) + $(elements[i]).addEventListener("change", enableSaveButton, false); + } + + function enableSaveButton() { $("saveOptions").removeAttribute("disabled"); } // Saves options to localStorage. function saveOptions() { - localStorage["scrollStepSize"] = document.getElementById("scrollStepSize").value - localStorage["defaultZoomLevel"] = document.getElementById("defaultZoomLevel").value - localStorage["excludedUrls"] = document.getElementById("excludedUrls").value; - - // Give the user some feedback that their options were saved. - var status = document.getElementById("status"); - status.innerHTML = "Settings Saved."; - setTimeout(function() { status.innerHTML = ""; }, 750); + localStorage["scrollStepSize"] = $("scrollStepSize").value + localStorage["defaultZoomLevel"] = $("defaultZoomLevel").value + localStorage["excludedUrls"] = $("excludedUrls").value; + $("saveOptions").disabled = true; } // Restores select box state to saved value from localStorage. @@ -58,20 +66,24 @@ var defaultZoomLevel = localStorage["defaultZoomLevel"] || 100; var defaultExcludedUrls = localStorage["excludedUrls"] || ""; - document.getElementById("scrollStepSize").value = scrollStepSize; - document.getElementById("defaultZoomLevel").value = defaultZoomLevel; - document.getElementById("excludedUrls").value = defaultExcludedUrls; + $("scrollStepSize").value = scrollStepSize; + $("defaultZoomLevel").value = defaultZoomLevel; + $("excludedUrls").value = defaultExcludedUrls; } function restoreToDefaults() { scrollStepSize.value = "60"; defaultZoomLevel.value = "100"; excludedUrls.value = ""; + $("saveOptions").disabled = true; } + </script> - <body onload="populateOptions()"> - <h1>Vimium - Settings</h1> + </head> + + <body onload="initializeOptions()"> + <h1>Vimium - Options</h1> <table> <tr> <td class="caption">Scroll Step Size</td> @@ -100,9 +112,10 @@ </tr> </table> - <button id="restoreSettings" onclick="restoreToDefaults()">Restore to Defaults</button> - <button id="saveSettings" onclick="saveOptions()">Save Settings</button> - <span id="status"></status> + <div id="buttonsPanel"> + <button id="restoreSettings" onclick="restoreToDefaults()">Restore to Defaults</button> + <button id="saveOptions" disabled="true" onclick="saveOptions()">Save Options</button> + </div> <h1>Command Reference</h1> <pre> |