Merge pull request #4 from justeat/custom-class

Added ability to specify a custom toggle class.
justeat · Sep 20, 2017 · 106d733 · 106d733
2 parents 34c5470 + d47e435
commit 106d733
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,15 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+
+v0.3.0
+------------------------------
+*September 20, 2017*
+
+### Added
+- Added ability to specify a `data-toggle-class` attribute in order to toggle a custom class.
+
+
 v0.2.0
 ------------------------------
 *September 18, 2017*

diff --git a/README.md b/README.md
@@ -68,6 +68,16 @@ You can specify multiple targets and states by separating them with a space
 
 This will toggle the visibility of `alpha` & `beta`, hide `gamma`, and show `delta`.
 
+### Toggle a custom class
+
+You can specify a custom toggle class by adding the `data-toggle-class` attribute
+
+```html
+<a data-toggle-target="toggle-me" data-toggle-class="toggled">Trigger toggle</a>
+```
+
+In this example the `toggled` class will be applied to the target element (rather than the default `is-hidden` class).
+
 ## Running the unit tests
 
 This module is [covered by a suite of unit tests](test/index.test.js). To run them simply run `yarn test` on the command line.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeat/f-toggle",
   "description": "Fozzie vanilla JS toggle library.",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "dist/index.js",
   "homepage": "https://github.com/justeat/f-toggle",
   "contributors": [

diff --git a/src/index.js b/src/index.js
@@ -14,28 +14,28 @@
  * @property {object} show Shows an element.
  * @property {object} hide Hides an element.
  */
-const toggles = {
+const toggles = toggleClass => ({
     toggle (element) {
-        element.classList.toggle('is-hidden');
+        element.classList.toggle(toggleClass);
     },
 
     show (element) {
-        element.classList.remove('is-hidden');
+        element.classList.remove(toggleClass);
     },
 
     hide (element) {
-        element.classList.add('is-hidden');
+        element.classList.add(toggleClass);
     }
-};
+});
 
 /**
  * Handles the toggle element click events
  *
  * @param {string|string[]} targets
  */
-const handleToggles = targets => {
+const handleToggles = (targets, toggleClass) => {
     if (!Array.isArray(targets)) {
-        handleToggles(targets.split(' '));
+        handleToggles(targets.split(' '), toggleClass);
         return;
     }
 
@@ -46,8 +46,10 @@ const handleToggles = targets => {
             parts.unshift('toggle');
         }
 
-        $(`[data-toggle-name~=${parts[1]}]`)
-            .forEach(toggles[parts[0]]);
+        const [ toggleType, toggleName ] = parts;
+
+        $(`[data-toggle-name~=${toggleName}]`)
+            .forEach(toggles(toggleClass)[toggleType]);
     });
 
 };
@@ -61,7 +63,10 @@ export default () => {
             toggle.addEventListener('click', e => {
                 e.preventDefault();
 
-                handleToggles(toggle.getAttribute('data-toggle-target'));
+                const target = toggle.getAttribute('data-toggle-target');
+                const toggleClass = toggle.getAttribute('data-toggle-class') || 'is-hidden';
+
+                handleToggles(target, toggleClass);
             });
         });
 };
diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
@@ -1,6 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`hide applies hidden class 1`] = `
+exports[`hide adds custom class 1`] = `
+"
+            <div data-toggle-name=\\"test\\" class=\\"toggled\\"></div>
+            <button data-toggle-target=\\"hide:test\\" data-toggle-class=\\"toggled\\"></button>
+        "
+`;
+
+exports[`hide adds hidden class 1`] = `
 "
             <div data-toggle-name=\\"test\\" class=\\"is-hidden\\"></div>
             <button data-toggle-target=\\"hide:test\\"></button>
@@ -63,14 +70,28 @@ exports[`show does nothing when element is already shown 1`] = `
         "
 `;
 
+exports[`show removes custom class 1`] = `
+"
+            <div data-toggle-name=\\"test\\" class=\\"\\"></div>
+            <button data-toggle-target=\\"show:test\\" data-toggle-class=\\"toggled\\"></button>
+        "
+`;
+
 exports[`show removes hidden class 1`] = `
 "
             <div data-toggle-name=\\"test\\" class=\\"\\"></div>
             <button data-toggle-target=\\"show:test\\"></button>
         "
 `;
 
-exports[`toggle applies hidden class 1`] = `
+exports[`toggle adds custom class when specified 1`] = `
+"
+            <div data-toggle-name=\\"test\\" class=\\"toggled\\"></div>
+            <button data-toggle-target=\\"test\\" data-toggle-class=\\"toggled\\"></button>
+        "
+`;
+
+exports[`toggle adds hidden class 1`] = `
 "
             <div data-toggle-name=\\"test\\" class=\\"is-hidden\\"></div>
             <button data-toggle-target=\\"test\\"></button>
@@ -93,6 +114,13 @@ exports[`toggle can handle multiple targets 1`] = `
         "
 `;
 
+exports[`toggle removes custom class when specified 1`] = `
+"
+            <div data-toggle-name=\\"test\\" class=\\"\\"></div>
+            <button data-toggle-target=\\"test\\" data-toggle-class=\\"toggled\\"></button>
+        "
+`;
+
 exports[`toggle removes hidden class 1`] = `
 "
             <div data-toggle-name=\\"test\\" class=\\"\\"></div>

diff --git a/test/index.test.js b/test/index.test.js
@@ -12,7 +12,7 @@ describe('module', () => {
 
 describe('toggle', () => {
 
-    it('applies hidden class', () => {
+    it('adds hidden class', () => {
         // Arrange
         TestUtils.setHtml(`
             <div data-toggle-name="test"></div>
@@ -45,6 +45,38 @@ describe('toggle', () => {
         expect(TestUtils.getHtml()).toMatchSnapshot();
     });
 
+    it('adds custom class when specified', () => {
+        // Arrange
+        TestUtils.setHtml(`
+            <div data-toggle-name="test"></div>
+            <button data-toggle-target="test" data-toggle-class="toggled"></button>
+        `);
+        const button = document.querySelector('button');
+
+        // Act
+        toggle();
+        TestUtils.click(button);
+
+        // Assert
+        expect(TestUtils.getHtml()).toMatchSnapshot();
+    });
+
+    it('removes custom class when specified', () => {
+        // Arrange
+        TestUtils.setHtml(`
+            <div data-toggle-name="test" class="toggled"></div>
+            <button data-toggle-target="test" data-toggle-class="toggled"></button>
+        `);
+        const button = document.querySelector('button');
+
+        // Act
+        toggle();
+        TestUtils.click(button);
+
+        // Assert
+        expect(TestUtils.getHtml()).toMatchSnapshot();
+    });
+
     it('can handle multiple targets', () => {
         // Arrange
         TestUtils.setHtml(`
@@ -115,6 +147,22 @@ describe('show', () => {
         expect(TestUtils.getHtml()).toMatchSnapshot();
     });
 
+    it('removes custom class', () => {
+        // Arrange
+        TestUtils.setHtml(`
+            <div data-toggle-name="test" class="toggled"></div>
+            <button data-toggle-target="show:test" data-toggle-class="toggled"></button>
+        `);
+        const button = document.querySelector('button');
+
+        // Act
+        toggle();
+        TestUtils.click(button);
+
+        // Assert
+        expect(TestUtils.getHtml()).toMatchSnapshot();
+    });
+
     it('can handle multiple targets', () => {
         // Arrange
         TestUtils.setHtml(`
@@ -169,7 +217,7 @@ describe('hide', () => {
         expect(TestUtils.getHtml()).toMatchSnapshot();
     });
 
-    it('applies hidden class', () => {
+    it('adds hidden class', () => {
         // Arrange
         TestUtils.setHtml(`
             <div data-toggle-name="test"></div>
@@ -185,6 +233,22 @@ describe('hide', () => {
         expect(TestUtils.getHtml()).toMatchSnapshot();
     });
 
+    it('adds custom class', () => {
+        // Arrange
+        TestUtils.setHtml(`
+            <div data-toggle-name="test"></div>
+            <button data-toggle-target="hide:test" data-toggle-class="toggled"></button>
+        `);
+        const button = document.querySelector('button');
+
+        // Act
+        toggle();
+        TestUtils.click(button);
+
+        // Assert
+        expect(TestUtils.getHtml()).toMatchSnapshot();
+    });
+
     it('can handle multiple targets', () => {
         // Arrange
         TestUtils.setHtml(`