overleaf/services/web/public/js/ace/ext-keybinding_menu.js

170 lines
5.7 KiB
JavaScript
Raw Normal View History

2014-07-16 10:07:18 +00:00
ace.define("ace/ext/menu_tools/overlay_page",["require","exports","module","ace/lib/dom"], function(require, exports, module) {
2014-07-09 16:59:04 +00:00
'use strict';
var dom = require("../../lib/dom");
var cssText = "#ace_settingsmenu, #kbshortcutmenu {\
background-color: #F7F7F7;\
color: black;\
box-shadow: -5px 4px 5px rgba(126, 126, 126, 0.55);\
padding: 1em 0.5em 2em 1em;\
overflow: auto;\
position: absolute;\
margin: 0;\
bottom: 0;\
right: 0;\
top: 0;\
z-index: 9991;\
cursor: default;\
}\
.ace_dark #ace_settingsmenu, .ace_dark #kbshortcutmenu {\
box-shadow: -20px 10px 25px rgba(126, 126, 126, 0.25);\
background-color: rgba(255, 255, 255, 0.6);\
color: black;\
}\
.ace_optionsMenuEntry:hover {\
background-color: rgba(100, 100, 100, 0.1);\
-webkit-transition: all 0.5s;\
transition: all 0.3s\
}\
.ace_closeButton {\
background: rgba(245, 146, 146, 0.5);\
border: 1px solid #F48A8A;\
border-radius: 50%;\
padding: 7px;\
position: absolute;\
right: -8px;\
top: -8px;\
z-index: 1000;\
}\
.ace_closeButton{\
background: rgba(245, 146, 146, 0.9);\
}\
.ace_optionsMenuKey {\
color: darkslateblue;\
font-weight: bold;\
}\
.ace_optionsMenuCommand {\
color: darkcyan;\
font-weight: normal;\
}";
dom.importCssString(cssText);
module.exports.overlayPage = function overlayPage(editor, contentElement, top, right, bottom, left) {
top = top ? 'top: ' + top + ';' : '';
bottom = bottom ? 'bottom: ' + bottom + ';' : '';
right = right ? 'right: ' + right + ';' : '';
left = left ? 'left: ' + left + ';' : '';
var closer = document.createElement('div');
var contentContainer = document.createElement('div');
function documentEscListener(e) {
if (e.keyCode === 27) {
closer.click();
}
}
closer.style.cssText = 'margin: 0; padding: 0; ' +
'position: fixed; top:0; bottom:0; left:0; right:0;' +
'z-index: 9990; ' +
'background-color: rgba(0, 0, 0, 0.3);';
closer.addEventListener('click', function() {
document.removeEventListener('keydown', documentEscListener);
closer.parentNode.removeChild(closer);
editor.focus();
closer = null;
});
document.addEventListener('keydown', documentEscListener);
contentContainer.style.cssText = top + right + bottom + left;
contentContainer.addEventListener('click', function(e) {
e.stopPropagation();
});
var wrapper = dom.createElement("div");
wrapper.style.position = "relative";
var closeButton = dom.createElement("div");
closeButton.className = "ace_closeButton";
closeButton.addEventListener('click', function() {
closer.click();
});
wrapper.appendChild(closeButton);
contentContainer.appendChild(wrapper);
contentContainer.appendChild(contentElement);
closer.appendChild(contentContainer);
document.body.appendChild(closer);
editor.blur();
};
});
2014-07-16 10:07:18 +00:00
ace.define("ace/ext/menu_tools/get_editor_keyboard_shortcuts",["require","exports","module","ace/lib/keys"], function(require, exports, module) {
2014-07-09 16:59:04 +00:00
"use strict";
var keys = require("../../lib/keys");
module.exports.getEditorKeybordShortcuts = function(editor) {
var KEY_MODS = keys.KEY_MODS;
var keybindings = [];
var commandMap = {};
editor.keyBinding.$handlers.forEach(function(handler) {
var ckb = handler.commandKeyBinding;
for (var i in ckb) {
2015-02-12 10:36:57 +00:00
var key = i.replace(/(^|-)\w/g, function(x) { return x.toUpperCase(); });
var commands = ckb[i];
if (!Array.isArray(commands))
commands = [commands];
commands.forEach(function(command) {
2014-07-09 16:59:04 +00:00
if (typeof command != "string")
command = command.name
if (commandMap[command]) {
2015-02-12 10:36:57 +00:00
commandMap[command].key += "|" + key;
2014-07-09 16:59:04 +00:00
} else {
2015-02-12 10:36:57 +00:00
commandMap[command] = {key: key, command: command};
2014-07-09 16:59:04 +00:00
keybindings.push(commandMap[command]);
2015-02-12 10:36:57 +00:00
}
});
2014-07-09 16:59:04 +00:00
}
});
return keybindings;
};
});
2014-07-16 10:07:18 +00:00
ace.define("ace/ext/keybinding_menu",["require","exports","module","ace/editor","ace/ext/menu_tools/overlay_page","ace/ext/menu_tools/get_editor_keyboard_shortcuts"], function(require, exports, module) {
2014-07-09 16:59:04 +00:00
"use strict";
var Editor = require("ace/editor").Editor;
function showKeyboardShortcuts (editor) {
if(!document.getElementById('kbshortcutmenu')) {
var overlayPage = require('./menu_tools/overlay_page').overlayPage;
var getEditorKeybordShortcuts = require('./menu_tools/get_editor_keyboard_shortcuts').getEditorKeybordShortcuts;
var kb = getEditorKeybordShortcuts(editor);
var el = document.createElement('div');
var commands = kb.reduce(function(previous, current) {
return previous + '<div class="ace_optionsMenuEntry"><span class="ace_optionsMenuCommand">'
+ current.command + '</span> : '
+ '<span class="ace_optionsMenuKey">' + current.key + '</span></div>';
}, '');
el.id = 'kbshortcutmenu';
el.innerHTML = '<h1>Keyboard Shortcuts</h1>' + commands + '</div>';
overlayPage(editor, el, '0', '0', '0', null);
}
};
module.exports.init = function(editor) {
Editor.prototype.showKeyboardShortcuts = function() {
showKeyboardShortcuts(this);
};
editor.commands.addCommands([{
name: "showKeyboardShortcuts",
bindKey: {win: "Ctrl-Alt-h", mac: "Command-Alt-h"},
exec: function(editor, line) {
editor.showKeyboardShortcuts();
}
}]);
};
});
(function() {
2014-07-16 10:07:18 +00:00
ace.require(["ace/ext/keybinding_menu"], function() {});
2014-07-09 16:59:04 +00:00
})();