/*
* BestAddonTabs - Javascript Accordion
* Copyright (c) 2010 BestAddon.com
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
/* global baTabs */
; (function (win, doc, ba) {
'use strict'
function isType (e) { return {}.toString.call(e).slice(8, -1).toLowerCase() }
function on (el, ev, fn) { for (var i = 0, evs = ev.split(/\s+/); i < evs.length; ++i) { el.addEventListener(evs[i], fn, false) } } // element, events "click input", function callback
function forEach (e, fn) { var i; if (isType(e) === 'object') { for (i in e) { fn(e[i], i) } } else { for (i = 0; i < e.length; i++) { fn(e[i], i) } } } // element, function callback
function hasClass (e, c) { return !!e.className.match(new RegExp('(\\s|^)' + c + '(\\s|$)')) } // element, class name
function addClass (e, c) { if (!hasClass(e, c)) e.className += ' ' + c } // element, class name
function removeClass (e, c) { if (hasClass(e, c)) { e.className = e.className.replace(new RegExp('(\\s|^)' + c + '(\\s|$)'), ' ') } } // element, class name
function wrap (el) { var w = doc.createElement('div'); el.parentNode.insertBefore(w, el); w.appendChild(el) }
function extend (r) { r = r || {}; for (var n = 1; n < arguments.length; n++) if (arguments[n]) for (var e in arguments[n]) arguments[n].hasOwnProperty(e) && (r[e] = arguments[n][e]); return r };
function Main (obj, options) {
var defaults = { // set default options
width: '100%',
height: 'auto',
orient: 'horizontal', // orientation: vertical | horizontal
defaultid: 0,
interval: 0, // 5000, If it > 0 is autoplay
speed: '500ms',
hoverpause: true,
event: 'click', // click, mouseover, mouseenter
tabNav: true,
tabActiveClass: 'tab__active',
panelActiveClass: 'panel__active',
nextPrev: false,
effect: 'fadeIn', // fadeIn, bounceIn, ...
keyNav: true,
breakPoint: 'default', // default | accordion | dropdown
breakPointWidth: 576,
style: 'style82'
}
// The element that is passed into the design
var objPlay, tabStick
var opts = extend(defaults, JSON.parse(obj.getAttribute('data-options')) || options)
var filterElements = function (selector, match) {
return [].filter.call(obj.querySelectorAll(selector), function (el) { return el.nodeName.toLowerCase() === match })
}
var slides = filterElements('.ba__panel-tabs > *', 'div')
var pagerWrap = obj.querySelector('.ba__nav-tabs')
var pager = pagerWrap.children
var current = (opts.defaultid >= 0 && opts.defaultid < slides.length) ? opts.defaultid : 0
var next = current + 1
addClass(slides[current], opts.panelActiveClass)
wrap(obj)
var wrapper = obj.parentNode
wrapper.style.width = opts.width
addClass(obj.parentNode, ba + 'Warp ' + opts.style + ' ' + opts.orient + ' breakPoint' + opts.breakPoint)
obj.style.setProperty('--ba-tab-speed', opts.speed)
addClass(obj, 'ba__tabs')
var tabClass = function (list, id, removeClassName, addClassName) {
forEach(list, function (el) { removeClass(el, removeClassName || opts.tabActiveClass) })
if (isType(id) === 'number') addClass(list[id], addClassName || opts.tabActiveClass)
}
// rotate to selected slide on pager click
var pagination = function (pager) {
if (pager.length && opts.tabNav) {
tabClass(pager, current)
forEach(pager, function (el) {
on(el.firstChild, opts.event + ' touchstart', function (e) {
e.preventDefault()
clearTimeout(objPlay)
next = [].indexOf.call(pager, this.parentNode)
rotate()
})
})
}
}
pagination(pager)
var rotate = function () { // primary function to change slides
if (tabStick) tabStick.innerHTML = pager[next].firstChild.innerHTML
tabClass(slides, next, opts.panelActiveClass, 'animated ' + opts.effect + ' ' + opts.panelActiveClass)
if (pager.length && opts.tabNav) { // update pager to reflect slide change
tabClass(pager, next)
}
current = next
next = current >= slides.length - 1 ? 0 : current + 1
}
if (opts.nextPrev) {
obj.insertAdjacentHTML('afterend', '← PrevNext →')
forEach(obj.parentNode.querySelectorAll('.ba__arrows'), function (el) {
on(el, 'click touchstart', function (e) {
if (e.target.className.indexOf('prev') > -1) {
clearTimeout(objPlay)
next = current <= 0 ? slides.length - 1 : current - 1
rotate()
} else {
clearTimeout(objPlay)
rotate()
}
})
})
}
if (opts.keyNav) { // Add keyboard navigation
on(document, 'keyup', function (e) {
switch (e.which) {
case 39: case 32: // right arrow & space
clearTimeout(objPlay)
rotate()
break
case 37: // left arrow
clearTimeout(objPlay)
next = current <= 0 ? slides.length - 1 : current - 1
rotate()
break
}
})
}
}
// add to global namespace
win[ba] = Main
})(window, document, 'baTabs');
(function (fn, d) { /c/.test(d.readyState) ? fn() : d.addEventListener('DOMContentLoaded', fn) })(function () {
[].forEach.call(document.querySelectorAll('[data-ba-tabs]'), function (obj) {
baTabs(obj)
})
}, document)