Convert options.js -> options/options.coffee.

author: Jez Ng 2012-08-19 00:50:45 -0700
committer: Jez Ng 2012-08-19 00:51:24 -0700
commit: 486ba68a42e2ba7b96a7a14b0ae34aca7ac7e780 (patch)
tree: 35e50b1bfee808318f699d56855ea22d39f88ac3 /options
parent: 218b986d46f59ee843b611b881a8dfad037a8446 (diff)
download: vimium-486ba68a42e2ba7b96a7a14b0ae34aca7ac7e780.tar.bz2
2 files changed, 317 insertions, 0 deletions
diff --git a/options/options.coffee b/options/options.coffee
new file mode 100644
index 00000000..6300dbcd
--- /dev/null
+++ b/options/options.coffee
@@ -0,0 +1,90 @@
+$ = (id) -> document.getElementById id
+
+bgSettings = chrome.extension.getBackgroundPage().Settings
+
+editableFields = ["scrollStepSize", "excludedUrls", "linkHintCharacters", "userDefinedLinkHintCss",
+  "keyMappings", "filterLinkHints", "previousPatterns", "nextPatterns", "hideHud"]
+
+canBeEmptyFields = ["excludedUrls", "keyMappings", "userDefinedLinkHintCss"]
+
+postSaveHooks = keyMappings: (value) ->
+  commands = chrome.extension.getBackgroundPage().Commands
+  commands.clearKeyMappingsAndSetDefaults()
+  commands.parseCustomKeyMappings value
+  chrome.extension.getBackgroundPage().refreshCompletionKeysAfterMappingSave()
+
+document.addEventListener "DOMContentLoaded", ->
+  populateOptions()
+
+  for field in editableFields
+    $(field).addEventListener "keyup", onOptionKeyup, false
+    $(field).addEventListener "change", enableSaveButton, false
+    $(field).addEventListener "change", onDataLoaded, false
+
+  $("advancedOptions").addEventListener "click", openAdvancedOptions, false
+  $("showCommands").addEventListener "click", (->
+    showHelpDialog chrome.extension.getBackgroundPage().helpDialogHtml(true, true, "Command Listing"), frameId
+  ), false
+  document.getElementById("restoreSettings").addEventListener "click", restoreToDefaults
+  document.getElementById("saveOptions").addEventListener "click", saveOptions
+
+onOptionKeyup = (event) ->
+  if (event.target.getAttribute("type") isnt "checkbox" and
+      event.target.getAttribute("savedValue") isnt event.target.value)
+    enableSaveButton()
+
+onDataLoaded = ->
+  $("linkHintCharacters").readOnly = $("filterLinkHints").checked
+
+enableSaveButton = ->
+  $("saveOptions").removeAttribute "disabled"
+
+# Saves options to localStorage.
+saveOptions = ->
+  
+  # If the value is unchanged from the default, delete the preference from localStorage; this gives us
+  # the freedom to change the defaults in the future.
+  for fieldName in editableFields
+    field = $(fieldName)
+    if field.getAttribute("type") is "checkbox"
+      fieldValue = field.checked
+    else
+      fieldValue = field.value.trim()
+      field.value = fieldValue
+    
+    # If it's empty and not a field that we allow to be empty, restore to the default value
+    if not fieldValue and canBeEmptyFields.indexOf(fieldName) is -1
+      bgSettings.clear fieldName
+      fieldValue = bgSettings.get(fieldName)
+    else
+      bgSettings.set fieldName, fieldValue
+    $(fieldName).value = fieldValue
+    $(fieldName).setAttribute "savedValue", fieldValue
+    postSaveHooks[fieldName] fieldValue if postSaveHooks[fieldName]
+
+  $("saveOptions").disabled = true
+
+# Restores select box state to saved value from localStorage.
+populateOptions = ->
+  for field in editableFields
+    val = bgSettings.get(field) or ""
+    setFieldValue $(field), val
+  onDataLoaded()
+
+restoreToDefaults = ->
+  for field in editableFields
+    val = bgSettings.defaults[field] or ""
+    setFieldValue $(field), val
+  onDataLoaded()
+  enableSaveButton()
+
+setFieldValue = (field, value) ->
+  unless field.getAttribute("type") is "checkbox"
+    field.value = value
+    field.setAttribute "savedValue", value
+
+openAdvancedOptions = (event) ->
+  elements = document.getElementsByClassName("advancedOption")
+  for element in elements
+    element.style.display = (if (element.style.display is "table-row") then "none" else "table-row")
+  event.preventDefault()
diff --git a/options/options.html b/options/options.html
new file mode 100644
index 00000000..93a402fb
--- /dev/null
+++ b/options/options.html
@@ -0,0 +1,227 @@
+<html>
+  <head>
+    <title>Vimium Options</title>
+    <script src="../lib/utils.js"></script>
+    <script src="../lib/keyboard_utils.js"></script>
+    <script src="../lib/dom_utils.js"></script>
+    <script src="../lib/clipboard.js"></script>
+    <script src="../content_scripts/link_hints.js"></script>
+    <script src="../content_scripts/vomnibar.js"></script>
+    <script src="../content_scripts/vimium_frontend.js"></script>
+    <style type="text/css" media="screen">
+      body {
+        font-family:"helvetica neue", "helvetica", "arial", "sans";
+        width:640px;
+        margin:10px auto;
+      }
+      a, a:visited { color:blue; }
+      #optionsTableWrapper {
+        width:490px;
+        border:1px solid red;
+      }
+      .example {
+        font-size: 12px;
+        color:#555;
+        margin-left:20px;
+      }
+      .caption {
+        margin-right:10px;
+        min-width: 130px;
+      }
+      td {
+        padding:5px 0;
+        padding-bottom: 8px;
+      }
+      td#mappingsHelp {
+        padding:20px 0;
+      }
+      textarea#excludedUrls {
+        width:490px;
+        min-height:100px;
+      }
+      textarea#userDefinedLinkHintCss {
+        width:342px;
+        min-height:100px;
+      }
+      textarea#keyMappings {
+        width:342px;
+        min-height:100px;
+      }
+      #status {
+        margin-left:10px;
+        font-size:80%;
+      }
+      /* Make the caption in the settings table as small as possible, to pull the other fields to the right. */
+      td:nth-child(1) {
+        width:1px;
+        white-space:nowrap;
+      }
+      #buttonsPanel {
+        /* This should match the width of #excludedUrls + 5px of padding to move the buttons to the right. */
+        width:495px;
+        text-align:right;
+        margin-top:18px;
+        margin-right:-10px;
+      }
+      #showHelpDialogMessage {
+        width:495px;
+        font-size:15px;
+      }
+      .help {
+        position:absolute;
+        right:-280px;
+        width:280px;
+      }
+      tr.advancedOption {
+        display:none;
+      }
+      input:read-only {
+        background-color: #eee;
+        color: #666;
+      }
+      /* Boolean options have a tighter form representation than text options. */
+      td.booleanOption { font-size: 12px; }
+    </style>
+  <link rel="stylesheet" type="text/css" href="../vimium.css" />
+
+  <script type="text/javascript" src="options.js"></script>
+
+  </head>
+
+  <body>
+    <h1>Vimium - Options</h1>
+    <table style="position:relative">
+      <tr>
+        <td class="caption">Scroll step size</td>
+        <td>
+          <input id="scrollStepSize" type="text" style="width:50px" />px
+        </td>
+      </tr>
+      <tr>
+        <td colspan="3">
+            Excluded URLs<br/>
+            <div class="help">
+              <div class="example">
+                e.g. http*://mail.google.com/*<br/>
+                This will disable Vimium on Gmail.<br/><br/>
+                Enter one URL per line.<br/>
+              </div>
+            </div>
+            <textarea id="excludedUrls"></textarea>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="3">
+          <a href="#" id="advancedOptions">Advanced options &raquo;</a>
+        </td>
+      </tr>
+      <tr class="advancedOption">
+        <td class="caption">Custom key<br/>mappings</td>
+        <td id="mappingsHelp" verticalAlign="top">
+          <div class="help">
+            <div class="example">
+              <!-- TODO(ilya/philc): Expand this and style it better. -->
+              Enter commands to remap your keys. Available commands:<br/>
+              <div style="margin-left:10px;margin-top:5px">
+                map j scrollDown<br/>
+                unmap j<br/>
+                unmapAll<br/>
+                &quot; this is a comment<br/>
+                # this is also a comment<br/>
+              </div>
+              <a href="#" id="showCommands">Show available commands.</a>
+            </div>
+          </div>
+          <textarea id="keyMappings" type="text"></textarea>
+        </td>
+      </tr>
+      <tr class="advancedOption">
+        <td class="caption">Characters used<br/> for link hints</td>
+        <td verticalAlign="top">
+            <div class="help">
+              <div class="example">
+                The characters placed next to each link after typing "F" to enter link hinting mode.
+              </div>
+            </div>
+            <input id="linkHintCharacters" type="text" style="width:150px" />
+        </td>
+      </tr>
+      <tr class="advancedOption">
+        <td class="caption">CSS for link hints</td>
+        <td verticalAlign="top">
+          <div class="help">
+            <div class="example">
+              The CSS used to style the characters next to each link hint.<br/><br/>
+              Note: these styles are used in addition to and take precedence over Vimium's
+              default styles.
+            </div>
+          </div>
+          <textarea id="userDefinedLinkHintCss" type="text"></textarea>
+        </td>
+      </tr>
+      <tr class="advancedOption">
+        <td class="caption"></td>
+        <td verticalAlign="top" class="booleanOption">
+          <div class="help">
+            <div class="example">
+              After typing "F" to enter link hinting mode, this option lets you type the text of a link
+              to select it.
+            </div>
+          </div>
+          <label>
+            <input id="filterLinkHints" type="checkbox"/>
+            Use the link's name and numbers for link hint filtering
+          </label>
+        </td>
+      </tr>
+      <tr class="advancedOption">
+        <td class="caption"></td>
+        <td verticalAlign="top" class="booleanOption">
+          <div class="help">
+            <div class="example">
+              The Heads-Up Display appears when typing into text boxes.
+            </div>
+          </div>
+          <label>
+            <input id="hideHud" type="checkbox"/>
+            Hide the Heads Up Display (HUD)
+          </label>
+        </td>
+      </tr>
+      <tr class="advancedOption">
+        <td class="caption">Previous Patterns</td>
+        <td verticalAlign="top">
+            <div class="help">
+              <div class="example">
+                Vimium will match against these patterns when using the "navigate to the previous page"
+                command.
+              </div>
+            </div>
+            <input id="previousPatterns" type="text" style="width:320px" />
+        </td>
+      </tr>
+      <tr class="advancedOption">
+        <td class="caption">Next Patterns</td>
+        <td verticalAlign="top">
+            <div class="help">
+              <div class="example">
+                Vimium will match against these patterns when using the "navigate to the next page" command.
+              </div>
+            </div>
+            <input id="nextPatterns" type="text" style="width:320px" />
+        </td>
+      </tr>
+    </table>
+
+    <div id="buttonsPanel">
+      <button id="restoreSettings">Restore to Defaults</button>
+      <button id="saveOptions" disabled="true">Save Options</button>
+    </div>
+
+    <br/>
+
+    <div id="showHelpDialogMessage">
+      To view all available shortcuts, type <span style="font-weight:bold">?</span> to show the Vimium help dialog.
+    </div>
+  </body>
+</html>
author	Jez Ng	2012-08-19 00:50:45 -0700
committer	Jez Ng	2012-08-19 00:51:24 -0700
commit	486ba68a42e2ba7b96a7a14b0ae34aca7ac7e780 (patch)
tree	35e50b1bfee808318f699d56855ea22d39f88ac3 /options
parent	218b986d46f59ee843b611b881a8dfad037a8446 (diff)
download	vimium-486ba68a42e2ba7b96a7a14b0ae34aca7ac7e780.tar.bz2