| 1 |
"use strict"; |
| 2 |
(function ($) { |
| 3 |
$(window).on("elementor/frontend/init", function () { |
| 4 |
elementorFrontend.hooks.addAction( |
| 5 |
"frontend/element_ready/king-addons-tabs.default", |
| 6 |
function ($scope) { |
| 7 |
elementorFrontend.elementsHandler.addHandler( |
| 8 |
elementorModules.frontend.handlers.Base.extend({ |
| 9 |
onInit: function () { |
| 10 |
const $scope = this.$element; |
| 11 |
const $tabs = $(".king-addons-tabs", $scope).first(); |
| 12 |
const $tabsWrap = $(".king-addons-tabs-wrap", $tabs).first(); |
| 13 |
const $contentWrap = $(".king-addons-tabs-content-wrap", $tabs).first(); |
| 14 |
const $tabItems = $tabsWrap.children(".king-addons-tab"); |
| 15 |
const $contentItems = $contentWrap.children(".king-addons-tab-content"); |
| 16 |
const tabsData = $tabs.data("options"); |
| 17 |
|
| 18 |
// Determine active tab from settings or URL |
| 19 |
let activeTabIndex = tabsData.activeTab - 1; |
| 20 |
const urlActiveTabPos = window.location.href.indexOf("active_tab="); |
| 21 |
if (urlActiveTabPos > -1) { |
| 22 |
activeTabIndex = parseInt( |
| 23 |
window.location.href |
| 24 |
.substring(urlActiveTabPos, window.location.href.lastIndexOf("#")) |
| 25 |
.replace("active_tab=", "") |
| 26 |
) - 1; |
| 27 |
} |
| 28 |
|
| 29 |
// Mark initial active tab and content |
| 30 |
$tabItems.eq(activeTabIndex).addClass("king-addons-tab-active"); |
| 31 |
$contentItems.eq(activeTabIndex).addClass( |
| 32 |
"king-addons-tab-content-active king-addons-animation-enter" |
| 33 |
); |
| 34 |
|
| 35 |
// Optional autoplay |
| 36 |
let autoplayInterval; |
| 37 |
if (tabsData.autoplay === "yes") { |
| 38 |
let startIndex = activeTabIndex; |
| 39 |
autoplayInterval = setInterval(() => { |
| 40 |
startIndex = startIndex < $tabItems.length - 1 ? startIndex + 1 : 0; |
| 41 |
switchTab(startIndex); |
| 42 |
}, tabsData.autoplaySpeed); |
| 43 |
} |
| 44 |
|
| 45 |
// Hover or click trigger |
| 46 |
const eventName = tabsData.trigger === "hover" ? "mouseenter" : "click"; |
| 47 |
$tabItems.on(eventName, function () { |
| 48 |
const index = $(this).data("tab") - 1; |
| 49 |
clearInterval(autoplayInterval); |
| 50 |
switchTab(index); |
| 51 |
}); |
| 52 |
|
| 53 |
// Switch tab utility |
| 54 |
const switchTab = (index) => { |
| 55 |
const $activeTab = $tabItems.eq(index); |
| 56 |
const $activeContent = $contentItems.eq(index); |
| 57 |
|
| 58 |
// Fix wrapper height during transition |
| 59 |
$contentWrap.css("height", $contentWrap.outerHeight(true)); |
| 60 |
|
| 61 |
$tabItems.removeClass("king-addons-tab-active"); |
| 62 |
$activeTab.addClass("king-addons-tab-active"); |
| 63 |
$contentItems.removeClass("king-addons-tab-content-active king-addons-animation-enter"); |
| 64 |
|
| 65 |
// Calculate target height including container borders |
| 66 |
const targetHeight = |
| 67 |
$activeContent.outerHeight(true) + |
| 68 |
parseInt($contentWrap.css("border-top-width"), 10) + |
| 69 |
parseInt($contentWrap.css("border-bottom-width"), 10); |
| 70 |
|
| 71 |
// Apply active classes and animate |
| 72 |
$activeContent.addClass( |
| 73 |
"king-addons-tab-content-active king-addons-animation-enter" |
| 74 |
); |
| 75 |
$contentWrap.css("height", targetHeight); |
| 76 |
|
| 77 |
// Set back to auto after transition |
| 78 |
setTimeout(() => { |
| 79 |
$contentWrap.css("height", "auto"); |
| 80 |
}, 500); |
| 81 |
}; |
| 82 |
}, |
| 83 |
}), |
| 84 |
{ $element: $scope } |
| 85 |
); |
| 86 |
} |
| 87 |
); |
| 88 |
}); |
| 89 |
})(jQuery); |
