84 lines
2.1 KiB
JavaScript
84 lines
2.1 KiB
JavaScript
(function() {
|
|
|
|
'use strict';
|
|
|
|
/**
|
|
* tabs
|
|
*
|
|
* @description The Tabs component.
|
|
* @param {Object} options The options hash
|
|
*/
|
|
var tabs = function(options) {
|
|
|
|
var el = document.querySelector(options.el);
|
|
var tabNavigationLinks = el.querySelectorAll(options.tabNavigationLinks);
|
|
var tabContentContainers = el.querySelectorAll(options.tabContentContainers);
|
|
var activeIndex = 0;
|
|
var initCalled = false;
|
|
|
|
/**
|
|
* init
|
|
*
|
|
* @description Initializes the component by removing the no-js class from
|
|
* the component, and attaching event listeners to each of the nav items.
|
|
* Returns nothing.
|
|
*/
|
|
var init = function() {
|
|
if (!initCalled) {
|
|
initCalled = true;
|
|
el.classList.remove('no-js');
|
|
|
|
for (var i = 0; i < tabNavigationLinks.length; i++) {
|
|
var link = tabNavigationLinks[i];
|
|
handleClick(link, i);
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* handleClick
|
|
*
|
|
* @description Handles click event listeners on each of the links in the
|
|
* tab navigation. Returns nothing.
|
|
* @param {HTMLElement} link The link to listen for events on
|
|
* @param {Number} index The index of that link
|
|
*/
|
|
var handleClick = function(link, index) {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
goToTab(index);
|
|
});
|
|
};
|
|
|
|
/**
|
|
* goToTab
|
|
*
|
|
* @description Goes to a specific tab based on index. Returns nothing.
|
|
* @param {Number} index The index of the tab to go to
|
|
*/
|
|
var goToTab = function(index) {
|
|
if (index !== activeIndex && index >= 0 && index <= tabNavigationLinks.length) {
|
|
tabNavigationLinks[activeIndex].classList.remove('is-active');
|
|
tabNavigationLinks[index].classList.add('is-active');
|
|
tabContentContainers[activeIndex].classList.remove('is-active');
|
|
tabContentContainers[index].classList.add('is-active');
|
|
activeIndex = index;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Returns init and goToTab
|
|
*/
|
|
return {
|
|
init: init,
|
|
goToTab: goToTab
|
|
};
|
|
|
|
};
|
|
|
|
/**
|
|
* Attach to global namespace
|
|
*/
|
|
window.tabs = tabs;
|
|
|
|
})(); |