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() {