Fixed #12064, useless spaces in class attributes

highcharts · Sep 27, 2019 · 7b00f42 · 7b00f42
1 parent 589afd1
commit 7b00f42
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 41 deletions.
diff --git a/js/parts/SvgRenderer.js b/js/parts/SvgRenderer.js
@@ -884,21 +884,19 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      *         Return the SVG element for chainability.
      */
     addClass: function (className, replace) {
-        var currentClassName = this.attr('class') || '';
-        if (!replace) {
-            // Filter out existing
-            className = (className || '')
-                .split(/ /g)
-                .reduce(function (newClassName, name) {
-                if (currentClassName.indexOf(name) === -1) {
-                    newClassName.push(name);
-                }
-                return newClassName;
-            }, (currentClassName ?
-                [currentClassName] :
-                []))
-                .join(' ');
-        }
+        var currentClassName = replace ? '' : (this.attr('class') || '');
+        // Trim the string and remove duplicates
+        className = (className || '')
+            .split(/ /g)
+            .reduce(function (newClassName, name) {
+            if (currentClassName.indexOf(name) === -1) {
+                newClassName.push(name);
+            }
+            return newClassName;
+        }, (currentClassName ?
+            [currentClassName] :
+            []))
+            .join(' ');
         if (className !== currentClassName) {
             this.attr('class', className);
         }
@@ -931,7 +929,9 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * @return {Highcharts.SVGElement} Returns the SVG element for chainability.
      */
     removeClass: function (className) {
-        return this.attr('class', (this.attr('class') || '').replace(className, ''));
+        return this.attr('class', (this.attr('class') || '').replace(isString(className) ?
+            new RegExp(" ?" + className + " ?") : // #12064
+            className, ''));
     },
     /**
      * If one of the symbol size affecting parameters are changed,

diff --git a/samples/unit-tests/svgrenderer/addclass-hasclass-removeclass/demo.js b/samples/unit-tests/svgrenderer/addclass-hasclass-removeclass/demo.js
@@ -6,7 +6,21 @@
             key + ': Has class when empty'
         );
 
-        elem.addClass('touched');
+        elem.addClass('  string       with       excessive       spaces  ');
+        assert.strictEqual(
+            node.getAttribute('class'),
+            'string with excessive spaces',
+            key + ': Add class, excessive spaces, no replace'
+        );
+
+        elem.addClass('  string       with       excessive       spaces  ', true);
+        assert.strictEqual(
+            node.getAttribute('class'),
+            'string with excessive spaces',
+            key + ': Add class, excessive spaces, replacing text'
+        );
+
+        elem.addClass('touched', true);
 
         assert.strictEqual(
             node.getAttribute('class'),
@@ -31,7 +45,7 @@
         elem.removeClass('touched');
 
         assert.strictEqual(
-            node.getAttribute('class').trim(),
+            node.getAttribute('class'),
             'touched-again',
             key + ': Removed class'
         );

diff --git a/ts/parts/SvgRenderer.ts b/ts/parts/SvgRenderer.ts
@@ -1511,28 +1511,24 @@ extend((
         className: string,
         replace?: boolean
     ): Highcharts.SVGElement {
-        var currentClassName = this.attr('class') || '';
-
-        if (!replace) {
-
-            // Filter out existing
-            className = (className || '')
-                .split(/ /g)
-                .reduce(function (
-                    newClassName: Array<string>,
-                    name: string
-                ): Array<string> {
-                    if ((currentClassName as any).indexOf(name) === -1) {
-                        newClassName.push(name);
-                    }
-                    return newClassName;
-                }, (currentClassName ?
-                    [currentClassName] :
-                    []
-                ) as Array<string>)
-                .join(' ');
-
-        }
+        var currentClassName = replace ? '' : (this.attr('class') || '');
+
+        // Trim the string and remove duplicates
+        className = (className || '')
+            .split(/ /g)
+            .reduce(function (
+                newClassName: Array<string>,
+                name: string
+            ): Array<string> {
+                if ((currentClassName as any).indexOf(name) === -1) {
+                    newClassName.push(name);
+                }
+                return newClassName;
+            }, (currentClassName ?
+                [currentClassName] :
+                []
+            ) as Array<string>)
+            .join(' ');
 
         if (className !== currentClassName) {
             this.attr('class', className);
@@ -1577,7 +1573,12 @@ extend((
     ): Highcharts.SVGElement {
         return this.attr(
             'class',
-            (this.attr('class') as any || '').replace(className, '')
+            (this.attr('class') as any || '').replace(
+                isString(className) ?
+                    new RegExp(` ?${className} ?`) : // #12064
+                    className,
+                ''
+            )
         ) as any;
     },