ext-keybinding_menu.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. ace.define("ace/ext/menu_tools/overlay_page",["require","exports","module","ace/lib/dom"], function(require, exports, module) {
  2. 'use strict';
  3. var dom = require("../../lib/dom");
  4. var cssText = "#ace_settingsmenu, #kbshortcutmenu {\
  5. background-color: #F7F7F7;\
  6. color: black;\
  7. box-shadow: -5px 4px 5px rgba(126, 126, 126, 0.55);\
  8. padding: 1em 0.5em 2em 1em;\
  9. overflow: auto;\
  10. position: absolute;\
  11. margin: 0;\
  12. bottom: 0;\
  13. right: 0;\
  14. top: 0;\
  15. z-index: 9991;\
  16. cursor: default;\
  17. }\
  18. .ace_dark #ace_settingsmenu, .ace_dark #kbshortcutmenu {\
  19. box-shadow: -20px 10px 25px rgba(126, 126, 126, 0.25);\
  20. background-color: rgba(255, 255, 255, 0.6);\
  21. color: black;\
  22. }\
  23. .ace_optionsMenuEntry:hover {\
  24. background-color: rgba(100, 100, 100, 0.1);\
  25. -webkit-transition: all 0.5s;\
  26. transition: all 0.3s\
  27. }\
  28. .ace_closeButton {\
  29. background: rgba(245, 146, 146, 0.5);\
  30. border: 1px solid #F48A8A;\
  31. border-radius: 50%;\
  32. padding: 7px;\
  33. position: absolute;\
  34. right: -8px;\
  35. top: -8px;\
  36. z-index: 1000;\
  37. }\
  38. .ace_closeButton{\
  39. background: rgba(245, 146, 146, 0.9);\
  40. }\
  41. .ace_optionsMenuKey {\
  42. color: darkslateblue;\
  43. font-weight: bold;\
  44. }\
  45. .ace_optionsMenuCommand {\
  46. color: darkcyan;\
  47. font-weight: normal;\
  48. }";
  49. dom.importCssString(cssText);
  50. module.exports.overlayPage = function overlayPage(editor, contentElement, top, right, bottom, left) {
  51. top = top ? 'top: ' + top + ';' : '';
  52. bottom = bottom ? 'bottom: ' + bottom + ';' : '';
  53. right = right ? 'right: ' + right + ';' : '';
  54. left = left ? 'left: ' + left + ';' : '';
  55. var closer = document.createElement('div');
  56. var contentContainer = document.createElement('div');
  57. function documentEscListener(e) {
  58. if (e.keyCode === 27) {
  59. closer.click();
  60. }
  61. }
  62. closer.style.cssText = 'margin: 0; padding: 0; ' +
  63. 'position: fixed; top:0; bottom:0; left:0; right:0;' +
  64. 'z-index: 9990; ' +
  65. 'background-color: rgba(0, 0, 0, 0.3);';
  66. closer.addEventListener('click', function() {
  67. document.removeEventListener('keydown', documentEscListener);
  68. closer.parentNode.removeChild(closer);
  69. editor.focus();
  70. closer = null;
  71. });
  72. document.addEventListener('keydown', documentEscListener);
  73. contentContainer.style.cssText = top + right + bottom + left;
  74. contentContainer.addEventListener('click', function(e) {
  75. e.stopPropagation();
  76. });
  77. var wrapper = dom.createElement("div");
  78. wrapper.style.position = "relative";
  79. var closeButton = dom.createElement("div");
  80. closeButton.className = "ace_closeButton";
  81. closeButton.addEventListener('click', function() {
  82. closer.click();
  83. });
  84. wrapper.appendChild(closeButton);
  85. contentContainer.appendChild(wrapper);
  86. contentContainer.appendChild(contentElement);
  87. closer.appendChild(contentContainer);
  88. document.body.appendChild(closer);
  89. editor.blur();
  90. };
  91. });
  92. ace.define("ace/ext/menu_tools/get_editor_keyboard_shortcuts",["require","exports","module","ace/lib/keys"], function(require, exports, module) {
  93. "use strict";
  94. var keys = require("../../lib/keys");
  95. module.exports.getEditorKeybordShortcuts = function(editor) {
  96. var KEY_MODS = keys.KEY_MODS;
  97. var keybindings = [];
  98. var commandMap = {};
  99. editor.keyBinding.$handlers.forEach(function(handler) {
  100. var ckb = handler.commandKeyBinding;
  101. for (var i in ckb) {
  102. var modifier = parseInt(i);
  103. if (modifier == -1) {
  104. modifier = "";
  105. } else if(isNaN(modifier)) {
  106. modifier = i;
  107. } else {
  108. modifier = "" +
  109. (modifier & KEY_MODS.command ? "Cmd-" : "") +
  110. (modifier & KEY_MODS.ctrl ? "Ctrl-" : "") +
  111. (modifier & KEY_MODS.alt ? "Alt-" : "") +
  112. (modifier & KEY_MODS.shift ? "Shift-" : "");
  113. }
  114. for (var key in ckb[i]) {
  115. var command = ckb[i][key]
  116. if (typeof command != "string")
  117. command = command.name
  118. if (commandMap[command]) {
  119. commandMap[command].key += "|" + modifier + key;
  120. } else {
  121. commandMap[command] = {key: modifier+key, command: command};
  122. keybindings.push(commandMap[command]);
  123. }
  124. }
  125. }
  126. });
  127. return keybindings;
  128. };
  129. });
  130. 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) {
  131. "use strict";
  132. var Editor = require("ace/editor").Editor;
  133. function showKeyboardShortcuts (editor) {
  134. if(!document.getElementById('kbshortcutmenu')) {
  135. var overlayPage = require('./menu_tools/overlay_page').overlayPage;
  136. var getEditorKeybordShortcuts = require('./menu_tools/get_editor_keyboard_shortcuts').getEditorKeybordShortcuts;
  137. var kb = getEditorKeybordShortcuts(editor);
  138. var el = document.createElement('div');
  139. var commands = kb.reduce(function(previous, current) {
  140. return previous + '<div class="ace_optionsMenuEntry"><span class="ace_optionsMenuCommand">'
  141. + current.command + '</span> : '
  142. + '<span class="ace_optionsMenuKey">' + current.key + '</span></div>';
  143. }, '');
  144. el.id = 'kbshortcutmenu';
  145. el.innerHTML = '<h1>Keyboard Shortcuts</h1>' + commands + '</div>';
  146. overlayPage(editor, el, '0', '0', '0', null);
  147. }
  148. };
  149. module.exports.init = function(editor) {
  150. Editor.prototype.showKeyboardShortcuts = function() {
  151. showKeyboardShortcuts(this);
  152. };
  153. editor.commands.addCommands([{
  154. name: "showKeyboardShortcuts",
  155. bindKey: {win: "Ctrl-Alt-h", mac: "Command-Alt-h"},
  156. exec: function(editor, line) {
  157. editor.showKeyboardShortcuts();
  158. }
  159. }]);
  160. };
  161. });
  162. ;
  163. (function() {
  164. ace.require(["ace/ext/keybinding_menu"], function() {});
  165. })();