From d4f4758b17647422a9c18a2063de3dc4bf2e7d44 Mon Sep 17 00:00:00 2001
From: Matthew Kastor <matthewkastor@gmail.com>
Date: Fri, 29 Mar 2013 20:17:44 -0400
Subject: [PATCH] adds keyboard shortcuts menu

I'm not set on the keybinding or the aesthetics of this. please change
them at will. The main goal here is to provide some method to list all
the keyboard shortcuts dynamically. I mean that when new shortcuts are
added they should automatically be put into this menu without anyone
writing any extra code. The menu provides a way for end users to easily
discover the many built in functions accessible through the keyboard.

Admittedly the current keybinding to display this menu is not very
convenient or easily guessed. I like the way that the textarea version
of ace presents a single clickable corner that is easily identified by
users. It would be cool to make this pretty and obvious.
---
 lib/ace/commands/default_commands.js |   2 +-
 lib/ace/ext/showKeyboardShortcuts.js | 109 +++++++++++++++++++++++++++
 2 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 lib/ace/ext/showKeyboardShortcuts.js

diff --git a/lib/ace/commands/default_commands.js b/lib/ace/commands/default_commands.js
index 3134fb6b..8ecd7fe5 100644
--- a/lib/ace/commands/default_commands.js
+++ b/lib/ace/commands/default_commands.js
@@ -43,7 +43,7 @@ function bindKey(win, mac) {
 
 exports.commands = [{
     name: "showSettingsMenu",
-    bindKey: bindKey("Ctrl-q", "Command-q"),
+    bindKey: bindKey("Ctrl-,", "Command-,"),
     exec: function (editor) {
         config.loadModule("ace/ext/show_settings_menu", function (e) {
             e(editor);
diff --git a/lib/ace/ext/showKeyboardShortcuts.js b/lib/ace/ext/showKeyboardShortcuts.js
new file mode 100644
index 00000000..b503b993
--- /dev/null
+++ b/lib/ace/ext/showKeyboardShortcuts.js
@@ -0,0 +1,109 @@
+/*jslint
+    indent: 4,
+    maxerr: 50,
+    white: true,
+    browser: true,
+    vars: true
+*/
+/*global
+    define,
+    getComputedStyle
+*/
+define(function(require, exports, module) {
+    "use strict";
+    // this function makes an ugly div to display the contentElement
+    var overlayPage = function (contentElement, top, right, bottom, left) {
+        "use strict";
+        var div = document.createElement('div');
+        var contentContainer = document.createElement('div');
+        contentContainer.style.cssText = 'margin: 0px; padding: 0px; border: 0px;' +
+            'overflow: auto;';
+        contentElement.style.cssText = contentElement.style.cssText + 'overflow: auto;';
+        contentContainer.appendChild(contentElement);
+
+        var cl = document.createElement('img');
+        if (top) {
+            top = 'top: ' + top + ';';
+        } else {
+            top = '';
+        }
+        if (right) {
+            right = 'right: ' + right + ';';
+        } else {
+            right = '';
+        }
+        if (bottom) {
+            bottom = 'bottom: ' + bottom + ';';
+        } else {
+            bottom = '';
+        }
+        if (left) {
+            left = 'left: ' + left + ';';
+        } else {
+            left = '';
+        }
+
+        cl.src = '/BigRedX.png';
+        cl.style.cssText = 'margin: 5px 5px 0 0; padding: 0; ' +
+            'float: right; width: 25px; height: 25px; border: 1px solid black;';
+        div.style.cssText = 'margin:0; padding:0; position: absolute;' +
+            top + right + bottom + left +
+            'z-index:9999; background-color:white; color:black; overflow: auto;';
+
+        div.appendChild(cl);
+        div.appendChild(contentContainer);
+        document.body.appendChild(div);
+
+        cl.addEventListener('click', function (e) {
+            div.parentNode.removeChild(div);
+            div = null;
+        });
+    };
+
+    // this function grabs all of the editor commands that have keyboard shortcuts
+    function aceGetKeybordShortcuts (editor) {
+        "use strict";
+        var commands = editor.commands.byName;
+        var commandName;
+        var key;
+        var platform = editor.commands.platform;
+        var kb = [];
+        for (commandName in commands) {
+            try {
+                key = commands[commandName].bindKey[platform];
+                if (key) {
+                   kb.push({
+                        'command' : commandName,
+                        'key' : key
+                   });
+                }
+            } catch (e) {
+                // errors on properties without bindKey we don't want them
+                // so the errors don't need handling.
+            }
+        }
+        return kb;
+    }
+
+    // this function takes the keyboard shortcuts array and 
+    // runs it through some template.
+    module.exports = function (editor) {
+        var kb = aceGetKeybordShortcuts(editor);
+        var el = document.createElement('div');
+        // untested. something like this could . . . 
+        // var template = '<h1>Keyboard Shortcuts</h1><div>' +
+        //     {{#kb}}
+        //         {{{command}}} : {{{key}}}
+        //     {{/kb}}
+        //     '</div>';
+        // mustache.render({'kb' : kb}, template);
+
+        el.innerHTML = '<h1>Keyboard Shortcuts</h1><div>' +
+            JSON.stringify(kb, null, '    ') +
+            '</div>';
+        el.style.cssText = 'margin:0; padding:0; ' +
+            'background-color:white; color:black; ' +
+            'white-space: pre-wrap;';
+        overlayPage(el, '0', '0', '0', null);
+    }
+});
\ No newline at end of file