diff --git a/CHANGELOG.md b/CHANGELOG.md
index d9f6a00..71b652f 100644
--- 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
index 97b0645..c0919de 100644
--- 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
+Trigger toggle
+```
+
+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
index e12c1ec..d69c666 100644
--- 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
index 7a2937c..d5f41eb 100644
--- 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
index 434afda..7edfbc8 100644
--- 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`] = `
+"
+
+
+ "
+`;
+
+exports[`hide adds hidden class 1`] = `
"
@@ -63,6 +70,13 @@ exports[`show does nothing when element is already shown 1`] = `
"
`;
+exports[`show removes custom class 1`] = `
+"
+
+
+ "
+`;
+
exports[`show removes hidden class 1`] = `
"
@@ -70,7 +84,14 @@ exports[`show removes hidden class 1`] = `
"
`;
-exports[`toggle applies hidden class 1`] = `
+exports[`toggle adds custom class when specified 1`] = `
+"
+
+
+ "
+`;
+
+exports[`toggle adds hidden class 1`] = `
"
@@ -93,6 +114,13 @@ exports[`toggle can handle multiple targets 1`] = `
"
`;
+exports[`toggle removes custom class when specified 1`] = `
+"
+
+
+ "
+`;
+
exports[`toggle removes hidden class 1`] = `
"
diff --git a/test/index.test.js b/test/index.test.js
index 21e85dc..d8c9f36 100644
--- 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(`
@@ -45,6 +45,38 @@ describe('toggle', () => {
expect(TestUtils.getHtml()).toMatchSnapshot();
});
+ it('adds custom class when specified', () => {
+ // Arrange
+ TestUtils.setHtml(`
+
+
+ `);
+ const button = document.querySelector('button');
+
+ // Act
+ toggle();
+ TestUtils.click(button);
+
+ // Assert
+ expect(TestUtils.getHtml()).toMatchSnapshot();
+ });
+
+ it('removes custom class when specified', () => {
+ // Arrange
+ TestUtils.setHtml(`
+
+
+ `);
+ 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(`
+
+
+ `);
+ 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(`
@@ -185,6 +233,22 @@ describe('hide', () => {
expect(TestUtils.getHtml()).toMatchSnapshot();
});
+ it('adds custom class', () => {
+ // Arrange
+ TestUtils.setHtml(`
+
+
+ `);
+ const button = document.querySelector('button');
+
+ // Act
+ toggle();
+ TestUtils.click(button);
+
+ // Assert
+ expect(TestUtils.getHtml()).toMatchSnapshot();
+ });
+
it('can handle multiple targets', () => {
// Arrange
TestUtils.setHtml(`