jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update styling and clean up demos

Browse source
This commit is contained in:
nightwing 2013-04-14 21:20:54 +04:00
commit 63551228ee
20 changed files with 235 additions and 212 deletions
Download patch file Download diff file Expand all files Collapse all files

46
demo/keyboard_shortcuts.html Normal file
View 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>

12
demo/kitchen-sink/demo.js
View file

@ -33,7 +33,8 @@ define(function(require, exports, module) {
"use strict";
require("ace/lib/fixoldbrowsers");
require("ace/config").init();
var config = require("ace/config");
config.init();
var env = {};
var dom = require("ace/lib/dom");
@ -151,6 +152,15 @@ env.editor.commands.addCommands([{
editor.cmdLine.setValue(r + "")
},
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()
})
}
}]);

23
demo/modelist.html
View file

@ -21,24 +21,10 @@
</head>
<body>
<pre id="editor">var editor = ace.edit("editor");
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>
<pre id="editor"></pre>
<script src="../build/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="../build/src-noconflict/ext-modelist.js" type="text/javascript" charset="utf-8"></script>
<script src="../build/src-noconflict/ace.js"></script>
<script src="../build/src-noconflict/ext-modelist.js"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
@ -52,10 +38,11 @@ editor.setTheme("ace/theme/twilight");
var filePath = 'blahblah/weee/some.js';
var mode = modelist.getModeFromPath(filePath).mode;
console.log(mode);
editor.getSession().setMode(mode);
editor.session.setMode(mode);
}());
</script>
<script src="./demo_helper.js"></script>
</body>
</html>

2
demo/scrollable-page.html
View file

@ -76,7 +76,7 @@
</div>
<script src="../build/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="../build/src/ace.js"></script>
<script>
var $ = document.getElementById.bind(document);
var dom = require("ace/lib/dom");

27
demo/show_settings_menu.html → demo/settings_menu.html
View file

@ -21,27 +21,24 @@
</head>
<body>
<pre id="editor">Editor.prototype.showSettingsMenu = function () {
showSettingsMenu(this);
};
editor.commands.addCommands([{
name: "showSettingsMenu",
bindKey: {win: "Ctrl-q", mac: "Command-q"},
exec: function(editor, line) {
editor.showSettingsMenu();
},
readOnly: true
}]);
</pre>
<pre id="editor"></pre>
<script src="../build/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="../build/src-noconflict/ext-show_settings_menu.js" type="text/javascript" charset="utf-8"></script>
<script src="../build/src-noconflict/ace.js"></script>
<script>
var editor = ace.edit("editor");
ace.require('ace/ext/show_settings_menu').init(editor);
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 src="./demo_helper.js"></script>
</body>
</html>

46
demo/show_keyboard_shortcuts.html
View file

@ -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>

4
demo/static-highlighter/client.html
View file

@ -23,8 +23,8 @@
}
};
</script>
<script src="../kitchen-sink/require.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
<script src="../kitchen-sink/require.js"></script>
<script>
require(["ace/ext/static_highlight", "ace/mode/javascript", "ace/theme/twilight", "ace/lib/dom"], function() {

8
lib/ace/edit_session.js
View file

@ -1574,7 +1574,6 @@ var EditSession = function(text, mode) {
* @param {Number} desiredLimit The new wrap limit
* @returns {Boolean}
*
*
* @private
**/
this.adjustWrapLimit = function(desiredLimit, $printMargin) {
@ -1602,7 +1601,7 @@ var EditSession = function(text, mode) {
if (max)
wrapLimit = Math.min(max, wrapLimit);
return wrapLimit;
return wrapLimit;
};
/**
@ -1617,11 +1616,10 @@ var EditSession = function(text, mode) {
* 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
* of the given number of chars.
* @param {number} limit The maximum line length in chars, for soft
* wrapping lines.
* @param {number} limit The maximum line length in chars, for soft wrapping lines.
*/
this.setWrapLimit = function (limit) {
this.setWrapLimitRange(limit - 20, limit);
this.setWrapLimitRange(limit, limit);
};
/**

14
lib/ace/editor.js
View file

@ -34,6 +34,7 @@ define(function(require, exports, module) {
require("./lib/fixoldbrowsers");
var oop = require("./lib/oop");
var dom = require("./lib/dom");
var lang = require("./lib/lang");
var useragent = require("./lib/useragent");
var TextInput = require("./keyboard/textinput").TextInput;
@ -118,7 +119,6 @@ var Editor = function(renderer, session) {
}
};
/**
* Returns the keyboard handler, such as "vim" or "windows".
*
@ -169,7 +169,6 @@ var Editor = function(renderer, session) {
selection.removeEventListener("changeSelection", this.$onSelectionChange);
}
this.session = session;
this.$onDocumentChange = this.onDocumentChange.bind(this);
@ -345,10 +344,10 @@ var Editor = function(renderer, session) {
* Gets the current font size of the editor text.
*/
this.getFontSize = function () {
return getComputedStyle(
this.container).getPropertyValue('font-size');
return this.setOption("fontSize") ||
dom.computedStyle(ace.container, "fontSize")
};
/**
* Set a new font size (in pixels) for the editor text.
* @param {String} size A font size ( _e.g._ "12px")
@ -2197,8 +2196,7 @@ var Editor = function(renderer, session) {
this.renderer.removeEventListener("beforeRender", onBeforeRender);
};
};
this.$resetCursorStyle = function() {
var style = this.$cursorStyle || "ace";
@ -2208,7 +2206,7 @@ var Editor = function(renderer, session) {
cursorLayer.setSmoothBlinking(style == "smooth");
cursorLayer.isBlinking = !this.$readOnly && style != "wide";
};
}).call(Editor.prototype);

3
lib/ace/ext/keybinding_menu.js
View file

@ -60,13 +60,12 @@ define(function(require, exports, module) {
var kb = getEditorKeybordShortcuts(editor);
var el = document.createElement('div');
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>';
}, '');
el.id = 'kbshortcutmenu';
el.innerHTML = '<h1>Keyboard Shortcuts</h1>' + commands + '</div>';
el.style.cssText = 'margin:0; padding:0;';
overlayPage(editor, el, '0', '0', '0', null);
}
};

31
lib/ace/ext/menu_tools/add_editor_menu_options.js
View file

@ -61,18 +61,27 @@ module.exports.addEditorMenuOptions = function addEditorMenuOptions (editor) {
var themelist = require('../themelist');
editor.menuOptions = {
"setNewLineMode" : [{
"textContent" : "unix",
"value" : "unix"
}, {
"textContent" : "windows",
"value" : "windows"
}, {
"textContent" : "auto",
"value" : "auto"
}
],
"textContent" : "unix",
"value" : "unix"
}, {
"textContent" : "windows",
"value" : "windows"
}, {
"textContent" : "auto",
"value" : "auto"
}],
"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) {

26
lib/ace/ext/menu_tools/generate_settings_menu.js
View file

@ -30,16 +30,8 @@
*
* ***** END LICENSE BLOCK ***** */
/*jslint
indent: 4,
maxerr: 50,
white: true,
browser: true,
vars: true
*/
/*global
define
*/
/*jslint indent: 4, maxerr: 50, white: true, browser: true, vars: true*/
/*global define*/
/**
* Generates the settings menu
@ -93,7 +85,7 @@ module.exports.generateSettingsMenu = function generateSettingsMenu (editor) {
*/
function wrapElements() {
var topmenu = document.createElement('div');
topmenu.setAttribute('id', 'settingsmenu');
topmenu.setAttribute('id', 'ace_settingsmenu');
elements.forEach(function(element) {
topmenu.appendChild(element);
});
@ -121,19 +113,15 @@ module.exports.generateSettingsMenu = function generateSettingsMenu (editor) {
var el;
var div = document.createElement('div');
div.setAttribute('contains', item);
div.setAttribute('class', 'menuEntry');
div.setAttribute('class', 'ace_optionsMenuEntry');
div.setAttribute('style', 'clear: both;');
div.appendChild(egen.createLabel(
item.replace(
/^set/, ''
).replace(
/([A-Z])/g, ' $1'
).trim(),
item.replace(/^set/, '').replace(/([A-Z])/g, ' $1').trim(),
item
));
if(Array.isArray(val)) {
if (Array.isArray(val)) {
el = egen.createSelection(item, val, clss);
el.addEventListener('change', function(e) {
try{
@ -226,7 +214,7 @@ module.exports.generateSettingsMenu = function generateSettingsMenu (editor) {
* @param {object} setObj An item from the array returned by
* `getSetFunctions`.
*/
function handleSet (setObj) {
function handleSet(setObj) {
var item = setObj.functionName;
var esr = setObj.parentObj;
var clss = setObj.parentName;

24
lib/ace/ext/menu_tools/get_set_functions.js
View file

@ -30,16 +30,8 @@
*
* ***** END LICENSE BLOCK ***** */
/*jslint
indent: 4,
maxerr: 50,
white: true,
browser: true,
vars: true
*/
/*global
define
*/
/*jslint indent: 4, maxerr: 50, white: true, browser: true, vars: true */
/*global define*/
/**
* Get Set Functions
@ -113,8 +105,7 @@ module.exports.getSetFunctions = function getSetFunctions (editor) {
'setScrollTop',
'setScrollLeft',
'setSelectionStyle',
'setWrapLimitRange',
'setKeyboardHandler'
'setWrapLimitRange'
];
@ -127,15 +118,10 @@ module.exports.getSetFunctions = function getSetFunctions (editor) {
* Matthew Christopher Kastor-Inare III </a><br />
* ☭ Hial Atropa!! ☭
*/
[
'renderer',
'session',
'editor'
].forEach(function(esra) {
var fn;
['renderer', 'session', 'editor'].forEach(function(esra) {
var esr = my[esra];
var clss = esra;
for(fn in esr) {
for(var fn in esr) {
if(skip.indexOf(fn) === -1) {
if(/^set/.test(fn) && opts.indexOf(fn) === -1) {
// found set function

37
lib/ace/ext/menu_tools/overlay_page.js
View file

@ -45,6 +45,9 @@
define(function(require, exports, module) {
'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
@ -59,16 +62,16 @@ define(function(require, exports, module) {
* @param {string|number} bottom absolute position value.
* @param {string|number} left absolute position value.
*/
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 + ';' : '';
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) {
function documentEscListener(e) {
if (e.keyCode === 27) {
closer.click();
}
@ -77,7 +80,7 @@ module.exports.overlayPage = function overlayPage (editor, contentElement, top,
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.2);';
'background-color: rgba(0, 0, 0, 0.3);';
closer.addEventListener('click', function() {
document.removeEventListener('keydown', documentEscListener);
closer.parentNode.removeChild(closer);
@ -87,17 +90,23 @@ module.exports.overlayPage = function overlayPage (editor, contentElement, top,
// click closer if esc key is pressed
document.addEventListener('keydown', documentEscListener);
contentContainer.style.cssText = 'margin: 0; padding: 0; ' +
'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.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);

40
lib/ace/ext/menu_tools/settings_menu.css Normal file
View 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);
}

42
lib/ace/ext/searchbox.css
View file

@ -117,41 +117,41 @@
}
.ace_button {
margin-left: 2px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
opacity: 0.7;
border: 1px solid rgba(100,100,100,0.23);
padding: 1px;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-left: 2px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
opacity: 0.7;
border: 1px solid rgba(100,100,100,0.23);
padding: 1px;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: black;
}
.ace_button:hover {
background-color: #eee;
background-color: #eee;
opacity:1;
}
.ace_button:active {
background-color: #ddd;
background-color: #ddd;
}
.ace_button.checked {
border-color: #3399ff;
border-color: #3399ff;
opacity:1;
}
.ace_search_options{
margin-bottom: 3px;
text-align: right;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
}

56
lib/ace/ext/settings_menu.js
View file

@ -44,33 +44,33 @@
*/
define(function(require, exports, module) {
"use strict";
/**
* This displays the settings menu if it is not already being shown.
* @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.
*/
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.
if(!document.getElementById('settingsmenu')) {
overlayPage(editor, generateSettingsMenu(editor), '0', '0', '0');
}
}
/**
* Initializes the settings menu extension. It adds the showSettingsMenu
* method to the given editor object and adds the showSettingsMenu command
* to the editor with appropriate keyboard shortcuts.
* @param {ace.Editor} editor An instance of the Editor.
*/
module.exports.init = function(editor) {
var Editor = require("ace/editor").Editor;
Editor.prototype.showSettingsMenu = function() {
showSettingsMenu(this);
};
"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.
* @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.
*/
function showSettingsMenu(editor) {
// make sure the menu isn't open already.
var sm = document.getElementById('ace_settingsmenu');
if (!sm)
overlayPage(editor, generateSettingsMenu(editor), '0', '0', '0');
}
/**
* Initializes the settings menu extension. It adds the showSettingsMenu
* method to the given editor object and adds the showSettingsMenu command
* to the editor with appropriate keyboard shortcuts.
* @param {ace.Editor} editor An instance of the Editor.
*/
module.exports.init = function(editor) {
var Editor = require("ace/editor").Editor;
Editor.prototype.showSettingsMenu = function() {
showSettingsMenu(this);
};
};
});

3
lib/ace/keyboard/emacs.js
View file

@ -52,7 +52,8 @@ var screenToTextBlockCoordinates = function(x, y) {
var HashHandler = require("./hash_handler").HashHandler;
exports.handler = new HashHandler();
exports.handler.isEmacs = true
exports.handler.isEmacs = true;
exports.handler.$id = "ace/keyboard/emacs";
var initialized = false;
var $formerLongWords;

1
lib/ace/keyboard/vim.js
View file

@ -58,6 +58,7 @@ var startCommands = {
};
exports.handler = {
$id: "ace/keyboard/vim",
// workaround for j not repeating with `defaults write -g ApplePressAndHoldEnabled -bool true`
handleMacRepeat: function(data, hashId, key) {
if (hashId == -1) {

2
lib/ace/worker/worker_client.js
View file

@ -219,6 +219,6 @@ var UIWorkerClient = function(topLevelNamespaces, mod, classname) {
UIWorkerClient.prototype = WorkerClient.prototype;
exports.UIWorkerClient = UIWorkerClient;
exports.WorkerClient = UIWorkerClient;
exports.WorkerClient = WorkerClient;
});