| 1 |
"use strict"; |
| 2 |
(($) => { |
| 3 |
$(window).on("elementor/frontend/init", () => { |
| 4 |
elementorFrontend.hooks.addAction( |
| 5 |
"frontend/element_ready/king-addons-accordion.default", |
| 6 |
($scope) => { |
| 7 |
elementorFrontend.elementsHandler.addHandler( |
| 8 |
elementorModules.frontend.handlers.Base.extend({ |
| 9 |
onInit: function () { |
| 10 |
const $accordion = $scope.find(".king-addons-advanced-accordion"); |
| 11 |
const $accButtons = $scope.find(".king-addons-acc-button"); |
| 12 |
const $accItems = $scope.find(".king-addons-accordion-item-wrap"); |
| 13 |
const accordionType = $accordion.data("accordion-type"); |
| 14 |
const accordionTrigger = $accordion.data("accordion-trigger"); |
| 15 |
const interactionSpeed = +$accordion.data("interaction-speed") * 1000; |
| 16 |
let activeIndex = +$accordion.data("active-index") - 1; |
| 17 |
|
| 18 |
// Check URL for "active_panel" |
| 19 |
const activeTabParamPos = window.location.href.indexOf("active_panel="); |
| 20 |
if (activeTabParamPos > -1) { |
| 21 |
activeIndex = +window.location.href |
| 22 |
.substring(activeTabParamPos, window.location.href.lastIndexOf("#")) |
| 23 |
.replace("active_panel=", "") - 1; |
| 24 |
} |
| 25 |
|
| 26 |
// Helper: toggles a single accordion panel |
| 27 |
const togglePanel = ($btn) => { |
| 28 |
$btn.toggleClass("king-addons-acc-active"); |
| 29 |
const $panel = $btn.next(); |
| 30 |
if (!$panel.hasClass("king-addons-acc-panel-active")) { |
| 31 |
$panel.slideDown(interactionSpeed).addClass("king-addons-acc-panel-active"); |
| 32 |
} else { |
| 33 |
$panel.slideUp(interactionSpeed).removeClass("king-addons-acc-panel-active"); |
| 34 |
} |
| 35 |
}; |
| 36 |
|
| 37 |
// Accordion: click trigger |
| 38 |
if (accordionTrigger === "click") { |
| 39 |
if (accordionType === "accordion") { |
| 40 |
$accButtons.on("click", function () { |
| 41 |
const currentIndex = $accButtons.index(this); |
| 42 |
|
| 43 |
// Deactivate all except the current |
| 44 |
$accButtons.each((i, btn) => { |
| 45 |
if (i !== currentIndex) $(btn).removeClass("king-addons-acc-active"); |
| 46 |
}); |
| 47 |
$scope.find(".king-addons-acc-panel").each((i, panel) => { |
| 48 |
if (i !== currentIndex) { |
| 49 |
$(panel) |
| 50 |
.removeClass("king-addons-acc-panel-active") |
| 51 |
.slideUp(interactionSpeed); |
| 52 |
} |
| 53 |
}); |
| 54 |
|
| 55 |
// Toggle the current |
| 56 |
togglePanel($(this)); |
| 57 |
}); |
| 58 |
} else { |
| 59 |
// Accordion: toggle each panel independently |
| 60 |
$accButtons.each((_, btn) => { |
| 61 |
$(btn).on("click", function () { |
| 62 |
togglePanel($(this)); |
| 63 |
}); |
| 64 |
}); |
| 65 |
} |
| 66 |
// Open active index if set |
| 67 |
if (activeIndex > -1) $accButtons.eq(activeIndex).trigger("click"); |
| 68 |
|
| 69 |
// Accordion: hover trigger |
| 70 |
} else if (accordionTrigger === "hover") { |
| 71 |
$accItems.on("mouseenter", function () { |
| 72 |
const currentIndex = $accItems.index(this); |
| 73 |
const $btn = $(this).find(".king-addons-acc-button"); |
| 74 |
const $panel = $(this).find(".king-addons-acc-panel"); |
| 75 |
|
| 76 |
// Activate hovered item |
| 77 |
$btn.addClass("king-addons-acc-active"); |
| 78 |
$panel.slideDown(interactionSpeed).addClass("king-addons-acc-panel-active"); |
| 79 |
|
| 80 |
// Deactivate others |
| 81 |
$accItems.each((i, item) => { |
| 82 |
if (i !== currentIndex) { |
| 83 |
const $otherBtn = $(item).find(".king-addons-acc-button"); |
| 84 |
const $otherPanel = $(item).find(".king-addons-acc-panel"); |
| 85 |
$otherBtn.removeClass("king-addons-acc-active"); |
| 86 |
$otherPanel.slideUp(interactionSpeed).removeClass("king-addons-acc-panel-active"); |
| 87 |
} |
| 88 |
}); |
| 89 |
}); |
| 90 |
// Open active index if set |
| 91 |
if (activeIndex > -1) $accItems.eq(activeIndex).trigger("mouseenter"); |
| 92 |
} |
| 93 |
|
| 94 |
// Search input events |
| 95 |
const $searchInput = $scope.find(".king-addons-acc-search-input"); |
| 96 |
$searchInput.on({ |
| 97 |
focus: () => $scope.addClass("king-addons-acc-search-input-focus"), |
| 98 |
blur: () => $scope.removeClass("king-addons-search-form-input-focus"), |
| 99 |
}); |
| 100 |
|
| 101 |
// Clear icon |
| 102 |
const $clearIcon = $scope.find(".king-addons-acc-search-input-wrap i.fa-times"); |
| 103 |
$clearIcon.on("click", () => { |
| 104 |
$searchInput.val("").trigger("keyup"); |
| 105 |
}); |
| 106 |
|
| 107 |
// Handle icon box border settings |
| 108 |
const $iconBoxes = $scope.find(".king-addons-acc-icon-box"); |
| 109 |
const setIconBoxBorders = () => { |
| 110 |
$iconBoxes.each((_, box) => { |
| 111 |
const $box = $(box); |
| 112 |
$box.find(".king-addons-acc-icon-box-after").css({ |
| 113 |
"border-top": $box.height() / 2 + "px solid transparent", |
| 114 |
"border-bottom": $box.height() / 2 + "px solid transparent", |
| 115 |
}); |
| 116 |
}); |
| 117 |
}; |
| 118 |
setIconBoxBorders(); |
| 119 |
$(window).on("resize", setIconBoxBorders); |
| 120 |
|
| 121 |
// Search filtering |
| 122 |
const $allInAccordion = $accordion.children(); |
| 123 |
$searchInput.on("keyup", function () { |
| 124 |
setTimeout(() => { |
| 125 |
const query = $(this).val().trim(); |
| 126 |
if (query.length) { |
| 127 |
$clearIcon.css("display", "inline-block"); |
| 128 |
$allInAccordion.each((_, el) => { |
| 129 |
const $item = $(el); |
| 130 |
if (!$item.hasClass("king-addons-accordion-item-wrap")) return; |
| 131 |
|
| 132 |
// Match text? |
| 133 |
if ($item.text().toUpperCase().indexOf(query.toUpperCase()) === -1) { |
| 134 |
// Hide and deactivate |
| 135 |
$item.hide(); |
| 136 |
if ( |
| 137 |
$item.find(".king-addons-acc-button").hasClass("king-addons-acc-active") && |
| 138 |
$item.find(".king-addons-acc-panel").hasClass("king-addons-acc-panel-active") |
| 139 |
) { |
| 140 |
$item |
| 141 |
.find(".king-addons-acc-button") |
| 142 |
.removeClass("king-addons-acc-active"); |
| 143 |
$item |
| 144 |
.find(".king-addons-acc-panel") |
| 145 |
.removeClass("king-addons-acc-panel-active"); |
| 146 |
} |
| 147 |
} else { |
| 148 |
// Show and activate |
| 149 |
$item.show(); |
| 150 |
const $btn = $item.find(".king-addons-acc-button"); |
| 151 |
const $panel = $item.find(".king-addons-acc-panel"); |
| 152 |
if (!$btn.hasClass("king-addons-acc-active")) { |
| 153 |
$btn.addClass("king-addons-acc-active"); |
| 154 |
$panel.addClass("king-addons-acc-panel-active").slideDown(interactionSpeed); |
| 155 |
} |
| 156 |
} |
| 157 |
}); |
| 158 |
} else { |
| 159 |
$clearIcon.css("display", "none"); |
| 160 |
$allInAccordion.each((_, el) => { |
| 161 |
const $item = $(el); |
| 162 |
if ($item.hasClass("king-addons-accordion-item-wrap")) { |
| 163 |
$item.show(); |
| 164 |
$item.find(".king-addons-acc-panel").removeClass("king-addons-acc-panel-active").slideUp(interactionSpeed); |
| 165 |
$item.find(".king-addons-acc-button").removeClass("king-addons-acc-active"); |
| 166 |
} |
| 167 |
}); |
| 168 |
} |
| 169 |
}, 1000); |
| 170 |
}); |
| 171 |
}, |
| 172 |
}), |
| 173 |
{ $element: $scope } |
| 174 |
); |
| 175 |
} |
| 176 |
); |
| 177 |
}); |
| 178 |
})(jQuery); |
