better CSS class handling

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;

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);
       

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);

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) {

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);