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

Add svg mode with support for embedded JavaScript

Browse source
This commit is contained in:
Fabian Jakobs 2011-03-07 19:40:10 +01:00
commit 493373f564
6 changed files with 277 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Makefile.dryice.js
View file

@ -170,7 +170,7 @@ console.log('# ace modes ---------');
project.assumeAllFilesLoaded();
[
"css", "html", "javascript", "php", "python", "xml", "ruby", "java", "c_cpp",
"coffee", "perl", "csharp"
"coffee", "perl", "csharp", "svg"
].forEach(function(mode) {
console.log("mode " + mode);
copy({

4
Makefile.dryice.textarea.js
View file

@ -127,7 +127,7 @@ copy({
copy({
source: ace,
filter: [
shadow,
shadow
],
dest: 'build/textarea/src/ace-uncompressed.js'
});
@ -138,7 +138,7 @@ console.log('# ace modes ---------');
project.assumeAllFilesLoaded();
[
"css", "html", "javascript", "php", "python", "xml", "ruby", "java", "c_cpp",
"coffee", "perl"
"coffee", "perl", "svg"
].forEach(function(mode) {
console.log("mode " + mode);
copy({

9
demo/demo.js
View file

@ -59,6 +59,7 @@ exports.launch = function(env) {
var CCPPMode = require("ace/mode/c_cpp").Mode;
var CoffeeMode = require("ace/mode/coffee").Mode;
var PerlMode = require("ace/mode/perl").Mode;
var SvgMode = require("ace/mode/svg").Mode;
var TextileMode = require("ace/mode/textile").Mode;
var TextMode = require("ace/mode/text").Mode;
var UndoManager = require("ace/undomanager").UndoManager;
@ -135,6 +136,10 @@ exports.launch = function(env) {
docs.perl.setMode(new PerlMode());
docs.perl.setUndoManager(new UndoManager());
docs.svg = new EditSession(document.getElementById("svgtext").innerHTML.replace("&lt;", "<"));
docs.svg.setMode(new SvgMode());
docs.svg.setUndoManager(new UndoManager());
docs.textile = new EditSession(document.getElementById("textiletext").innerHTML);
docs.textile.setMode(new TextileMode());
docs.textile.setUndoManager(new UndoManager());
@ -145,6 +150,7 @@ exports.launch = function(env) {
var modes = {
text: new TextMode(),
textile: new TextileMode(),
svg: new SvgMode(),
xml: new XmlMode(),
html: new HtmlMode(),
css: new CssMode(),
@ -207,6 +213,9 @@ exports.launch = function(env) {
else if (mode instanceof CSharpMode) {
modeEl.value = "csharp";
}
else if (mode instanceof SvgMode) {
modeEl.value = "svg";
}
else if (mode instanceof TextileMode) {
modeEl.value = "textile";
}

85
index.html
View file

@ -25,6 +25,7 @@
<option value="java">Java Document</option>
<option value="csharp">C# Document</option>
<option value="c_cpp">C++ Document</option>
<option value="svg">SVG Document</option>
<option value="textile">Textile Document</option>
<option value="plain">Text Document</option>
</select>
@ -89,6 +90,7 @@
<option value="coffee">CoffeeScript</option>
<option value="perl">Perl</option>
<option value="csharp">C-Sharp</option>
<option value="svg">SVG</option>
<option value="textile">Textile</option>
</select>
</td>
@ -319,6 +321,89 @@ print "\n";
</script>
<script type="text/editor" id="svgtext"><svg
width="800" height="600"
xmlns="http://www.w3.org/2000/svg"
onload="StartAnimation(evt)">
<title>Test Tube Progress Bar</title>
<desc>Created for the Web Directions SVG competition</desc>
<script type="text/ecmascript"><![CDATA[
var timevalue = 0;
var timer_increment = 1;
var max_time = 100;
var hickory;
var dickory;
var dock;
var i;
function StartAnimation(evt) {
hickory = evt.target.ownerDocument.getElementById("hickory");
dickory = evt.target.ownerDocument.getElementById("dickory");
dock = evt.target.ownerDocument.getElementById("dock");
ShowAndGrowElement();
}
function ShowAndGrowElement() {
timevalue = timevalue + timer_increment;
if (timevalue > max_time)
return;
// Scale the text string gradually until it is 20 times larger
scalefactor = (timevalue * 650) / max_time;
if (timevalue < 30) {
hickory.setAttribute("display", "");
hickory.setAttribute("transform", "translate(" + (600+scalefactor*3*-1 ) + ", -144 )");
}
if (timevalue > 30 && timevalue < 66) {
dickory.setAttribute("display", "");
dickory.setAttribute("transform", "translate(" + (-795+scalefactor*2) + ", 0 )");
}
if (timevalue > 66) {
dock.setAttribute("display", "");
dock.setAttribute("transform", "translate(" + (1450+scalefactor*2*-1) + ", 144 )");
}
// Call ShowAndGrowElement again <timer_increment> milliseconds later.
setTimeout("ShowAndGrowElement()", timer_increment)
}
window.ShowAndGrowElement = ShowAndGrowElement
]]>&lt;/script>
<rect
fill="#2e3436"
fill-rule="nonzero"
stroke-width="3"
y="0"
x="0"
height="600"
width="800"
id="rect3590"/>
<text
style="font-size:144px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans Bold"
x="50"
y="350"
id="hickory"
display="none">
Hickory,</text>
<text
style="font-size:144px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans Bold"
x="50"
y="350"
id="dickory"
display="none">
dickory,</text>
<text
style="font-size:144px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans Bold"
x="50"
y="350"
id="dock"
display="none">
dock!</text>
</svg></script>
<script type="text/editor" id="textiletext">h1. Textile document
h2. Heading Two

93
lib/ace/mode/svg.js Normal file
View file

@ -0,0 +1,93 @@
/* ***** BEGIN LICENSE BLOCK *****
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
* The Original Code is Ajax.org Code Editor (ACE).
*
* The Initial Developer of the Original Code is
* Ajax.org B.V.
* Portions created by the Initial Developer are Copyright (C) 2010
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Fabian Jakobs <fabian AT ajax DOT org>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
* in which case the provisions of the GPL or the LGPL are applicable instead
* of those above. If you wish to allow use of your version of this file only
* under the terms of either the GPL or the LGPL, and not to allow others to
* use your version of this file under the terms of the MPL, indicate your
* decision by deleting the provisions above and replace them with the notice
* and other provisions required by the GPL or the LGPL. If you do not delete
* the provisions above, a recipient may use your version of this file under
* the terms of any one of the MPL, the GPL or the LGPL.
*
* ***** END LICENSE BLOCK ***** */
define(function(require, exports, module) {
var oop = require("pilot/oop");
var XmlMode = require("ace/mode/text").Mode;
var JavaScriptMode = require("ace/mode/javascript").Mode;
var Tokenizer = require("ace/tokenizer").Tokenizer;
var SvgHighlightRules = require("ace/mode/svg_highlight_rules").SvgHighlightRules;
var Mode = function() {
this.$tokenizer = new Tokenizer(new SvgHighlightRules().getRules());
this.$js = new JavaScriptMode();
};
oop.inherits(Mode, XmlMode);
(function() {
this.toggleCommentLines = function(state, doc, startRow, endRow) {
this.$delegate("toggleCommentLines", arguments, function() {
return 0;
});
};
this.getNextLineIndent = function(state, line, tab) {
var self = this;
return this.$delegate("getNextLineIndent", arguments, function() {
return self.$getIndent(line);
});
};
this.checkOutdent = function(state, line, input) {
return this.$delegate("checkOutdent", arguments, function() {
return false;
});
};
this.autoOutdent = function(state, doc, row) {
this.$delegate("autoOutdent", arguments);
};
this.$delegate = function(method, args, defaultHandler) {
var state = args[0];
var split = state.split("js-");
if (!split[0] && split[1]) {
args[0] = split[1];
return this.$js[method].apply(this.$js, args);
}
return defaultHandler ? defaultHandler() : undefined;
};
}).call(Mode.prototype);
exports.Mode = Mode;
});

87
lib/ace/mode/svg_highlight_rules.js Normal file
View file

@ -0,0 +1,87 @@
/* ***** BEGIN LICENSE BLOCK *****
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
* The Original Code is Ajax.org Code Editor (ACE).
*
* The Initial Developer of the Original Code is
* Ajax.org B.V.
* Portions created by the Initial Developer are Copyright (C) 2010
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Fabian Jakobs <fabian AT ajax DOT org>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
* in which case the provisions of the GPL or the LGPL are applicable instead
* of those above. If you wish to allow use of your version of this file only
* under the terms of either the GPL or the LGPL, and not to allow others to
* use your version of this file under the terms of the MPL, indicate your
* decision by deleting the provisions above and replace them with the notice
* and other provisions required by the GPL or the LGPL. If you do not delete
* the provisions above, a recipient may use your version of this file under
* the terms of any one of the MPL, the GPL or the LGPL.
*
* ***** END LICENSE BLOCK ***** */
define(function(require, exports, module) {
var oop = require("pilot/oop");
var JavaScriptHighlightRules = require("ace/mode/javascript_highlight_rules").JavaScriptHighlightRules;
var XmlHighlightRules = require("ace/mode/xml_highlight_rules").XmlHighlightRules;
var SvgHighlightRules = function() {
XmlHighlightRules.call(this);
this.$rules.start.splice(3, 0, {
token : "text",
regex : "<(?=\s*script)",
next : "script"
});
this.$rules.script = [{
token : "text",
regex : ">",
next : "js-start"
}, {
token : "keyword",
regex : "[-_a-zA-Z0-9:]+"
}, {
token : "text",
regex : "\\s+"
}, {
token : "string",
regex : '".*?"'
}, {
token : "string",
regex : "'.*?'"
}];
var jsRules = new JavaScriptHighlightRules().getRules();
this.addRules(jsRules, "js-");
this.$rules["js-start"].unshift({
token: "comment",
regex: "\\/\\/.*(?=<\\/script>)",
next: "tag"
}, {
token: "text",
regex: "<\\/(?=script)",
next: "tag"
});
};
oop.inherits(SvgHighlightRules, XmlHighlightRules);
exports.SvgHighlightRules = SvgHighlightRules;
});