Separated logic from presentation, lowercased file names

I pulled the code for generating the menu out into its own module called
overlay_page. I pulled the code for generating a menu, using
overlay_page, out into its own module called show_keyboard_shortcuts.
The logic for getting a list of keyboard shortcuts pertinent to the
current operating system is by itself in the module
get_editor_keyboard_shortcuts. This should make it easy for anyone to
change the appearance of the menu without worrying about breaking the
code which fetches the data.

lib/ace/commands/default_commands.js

@@ -45,7 +45,7 @@ exports.commands = [{
     name: "showSettingsMenu",
     bindKey: bindKey("Ctrl-,", "Command-,"),
     exec: function (editor) {
-        config.loadModule("ace/ext/show_settings_menu", function (e) {
+        config.loadModule("ace/ext/show_keyboard_shortcuts", function (e) {
             e(editor);
         });
     },

lib/ace/ext/get_editor_keyboard_shortcuts.js

@@ -0,0 +1,63 @@
+/*jslint
+    indent: 4,
+    maxerr: 50,
+    white: true,
+    browser: true,
+    vars: true
+*/
+/*global
+    define,
+    require
+*/
+
+/**
+ * Get Editor Keyboard Shortcuts
+ * @fileOverview Get Editor Keyboard Shortcuts <br />
+ * Gets a map of keyboard shortcuts to command names for the current platform.
+ * @author <a href="mailto:matthewkastor@gmail.com">
+ *  Matthew Christopher Kastor-Inare III </a><br />
+ *  ☭ Hial Atropa!! ☭
+ */
+ 
+define(function(require, exports, module) {
+"use strict";
+/**
+ * Gets a map of keyboard shortcuts to command names for the current platform.
+ * @author <a href="mailto:matthewkastor@gmail.com">
+ *  Matthew Christopher Kastor-Inare III </a><br />
+ *  ☭ Hial Atropa!! ☭
+ * @param {ace.Editor} editor An editor instance.
+ * @returns {Array} Returns an array of objects representing the keyboard
+ *  shortcuts for the given editor.
+ * @example
+ * var getKbShortcuts = require('./get_keyboard_shortcuts');
+ * console.log(getKbShortcuts(editor));
+ * // [
+ * //     {'command' : aCommand, 'key' : 'Control-d'},
+ * //     {'command' : aCommand, 'key' : 'Control-d'}
+ * // ]
+ */
+module.exports.getEditorKeybordShortcuts = function getEditorKeybordShortcuts (editor) {
+    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;
+};
+
+});

lib/ace/ext/showKeyboardShortcuts.js

@@ -1,109 +0,0 @@
-/*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);
-    }
-});

lib/ace/ext/show_keyboard_shortcuts.js

@@ -0,0 +1,44 @@
+/*jslint
+    indent: 4,
+    maxerr: 50,
+    white: true,
+    browser: true,
+    vars: true
+*/
+/*global
+    define,
+    require
+*/
+
+/**
+ * Show Keyboard Shortcuts
+ * @fileOverview Show Keyboard Shortcuts <br />
+ * Generates a menu which displays the keyboard shortcuts.
+ * @author <a href="mailto:matthewkastor@gmail.com">
+ *  Matthew Christopher Kastor-Inare III </a><br />
+ *  ☭ Hial Atropa!! ☭
+ */
+
+define(function(require, exports, module) {
+    "use strict";
+    var overlayPage = require('./overlay_page').overlayPage;
+    var getEditorKeybordShortcuts = require('./get_editor_keyboard_shortcuts').getEditorKeybordShortcuts;
+    /**
+     * Generates a menu which displays the keyboard shortcuts.
+     * @author <a href="mailto:matthewkastor@gmail.com">
+     *  Matthew Christopher Kastor-Inare III </a><br />
+     *  ☭ Hial Atropa!! ☭
+     * @param {ace.Editor} editor An instance of the ace editor.
+     */
+    module.exports = function showKeyboardShortcuts (editor) {
+        var kb = getEditorKeybordShortcuts(editor);
+        var el = document.createElement('div');
+        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);
+    };
+});