Add svg mode with support for embedded JavaScript

Makefile.dryice.js

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

Makefile.dryice.textarea.js

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

demo/demo.js

@@ -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";
         }

index.html

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

lib/ace/mode/svg.js

@@ -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;
+});

lib/ace/mode/svg_highlight_rules.js

@@ -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;
+});