refactor CSS loading. Now use requireJS

.gitignore

@@ -1 +1,2 @@
 .DS_Store
+.settings.xml

demo/editor.html

@@ -40,8 +40,6 @@
   
 
     </style>
-	<link rel="stylesheet" href="../css/editor.css" type="text/css" charset="utf-8">
-	<link rel="stylesheet" href="../css/tm.css" type="text/css" charset="utf-8">
     <script src="require.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
@@ -66,6 +64,13 @@
           <option value="css">CSS</option>
         </select>
       </td>
+      <td>
+        <label for="theme">Theme:</label>
+        <select id="theme" size="1">
+          <option value="ace/theme/TextMate">TextMate</option>
+          <option value="ace/theme/Eclipse">Eclipse</option>
+        </select>
+      </td>
       <td>
         <label for="select_style">Full line selections</label>
         <input type="checkbox" name="select_style" id="select_style" checked>        
@@ -121,6 +126,7 @@ require(
     [
         "ace/Editor",
         "ace/VirtualRenderer",
+        "ace/theme/TextMate",
         "ace/Document",
         "ace/mode/JavaScript",
         "ace/mode/Css",
@@ -128,7 +134,7 @@ require(
         "ace/mode/Xml",
         "ace/mode/Text",
         "ace/UndoManager"
-    ], function(Editor, Renderer, Document, JavaScriptMode, CssMode, HtmlMode, XmlMode, TextMode, UndoManager) { 
+    ], function(Editor, Renderer, theme, Document, JavaScriptMode, CssMode, HtmlMode, XmlMode, TextMode, UndoManager) { 
 
 var ace = require("ace/ace");
 var docs = {}
@@ -178,7 +184,7 @@ function getDoc() {
 
 var modeEl = document.getElementById("mode");
 modeEl.onchange = function() {
-	editor.getDocument().setMode(getMode());
+    editor.getDocument().setTheme(modeEl.value);
 };
 
 var modes = {
@@ -193,6 +199,11 @@ function getMode() {
     return modes[modeEl.value]; 
 }
 
+var themeEl = document.getElementById("theme");
+themeEl.onchange = function() {
+    editor.setTheme(themeEl.value);
+};
+
 var selectEl = document.getElementById("select_style");
 selectEl.onchange = function() {
     if (selectEl.checked) {
@@ -208,7 +219,7 @@ activeEl.onchange = function() {
 };
 
 var container = document.getElementById("editor");
-var editor = new Editor(new Renderer(container));
+var editor = new Editor(new Renderer(container, theme));
 onDocChange();
 
 function onResize() {

src/ace/Editor.js

@@ -142,6 +142,10 @@ var Editor = function(renderer, doc) {
         this.renderer.onResize();
     };
 
+    this.setTheme = function(theme) {
+        this.renderer.setTheme(theme);
+    };
+    
     this.$highlightBrackets = function() {
         if (this.$bracketHighlight) {
             this.renderer.removeMarker(this.$bracketHighlight);

src/ace/VirtualRenderer.js

@@ -17,15 +17,21 @@ require.def("ace/VirtualRenderer",
          "ace/layer/Cursor",
          "ace/ScrollBar",
          "ace/RenderLoop",
-         "ace/MEventEmitter"
+         "ace/MEventEmitter",
+         "text!ace/css/editor.css"
     ], function(
         oop, lang, dom, event, GutterLayer, MarkerLayer, TextLayer, 
-        CursorLayer, ScrollBar, RenderLoop, MEventEmitter) {
+        CursorLayer, ScrollBar, RenderLoop, MEventEmitter, editorCss) {
 
-var VirtualRenderer = function(container) {
+// import CSS once
+dom.importCssString(editorCss);
+
+var VirtualRenderer = function(container, theme) {
     this.container = container;
     dom.addCssClass(this.container, "ace_editor");
 
+    this.setTheme(theme);
+
     this.scroller = document.createElement("div");
     this.scroller.className = "ace_scroller";
     this.container.appendChild(this.scroller);
@@ -506,6 +512,35 @@ var VirtualRenderer = function(container) {
     this.hideComposition = function() {
     };
     
+    this.setTheme = function(theme) {
+        var _self = this;
+        if (!theme || typeof theme == "string") {
+            theme = theme || "ace/theme/TextMate";
+            require([theme], function(theme) {
+                afterLoad(theme);
+            })
+        } else {
+            afterLoad(theme);
+        }
+        
+        var _self = this;
+        function afterLoad(theme) {
+            if (_self.$theme)
+                dom.removeCssClass(_self.container, _self.$theme)
+        
+            _self.$theme = theme ? theme.cssClass : null;
+        
+            if (_self.$theme)
+                dom.addCssClass(_self.container, _self.$theme)
+            
+            // force remeasure of the gutter width
+            if (_self.$size) {
+                _self.$size.width = 0;
+                _self.onResize();
+            }
+        }
+    }
+
 }).call(VirtualRenderer.prototype);
 
 return VirtualRenderer;

src/ace/layer/Text.js

@@ -13,7 +13,7 @@ var Text = function(parentEl) {
     parentEl.appendChild(this.element);
 
     this.$characterSize = this.$measureSizes();
-    //this.$pollSizeChanges();
+    this.$pollSizeChanges();
 };
 
 (function() {

src/ace/lib/dom.js

@@ -44,6 +44,20 @@ require.def("ace/lib/dom", ["ace/lib/lang"], function(lang) {
         el.className = classes.join(" ");
     };
 
+    dom.importCssString = function(cssText, doc){
+        doc = doc || document;        
+
+        if (doc.createStyleSheet) {
+            var sheet = doc.createStyleSheet();
+            sheet.cssText = cssText;
+        }
+        else {
+            var style = doc.createElement("style");
+            style.appendChild(doc.createTextNode(cssText));
+            doc.getElementsByTagName("head")[0].appendChild(style);
+        }            
+    };
+    
     dom.getInnerWidth = function(element) {
         return (parseInt(dom.computedStyle(element, "paddingLeft"))
                 + parseInt(dom.computedStyle(element, "paddingRight")) + element.clientWidth);

src/ace/theme/Eclipse.js

@@ -0,0 +1,10 @@
+require.def("ace/theme/Eclipse",
+    ["ace/lib/dom", "text!ace/theme/eclipse.css"], function(dom, cssText) {
+        
+    // import CSS once
+    dom.importCssString(cssText);
+
+    return {
+        cssClass: "ace-eclipse"
+    };
+})

src/ace/theme/TextMate.js

@@ -0,0 +1,10 @@
+require.def("ace/theme/TextMate",
+    ["ace/lib/dom", "text!ace/theme/tm.css"], function(dom, cssText) {
+
+    // import CSS once
+    dom.importCssString(cssText);
+    
+    return {
+        cssClass: "ace-tm"
+    };
+})

src/ace/theme/eclipse.css

@@ -1,12 +1,12 @@
-.editor {
+.ace-eclipse .ace_editor {
   border: 2px solid rgb(159, 159, 159);
 }
 
-.editor.focus {
+.ace-eclipse .ace_editor.ace_focus {
   border: 2px solid #327fbd;;
 }
 
-.gutter {
+.ace-eclipse .ace_gutter {
   width: 40px;
   background: rgb(227, 227, 227);
   border-right: 1px solid rgb(159, 159, 159);	 
@@ -15,83 +15,82 @@
   font-size: 11px;  
 }
 
-.gutter-layer {
+.ace-eclipse .ace_gutter-layer {
   right: 10px;
   text-align: right;
 }
 
-.text-layer {
+.ace-eclipse .ace_text-layer {
   font-family: Monaco, "Courier New", monospace;
   font-size: 11px;
   cursor: text;
 }
 
-.cursor {
-  width: 1px;
-  background: black;
+.ace-eclipse .ace_cursor {
+  border-left: 1px solid black;
 }
 
-.line .keyword {
+.ace-eclipse .ace_line .ace_keyword {
   color: rgb(127, 0, 85);
 }
 
-.line .buildin-constant {
+.ace-eclipse .ace_line .ace_buildin-constant {
   color: rgb(88, 72, 246);
 }
 
-.line .library-constant {
+.ace-eclipse .ace_line .ace_library-constant {
   color: rgb(6, 150, 14);
 }
 
-.line .buildin-function {
+.ace-eclipse .ace_line .ace_buildin-function {
   color: rgb(60, 76, 114);
 }
 
-.line .string {
+.ace-eclipse .ace_line .ace_string {
   color: rgb(42, 0, 255);
 }
 
-.line .comment {
+.ace-eclipse .ace_line .ace_comment {
   color: rgb(63, 127, 95);
 }
 
-.line .doc-comment {
+.ace-eclipse .ace_line .ace_doc-comment {
   color: rgb(63, 95, 191);
 }
 
-.line .doc-comment-tag {
+.ace-eclipse .ace_line .ace_doc-comment-tag {
   color: rgb(127, 159, 191);
 }
 
-.line .number {
+.ace-eclipse .ace_line .ace_number {
 }
 
-.line .tag {
+.ace-eclipse .ace_line .ace_tag {
 	color: rgb(63, 127, 127);
 }
 
-.line .attribute {
+.ace-eclipse .ace_line .ace_attribute {
 	color: rbg(127, 0, 127);
 }
 
-.line .attribute-value {
+.ace-eclipse .ace_line .ace_attribute-value {
 	font-style: italic;
 	color: rbg(42, 0, 255);
 }
 
-.line .xml_pe {
+.ace-eclipse .ace_line .ace_xml_pe {
   color: rgb(104, 104, 91);
 }
 
-.marker-layer .selection {
+.ace-eclipse .ace_marker-layer .ace_selection {
   background: rgb(181, 213, 255);
 }
 
-.marker-layer .bracket {
+.ace-eclipse .ace_marker-layer .ace_bracket {
   margin: -1px 0 0 -1px;
   border: 1px solid rgb(192, 192, 192);
 }
 
-.marker-layer .active_line {
+.ace-eclipse .ace_marker-layer .ace_active_line {
   background: rgb(232, 242, 254);
 }

src/ace/theme/tm.css

@@ -1,101 +1,101 @@
-.ace_editor {
+.ace-tm .ace_editor {
   border: 2px solid rgb(159, 159, 159);
   font-family: Monaco, "Courier New";
   font-size: 12px;  
 }
 
-.ace_editor.ace_focus {
+.ace-tm .ace_editor.ace_focus {
   border: 2px solid #327fbd;;
 }
 
-.ace_gutter {
+.ace-tm .ace_gutter {
   width: 40px;
   background: rgb(227, 227, 227);
   border-right: 1px solid rgb(159, 159, 159);	 
   color: rgb(136, 136, 136);
 }
 
-.ace_editor .ace_printMargin {
+.ace-tm .ace_editor .ace_printMargin {
   width: 1px;
   background: rgb(191, 191, 191);
 }
 
-.ace_gutter-layer {
+.ace-tm .ace_gutter-layer {
   right: 10px;
   text-align: right;
 }
 
-.ace_text-layer {
+.ace-tm .ace_text-layer {
   cursor: text;
 }
 
-.ace_cursor {
+.ace-tm .ace_cursor {
   border-left: 2px solid black;
 }
 
-.ace_cursor.ace_overwrite {
+.ace-tm .ace_cursor.ace_overwrite {
   border-left: 0px;
   border-bottom: 1px solid black;
 }
         
-.ace_line .ace_invisible {
+.ace-tm .ace_line .ace_invisible {
   color: rgb(191, 191, 191);
 }
 
-.ace_line .ace_keyword {
+.ace-tm .ace_line .ace_keyword {
   color: blue;
 }
 
-.ace_line .ace_buildin-constant {
+.ace-tm .ace_line .ace_buildin-constant {
   color: rgb(88, 72, 246);
 }
 
-.ace_line .ace_library-constant {
+.ace-tm .ace_line .ace_library-constant {
   color: rgb(6, 150, 14);
 }
 
-.ace_line .ace_buildin-function {
+.ace-tm .ace_line .ace_buildin-function {
   color: rgb(60, 76, 114);
 }
 
-.ace_line .ace_string {
+.ace-tm .ace_line .ace_string {
   color: rgb(3, 106, 7);
 }
 
-.ace_line .ace_comment {
+.ace-tm .ace_line .ace_comment {
   font-style: italic;
   color: rgb(76, 136, 107);
 }
 
-.ace_line .ace_doc-comment {
+.ace-tm .ace_line .ace_doc-comment {
   color: rgb(0, 102, 255);
 }
 
-.ace_line .ace_doc-comment-tag {
+.ace-tm .ace_line .ace_doc-comment-tag {
   color: rgb(128, 159, 191);
 }
 
-.ace_line .ace_number {
+.ace-tm .ace_line .ace_number {
   color: rgb(0, 0, 205);
 }
 
-.ace_line .ace_xml_pe {
+.ace-tm .ace_line .ace_xml_pe {
   color: rgb(104, 104, 91);
 }
 
-.ace_marker-layer .ace_selection {
+.ace-tm .ace_marker-layer .ace_selection {
   background: rgb(181, 213, 255);
 }
 
-.ace_marker-layer .ace_step {
+.ace-tm .ace_marker-layer .ace_step {
   background: rgb(198, 219, 174);
 }
 
-.ace_marker-layer .ace_bracket {
+.ace-tm .ace_marker-layer .ace_bracket {
   margin: -1px 0 0 -1px;
   border: 1px solid rgb(192, 192, 192);
 }
 
-.ace_marker-layer .ace_active_line {
+.ace-tm .ace_marker-layer .ace_active_line {
   background: rgb(232, 242, 254);
 }