Merge pull request svgdotjs#200 from pklingem/master

add class manipulation functions to Element

Author: Wout

dist/svg.js

@@ -1,4 +1,4 @@
-/* svg.js 1.0.0-rc.6-1-g1286e3d - svg inventor regex default color array pointarray patharray number viewbox bbox rbox element parent container fx relative event defs group arrange mask clip gradient pattern doc shape use rect ellipse line poly path image text textpath nested hyperlink sugar set data memory loader helpers - svgjs.com/license */
+/* svg.js 1.0.0-rc.6-8-g63d8846 - svg inventor regex default color array pointarray patharray number viewbox bbox rbox element parent container fx relative event defs group arrange mask clip gradient pattern doc shape use rect ellipse line poly path image text textpath nested hyperlink sugar set data memory loader helpers - svgjs.com/license */
 ;(function() {
 
   this.SVG = function(element) {
@@ -1317,6 +1317,49 @@
     , toString: function() {
         return this.attr('id')
       }
+      // Return array of classes on the node
+    , classes: function() {
+        var classAttr = this.node.getAttribute('class')
+        if (classAttr === null) {
+          return []
+        } else {
+          return classAttr.trim().split(/\s+/)
+        }
+      }
+      // Return true if class exists on the node, false otherwise
+    , hasClass: function(className) {
+        return this.classes().indexOf(className) != -1
+      }
+      // Add class to the node
+    , addClass: function(className) {
+        var classArray
+        if (!(this.hasClass(className))) {
+          classArray = this.classes()
+          classArray.push(className)
+          this.node.setAttribute('class', classArray.join(' '))
+        }
+        return this
+      }
+      // Remove class from the node
+    , removeClass: function(className) {
+        var classArray
+        if (this.hasClass(className)) {
+          classArray = this.classes().filter(function(c) {
+            return c != className
+          })
+          this.node.setAttribute('class', classArray.join(' '))
+        }
+        return this
+      }
+      // Toggle the presence of a class on the node
+    , toggleClass: function(className) {
+        if (this.hasClass(className)) {
+          this.removeClass(className)
+        } else {
+          this.addClass(className)
+        }
+        return this
+      }
       // Private: find svg parent by instance
     , _parent: function(parent) {
         var element = this
@@ -1329,6 +1372,7 @@
     }
   })
 
+
   SVG.Parent = SVG.invent({
     // Initialize node
     create: function(element) {

dist/svg.min.js

@@ -315,9 +315,86 @@ describe('Element', function() {
       expect(element).toBe(circle)
     })
   })
-  
-})
 
+  describe('classes()', function() {
+    it('returns an array of classes on the node', function() {
+      var element = draw.rect(100,100)
+      element.node.setAttribute('class', 'one two')
+      expect(element.classes()).toEqual(['one', 'two'])
+    })
+  })
+
+  describe('hasClass()', function() {
+    it('returns true if the node has the class', function() {
+      var element = draw.rect(100,100)
+      element.node.setAttribute('class', 'one')
+      expect(element.hasClass('one')).toBeTruthy()
+    })
+
+    it('returns false if the node does not have the class', function() {
+      var element = draw.rect(100,100)
+      element.node.setAttribute('class', 'one')
+      expect(element.hasClass('two')).toBeFalsy()
+    })
+  })
+
+  describe('addClass()', function() {
+    it('adds the class to the node', function() {
+      var element = draw.rect(100,100)
+      element.addClass('one')
+      expect(element.hasClass('one')).toBeTruthy()
+    })
+
+    it('does not add duplicate classes', function() {
+      var element = draw.rect(100,100)
+      element.addClass('one')
+      element.addClass('one')
+      expect(element.node.getAttribute('class')).toEqual('one')
+    })
+
+    it('returns the svg instance', function() {
+      var element = draw.rect(100,100)
+      expect(element.addClass('one')).toEqual(element)
+    })
+  })
+
+  describe('removeClass()', function() {
+    it('removes the class from the node when the class exists', function() {
+      var element = draw.rect(100,100)
+      element.addClass('one')
+      element.removeClass('one')
+      expect(element.hasClass('one')).toBeFalsy()
+    })
+
+    it('does nothing when the class does not exist', function() {
+      var element = draw.rect(100,100)
+      element.removeClass('one')
+      expect(element.hasClass('one')).toBeFalsy()
+    })
+
+    it('returns the element', function() {
+      var element = draw.rect(100,100)
+      expect(element.removeClass('one')).toEqual(element)
+    })
+  })
 
+  describe('toggleClass()', function() {
+    it('adds the class when it does not already exist', function(){
+      var element = draw.rect(100,100)
+      element.toggleClass('one')
+      expect(element.hasClass('one')).toBeTruthy()
+    })
 
+    it('removes the class when it already exists', function(){
+      var element = draw.rect(100,100)
+      element.addClass('one')
+      element.toggleClass('one')
+      expect(element.hasClass('one')).toBeFalsy()
+    })
 
+    it('returns the svg instance', function() {
+      var element = draw.rect(100,100)
+      expect(element.toggleClass('one')).toEqual(element)
+    })
+  })
+})

spec/spec/element.js

@@ -341,6 +341,49 @@ SVG.Element = SVG.invent({
   , toString: function() {
       return this.attr('id')
     }
+    // Return array of classes on the node
+  , classes: function() {
+      var classAttr = this.node.getAttribute('class')
+      if (classAttr === null) {
+        return []
+      } else {
+        return classAttr.trim().split(/\s+/)
+      }
+    }
+    // Return true if class exists on the node, false otherwise
+  , hasClass: function(className) {
+      return this.classes().indexOf(className) != -1
+    }
+    // Add class to the node
+  , addClass: function(className) {
+      var classArray
+      if (!(this.hasClass(className))) {
+        classArray = this.classes()
+        classArray.push(className)
+        this.node.setAttribute('class', classArray.join(' '))
+      }
+      return this
+    }
+    // Remove class from the node
+  , removeClass: function(className) {
+      var classArray
+      if (this.hasClass(className)) {
+        classArray = this.classes().filter(function(c) {
+          return c != className
+        })
+        this.node.setAttribute('class', classArray.join(' '))
+      }
+      return this
+    }
+    // Toggle the presence of a class on the node
+  , toggleClass: function(className) {
+      if (this.hasClass(className)) {
+        this.removeClass(className)
+      } else {
+        this.addClass(className)
+      }
+      return this
+    }
     // Private: find svg parent by instance
   , _parent: function(parent) {
       var element = this
@@ -351,4 +394,4 @@ SVG.Element = SVG.invent({
       return element
     }
   }
-})
+})