ext-keybinding_menu.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  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. transition: all 0.3s\
  26. }\
  27. .ace_closeButton {\
  28. background: rgba(245, 146, 146, 0.5);\
  29. border: 1px solid #F48A8A;\
  30. border-radius: 50%;\
  31. padding: 7px;\
  32. position: absolute;\
  33. right: -8px;\
  34. top: -8px;\
  35. z-index: 100000;\
  36. }\
  37. .ace_closeButton{\
  38. background: rgba(245, 146, 146, 0.9);\
  39. }\
  40. .ace_optionsMenuKey {\
  41. color: darkslateblue;\
  42. font-weight: bold;\
  43. }\
  44. .ace_optionsMenuCommand {\
  45. color: darkcyan;\
  46. font-weight: normal;\
  47. }\
  48. .ace_optionsMenuEntry input, .ace_optionsMenuEntry button {\
  49. vertical-align: middle;\
  50. }\
  51. .ace_optionsMenuEntry button[ace_selected_button=true] {\
  52. background: #e7e7e7;\
  53. box-shadow: 1px 0px 2px 0px #adadad inset;\
  54. border-color: #adadad;\
  55. }\
  56. .ace_optionsMenuEntry button {\
  57. background: white;\
  58. border: 1px solid lightgray;\
  59. margin: 0px;\
  60. }\
  61. .ace_optionsMenuEntry button:hover{\
  62. background: #f0f0f0;\
  63. }";
  64. dom.importCssString(cssText);
  65. module.exports.overlayPage = function overlayPage(editor, contentElement, callback) {
  66. var closer = document.createElement('div');
  67. var ignoreFocusOut = false;
  68. function documentEscListener(e) {
  69. if (e.keyCode === 27) {
  70. close();
  71. }
  72. }
  73. function close() {
  74. if (!closer) return;
  75. document.removeEventListener('keydown', documentEscListener);
  76. closer.parentNode.removeChild(closer);
  77. if (editor) {
  78. editor.focus();
  79. }
  80. closer = null;
  81. callback && callback();
  82. }
  83. function setIgnoreFocusOut(ignore) {
  84. ignoreFocusOut = ignore;
  85. if (ignore) {
  86. closer.style.pointerEvents = "none";
  87. contentElement.style.pointerEvents = "auto";
  88. }
  89. }
  90. closer.style.cssText = 'margin: 0; padding: 0; ' +
  91. 'position: fixed; top:0; bottom:0; left:0; right:0;' +
  92. 'z-index: 9990; ' +
  93. (editor ? 'background-color: rgba(0, 0, 0, 0.3);' : '');
  94. closer.addEventListener('click', function(e) {
  95. if (!ignoreFocusOut) {
  96. close();
  97. }
  98. });
  99. document.addEventListener('keydown', documentEscListener);
  100. contentElement.addEventListener('click', function (e) {
  101. e.stopPropagation();
  102. });
  103. closer.appendChild(contentElement);
  104. document.body.appendChild(closer);
  105. if (editor) {
  106. editor.blur();
  107. }
  108. return {
  109. close: close,
  110. setIgnoreFocusOut: setIgnoreFocusOut
  111. };
  112. };
  113. });
  114. ace.define("ace/ext/menu_tools/get_editor_keyboard_shortcuts",["require","exports","module","ace/lib/keys"], function(require, exports, module) {
  115. "use strict";
  116. var keys = require("../../lib/keys");
  117. module.exports.getEditorKeybordShortcuts = function(editor) {
  118. var KEY_MODS = keys.KEY_MODS;
  119. var keybindings = [];
  120. var commandMap = {};
  121. editor.keyBinding.$handlers.forEach(function(handler) {
  122. var ckb = handler.commandKeyBinding;
  123. for (var i in ckb) {
  124. var key = i.replace(/(^|-)\w/g, function(x) { return x.toUpperCase(); });
  125. var commands = ckb[i];
  126. if (!Array.isArray(commands))
  127. commands = [commands];
  128. commands.forEach(function(command) {
  129. if (typeof command != "string")
  130. command = command.name;
  131. if (commandMap[command]) {
  132. commandMap[command].key += "|" + key;
  133. } else {
  134. commandMap[command] = {key: key, command: command};
  135. keybindings.push(commandMap[command]);
  136. }
  137. });
  138. }
  139. });
  140. return keybindings;
  141. };
  142. });
  143. 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) {
  144. "use strict";
  145. var Editor = require("../editor").Editor;
  146. function showKeyboardShortcuts (editor) {
  147. if(!document.getElementById('kbshortcutmenu')) {
  148. var overlayPage = require('./menu_tools/overlay_page').overlayPage;
  149. var getEditorKeybordShortcuts = require('./menu_tools/get_editor_keyboard_shortcuts').getEditorKeybordShortcuts;
  150. var kb = getEditorKeybordShortcuts(editor);
  151. var el = document.createElement('div');
  152. var commands = kb.reduce(function(previous, current) {
  153. return previous + '<div class="ace_optionsMenuEntry"><span class="ace_optionsMenuCommand">'
  154. + current.command + '</span> : '
  155. + '<span class="ace_optionsMenuKey">' + current.key + '</span></div>';
  156. }, '');
  157. el.id = 'kbshortcutmenu';
  158. el.innerHTML = '<h1>Keyboard Shortcuts</h1>' + commands + '</div>';
  159. overlayPage(editor, el);
  160. }
  161. }
  162. module.exports.init = function(editor) {
  163. Editor.prototype.showKeyboardShortcuts = function() {
  164. showKeyboardShortcuts(this);
  165. };
  166. editor.commands.addCommands([{
  167. name: "showKeyboardShortcuts",
  168. bindKey: {win: "Ctrl-Alt-h", mac: "Command-Alt-h"},
  169. exec: function(editor, line) {
  170. editor.showKeyboardShortcuts();
  171. }
  172. }]);
  173. };
  174. }); (function() {
  175. ace.require(["ace/ext/keybinding_menu"], function(m) {
  176. if (typeof module == "object" && typeof exports == "object" && module) {
  177. module.exports = m;
  178. }
  179. });
  180. })();