From 357d65955a9b6be1ec2a16055aeef69cfe109e8e Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 28 Jul 2008 21:16:39 +0000 Subject: [PATCH] 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 | 80 ++++++++++++++++++++++++++++ tests/BaseTypes/Element.html | 82 +++++++++++++++++++++++++++++ 2 files changed, 162 insertions(+) diff --git a/lib/OpenLayers/BaseTypes/Element.js b/lib/OpenLayers/BaseTypes/Element.js index 6e236ad2e0..b498ce15ca 100644 --- a/lib/OpenLayers/BaseTypes/Element.js +++ b/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 * diff --git a/tests/BaseTypes/Element.html b/tests/BaseTypes/Element.html index 1d81e29fbb..ffe4a59b49 100644 --- a/tests/BaseTypes/Element.html +++ b/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);