Add a dialog to show all available commands for key mappings under the options page.

1 files changed, 25 insertions, 1 deletions

diff --git a/options.html b/options.html
index 361987e1..70b8d702 100644
--- a/options.html
+++ b/options.html
@@ -66,6 +66,7 @@
   <script type="text/javascript">
   $ = function(id) { return document.getElementById(id); };
   isShowingHelpDialog = false;
+  isShowingCommandListing = false;
 
   var defaultSettings = chrome.extension.getBackgroundPage().defaultSettings;
 
@@ -82,6 +83,7 @@
     for (var i = 0; i < editableFields.length; i++)
       $(editableFields[i]).addEventListener("keyup", onOptionKeyup, false);
     $("advancedOptions").addEventListener("click", openAdvancedOptions, false);
+    $("showCommands").addEventListener("click", showCommandListing, false);
     document.addEventListener("keydown", onKeydown, true);
   }
 
@@ -135,7 +137,7 @@
   }
 
   function showHelpDialog() {
-    if (isShowingHelpDialog)
+    if (isShowingHelpDialog || isShowingCommandListing)
       return false;
     html = chrome.extension.getBackgroundPage().helpDialogHtml();
     isShowingHelpDialog = true;
@@ -155,6 +157,27 @@
       helpDialog.parentNode.removeChild(helpDialog);
   }
 
+  function showCommandListing() {
+    if (isShowingCommandListing || isShowingHelpDialog)
+      return false;
+    html = chrome.extension.getBackgroundPage().helpDialogHtml(true, true, "Command Listing");
+    isShowingCommandListing = true;
+    var container = document.createElement("div");
+    container.id = "vimiumCommandListingContainer";
+    container.innerHTML = html;
+    container.getElementsByClassName("closeButton")[0].addEventListener("click", hideCommandListing, false);
+    document.body.appendChild(container);
+    var dialog = document.getElementById("vimiumHelpDialog");
+    dialog.style.top = Math.max((window.innerHeight - dialog.clientHeight) / 2.0, 20) + "px";
+  }
+
+  function hideCommandListing() {
+    isShowingCommandListing = false;
+    var commandListing = document.getElementById("vimiumCommandListingContainer");
+    if (commandListing)
+      commandListing.parentNode.removeChild(commandListing);
+  }
+
   function onKeydown(event) {
     var keyChar = getKeyChar(event);
     var isFormField = ["INPUT", "TEXTAREA"].indexOf(event.target.tagName) >= 0;
@@ -213,6 +236,7 @@
                 " 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>