Merge pull request #2014 from ajaxorg/build

Use architect-build for building ace
This commit is contained in:
Lennart Kats 2014-06-23 12:21:04 +02:00
commit fdbd11d3df
7 changed files with 454 additions and 684 deletions

View file

@ -13,7 +13,6 @@ pre_build:
build: pre_build build: pre_build
./Makefile.dryice.js normal ./Makefile.dryice.js normal
./Makefile.dryice.js demo ./Makefile.dryice.js demo
./Makefile.dryice.js bm
# Minimal build: call Makefile.dryice.js only if our sources changed # Minimal build: call Makefile.dryice.js only if our sources changed
basic: build/src/ace.js basic: build/src/ace.js

File diff suppressed because it is too large Load diff

View file

@ -20,7 +20,7 @@ function foo() {
var bar = true; var bar = true;
}</textarea><br> }</textarea><br>
SourceUrl: <br> SourceUrl: <br>
<input id="srcURL" style="width:300px" value="http://ajaxorg.github.com/ace-builds/textarea/src/"></input><br> <input id="srcURL" style="width:300px" value="http://ajaxorg.github.com/ace-builds/src-noconflict"></input><br>
<button id="buBuild">Build Link</button> <br> <a href="#"></a> <button id="buBuild">Build Link</button> <br> <a href="#"></a>
<a href="https://github.com/ajaxorg/ace/"> <a href="https://github.com/ajaxorg/ace/">
<div class="fork_on_github" ></div> <div class="fork_on_github" ></div>
@ -49,63 +49,60 @@ function foo() {
<script> <script>
function inject(callback) { function inject(options, callback) {
var baseUrl = "src/"; var baseUrl = options.baseUrl || "../../src-noconflict";
var load = window.__ace_loader__ = function(path, module, callback) { var load = function(path, callback) {
var head = document.getElementsByTagName('head')[0]; var head = document.getElementsByTagName('head')[0];
var s = document.createElement('script'); var s = document.createElement('script');
s.src = baseUrl + path; s.src = baseUrl + "/" + path;
head.appendChild(s); head.appendChild(s);
s.onload = function() { s.onload = s.onreadystatechange = function(_, isAbort) {
window.__ace_shadowed__.require([module], callback); if (isAbort || !s.readyState || s.readyState == "loaded" || s.readyState == "complete") {
s = s.onload = s.onreadystatechange = null;
if (!isAbort)
callback();
}
}; };
}; };
load('ace-bookmarklet.js', "ace/ext/textarea", function() { load("ace.js", function() {
var ace = window.__ace_shadowed__; ace.config.loadModule("ace/ext/textarea", function() {
var event = ace.require("ace/lib/event");
ace.options.mode = "javascript";
var Event = ace.require("ace/lib/event");
var areas = document.getElementsByTagName("textarea"); var areas = document.getElementsByTagName("textarea");
for (var i = 0; i < areas.length; i++) { for (var i = 0; i < areas.length; i++) {
Event.addListener(areas[i], "click", function(e) { event.addListener(areas[i], "click", function(e) {
if (e.detail == 3) { if (e.detail == 3) {
ace.transformTextarea(e.target, load); ace.transformTextarea(e.target, options.ace);
} }
}); });
} }
callback && callback(); callback && callback();
}); });
});
} }
// Call the inject function to load the ace files. // Call the inject function to load the ace files.
var textAce; var textAce;
inject(function () { inject({}, function () {
// Transform the textarea on the page into an ace editor. // Transform the textarea on the page into an ace editor.
var ace = window.__ace_shadowed__;
var t = document.querySelector("textarea"); var t = document.querySelector("textarea");
textAce = ace.transformTextarea(t, window.__ace_loader__); textAce = ace.require("ace/ext/textarea").transformTextarea(t);
setTimeout(function(){textAce.setDisplaySettings(true)}); setTimeout(function(){textAce.setDisplaySettings(true)});
}); });
document.getElementById("buBuild").onclick = function() { document.getElementById("buBuild").onclick = function() {
var injectSrc = inject.toString().split("\n").join(""); var injectSrc = inject.toString().split("\n").join("");
injectSrc = injectSrc.replace('baseUrl = "src/"', 'baseUrl="' + document.getElementById("srcURL").value + '"');
var aceOptions = textAce.getOptions();
var opt = [];
for (var option in aceOptions) {
opt.push(option + ":'" + aceOptions[option] + "'");
}
injectSrc = injectSrc.replace('ace.options.mode = "javascript"', 'ace.options = { ' + opt.join(",") + ' }');
injectSrc = injectSrc.replace(/\s+/g, " "); injectSrc = injectSrc.replace(/\s+/g, " ");
var options = textAce.getOptions();
options.baseUrl = document.getElementById("srcURL").value;
var a = document.querySelector("a"); var a = document.querySelector("a");
a.href = "javascript:(" + injectSrc + ")()"; a.href = "javascript:(" + injectSrc + ")(" + JSON.stringify(options) + ")";
a.innerHTML = "Ace Bookmarklet Link"; a.innerHTML = "Ace Bookmarklet Link";
} }

View file

@ -29,14 +29,20 @@
}</pre> }</pre>
<script src="../demo/kitchen-sink/require.js"></script> <script src="../demo/kitchen-sink/require.js"></script>
<script src="../build/src/ace.js" charset="utf-8"></script>
<script> <script>
require.config({paths: {ace: "../build/src"}})
define('testace', ['ace/ace'],
function(ace, langtools) {
console.log("This is the testace module");
var editor = ace.edit("editor"); var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight"); editor.setTheme("ace/theme/twilight");
editor.session.setMode("ace/mode/javascript"); editor.session.setMode("ace/mode/javascript");
require(["ace/requirejs/text!src/ace"], function(e){ require(["ace/requirejs/text!src/ace"], function(e){
editor.setValue(e); editor.setValue(e);
}) })
}
);
require(['testace'])
</script> </script>
</body> </body>

View file

@ -11,16 +11,10 @@
commit %commit% commit %commit%
--> -->
<!--DEVEL-->
<link rel="stylesheet" href="demo/kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8"> <link rel="stylesheet" href="demo/kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8">
<script async="true" src="https://use.edgefonts.net/source-code-pro.js"></script> <script async="true" src="https://use.edgefonts.net/source-code-pro.js"></script>
<!--DEVEL-->
<link href="./doc/site/images/favicon.ico" rel="icon" type="image/x-icon"> <link href="./doc/site/images/favicon.ico" rel="icon" type="image/x-icon">
<!--PACKAGE
<link rel="stylesheet" href="kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8">
<script async="true" src="https://use.edgefonts.net/source-code-pro.js"></script>
PACKAGE-->
</head> </head>
<body> <body>
<div id="optionsPanel" style="position:absolute;height:100%;width:260px"> <div id="optionsPanel" style="position:absolute;height:100%;width:260px">
@ -287,7 +281,7 @@
<script src="src/ace.js" data-ace-base="src" type="text/javascript" charset="utf-8"></script> <script src="src/ace.js" data-ace-base="src" type="text/javascript" charset="utf-8"></script>
<script src="src/keybinding-vim.js"></script> <script src="src/keybinding-vim.js"></script>
<script src="src/keybinding-emacs.js"></script> <script src="src/keybinding-emacs.js"></script>
<script src="kitchen-sink/demo.js"></script> <script src="demo/kitchen-sink/demo.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
require("kitchen-sink/demo"); require("kitchen-sink/demo");
</script> </script>

View file

@ -155,7 +155,7 @@ function setupContainer(element, getValue) {
return container; return container;
} }
exports.transformTextarea = function(element, loader) { exports.transformTextarea = function(element, options) {
var session; var session;
var container = setupContainer(element, function() { var container = setupContainer(element, function() {
return session.getValue(); return session.getValue();
@ -215,9 +215,8 @@ exports.transformTextarea = function(element, loader) {
applyStyles(settingDiv, settingDivStyles); applyStyles(settingDiv, settingDivStyles);
container.appendChild(settingDiv); container.appendChild(settingDiv);
options = options || exports.defaultOptions;
// Power up ace on the textarea: // Power up ace on the textarea:
var options = {};
var editor = ace.edit(editorDiv); var editor = ace.edit(editorDiv);
session = editor.getSession(); session = editor.getSession();
@ -228,10 +227,10 @@ exports.transformTextarea = function(element, loader) {
container.appendChild(settingOpener); container.appendChild(settingOpener);
// Create the API. // Create the API.
setupApi(editor, editorDiv, settingDiv, ace, options, loader); setupApi(editor, editorDiv, settingDiv, ace, options, load);
// Create the setting's panel. // Create the setting's panel.
setupSettingPanel(settingDiv, settingOpener, editor, options); setupSettingPanel(settingDiv, settingOpener, editor);
var state = ""; var state = "";
event.addListener(settingOpener, "mousemove", function(e) { event.addListener(settingOpener, "mousemove", function(e) {
@ -296,37 +295,15 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
}; };
editor.$setOption = editor.setOption; editor.$setOption = editor.setOption;
editor.$getOption = editor.getOption;
editor.setOption = function(key, value) { editor.setOption = function(key, value) {
if (options[key] == value) return;
switch (key) { switch (key) {
case "mode": case "mode":
if (value != "text") { editor.$setOption("mode", "ace/mode/" + value)
// Load the required mode file. Files get loaded only once.
loader("mode-" + value + ".js", "ace/mode/" + value, function() {
var aceMode = require("../mode/" + value).Mode;
session.setMode(new aceMode());
});
} else {
session.setMode(new (require("../mode/text").Mode));
}
break; break;
case "theme": case "theme":
if (value != "textmate") { editor.$setOption("theme", "ace/theme/" + value)
// Load the required theme file. Files get loaded only once.
loader("theme-" + value + ".js", "ace/theme/" + value, function() {
editor.setTheme("ace/theme/" + value);
});
} else {
editor.setTheme("ace/theme/textmate");
}
break; break;
case "fontSize":
editorDiv.style.fontSize = value;
break;
case "keybindings": case "keybindings":
switch (value) { switch (value) {
case "vim": case "vim":
@ -341,58 +318,55 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
break; break;
case "softWrap": case "softWrap":
switch (value) { case "fontSize":
case "off": editor.$setOption(key, value);
session.setUseWrapMode(false);
renderer.setPrintMarginColumn(80);
break;
case "40":
session.setUseWrapMode(true);
session.setWrapLimitRange(40, 40);
renderer.setPrintMarginColumn(40);
break;
case "80":
session.setUseWrapMode(true);
session.setWrapLimitRange(80, 80);
renderer.setPrintMarginColumn(80);
break;
case "free":
session.setUseWrapMode(true);
session.setWrapLimitRange(null, null);
renderer.setPrintMarginColumn(80);
break;
}
break; break;
default: default:
editor.$setOption(key, toBool(value)); editor.$setOption(key, toBool(value));
} }
options[key] = value;
}; };
editor.getOption = function(key) { editor.getOption = function(key) {
return options[key]; switch (key) {
case "mode":
return editor.$getOption("mode").substr("ace/mode/".length)
break;
case "theme":
return editor.$getOption("theme").substr("ace/theme/".length)
break;
case "keybindings":
var value = editor.getKeyboardHandler()
switch (value && value.$id) {
case "ace/keyboard/vim":
return "vim";
case "ace/keyboard/emacs":
return "emacs";
default:
return "ace";
}
break;
default:
return editor.$getOption(key);
}
}; };
editor.getOptions = function() { editor.setOptions(options);
return options;
};
editor.setOptions(exports.options);
return editor; return editor;
} }
function setupSettingPanel(settingDiv, settingOpener, editor, options) { function setupSettingPanel(settingDiv, settingOpener, editor) {
var BOOL = null; var BOOL = null;
var desc = { var desc = {
mode: "Mode:", mode: "Mode:",
gutter: "Display Gutter:", wrap: "Soft Wrap:",
theme: "Theme:", theme: "Theme:",
fontSize: "Font Size:", fontSize: "Font Size:",
softWrap: "Soft Wrap:", showGutter: "Display Gutter:",
keybindings: "Keyboard", keybindings: "Keyboard",
showPrintMargin: "Show Print Margin:", showPrintMargin: "Show Print Margin:",
useSoftTabs: "Use Soft Tabs:", useSoftTabs: "Use Soft Tabs:",
@ -445,7 +419,7 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
twilight: "Twilight", twilight: "Twilight",
vibrant_ink: "Vibrant Ink" vibrant_ink: "Vibrant Ink"
}, },
gutter: BOOL, showGutter: BOOL,
fontSize: { fontSize: {
"10px": "10px", "10px": "10px",
"11px": "11px", "11px": "11px",
@ -453,7 +427,7 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
"14px": "14px", "14px": "14px",
"16px": "16px" "16px": "16px"
}, },
softWrap: { wrap: {
off: "Off", off: "Off",
40: "40", 40: "40",
80: "80", 80: "80",
@ -476,7 +450,7 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
if (!obj) { if (!obj) {
builder.push( builder.push(
"<input type='checkbox' title='", option, "' ", "<input type='checkbox' title='", option, "' ",
cValue == "true" ? "checked='true'" : "", cValue + "" == "true" ? "checked='true'" : "",
"'></input>" "'></input>"
); );
return; return;
@ -496,10 +470,10 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
builder.push("</select>"); builder.push("</select>");
} }
for (var option in options) { for (var option in exports.defaultOptions) {
table.push("<tr><td>", desc[option], "</td>"); table.push("<tr><td>", desc[option], "</td>");
table.push("<td>"); table.push("<td>");
renderOption(table, option, optionValues[option], options[option]); renderOption(table, option, optionValues[option], editor.getOption(option));
table.push("</td></tr>"); table.push("</td></tr>");
} }
table.push("</table>"); table.push("</table>");
@ -532,12 +506,12 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
} }
// Default startup options. // Default startup options.
exports.options = { exports.defaultOptions = {
mode: "text", mode: "javascript",
theme: "textmate", theme: "textmate",
gutter: "false", wrap: "off",
fontSize: "12px", fontSize: "12px",
softWrap: "off", showGutter: "false",
keybindings: "ace", keybindings: "ace",
showPrintMargin: "false", showPrintMargin: "false",
useSoftTabs: "true", useSoftTabs: "true",

View file

@ -17,7 +17,8 @@
"asyncjs": "0.0.x", "asyncjs": "0.0.x",
"jsdom": "0.2.x", "jsdom": "0.2.x",
"amd-loader": "~0.0.4", "amd-loader": "~0.0.4",
"dryice": "0.4.10" "dryice": "0.4.11",
"architect-build": "https://github.com/c9/architect-build/tarball/42723e152bb"
}, },
"mappings": { "mappings": {
"ace": "." "ace": "."