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.
This commit is contained in:
Matthew Kastor
nightwing
parent
d4f4758b17
commit
baaf4dd0b4
4 changed files with 108 additions and 110 deletions
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
|
|
|
|||
63
lib/ace/ext/get_editor_keyboard_shortcuts.js
Normal file
63
lib/ace/ext/get_editor_keyboard_shortcuts.js
Normal file
|
|
@ -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;
|
||||
};
|
||||
|
||||
});
|
||||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
44
lib/ace/ext/show_keyboard_shortcuts.js
Normal file
44
lib/ace/ext/show_keyboard_shortcuts.js
Normal file
|
|
@ -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);
|
||||
};
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue