Adding functions to manage dom element class names. Use OpenLayers.Element.hasClass, addClass, removeClass, toggleClass for css class name management. r=pagameba,me (closes #1607)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@7579 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/BaseTypes/Element.js

@@ -123,6 +123,86 @@ OpenLayers.Element = {
         return {width: originalWidth, height: originalHeight};
     },
 
+    /**
+     * Function: hasClass
+     * Tests if an element has the given CSS class name.
+     *
+     * Parameters:
+     * element - {DOMElement} A DOM element node.
+     * name - {String} The CSS class name to search for.
+     *
+     * Returns:
+     * {Boolean} The element has the given class name.
+     */
+    hasClass: function(element, name) {
+        var names = element.className;
+        return (!!names && new RegExp("(^|\\s)" + name + "(\\s|$)").test(names));
+    },
+    
+    /**
+     * Function: addClass
+     * Add a CSS class name to an element.  Safe where element already has
+     *     the class name.
+     *
+     * Parameters:
+     * element - {DOMElement} A DOM element node.
+     * name - {String} The CSS class name to add.
+     *
+     * Returns:
+     * {DOMElement} The element.
+     */
+    addClass: function(element, name) {
+        if(!OpenLayers.Element.hasClass(element, name)) {
+            element.className += (element.className ? " " : "") + name;
+        }
+        return element;
+    },
+
+    /**
+     * Function: removeClass
+     * Remove a CSS class name from an element.  Safe where element does not
+     *     have the class name.
+     *
+     * Parameters:
+     * element - {DOMElement} A DOM element node.
+     * name - {String} The CSS class name to remove.
+     *
+     * Returns:
+     * {DOMElement} The element.
+     */
+    removeClass: function(element, name) {
+        var names = element.className;
+        if(names) {
+            element.className = OpenLayers.String.trim(
+                names.replace(
+                    new RegExp("(^|\\s+)" + name + "(\\s+|$)"), " "
+                )
+            );
+        }
+        return element;
+    },
+
+    /**
+     * Function: toggleClass
+     * Remove a CSS class name from an element if it exists.  Add the class name
+     *     if it doesn't exist.
+     *
+     * Parameters:
+     * element - {DOMElement} A DOM element node.
+     * name - {String} The CSS class name to toggle.
+     *
+     * Returns:
+     * {DOMElement} The element.
+     */
+    toggleClass: function(element, name) {
+        if(OpenLayers.Element.hasClass(element, name)) {
+            OpenLayers.Element.removeClass(element, name);
+        } else {
+            OpenLayers.Element.addClass(element, name);
+        }
+        return element;
+    },
+
     /**
      * APIFunction: getStyle
      * 

tests/BaseTypes/Element.html

@@ -136,6 +136,88 @@
 
     }    
 
+    function test_hasClass(t) {        
+        t.plan(14);
+        var has = OpenLayers.Element.hasClass;
+
+        var element = document.createElement("div");
+        element.className = "fe fi fo fum one.part two-part three:part four";
+        
+        t.ok(has(element, "fe"), "has fe");
+        t.ok(has(element, "fi"), "has fi");
+        t.ok(has(element, "fo"), "has fo");
+        t.ok(!has(element, "f"), "hasn't f");
+        t.ok(!has(element, "o"), "hasn't o");
+        t.ok(!has(element, "fumb"), "hasn't fumb");
+        t.ok(!has(element, "one"), "hasn't one");
+        t.ok(has(element, "one.part"), "has one.part");
+        t.ok(!has(element, "two"), "hasn't two");
+        t.ok(has(element, "two-part"), "has two-part");
+        t.ok(!has(element, "three"), "hasn't three");
+        t.ok(has(element, "three:part"), "has three:part");
+        t.ok(has(element, "four"), "has four");
+        
+        element.className = "";
+        t.ok(!has(element, "nada"), "hasn't nada");
+    }
+
+    function test_addClass(t) {        
+        t.plan(6);
+        var add = OpenLayers.Element.addClass;
+        
+        var element = document.createElement("div");
+        element.id = "foo";
+        t.eq(element.className, "", "starts with no class name");
+        
+        var mod = add(element, "first");
+        t.eq(mod.id, element.id, "returns the same element");
+        t.eq(element.className, "first", "properly adds first class name");        
+        t.eq(add(element, "second").className, "first second",
+             "properly adds second class name");
+        t.eq(add(element, "second").className, "first second",
+             "doesn't do anything for duplicated names");
+        t.eq(add(element, "third").className, "first second third",
+             "properly adds third class name");
+    }
+    
+    function test_removeClass(t) {
+        t.plan(5);
+        var remove = OpenLayers.Element.removeClass;
+        
+        var element = document.createElement("div");
+        element.id = "foo";
+        element.className = "first second middle fourth last";
+        
+        var mod = remove(element, "last");
+        t.eq(mod.id, element.id, "returns the same element");
+        t.eq(element.className, "first second middle fourth",
+             "properly removes last class name");
+        t.eq(remove(element, "first").className, "second middle fourth",
+             "properly removes first class name");
+        t.eq(remove(element, "middle").className, "second fourth",
+             "properly removes middle class name");
+        t.eq(remove(element, "nada").className, "second fourth",
+             "doesn't do anything for bogus class name");
+    }
+
+    function test_toggleClass(t) {
+        t.plan(5);
+        var toggle = OpenLayers.Element.toggleClass;
+        
+        var element = document.createElement("div");
+        element.id = "foo";
+        
+        var mod = toggle(element, "first");
+        t.eq(mod.id, element.id, "returns the same element");
+        t.eq(element.className, "first", "adds first new class name");
+        t.eq(toggle(element, "second").className, "first second",
+             "adds second new class name");
+        t.eq(toggle(element, "first").className, "second",
+             "removes first existing class name");
+        t.eq(toggle(element, "second").className, "",
+             "removes second existing class name");
+    }
+
     function test_Element_getStyle(t) {
         t.plan(4);