Fix has/add/removeClass for SVG elements in IE

ausi · Apr 23, 2017 · 78e1fc6 · 78e1fc6
1 parent 2ca7422
commit 78e1fc6
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 23 deletions.
diff --git a/cq-prolyfill.js b/cq-prolyfill.js
@@ -1221,7 +1221,7 @@ function filterRulesByElementAndProp(rules, element, prop) {
 	if (element.id) {
 		foundRules = foundRules.concat(rules['#' + element.id] || []);
 	}
-	(element.getAttribute('class') || '').split(/\s+/).forEach(function(className) {
+	getClassName(element).split(/\s+/).forEach(function(className) {
 		foundRules = foundRules.concat(rules['.' + className] || []);
 	});
 	foundRules = foundRules
@@ -1388,6 +1388,22 @@ function createCacheMap() {
 	};
 }
 
+/**
+ * @param  {Element} element
+ * @return {string}
+ */
+function getClassName(element) {
+	return element.getAttribute('class') || '';
+}
+
+/**
+ * @param {Element} element
+ * @param {string}  className
+ */
+function setClassName(element, className) {
+	element.setAttribute('class', className);
+}
+
 /**
  * @param {Element} element
  * @param {string}  className
@@ -1396,7 +1412,7 @@ function hasClass(element, className) {
 	if (element.classList) {
 		return element.classList.contains(className);
 	}
-	return !!element.className.match(new RegExp(
+	return !!getClassName(element).match(new RegExp(
 		'(?:^|\\s+)'
 		+ className.replace(REGEXP_ESCAPE_REGEXP, '\\$&')
 		+ '($|\\s+)'
@@ -1412,7 +1428,7 @@ function addClass(element, className) {
 		element.classList.add(className);
 	}
 	else if (!hasClass(element, className)) {
-		element.className += ' ' + className;
+		setClassName(element, getClassName(element) + ' ' + className)
 	}
 }
 
@@ -1425,14 +1441,14 @@ function removeClass(element, className) {
 		element.classList.remove(className);
 	}
 	else {
-		element.className = element.className.replace(
+		setClassName(element, getClassName(element).replace(
 			new RegExp(
 				'(?:^|\\s+)'
 				+ className.replace(REGEXP_ESCAPE_REGEXP, '\\$&')
 				+ '($|\\s+)'
 			),
 			'$1'
-		);
+		));
 	}
 }
 

diff --git a/tests.js b/tests.js
@@ -928,28 +928,34 @@ QUnit.test('createCacheMap', function(assert) {
 
 });
 
-/*global addClass, removeClass*/
+/*global addClass, removeClass, getClassName*/
 QUnit.test('addClass, removeClass', function(assert) {
 
 	var element = document.createElement('div');
+	element.innerHTML = '<svg><g>';
+	var svgElement = element.querySelector('g');
+
+	[element, svgElement].forEach(function(element) {
+
+		addClass(element, 'foo');
+		assert.equal(getClassName(element).trim(), 'foo', 'Add class foo');
+		addClass(element, 'bar');
+		assert.equal(getClassName(element).trim(), 'foo bar', 'Add class bar');
+		addClass(element, 'bar');
+		assert.equal(getClassName(element).trim(), 'foo bar', 'Add class bar again');
+		addClass(element, ':container(width>=100px)');
+		assert.equal(getClassName(element).trim(), 'foo bar :container(width>=100px)', 'Add container query class');
+		addClass(element, ':container(width>=100px)');
+		assert.equal(getClassName(element).trim(), 'foo bar :container(width>=100px)', 'Add container query class again');
+
+		removeClass(element, 'foo');
+		assert.equal(getClassName(element).trim(), 'bar :container(width>=100px)', 'Remove class foo');
+		removeClass(element, 'bar');
+		assert.equal(getClassName(element).trim(), ':container(width>=100px)', 'Remove class bar');
+		removeClass(element, ':container(width>=100px)');
+		assert.equal(getClassName(element).trim(), '', 'Remove container query class');
 
-	addClass(element, 'foo');
-	assert.equal(element.className.trim(), 'foo', 'Add class foo');
-	addClass(element, 'bar');
-	assert.equal(element.className.trim(), 'foo bar', 'Add class bar');
-	addClass(element, 'bar');
-	assert.equal(element.className.trim(), 'foo bar', 'Add class bar again');
-	addClass(element, ':container(width>=100px)');
-	assert.equal(element.className.trim(), 'foo bar :container(width>=100px)', 'Add container query class');
-	addClass(element, ':container(width>=100px)');
-	assert.equal(element.className.trim(), 'foo bar :container(width>=100px)', 'Add container query class again');
-
-	removeClass(element, 'foo');
-	assert.equal(element.className.trim(), 'bar :container(width>=100px)', 'Remove class foo');
-	removeClass(element, 'bar');
-	assert.equal(element.className.trim(), ':container(width>=100px)', 'Remove class bar');
-	removeClass(element, ':container(width>=100px)');
-	assert.equal(element.className.trim(), '', 'Remove container query class');
+	});
 
 });