From 140d80a15ea8bf28b605fed68d77acfa48a6acd9 Mon Sep 17 00:00:00 2001
From: Fabian Jakobs <fabian.jakobs@web.de>
Date: Thu, 30 Sep 2010 12:35:57 +0200
Subject: [PATCH] refactor CSS loading. Now use requireJS

---
 .gitignore                         |   3 +-
 demo/editor.html                   | 223 +++++++++++++++--------------
 src/ace/Editor.js                  |   4 +
 src/ace/VirtualRenderer.js         |  41 +++++-
 {css => src/ace/css}/editor.css    |   0
 src/ace/layer/Text.js              |   2 +-
 src/ace/lib/dom.js                 |  14 ++
 src/ace/theme/Eclipse.js           |  10 ++
 src/ace/theme/TextMate.js          |  10 ++
 {css => src/ace/theme}/eclipse.css |  47 +++---
 {css => src/ace/theme}/tm.css      |  46 +++---
 11 files changed, 242 insertions(+), 158 deletions(-)
 rename {css => src/ace/css}/editor.css (100%)
 create mode 100644 src/ace/theme/Eclipse.js
 create mode 100644 src/ace/theme/TextMate.js
 rename {css => src/ace/theme}/eclipse.css (50%)
 rename {css => src/ace/theme}/tm.css (55%)
diff --git a/.gitignore b/.gitignore
index 496ee2ca..a7334298 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-.DS_Store
\ No newline at end of file
+.DS_Store
+.settings.xml
\ No newline at end of file
diff --git a/demo/editor.html b/demo/editor.html
index ef92a14c..5c280ef9 100644
--- a/demo/editor.html
+++ b/demo/editor.html
@@ -3,46 +3,44 @@
 
 <html lang="en">
 <head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<title>Editor</title>
-	<meta name="author" content="Fabian Jakobs">
-	
-	<style type="text/css" media="screen">
-	
-	html {
-		height: 100%;
-		overflow: hidden;
-	}
-	
-	body {
-		overflow: hidden;
-		margin: 0;
-		padding: 0;
-		font: sans-serif;
-		height: 100%;
-		width: 100%;
-		font-family: Arial, Helvetica, sans-serif, Tahoma, Verdana;
-		font-size: 12px;
-		background: rgb(14, 98, 165);
-		color: white;
-	}
-	
-	#editor {  
-	  	top: 55px;
-	  	left: 0px;
-	  	background: white;
-	}
-	
-	#controls {
-		width: 100%;
-		height: 55px;
-	}
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Editor</title>
+    <meta name="author" content="Fabian Jakobs">
+    
+    <style type="text/css" media="screen">
+    
+    html {
+        height: 100%;
+        overflow: hidden;
+    }
+    
+    body {
+        overflow: hidden;
+        margin: 0;
+        padding: 0;
+        font: sans-serif;
+        height: 100%;
+        width: 100%;
+        font-family: Arial, Helvetica, sans-serif, Tahoma, Verdana;
+        font-size: 12px;
+        background: rgb(14, 98, 165);
+        color: white;
+    }
+    
+    #editor {  
+        top: 55px;
+        left: 0px;
+        background: white;
+    }
+    
+    #controls {
+        width: 100%;
+        height: 55px;
+    }
   
 
-	</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>
+    </style>
+    <script src="require.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
     
@@ -56,7 +54,7 @@
           <option value="css">CSS Document</option>
         </select>
       </td>
-        <td>
+      <td>
         <label for="mode">Mode:</label>
         <select id="mode" size="1">
           <option value="text">Plain Text</option>
@@ -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>        
@@ -75,7 +80,7 @@
         <input type="checkbox" name="highlight_active" id="highlight_active" checked>        
       </td>
       <td align="right">
-		<img src="logo.png">        
+        <img src="logo.png">        
       </td>
       </tr>
     </table>
@@ -84,9 +89,9 @@
     </div>
     
     <script type="text/editor" id="jstext">function foo(items) {
-	for (var i=0; i<items.length; i++) {
-		alert(items[i] + "juhu";
-	}
+    for (var i=0; i<items.length; i++) {
+        alert(items[i] + "juhu";
+    }
 }</script>
 
     <script type="text/editor" id="csstext">.text-layer {
@@ -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 = {}
@@ -148,37 +154,37 @@ docs.html.setUndoManager(new UndoManager());
 var docEl = document.getElementById("doc");
 
 function onDocChange() {
-  var doc = getDoc();
-  editor.setDocument(doc);
-  
-  var mode = doc.getMode();
-  if (mode instanceof JavaScriptMode) {
-    modeEl.value = "javascript"
-  }
-  else if (mode instanceof CssMode) {
-    modeEl.value = "css"
-  }
-  else if (mode instanceof HtmlMode) {
-    modeEl.value = "html"
-  }
-  else if (mode instanceof XmlMode) {
-    modeEl.value = "xml"
-  }
-  else {
-    modeEl.value = "text"
-  }
-  
-  editor.focus();
+    var doc = getDoc();
+    editor.setDocument(doc);
+    
+    var mode = doc.getMode();
+    if (mode instanceof JavaScriptMode) {
+        modeEl.value = "javascript"
+    }
+    else if (mode instanceof CssMode) {
+        modeEl.value = "css"
+    }
+    else if (mode instanceof HtmlMode) {
+        modeEl.value = "html"
+    }
+    else if (mode instanceof XmlMode) {
+        modeEl.value = "xml"
+    }
+    else {
+        modeEl.value = "text"
+    }
+    
+    editor.focus();
 }
 docEl.onchange = onDocChange;
 
 function getDoc() {
-  return docs[docEl.value];
+    return docs[docEl.value];
 }
 
 var modeEl = document.getElementById("mode");
 modeEl.onchange = function() {
-	editor.getDocument().setMode(getMode());
+    editor.getDocument().setTheme(modeEl.value);
 };
 
 var modes = {
@@ -193,69 +199,74 @@ 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) {
-	  editor.setSelectionStyle("line");
-	} else {
-	  editor.setSelectionStyle("text");
-	}
+    if (selectEl.checked) {
+        editor.setSelectionStyle("line");
+    } else {
+        editor.setSelectionStyle("text");
+    }
 };
 
 var activeEl = document.getElementById("highlight_active");
 activeEl.onchange = function() {
-	editor.setHighlightActiveLine(!!activeEl.checked);
+    editor.setHighlightActiveLine(!!activeEl.checked);
 };
 
 var container = document.getElementById("editor");
-var editor = new Editor(new Renderer(container));
+var editor = new Editor(new Renderer(container, theme));
 onDocChange();
 
 function onResize() {
     container.style.width = (document.documentElement.clientWidth - 4) + "px";
     container.style.height = (document.documentElement.clientHeight - 55 - 4) + "px";     
-	editor.resize();    
+    editor.resize();    
 };
 
 window.onresize = onResize;
 onResize();
 
 ace.addListener(container, "dragover", function(e) {
-  return ace.preventDefault(e);
+    return ace.preventDefault(e);
 });
 
 ace.addListener(container, "drop", function(e) {
-  try {
-    var file = e.dataTransfer.files[0];
-  } catch(e) {
-    return ace.stopEvent();
-  }
-  
-  if (window.FileReader) {
-    var reader = new FileReader();
-    reader.onload = function(e) {
-      editor.getSelection().selectAll();
-      
-      var mode = "text";
-      if (/^.*\.js$/i.test(file.name)) {
-        mode = "javascript";
-      } else if (/^.*\.xml$/i.test(file.name)) {
-        mode = "xml";
-      } else if (/^.*\.html$/i.test(file.name)) {
-        mode = "html";
-      } else if (/^.*\.css$/i.test(file.name)) {
-        mode = "css";
-      }
-      
-      editor.onTextInput(reader.result);
-      
-      modeEl.value = mode;      
-      editor.getDocument().setMode(modes[mode]);
+    try {
+        var file = e.dataTransfer.files[0];
+    } catch(e) {
+        return ace.stopEvent();
     }
-    reader.readAsText(file);
-  }
-  
-  return ace.preventDefault(e);
+    
+    if (window.FileReader) {
+        var reader = new FileReader();
+        reader.onload = function(e) {
+            editor.getSelection().selectAll();
+            
+            var mode = "text";
+            if (/^.*\.js$/i.test(file.name)) {
+                mode = "javascript";
+            } else if (/^.*\.xml$/i.test(file.name)) {
+                mode = "xml";
+            } else if (/^.*\.html$/i.test(file.name)) {
+                mode = "html";
+            } else if (/^.*\.css$/i.test(file.name)) {
+                mode = "css";
+            }
+            
+            editor.onTextInput(reader.result);
+            
+            modeEl.value = mode;      
+            editor.getDocument().setMode(modes[mode]);
+        }
+        reader.readAsText(file);
+    }
+    
+    return ace.preventDefault(e);
 });
 
 
diff --git a/src/ace/Editor.js b/src/ace/Editor.js
index de2304e7..605ff040 100644
--- a/src/ace/Editor.js
+++ b/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);
diff --git a/src/ace/VirtualRenderer.js b/src/ace/VirtualRenderer.js
index 941efae6..bd26655e 100644
--- a/src/ace/VirtualRenderer.js
+++ b/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);
@@ -505,6 +511,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);
 
diff --git a/css/editor.css b/src/ace/css/editor.css
similarity index 100%
rename from css/editor.css
rename to src/ace/css/editor.css
diff --git a/src/ace/layer/Text.js b/src/ace/layer/Text.js
index 7f4197a6..00f93846 100644
--- a/src/ace/layer/Text.js
+++ b/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() {
diff --git a/src/ace/lib/dom.js b/src/ace/lib/dom.js
index a4ee8e14..cc19bbd4 100644
--- a/src/ace/lib/dom.js
+++ b/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);
diff --git a/src/ace/theme/Eclipse.js b/src/ace/theme/Eclipse.js
new file mode 100644
index 00000000..224d9165
--- /dev/null
+++ b/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"
+    };
+})
\ No newline at end of file
diff --git a/src/ace/theme/TextMate.js b/src/ace/theme/TextMate.js
new file mode 100644
index 00000000..c4f74dd5
--- /dev/null
+++ b/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"
+    };
+})
\ No newline at end of file
diff --git a/css/eclipse.css b/src/ace/theme/eclipse.css
similarity index 50%
rename from css/eclipse.css
rename to src/ace/theme/eclipse.css
index 5206e22a..91cb5ee5 100644
--- a/css/eclipse.css
+++ b/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);
 }
\ No newline at end of file
diff --git a/css/tm.css b/src/ace/theme/tm.css
similarity index 55%
rename from css/tm.css
rename to src/ace/theme/tm.css
index e90dba23..0bfb0bee 100644
--- a/css/tm.css
+++ b/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);
 }
\ No newline at end of file
