Merge pull request #2 from justeat/module

Added toggle function with unit tests.

.babelrc

@@ -1,3 +1,6 @@
 {
-  "presets": ["es2015"]
+  "presets": [
+    "es2015",
+    "babili"
+  ]
 }

CHANGELOG.md

@@ -3,6 +3,20 @@
 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.1.0
+------------------------------
+*September 05, 2017*
+
+### Added
+- Added toggle function.
+- Added toggle function unit tests.
+- Added `compile` task.
+
+### Changed
+- Main function set to transpiled file.
+- `prestart` task now runs `lint`, `test`, and `compile` scripts.
+
+
 v0.0.1
 ------------------------------
 *September 04, 2017*

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@justeat/f-toggle",
   "description": "Fozzie vanilla JS toggle library.",
-  "version": "0.0.1",
-  "main": "index.js",
+  "version": "0.1.0",
+  "main": "dist/index.js",
   "homepage": "https://github.com/justeat/f-toggle",
   "contributors": [
     "Github contributors <https://github.com/justeat/f-toggle/graphs/contributors>"
@@ -20,20 +20,29 @@
   },
   "dependencies": {
     "@justeat/gulp-build-fozzie": "^6.0.0",
+    "babel-cli": "^6.26.0",
+    "babel-preset-babili": "^0.1.4",
     "babel-preset-es2015": "^6.24.1",
+    "gulp": "^3.9.1",
     "qwery": "^4.0.0"
   },
   "keywords": [
     "fozzie"
   ],
   "scripts": {
-    "prestart": "yarn test",
+    "prestart": "yarn run lint && yarn test && yarn run compile",
+    "compile": "babel -d dist src",
     "test": "gulp scripts:test",
     "test:cover": "gulp scripts:test:coverage",
     "test:cover:CI": "cat coverage/lcov.info | coveralls",
     "lint": "gulp scripts:lint"
   },
   "devDependencies": {
     "coveralls": "^2.13.1"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}"
+    ]
   }
 }

src/index.js

@@ -0,0 +1,67 @@
+/**
+ * @overview Fozzie vanilla JS toggle library.
+ *
+ * @module toggle
+ */
+
+ import $ from 'qwery';
+
+
+/**
+ * Handles the toggle element click events
+ *
+ * @property {object} toggle Toggle an element's visibility.
+ * @property {object} show Shows an element.
+ * @property {object} hide Hides an element.
+ */
+const toggles = {
+    toggle (element) {
+        element.classList.toggle('is-hidden');
+    },
+
+    show (element) {
+        element.classList.remove('is-hidden');
+    },
+
+    hide (element) {
+        element.classList.add('is-hidden');
+    }
+};
+
+/**
+ * Handles the toggle element click events
+ *
+ * @param {string|string[]} targets
+ */
+const handleToggles = targets => {
+    if (!Array.isArray(targets)) {
+        handleToggles(targets.split(' '));
+        return;
+    }
+
+    targets.forEach(target => {
+        const parts = target.split(':');
+
+        if (parts.length === 1) {
+            parts.unshift('toggle');
+        }
+
+        $(`[data-toggle-name~=${parts[1]}]`)
+            .forEach(toggles[parts[0]]);
+    });
+
+};
+
+/**
+ * Bind the toggle element click events
+ */
+export default () => {
+    $('[data-toggle-target]')
+        .forEach(toggle => {
+            toggle.addEventListener('click', e => {
+                e.preventDefault();
+
+                handleToggles(toggle.getAttribute('data-toggle-target'));
+            });
+        });
+};

test/__snapshots__/index.test.js.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`hide applies hidden class 1`] = `
+"
+            <div data-toggle-name=\\"test\\" class=\\"is-hidden\\"></div>
+            <button data-toggle-target=\\"hide:test\\"></button>
+        "
+`;
+
+exports[`hide can handle multiple specified targets 1`] = `
+"
+            <div data-toggle-name=\\"one\\" class=\\"is-hidden\\"></div>
+            <div data-toggle-name=\\"two\\" class=\\"is-hidden\\"></div>
+            <button data-toggle-target=\\"hide:one hide:two\\"></button>
+        "
+`;
+
+exports[`hide can handle multiple targets 1`] = `
+"
+            <div data-toggle-name=\\"test\\" class=\\"is-hidden\\"></div>
+            <div data-toggle-name=\\"test\\" class=\\"is-hidden\\"></div>
+            <button data-toggle-target=\\"hide:test\\"></button>
+        "
+`;
+
+exports[`hide does nothing when element is already hidden 1`] = `
+"
+            <div data-toggle-name=\\"test\\" class=\\"is-hidden\\"></div>
+            <button data-toggle-target=\\"hide:test\\"></button>
+        "
+`;
+
+exports[`mixed toggles shows and hides elements correctly 1`] = `
+"
+            <div data-toggle-name=\\"one\\" class=\\"is-hidden\\"></div>
+            <div data-toggle-name=\\"two\\" class=\\"\\"></div>
+            <div data-toggle-name=\\"three\\" class=\\"\\"></div>
+            <div data-toggle-name=\\"four\\" class=\\"is-hidden\\"></div>
+            <button data-toggle-target=\\"one two show:three hide:four\\"></button>
+        "
+`;
+
+exports[`show can handle multiple specified targets 1`] = `
+"
+            <div data-toggle-name=\\"one\\" class=\\"\\"></div>
+            <div data-toggle-name=\\"two\\" class=\\"\\"></div>
+            <button data-toggle-target=\\"show:one show:two\\"></button>
+        "
+`;
+
+exports[`show can handle multiple targets 1`] = `
+"
+            <div data-toggle-name=\\"test\\" class=\\"\\"></div>
+            <div data-toggle-name=\\"test\\" class=\\"\\"></div>
+            <button data-toggle-target=\\"show:test\\"></button>
+        "
+`;
+
+exports[`show does nothing when element is already shown 1`] = `
+"
+            <div data-toggle-name=\\"test\\" class=\\"\\"></div>
+            <button data-toggle-target=\\"show:test\\"></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`] = `
+"
+            <div data-toggle-name=\\"test\\" class=\\"is-hidden\\"></div>
+            <button data-toggle-target=\\"test\\"></button>
+        "
+`;
+
+exports[`toggle can handle multiple specified targets 1`] = `
+"
+            <div data-toggle-name=\\"one\\" class=\\"\\"></div>
+            <div data-toggle-name=\\"two\\" class=\\"is-hidden\\"></div>
+            <button data-toggle-target=\\"one two\\"></button>
+        "
+`;
+
+exports[`toggle can handle multiple targets 1`] = `
+"
+            <div data-toggle-name=\\"test\\" class=\\"is-hidden\\"></div>
+            <div data-toggle-name=\\"test\\" class=\\"\\"></div>
+            <button data-toggle-target=\\"test\\"></button>
+        "
+`;
+
+exports[`toggle removes hidden class 1`] = `
+"
+            <div data-toggle-name=\\"test\\" class=\\"\\"></div>
+            <button data-toggle-target=\\"test\\"></button>
+        "
+`;