support manipulating classnames on SVG elements

Fixes #468
madrobby · Sep 28, 2012 · 122b014 · 122b014
1 parent 74bd6f5
commit 122b014
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/src/zepto.js b/src/zepto.js
@@ -225,6 +225,15 @@ var Zepto = (function() {
     value == null ? node.removeAttribute(name) : node.setAttribute(name, value)
   }
 
+  // access className property while respecting SVGAnimatedString
+  function className(node, value){
+    var klass = node.className,
+        svg   = klass && klass.baseVal !== undefined
+
+    if (value === undefined) return svg ? klass.baseVal : klass
+    svg ? (klass.baseVal = value) : (node.className = value)
+  }
+
   $.isFunction = isFunction
   $.isObject = isObject
   $.isArray = isArray
@@ -540,32 +549,31 @@ var Zepto = (function() {
     },
     hasClass: function(name){
       if (this.length < 1) return false
-      else return classRE(name).test(this[0].className)
+      else return classRE(name).test(className(this[0]))
     },
     addClass: function(name){
       return this.each(function(idx){
         classList = []
-        var cls = this.className, newName = funcArg(this, name, idx, cls)
+        var cls = className(this), newName = funcArg(this, name, idx, cls)
         newName.split(/\s+/g).forEach(function(klass){
           if (!$(this).hasClass(klass)) classList.push(klass)
         }, this)
-        classList.length && (this.className += (cls ? " " : "") + classList.join(" "))
+        classList.length && className(this, cls + (cls ? " " : "") + classList.join(" "))
       })
     },
     removeClass: function(name){
       return this.each(function(idx){
-        if (name === undefined)
+        if (name === undefined) return className(this, '')
-          return this.className = ''
+        classList = className(this)
-        classList = this.className
         funcArg(this, name, idx, classList).split(/\s+/g).forEach(function(klass){
           classList = classList.replace(classRE(klass), " ")
         })
-        this.className = classList.trim()
+        className(this, classList.trim())
       })
     },
     toggleClass: function(name, when){
       return this.each(function(idx){
-        var newName = funcArg(this, name, idx, this.className)
+        var newName = funcArg(this, name, idx, className(this))
         ;(when === undefined ? !$(this).hasClass(newName) : when) ?
           $(this).addClass(newName) : $(this).removeClass(newName)
       })

diff --git a/test/zepto.html b/test/zepto.html
@@ -224,6 +224,8 @@ <h1>Zepto DOM unit tests</h1>
     </form>
   </div>
 
+  <svg></svg>
+
   </div><!-- fixtures -->
 
   <script>
@@ -1949,6 +1951,20 @@ <h1>Zepto DOM unit tests</h1>
         t.assert($('#toggle_element').hasClass('yellow'))
       },
 
+      testClassSVG: function(t){
+        var svg = $('svg')
+        t.assert(!svg.hasClass('foo'))
+        svg.addClass('foo bar')
+        t.assert(svg.hasClass('foo'))
+        t.assert(svg.hasClass('bar'))
+        svg.removeClass('foo')
+        t.assert(!svg.hasClass('foo'))
+        t.assert(svg.hasClass('bar'))
+        svg.toggleClass('bar')
+        t.assert(!svg.hasClass('foo'))
+        t.assert(!svg.hasClass('bar'))
+      },
+
       testIndex: function(t){
         t.assertEqual($("p > span").index("#nay"), 2)
         t.assertEqual($("p > span").index(".yay"), 0)