jcouyang / closure-library

Automatically exported from code.google.com/p/closure-library
0 stars 0 forks source link

goog.dom.classes.add doesn't work on SVG elements #596

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago

What steps will reproduce the problem?
1. Create an svg path element.
2. call goog.dom.classes.add(path_element, 'fooclass');

What is the expected output? What do you see instead?
The path_element should have fooclass in the class list.

Please provide any additional information below.
This fails because goog.dom.classes.add calls goog.dom.classes.get on the 
document element, which returns an empty array because goog.dom.classes.get 
accesses element.className.

But on different browsers, the className attribute for an SVG element is not a 
string, but an SVGAnimatedString:
>>> path_element.className
SVGAnimatedString {animVal: "", baseVal: ""}

This issue broke a goog.ui.Control object I had that had an svg element as the 
internal element.

The workaround I have is to have a custom renderer in my control that overrides 
the enableClassName function using setAttribute:

MyControlRenderer.prototype.enableClassName = function(element, className, 
enable) {
  var current = element.getAttribute('class') || '';
  var class_list = current.split(' ');
  if (enable) {
    class_list.push(className);
    goog.array.removeDuplicates(class_list);
  } else {
    goog.array.remove(class_list, className);
  }
  element.setAttribute('class', class_list.join(' '));
}

Original issue reported on code.google.com by joeheym...@gmail.com on 1 Oct 2013 at 12:34