Remove classes on destroy (shipshapecode#316)

Closes shipshapecode#36
letsila · Sep 20, 2019 · 95bce1e · 95bce1e
1 parent 76f3ccf
commit 95bce1e
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 23 deletions.
diff --git a/src/js/abutment.js b/src/js/abutment.js
@@ -34,28 +34,25 @@ TetherBase.modules.push({
       });
     }
 
-    const allClasses = [];
-    const addClasses = [];
-
     const sides = ['left', 'top', 'right', 'bottom'];
-    allClasses.push(this.getClass('abutted'));
+    this.all.push(this.getClass('abutted'));
     sides.forEach((side) => {
-      allClasses.push(`${this.getClass('abutted')}-${side}`);
+      this.all.push(`${this.getClass('abutted')}-${side}`);
     });
 
     if (abutted.length) {
-      addClasses.push(this.getClass('abutted'));
+      this.add.push(this.getClass('abutted'));
     }
 
     abutted.forEach((side) => {
-      addClasses.push(`${this.getClass('abutted')}-${side}`);
+      this.add.push(`${this.getClass('abutted')}-${side}`);
     });
 
     defer(() => {
       if (!(this.options.addTargetClasses === false)) {
-        updateClasses(this.target, addClasses, allClasses);
+        updateClasses(this.target, this.add, this.all);
       }
-      updateClasses(this.element, addClasses, allClasses);
+      updateClasses(this.element, this.add, this.all);
     });
 
     return true;

diff --git a/src/js/tether.js b/src/js/tether.js
@@ -250,10 +250,7 @@ class TetherClass extends Evented {
       }
     });
 
-    addClass(this.element, this.getClass('element'));
-    if (!(this.options.addTargetClasses === false)) {
-      addClass(this.target, this.getClass('target'));
-    }
+    this._addClasses();
 
     if (!this.options.attachment) {
       throw new Error('Tether Error: You must provide an attachment');
@@ -424,6 +421,8 @@ class TetherClass extends Evented {
   destroy() {
     this.disable();
 
+    this._removeClasses();
+
     tethers.forEach((tether, i) => {
       if (tether === this) {
         tethers.splice(i, 1);
@@ -451,35 +450,35 @@ class TetherClass extends Evented {
     if (typeof this._addAttachClasses === 'undefined') {
       this._addAttachClasses = [];
     }
-    const add = this._addAttachClasses;
+    this.add = this._addAttachClasses;
 
     if (elementAttach.top) {
-      add.push(`${this.getClass('element-attached')}-${elementAttach.top}`);
+      this.add.push(`${this.getClass('element-attached')}-${elementAttach.top}`);
     }
     if (elementAttach.left) {
-      add.push(`${this.getClass('element-attached')}-${elementAttach.left}`);
+      this.add.push(`${this.getClass('element-attached')}-${elementAttach.left}`);
     }
     if (targetAttach.top) {
-      add.push(`${this.getClass('target-attached')}-${targetAttach.top}`);
+      this.add.push(`${this.getClass('target-attached')}-${targetAttach.top}`);
     }
     if (targetAttach.left) {
-      add.push(`${this.getClass('target-attached')}-${targetAttach.left}`);
+      this.add.push(`${this.getClass('target-attached')}-${targetAttach.left}`);
     }
 
-    const all = [];
+    this.all = [];
     sides.forEach((side) => {
-      all.push(`${this.getClass('element-attached')}-${side}`);
-      all.push(`${this.getClass('target-attached')}-${side}`);
+      this.all.push(`${this.getClass('element-attached')}-${side}`);
+      this.all.push(`${this.getClass('target-attached')}-${side}`);
     });
 
     defer(() => {
       if (!(typeof this._addAttachClasses !== 'undefined')) {
         return;
       }
 
-      updateClasses(this.element, this._addAttachClasses, all);
+      updateClasses(this.element, this._addAttachClasses, this.all);
       if (!(this.options.addTargetClasses === false)) {
-        updateClasses(this.target, this._addAttachClasses, all);
+        updateClasses(this.target, this._addAttachClasses, this.all);
       }
 
       delete this._addAttachClasses;
@@ -810,6 +809,25 @@ class TetherClass extends Evented {
       });
     }
   }
+
+  _addClasses() {
+    addClass(this.element, this.getClass('element'));
+    if (!(this.options.addTargetClasses === false)) {
+      addClass(this.target, this.getClass('target'));
+    }
+  }
+
+  _removeClasses() {
+    removeClass(this.element, this.getClass('element'));
+    if (!(this.options.addTargetClasses === false)) {
+      removeClass(this.target, this.getClass('target'));
+    }
+
+    this.all.forEach((className) => {
+      this.element.classList.remove(className);
+      this.target.classList.remove(className);
+    });
+  }
 }
 
 TetherClass.modules = [];

diff --git a/test/unit/tether.spec.js b/test/unit/tether.spec.js
@@ -0,0 +1,32 @@
+import Tether from '../../src/js/tether.js';
+
+describe('Tether', () => {
+  describe('destroy()', () => {
+    it('removes classes on destroy', () => {
+      const element = document.createElement('div');
+      element.classList.add('element');
+      document.body.appendChild(element);
+      const target = document.createElement('div');
+      target.classList.add('target');
+      document.body.appendChild(target);
+      expect(element.classList.length, 'element - only one class').toEqual(1);
+      expect(target.classList.length, 'target - only one class').toEqual(1);
+      const tether = new Tether({
+        element: '.element',
+        target: '.target',
+        attachment: 'top left',
+        targetAttachment: 'top right'
+      });
+
+      tether.enable();
+
+      expect(element.classList.length, 'element - tether classes added').toEqual(12);
+      expect(target.classList.length, 'target - tether classes added').toEqual(12);
+
+      tether.destroy();
+
+      expect(element.classList.length, 'element - destroy sets classes back to initial state').toEqual(1);
+      expect(target.classList.length, 'target - destroy sets classes back to initial state').toEqual(1);
+    });
+  });
+});