update styling and clean up demos
This commit is contained in:
parent
5894667b41
commit
63551228ee
20 changed files with 235 additions and 212 deletions
46
demo/keyboard_shortcuts.html
Normal file
46
demo/keyboard_shortcuts.html
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<title>Editor</title>
|
||||||
|
<style type="text/css" media="screen">
|
||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#editor {
|
||||||
|
margin: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<pre id="editor"></pre>
|
||||||
|
|
||||||
|
<script src="../build/src-noconflict/ace.js"></script>
|
||||||
|
<script>
|
||||||
|
var editor = ace.edit("editor")
|
||||||
|
editor.setTheme("ace/theme/twilight")
|
||||||
|
editor.session.setMode("ace/mode/html")
|
||||||
|
|
||||||
|
// add command to lazy-load keybinding_menu extension
|
||||||
|
editor.commands.addCommand({
|
||||||
|
name: "showKeyboardShortcuts",
|
||||||
|
bindKey: {win: "Ctrl-Alt-h", mac: "Command-Alt-h"},
|
||||||
|
exec: function(editor) {
|
||||||
|
config.loadModule("ace/ext/keybinding_menu", function(module) {
|
||||||
|
module.init(editor);
|
||||||
|
editor.showKeyboardShortcuts()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script src="./demo_helper.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -33,7 +33,8 @@ define(function(require, exports, module) {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
require("ace/lib/fixoldbrowsers");
|
require("ace/lib/fixoldbrowsers");
|
||||||
require("ace/config").init();
|
var config = require("ace/config");
|
||||||
|
config.init();
|
||||||
var env = {};
|
var env = {};
|
||||||
|
|
||||||
var dom = require("ace/lib/dom");
|
var dom = require("ace/lib/dom");
|
||||||
|
|
@ -151,6 +152,15 @@ env.editor.commands.addCommands([{
|
||||||
editor.cmdLine.setValue(r + "")
|
editor.cmdLine.setValue(r + "")
|
||||||
},
|
},
|
||||||
readOnly: true
|
readOnly: true
|
||||||
|
}, {
|
||||||
|
name: "showKeyboardShortcuts",
|
||||||
|
bindKey: {win: "Ctrl-Alt-h", mac: "Command-Alt-h"},
|
||||||
|
exec: function(editor) {
|
||||||
|
config.loadModule("ace/ext/keybinding_menu", function(module) {
|
||||||
|
module.init(editor);
|
||||||
|
editor.showKeyboardShortcuts()
|
||||||
|
})
|
||||||
|
}
|
||||||
}]);
|
}]);
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -21,24 +21,10 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<pre id="editor">var editor = ace.edit("editor");
|
<pre id="editor"></pre>
|
||||||
editor.setTheme("ace/theme/twilight");
|
|
||||||
(function () {
|
|
||||||
var modelist = ace.require('ace/ext/modelist');
|
|
||||||
// the file path could come from an xmlhttp request, a drop event,
|
|
||||||
// or any other scriptable file loading process.
|
|
||||||
// Extensions could consume the modelist and use it to dynamically
|
|
||||||
// set the editor mode. Webmasters could use it in their scripts
|
|
||||||
// for site specific purposes as well.
|
|
||||||
var filePath = 'blahblah/weee/some.js';
|
|
||||||
var mode = modelist.getModeFromPath(filePath).mode;
|
|
||||||
console.log(mode);
|
|
||||||
editor.getSession().setMode(mode);
|
|
||||||
}());
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<script src="../build/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
|
<script src="../build/src-noconflict/ace.js"></script>
|
||||||
<script src="../build/src-noconflict/ext-modelist.js" type="text/javascript" charset="utf-8"></script>
|
<script src="../build/src-noconflict/ext-modelist.js"></script>
|
||||||
<script>
|
<script>
|
||||||
var editor = ace.edit("editor");
|
var editor = ace.edit("editor");
|
||||||
editor.setTheme("ace/theme/twilight");
|
editor.setTheme("ace/theme/twilight");
|
||||||
|
|
@ -52,10 +38,11 @@ editor.setTheme("ace/theme/twilight");
|
||||||
var filePath = 'blahblah/weee/some.js';
|
var filePath = 'blahblah/weee/some.js';
|
||||||
var mode = modelist.getModeFromPath(filePath).mode;
|
var mode = modelist.getModeFromPath(filePath).mode;
|
||||||
console.log(mode);
|
console.log(mode);
|
||||||
editor.getSession().setMode(mode);
|
editor.session.setMode(mode);
|
||||||
}());
|
}());
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script src="./demo_helper.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -76,7 +76,7 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../build/src/ace.js" type="text/javascript" charset="utf-8"></script>
|
<script src="../build/src/ace.js"></script>
|
||||||
<script>
|
<script>
|
||||||
var $ = document.getElementById.bind(document);
|
var $ = document.getElementById.bind(document);
|
||||||
var dom = require("ace/lib/dom");
|
var dom = require("ace/lib/dom");
|
||||||
|
|
|
||||||
|
|
@ -21,27 +21,24 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<pre id="editor">Editor.prototype.showSettingsMenu = function () {
|
<pre id="editor"></pre>
|
||||||
showSettingsMenu(this);
|
|
||||||
};
|
|
||||||
editor.commands.addCommands([{
|
|
||||||
name: "showSettingsMenu",
|
|
||||||
bindKey: {win: "Ctrl-q", mac: "Command-q"},
|
|
||||||
exec: function(editor, line) {
|
|
||||||
editor.showSettingsMenu();
|
|
||||||
},
|
|
||||||
readOnly: true
|
|
||||||
}]);
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<script src="../build/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
|
<script src="../build/src-noconflict/ace.js"></script>
|
||||||
<script src="../build/src-noconflict/ext-show_settings_menu.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script>
|
<script>
|
||||||
var editor = ace.edit("editor");
|
var editor = ace.edit("editor");
|
||||||
ace.require('ace/ext/show_settings_menu').init(editor);
|
ace.require('ace/ext/show_settings_menu').init(editor);
|
||||||
editor.setTheme("ace/theme/twilight");
|
editor.setTheme("ace/theme/twilight");
|
||||||
editor.getSession().setMode("ace/mode/javascript");
|
editor.session.setMode("ace/mode/html");
|
||||||
|
editor.commands.addCommands([{
|
||||||
|
name: "showSettingsMenu",
|
||||||
|
bindKey: {win: "Ctrl-q", mac: "Command-q"},
|
||||||
|
exec: function(editor) {
|
||||||
|
editor.showSettingsMenu();
|
||||||
|
},
|
||||||
|
readOnly: true
|
||||||
|
}]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script src="./demo_helper.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<title>Editor</title>
|
|
||||||
<style type="text/css" media="screen">
|
|
||||||
body {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#editor {
|
|
||||||
margin: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<pre id="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();
|
|
||||||
}
|
|
||||||
}]);
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<script src="../build/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../build/src-noconflict/ext-show_keyboard_shortcuts.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script>
|
|
||||||
var editor = ace.edit("editor");
|
|
||||||
ace.require('ace/ext/show_keyboard_shortcuts').init(editor);
|
|
||||||
editor.setTheme("ace/theme/twilight");
|
|
||||||
editor.getSession().setMode("ace/mode/javascript");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -23,8 +23,8 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<script src="../kitchen-sink/require.js" type="text/javascript" charset="utf-8"></script>
|
<script src="../kitchen-sink/require.js"></script>
|
||||||
<script type="text/javascript" charset="utf-8">
|
<script>
|
||||||
|
|
||||||
require(["ace/ext/static_highlight", "ace/mode/javascript", "ace/theme/twilight", "ace/lib/dom"], function() {
|
require(["ace/ext/static_highlight", "ace/mode/javascript", "ace/theme/twilight", "ace/lib/dom"], function() {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1574,7 +1574,6 @@ var EditSession = function(text, mode) {
|
||||||
* @param {Number} desiredLimit The new wrap limit
|
* @param {Number} desiredLimit The new wrap limit
|
||||||
* @returns {Boolean}
|
* @returns {Boolean}
|
||||||
*
|
*
|
||||||
*
|
|
||||||
* @private
|
* @private
|
||||||
**/
|
**/
|
||||||
this.adjustWrapLimit = function(desiredLimit, $printMargin) {
|
this.adjustWrapLimit = function(desiredLimit, $printMargin) {
|
||||||
|
|
@ -1617,11 +1616,10 @@ var EditSession = function(text, mode) {
|
||||||
* Sets the line length for soft wrap in the editor. Lines will break
|
* Sets the line length for soft wrap in the editor. Lines will break
|
||||||
* at a minimum of the given length minus 20 chars and at a maximum
|
* at a minimum of the given length minus 20 chars and at a maximum
|
||||||
* of the given number of chars.
|
* of the given number of chars.
|
||||||
* @param {number} limit The maximum line length in chars, for soft
|
* @param {number} limit The maximum line length in chars, for soft wrapping lines.
|
||||||
* wrapping lines.
|
|
||||||
*/
|
*/
|
||||||
this.setWrapLimit = function (limit) {
|
this.setWrapLimit = function (limit) {
|
||||||
this.setWrapLimitRange(limit - 20, limit);
|
this.setWrapLimitRange(limit, limit);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -34,6 +34,7 @@ define(function(require, exports, module) {
|
||||||
require("./lib/fixoldbrowsers");
|
require("./lib/fixoldbrowsers");
|
||||||
|
|
||||||
var oop = require("./lib/oop");
|
var oop = require("./lib/oop");
|
||||||
|
var dom = require("./lib/dom");
|
||||||
var lang = require("./lib/lang");
|
var lang = require("./lib/lang");
|
||||||
var useragent = require("./lib/useragent");
|
var useragent = require("./lib/useragent");
|
||||||
var TextInput = require("./keyboard/textinput").TextInput;
|
var TextInput = require("./keyboard/textinput").TextInput;
|
||||||
|
|
@ -118,7 +119,6 @@ var Editor = function(renderer, session) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns the keyboard handler, such as "vim" or "windows".
|
* Returns the keyboard handler, such as "vim" or "windows".
|
||||||
*
|
*
|
||||||
|
|
@ -169,7 +169,6 @@ var Editor = function(renderer, session) {
|
||||||
selection.removeEventListener("changeSelection", this.$onSelectionChange);
|
selection.removeEventListener("changeSelection", this.$onSelectionChange);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
this.session = session;
|
this.session = session;
|
||||||
|
|
||||||
this.$onDocumentChange = this.onDocumentChange.bind(this);
|
this.$onDocumentChange = this.onDocumentChange.bind(this);
|
||||||
|
|
@ -345,8 +344,8 @@ var Editor = function(renderer, session) {
|
||||||
* Gets the current font size of the editor text.
|
* Gets the current font size of the editor text.
|
||||||
*/
|
*/
|
||||||
this.getFontSize = function () {
|
this.getFontSize = function () {
|
||||||
return getComputedStyle(
|
return this.setOption("fontSize") ||
|
||||||
this.container).getPropertyValue('font-size');
|
dom.computedStyle(ace.container, "fontSize")
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -2199,7 +2198,6 @@ var Editor = function(renderer, session) {
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
this.$resetCursorStyle = function() {
|
this.$resetCursorStyle = function() {
|
||||||
var style = this.$cursorStyle || "ace";
|
var style = this.$cursorStyle || "ace";
|
||||||
var cursorLayer = this.renderer.$cursorLayer;
|
var cursorLayer = this.renderer.$cursorLayer;
|
||||||
|
|
|
||||||
|
|
@ -60,13 +60,12 @@ define(function(require, exports, module) {
|
||||||
var kb = getEditorKeybordShortcuts(editor);
|
var kb = getEditorKeybordShortcuts(editor);
|
||||||
var el = document.createElement('div');
|
var el = document.createElement('div');
|
||||||
var commands = kb.reduce(function(previous, current) {
|
var commands = kb.reduce(function(previous, current) {
|
||||||
return previous + '<div><b>' + current.command + '</b> : ' +
|
return previous + '<div class="ace_optionsMenuEntry"><b>' + current.command + '</b> : ' +
|
||||||
current.key + '</div>';
|
current.key + '</div>';
|
||||||
}, '');
|
}, '');
|
||||||
|
|
||||||
el.id = 'kbshortcutmenu';
|
el.id = 'kbshortcutmenu';
|
||||||
el.innerHTML = '<h1>Keyboard Shortcuts</h1>' + commands + '</div>';
|
el.innerHTML = '<h1>Keyboard Shortcuts</h1>' + commands + '</div>';
|
||||||
el.style.cssText = 'margin:0; padding:0;';
|
|
||||||
overlayPage(editor, el, '0', '0', '0', null);
|
overlayPage(editor, el, '0', '0', '0', null);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -69,10 +69,19 @@ module.exports.addEditorMenuOptions = function addEditorMenuOptions (editor) {
|
||||||
}, {
|
}, {
|
||||||
"textContent" : "auto",
|
"textContent" : "auto",
|
||||||
"value" : "auto"
|
"value" : "auto"
|
||||||
}
|
}],
|
||||||
],
|
|
||||||
"setTheme" : [],
|
"setTheme" : [],
|
||||||
"setMode" : []
|
"setMode" : [],
|
||||||
|
"setKeyboardHandler": [{
|
||||||
|
"textContent" : "ace",
|
||||||
|
"value" : ""
|
||||||
|
}, {
|
||||||
|
"textContent" : "vim",
|
||||||
|
"value" : "ace/keyboard/vim"
|
||||||
|
}, {
|
||||||
|
"textContent" : "emacs",
|
||||||
|
"value" : "ace/keyboard/emacs"
|
||||||
|
}]
|
||||||
};
|
};
|
||||||
|
|
||||||
editor.menuOptions.setTheme = themelist.themes.map(function(theme) {
|
editor.menuOptions.setTheme = themelist.themes.map(function(theme) {
|
||||||
|
|
|
||||||
|
|
@ -30,16 +30,8 @@
|
||||||
*
|
*
|
||||||
* ***** END LICENSE BLOCK ***** */
|
* ***** END LICENSE BLOCK ***** */
|
||||||
|
|
||||||
/*jslint
|
/*jslint indent: 4, maxerr: 50, white: true, browser: true, vars: true*/
|
||||||
indent: 4,
|
/*global define*/
|
||||||
maxerr: 50,
|
|
||||||
white: true,
|
|
||||||
browser: true,
|
|
||||||
vars: true
|
|
||||||
*/
|
|
||||||
/*global
|
|
||||||
define
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Generates the settings menu
|
* Generates the settings menu
|
||||||
|
|
@ -93,7 +85,7 @@ module.exports.generateSettingsMenu = function generateSettingsMenu (editor) {
|
||||||
*/
|
*/
|
||||||
function wrapElements() {
|
function wrapElements() {
|
||||||
var topmenu = document.createElement('div');
|
var topmenu = document.createElement('div');
|
||||||
topmenu.setAttribute('id', 'settingsmenu');
|
topmenu.setAttribute('id', 'ace_settingsmenu');
|
||||||
elements.forEach(function(element) {
|
elements.forEach(function(element) {
|
||||||
topmenu.appendChild(element);
|
topmenu.appendChild(element);
|
||||||
});
|
});
|
||||||
|
|
@ -121,19 +113,15 @@ module.exports.generateSettingsMenu = function generateSettingsMenu (editor) {
|
||||||
var el;
|
var el;
|
||||||
var div = document.createElement('div');
|
var div = document.createElement('div');
|
||||||
div.setAttribute('contains', item);
|
div.setAttribute('contains', item);
|
||||||
div.setAttribute('class', 'menuEntry');
|
div.setAttribute('class', 'ace_optionsMenuEntry');
|
||||||
div.setAttribute('style', 'clear: both;');
|
div.setAttribute('style', 'clear: both;');
|
||||||
|
|
||||||
div.appendChild(egen.createLabel(
|
div.appendChild(egen.createLabel(
|
||||||
item.replace(
|
item.replace(/^set/, '').replace(/([A-Z])/g, ' $1').trim(),
|
||||||
/^set/, ''
|
|
||||||
).replace(
|
|
||||||
/([A-Z])/g, ' $1'
|
|
||||||
).trim(),
|
|
||||||
item
|
item
|
||||||
));
|
));
|
||||||
|
|
||||||
if(Array.isArray(val)) {
|
if (Array.isArray(val)) {
|
||||||
el = egen.createSelection(item, val, clss);
|
el = egen.createSelection(item, val, clss);
|
||||||
el.addEventListener('change', function(e) {
|
el.addEventListener('change', function(e) {
|
||||||
try{
|
try{
|
||||||
|
|
@ -226,7 +214,7 @@ module.exports.generateSettingsMenu = function generateSettingsMenu (editor) {
|
||||||
* @param {object} setObj An item from the array returned by
|
* @param {object} setObj An item from the array returned by
|
||||||
* `getSetFunctions`.
|
* `getSetFunctions`.
|
||||||
*/
|
*/
|
||||||
function handleSet (setObj) {
|
function handleSet(setObj) {
|
||||||
var item = setObj.functionName;
|
var item = setObj.functionName;
|
||||||
var esr = setObj.parentObj;
|
var esr = setObj.parentObj;
|
||||||
var clss = setObj.parentName;
|
var clss = setObj.parentName;
|
||||||
|
|
|
||||||
|
|
@ -30,16 +30,8 @@
|
||||||
*
|
*
|
||||||
* ***** END LICENSE BLOCK ***** */
|
* ***** END LICENSE BLOCK ***** */
|
||||||
|
|
||||||
/*jslint
|
/*jslint indent: 4, maxerr: 50, white: true, browser: true, vars: true */
|
||||||
indent: 4,
|
/*global define*/
|
||||||
maxerr: 50,
|
|
||||||
white: true,
|
|
||||||
browser: true,
|
|
||||||
vars: true
|
|
||||||
*/
|
|
||||||
/*global
|
|
||||||
define
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get Set Functions
|
* Get Set Functions
|
||||||
|
|
@ -113,8 +105,7 @@ module.exports.getSetFunctions = function getSetFunctions (editor) {
|
||||||
'setScrollTop',
|
'setScrollTop',
|
||||||
'setScrollLeft',
|
'setScrollLeft',
|
||||||
'setSelectionStyle',
|
'setSelectionStyle',
|
||||||
'setWrapLimitRange',
|
'setWrapLimitRange'
|
||||||
'setKeyboardHandler'
|
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -127,15 +118,10 @@ module.exports.getSetFunctions = function getSetFunctions (editor) {
|
||||||
* Matthew Christopher Kastor-Inare III </a><br />
|
* Matthew Christopher Kastor-Inare III </a><br />
|
||||||
* ☭ Hial Atropa!! ☭
|
* ☭ Hial Atropa!! ☭
|
||||||
*/
|
*/
|
||||||
[
|
['renderer', 'session', 'editor'].forEach(function(esra) {
|
||||||
'renderer',
|
|
||||||
'session',
|
|
||||||
'editor'
|
|
||||||
].forEach(function(esra) {
|
|
||||||
var fn;
|
|
||||||
var esr = my[esra];
|
var esr = my[esra];
|
||||||
var clss = esra;
|
var clss = esra;
|
||||||
for(fn in esr) {
|
for(var fn in esr) {
|
||||||
if(skip.indexOf(fn) === -1) {
|
if(skip.indexOf(fn) === -1) {
|
||||||
if(/^set/.test(fn) && opts.indexOf(fn) === -1) {
|
if(/^set/.test(fn) && opts.indexOf(fn) === -1) {
|
||||||
// found set function
|
// found set function
|
||||||
|
|
|
||||||
|
|
@ -45,6 +45,9 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
var dom = require("../../lib/dom");
|
||||||
|
var cssText = require("../../requirejs/text!./settings_menu.css");
|
||||||
|
dom.importCssString(cssText);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Generates an overlay for displaying menus. The overlay is an absolutely
|
* Generates an overlay for displaying menus. The overlay is an absolutely
|
||||||
|
|
@ -59,16 +62,16 @@ define(function(require, exports, module) {
|
||||||
* @param {string|number} bottom absolute position value.
|
* @param {string|number} bottom absolute position value.
|
||||||
* @param {string|number} left absolute position value.
|
* @param {string|number} left absolute position value.
|
||||||
*/
|
*/
|
||||||
module.exports.overlayPage = function overlayPage (editor, contentElement, top, right, bottom, left) {
|
module.exports.overlayPage = function overlayPage(editor, contentElement, top, right, bottom, left) {
|
||||||
top = (top) ? 'top: ' + top + ';' : '';
|
top = top ? 'top: ' + top + ';' : '';
|
||||||
bottom = (bottom) ? 'bottom: ' + bottom + ';' : '';
|
bottom = bottom ? 'bottom: ' + bottom + ';' : '';
|
||||||
right = (right) ? 'right: ' + right + ';' : '';
|
right = right ? 'right: ' + right + ';' : '';
|
||||||
left = (left) ? 'left: ' + left + ';' : '';
|
left = left ? 'left: ' + left + ';' : '';
|
||||||
|
|
||||||
var closer = document.createElement('div');
|
var closer = document.createElement('div');
|
||||||
var contentContainer = document.createElement('div');
|
var contentContainer = document.createElement('div');
|
||||||
|
|
||||||
function documentEscListener (e) {
|
function documentEscListener(e) {
|
||||||
if (e.keyCode === 27) {
|
if (e.keyCode === 27) {
|
||||||
closer.click();
|
closer.click();
|
||||||
}
|
}
|
||||||
|
|
@ -77,7 +80,7 @@ module.exports.overlayPage = function overlayPage (editor, contentElement, top,
|
||||||
closer.style.cssText = 'margin: 0; padding: 0; ' +
|
closer.style.cssText = 'margin: 0; padding: 0; ' +
|
||||||
'position: fixed; top:0; bottom:0; left:0; right:0;' +
|
'position: fixed; top:0; bottom:0; left:0; right:0;' +
|
||||||
'z-index: 9990; ' +
|
'z-index: 9990; ' +
|
||||||
'background-color: rgba(0, 0, 0, 0.2);';
|
'background-color: rgba(0, 0, 0, 0.3);';
|
||||||
closer.addEventListener('click', function() {
|
closer.addEventListener('click', function() {
|
||||||
document.removeEventListener('keydown', documentEscListener);
|
document.removeEventListener('keydown', documentEscListener);
|
||||||
closer.parentNode.removeChild(closer);
|
closer.parentNode.removeChild(closer);
|
||||||
|
|
@ -87,17 +90,23 @@ module.exports.overlayPage = function overlayPage (editor, contentElement, top,
|
||||||
// click closer if esc key is pressed
|
// click closer if esc key is pressed
|
||||||
document.addEventListener('keydown', documentEscListener);
|
document.addEventListener('keydown', documentEscListener);
|
||||||
|
|
||||||
contentContainer.style.cssText = 'margin: 0; padding: 0; ' +
|
contentContainer.style.cssText = top + right + bottom + left;
|
||||||
'position: absolute;' +
|
|
||||||
top + right + bottom + left +
|
|
||||||
'z-index: 9991; ' +
|
|
||||||
'box-shadow: rgba(126, 126, 126, 0.25) -20px 10px 25px; ' +
|
|
||||||
'background-color: rgba(255, 255, 255, 0.6);' +
|
|
||||||
'color: black; overflow: auto;';
|
|
||||||
contentContainer.addEventListener('click', function(e) {
|
contentContainer.addEventListener('click', function(e) {
|
||||||
e.stopPropagation();
|
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);
|
contentContainer.appendChild(contentElement);
|
||||||
closer.appendChild(contentContainer);
|
closer.appendChild(contentContainer);
|
||||||
document.body.appendChild(closer);
|
document.body.appendChild(closer);
|
||||||
|
|
|
||||||
40
lib/ace/ext/menu_tools/settings_menu.css
Normal file
40
lib/ace/ext/menu_tools/settings_menu.css
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
#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;
|
||||||
|
left: -8px;
|
||||||
|
top: -8px;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.ace_closeButton{
|
||||||
|
background: rgba(245, 146, 146, 0.9);
|
||||||
|
}
|
||||||
|
|
@ -44,33 +44,33 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
"use strict";
|
"use strict";
|
||||||
/**
|
var generateSettingsMenu = require('./menu_tools/generate_settings_menu').generateSettingsMenu;
|
||||||
|
var overlayPage = require('./menu_tools/overlay_page').overlayPage;
|
||||||
|
/**
|
||||||
* This displays the settings menu if it is not already being shown.
|
* This displays the settings menu if it is not already being shown.
|
||||||
* @author <a href="mailto:matthewkastor@gmail.com">
|
* @author <a href="mailto:matthewkastor@gmail.com">
|
||||||
* Matthew Christopher Kastor-Inare III </a><br />
|
* Matthew Christopher Kastor-Inare III </a><br />
|
||||||
* ☭ Hial Atropa!! ☭
|
* ☭ Hial Atropa!! ☭
|
||||||
* @param {ace.Editor} editor An instance of the ace editor.
|
* @param {ace.Editor} editor An instance of the ace editor.
|
||||||
*/
|
*/
|
||||||
function showSettingsMenu (editor) {
|
function showSettingsMenu(editor) {
|
||||||
var overlayPage = require('./menu_tools/overlay_page').overlayPage;
|
|
||||||
var generateSettingsMenu = require(
|
|
||||||
'./menu_tools/generate_settings_menu').generateSettingsMenu;
|
|
||||||
// make sure the menu isn't open already.
|
// make sure the menu isn't open already.
|
||||||
if(!document.getElementById('settingsmenu')) {
|
var sm = document.getElementById('ace_settingsmenu');
|
||||||
|
if (!sm)
|
||||||
overlayPage(editor, generateSettingsMenu(editor), '0', '0', '0');
|
overlayPage(editor, generateSettingsMenu(editor), '0', '0', '0');
|
||||||
}
|
}
|
||||||
}
|
|
||||||
/**
|
/**
|
||||||
* Initializes the settings menu extension. It adds the showSettingsMenu
|
* Initializes the settings menu extension. It adds the showSettingsMenu
|
||||||
* method to the given editor object and adds the showSettingsMenu command
|
* method to the given editor object and adds the showSettingsMenu command
|
||||||
* to the editor with appropriate keyboard shortcuts.
|
* to the editor with appropriate keyboard shortcuts.
|
||||||
* @param {ace.Editor} editor An instance of the Editor.
|
* @param {ace.Editor} editor An instance of the Editor.
|
||||||
*/
|
*/
|
||||||
module.exports.init = function(editor) {
|
module.exports.init = function(editor) {
|
||||||
var Editor = require("ace/editor").Editor;
|
var Editor = require("ace/editor").Editor;
|
||||||
Editor.prototype.showSettingsMenu = function() {
|
Editor.prototype.showSettingsMenu = function() {
|
||||||
showSettingsMenu(this);
|
showSettingsMenu(this);
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
@ -52,7 +52,8 @@ var screenToTextBlockCoordinates = function(x, y) {
|
||||||
var HashHandler = require("./hash_handler").HashHandler;
|
var HashHandler = require("./hash_handler").HashHandler;
|
||||||
exports.handler = new HashHandler();
|
exports.handler = new HashHandler();
|
||||||
|
|
||||||
exports.handler.isEmacs = true
|
exports.handler.isEmacs = true;
|
||||||
|
exports.handler.$id = "ace/keyboard/emacs";
|
||||||
|
|
||||||
var initialized = false;
|
var initialized = false;
|
||||||
var $formerLongWords;
|
var $formerLongWords;
|
||||||
|
|
|
||||||
|
|
@ -58,6 +58,7 @@ var startCommands = {
|
||||||
};
|
};
|
||||||
|
|
||||||
exports.handler = {
|
exports.handler = {
|
||||||
|
$id: "ace/keyboard/vim",
|
||||||
// workaround for j not repeating with `defaults write -g ApplePressAndHoldEnabled -bool true`
|
// workaround for j not repeating with `defaults write -g ApplePressAndHoldEnabled -bool true`
|
||||||
handleMacRepeat: function(data, hashId, key) {
|
handleMacRepeat: function(data, hashId, key) {
|
||||||
if (hashId == -1) {
|
if (hashId == -1) {
|
||||||
|
|
|
||||||
|
|
@ -219,6 +219,6 @@ var UIWorkerClient = function(topLevelNamespaces, mod, classname) {
|
||||||
UIWorkerClient.prototype = WorkerClient.prototype;
|
UIWorkerClient.prototype = WorkerClient.prototype;
|
||||||
|
|
||||||
exports.UIWorkerClient = UIWorkerClient;
|
exports.UIWorkerClient = UIWorkerClient;
|
||||||
exports.WorkerClient = UIWorkerClient;
|
exports.WorkerClient = WorkerClient;
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue