Skip to content

Instantly share code, notes, and snippets.

@javierarques
Created December 18, 2015 12:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save javierarques/cb401dd6e901875b2500 to your computer and use it in GitHub Desktop.
Save javierarques/cb401dd6e901875b2500 to your computer and use it in GitHub Desktop.
Toggler JS Component. Fire CSS classes
const Toggler = (() => {
"use strict";
//
// CONSTANTS
//
const TOGGLER_ATTR = '[data-toggler]';
const TOGGLER_ATTR_TARGET = 'data-toggler-target';
const TOGGLER_ATTR_CLASS = 'data-toggler-class';
//
// GLOBALS
//
let togglers = [];
//
// METHODS
//
function init() {
cacheDomElements();
bindEvents();
}
function cacheDomElements() {
togglers = document.querySelectorAll(TOGGLER_ATTR);
}
function bindEvents() {
if (togglers.length) {
Array.prototype.forEach.call(togglers, addSingleEvent);
}
}
function addSingleEvent(element) {
let target = document.querySelector(element.getAttribute(TOGGLER_ATTR_TARGET));
let cssClass = element.getAttribute(TOGGLER_ATTR_CLASS);
element.addEventListener('click', (e) => {
e.preventDefault();
toggleClass(target, cssClass);
});
}
function toggleClass(target, cssClass) {
target.classList.toggle(cssClass);
}
//
// AUTO INIT
//
init();
//
// PUBLIC API
//
var Toggler = {
toggleClass: toggleClass,
init: init
};
return Toggler;
})();
export default Toggler;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment