Add toggle component (#62)

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changes
 
+## 2.3.0
+
+ - FEATURE: Add toggle component.
+
+## 2.2.0
+
+ - FEATURE: Add accordion component
+ - FEATURE: Remove jquery requirement from expand component
+
 ## 2.1.1
 
  - BUGFIX: Fix path to passive events for scroll direction (#58)

packages/components/toggle/toggle.js

@@ -0,0 +1,49 @@
+// Toggle component module
+
+'use strict';
+
+module.exports = function Toggle() {
+    var toggle = {};
+
+    /**
+     * @example
+     * <button id="toggle" class="button">
+     *    Lorem ipsum ...
+     * </button>
+     *
+     * import Toggle from '@sulu/web/packages/components/toggle/toggle';
+     * var component = new Toggle();
+     * component.initialize(document.getElementById('toggle'), {});
+     *
+     * @param {HTMLElement} el
+     * @param {object} options
+     */
+    toggle.initialize = function initialize(el, options) {
+        toggle.el = el;
+        toggle.modifier = options.modifier ? options.modifier : '--open';
+        toggle.toggleButtonClass = toggle.getFirstClass(toggle.el) + toggle.modifier;
+
+        // Run init functions
+        toggle.bindEvents();
+    };
+
+    /**
+     * @param {HTMLElement} element
+     * @returns {string}
+     */
+    toggle.getFirstClass = function getFirstClass(element) {
+        return element.getAttribute('class').split(' ')[0];
+    };
+
+    toggle.bindEvents = function bindEvents() {
+        toggle.el.addEventListener('click', toggle.toggleClass);
+    };
+
+    toggle.toggleClass = function toggleClass() {
+        toggle.el.classList.toggle(toggle.toggleButtonClass);
+    };
+
+    return {
+        initialize: toggle.initialize,
+    };
+};