40 lines
1.0 KiB
JavaScript
40 lines
1.0 KiB
JavaScript
class WpjTabs {
|
|
constructor(el) {
|
|
const that = this;
|
|
|
|
this.tabsElement = $(el);
|
|
this.tabsNav = this.tabsElement.find('[data-tabs="nav"]');
|
|
this.tabsContent = this.tabsElement.find('[data-tabs="content"]');
|
|
|
|
this.tabsElement.on('click', '[data-tabs="nav"]', function() {
|
|
$(this).hasClass('active') ? that.hideTab(this) : that.activateTab(this);
|
|
|
|
return false;
|
|
});
|
|
}
|
|
|
|
/* tab = a.nav-link[data-tabs="nav"] */
|
|
activateTab(tab) {
|
|
const $activeTabNav = $(tab);
|
|
const $activeTarget = $($activeTabNav.attr('href'));
|
|
|
|
$activeTabNav.siblings().removeClass('active');
|
|
$activeTabNav.addClass('active');
|
|
$activeTarget.addClass('active');
|
|
|
|
if (!wpj.domUtils.isInView($activeTarget, true)) {
|
|
wpj.domUtils.scrollTo($activeTarget);
|
|
}
|
|
}
|
|
|
|
hideTab(tab) {
|
|
const $activeTabNav = $(tab);
|
|
const $activeTarget = $($activeTabNav.attr('href'));
|
|
|
|
$activeTabNav.removeClass('active');
|
|
$activeTarget.removeClass('active');
|
|
}
|
|
}
|
|
|
|
module.exports = WpjTabs;
|