From 09a09e8ac221d14730e3748454ae170ddd4c85f4 Mon Sep 17 00:00:00 2001
From: Fabian Jakobs <fabian.jakobs@web.de>
Date: Wed, 21 Apr 2010 16:27:23 +0200
Subject: [PATCH] better CSS class handling

---
 css/editor.css         |  4 ++--
 demo/editor.html       |  6 +++---
 src/ScrollBar.js       |  2 +-
 src/VirtualRenderer.js |  6 +++---
 src/ace.js             | 25 +++++++++++++++++++++++++
 5 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/css/editor.css b/css/editor.css
index 43746d93..a28f10f4 100644
--- a/css/editor.css
+++ b/css/editor.css
@@ -15,14 +15,14 @@
   overflow-y: hidden;
 }
 
-.editor .scrollbar {
+.editor .sb {
   position: absolute;
   overflow-x: hidden;
   overflow-y: scroll;
   right: 0;
 }
 
-.editor .scrollbar div {
+.editor .sb div {
   position: absolute;
   width: 1px;
   left: -10px;
diff --git a/demo/editor.html b/demo/editor.html
index e93d2bee..425aebd9 100644
--- a/demo/editor.html
+++ b/demo/editor.html
@@ -96,7 +96,7 @@
         <input type="checkbox" name="highlight_active" id="highlight_active" checked>        
       </td>
       <td align="right">
-		<img src="logo.png"></img>        
+		<img src="logo.png">        
       </td>
       </tr>
     </table>
@@ -108,7 +108,7 @@
     for (var i=0; i<items.length; i++) {
         alert(items[i] + "juhu";
     }
-} 
+}
     </script>
 
     <script type="text/editor" id="csstext">.text-layer {
@@ -246,7 +246,7 @@ ace.addListener(container, "drop", function(e) {
         mode = "html";
       } else if (/^.*\.css$/i.test(file.name)) {
         mode = "css";
-      }      
+      }
       
       editor.onTextInput(reader.result);
       
diff --git a/src/ScrollBar.js b/src/ScrollBar.js
index c1615ea5..b4a35bac 100644
--- a/src/ScrollBar.js
+++ b/src/ScrollBar.js
@@ -4,7 +4,7 @@ ace.ScrollBar = function(parent) {
     this.$initEvents();
 
     this.element = document.createElement("div");
-    this.element.className = "scrollbar";
+    this.element.className = "sb";
 
     this.inner = document.createElement("div");
     this.element.appendChild(this.inner);
diff --git a/src/VirtualRenderer.js b/src/VirtualRenderer.js
index 5f1cb1ca..8d720cc7 100644
--- a/src/VirtualRenderer.js
+++ b/src/VirtualRenderer.js
@@ -2,7 +2,7 @@ ace.provide("ace.VirtualRenderer");
 
 ace.VirtualRenderer = function(container) {
     this.container = container;
-    this.container.className += " editor";
+    ace.addCssClass(this.container, "editor");
 
     this.scroller = document.createElement("div");
     this.scroller.className = "scroller";
@@ -233,11 +233,11 @@ ace.VirtualRenderer.prototype.screenToTextCoordinates = function(pageX, pageY) {
 };
 
 ace.VirtualRenderer.prototype.visualizeFocus = function() {
-    //this.container.className = "editor focus";
+    ace.addCssClass(this.container, "focus");
 };
 
 ace.VirtualRenderer.prototype.visualizeBlur = function() {
-    //this.container.className = "editor";
+    ace.removeCssClass(this.container, "focus");
 };
 
 ace.VirtualRenderer.prototype.showComposition = function(position) {
diff --git a/src/ace.js b/src/ace.js
index fb0ce76b..b4c6eee0 100644
--- a/src/ace.js
+++ b/src/ace.js
@@ -78,6 +78,31 @@ ace.preventDefault = function(e) {
         e.returnValue = false;
 };
 
+
+ace.hasCssClass = function(el, name) {
+    var classes = el.className.split(/\s*/g);
+    return ace.arrayIndexOf(classes, name) !== -1; 
+};
+
+
+ace.addCssClass = function(el, name) {
+    if (!ace.hasCssClass(el, name)) {
+        el.className += " " + name;
+    }
+};
+
+ace.removeCssClass = function(el, name) {
+    var classes = el.className.split(/\s+/g);
+    while (true) {
+        var index = ace.arrayIndexOf(classes, name);
+        if (index == -1) {
+            break;
+        }
+        classes.splice(index, 1);
+    }
+    el.className = classes.join(" ");
+};
+
 ace.getInnerWidth = function(element) {
     return (parseInt(ace.computedStyle(element, "paddingLeft"))
             + parseInt(ace.computedStyle(element, "paddingRight")) + element.clientWidth);