| 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 |
$accordion.css("--king-acc-speed", (interactionSpeed || 400) + "ms"); |
| 18 |
|
| 19 |
// Padding and border on the panel cannot shrink with the grid |
| 20 |
// row, so they jump off at the end. Move them inside the clip. |
| 21 |
const preparePanel = ($panel) => { |
| 22 |
if (!$panel.length || $panel.data("kaBoxReady")) { |
| 23 |
return; |
| 24 |
} |
| 25 |
let $clip = $panel.children(".king-addons-acc-panel-clip"); |
| 26 |
if (!$clip.length) { |
| 27 |
$panel.children().wrapAll('<div class="king-addons-acc-panel-clip"></div>'); |
| 28 |
$clip = $panel.children(".king-addons-acc-panel-clip"); |
| 29 |
} |
| 30 |
let $content = $clip.children(".king-addons-acc-panel-content"); |
| 31 |
if (!$content.length) { |
| 32 |
$clip.children().wrapAll('<div class="king-addons-acc-panel-content"></div>'); |
| 33 |
$content = $clip.children(".king-addons-acc-panel-content"); |
| 34 |
} |
| 35 |
const styles = window.getComputedStyle($panel[0]); |
| 36 |
$content.css({ |
| 37 |
paddingTop: styles.paddingTop, |
| 38 |
paddingRight: styles.paddingRight, |
| 39 |
paddingBottom: styles.paddingBottom, |
| 40 |
paddingLeft: styles.paddingLeft, |
| 41 |
borderTopWidth: styles.borderTopWidth, |
| 42 |
borderRightWidth: styles.borderRightWidth, |
| 43 |
borderBottomWidth: styles.borderBottomWidth, |
| 44 |
borderLeftWidth: styles.borderLeftWidth, |
| 45 |
borderTopStyle: styles.borderTopStyle, |
| 46 |
borderRightStyle: styles.borderRightStyle, |
| 47 |
borderBottomStyle: styles.borderBottomStyle, |
| 48 |
borderLeftStyle: styles.borderLeftStyle, |
| 49 |
borderTopColor: styles.borderTopColor, |
| 50 |
borderRightColor: styles.borderRightColor, |
| 51 |
borderBottomColor: styles.borderBottomColor, |
| 52 |
borderLeftColor: styles.borderLeftColor, |
| 53 |
borderRadius: styles.borderRadius, |
| 54 |
backgroundColor: styles.backgroundColor, |
| 55 |
boxShadow: styles.boxShadow, |
| 56 |
}); |
| 57 |
$panel.css({ |
| 58 |
padding: 0, |
| 59 |
borderWidth: 0, |
| 60 |
backgroundColor: "transparent", |
| 61 |
boxShadow: "none", |
| 62 |
height: "", |
| 63 |
overflow: "", |
| 64 |
display: "", |
| 65 |
}); |
| 66 |
$panel.data("kaBoxReady", 1); |
| 67 |
}; |
| 68 |
|
| 69 |
$scope.find(".king-addons-acc-panel").each((_, panel) => { |
| 70 |
preparePanel($(panel)); |
| 71 |
}); |
| 72 |
|
| 73 |
const openPanel = ($btn) => { |
| 74 |
const $panel = $btn.next(".king-addons-acc-panel"); |
| 75 |
if (!$panel.length) { |
| 76 |
return; |
| 77 |
} |
| 78 |
preparePanel($panel); |
| 79 |
$btn.addClass("king-addons-acc-active"); |
| 80 |
$panel.addClass("king-addons-acc-panel-active"); |
| 81 |
}; |
| 82 |
|
| 83 |
const closePanel = ($btn) => { |
| 84 |
const $panel = $btn.next(".king-addons-acc-panel"); |
| 85 |
$btn.removeClass("king-addons-acc-active"); |
| 86 |
$panel.removeClass("king-addons-acc-panel-active"); |
| 87 |
}; |
| 88 |
|
| 89 |
const togglePanel = ($btn) => { |
| 90 |
const $panel = $btn.next(".king-addons-acc-panel"); |
| 91 |
if ($panel.hasClass("king-addons-acc-panel-active") && $panel.is(":visible")) { |
| 92 |
closePanel($btn); |
| 93 |
} else { |
| 94 |
openPanel($btn); |
| 95 |
} |
| 96 |
}; |
| 97 |
|
| 98 |
// Check URL for "active_panel" |
| 99 |
const activeTabParamPos = window.location.href.indexOf("active_panel="); |
| 100 |
if (activeTabParamPos > -1) { |
| 101 |
activeIndex = +window.location.href |
| 102 |
.substring(activeTabParamPos, window.location.href.lastIndexOf("#")) |
| 103 |
.replace("active_panel=", "") - 1; |
| 104 |
} |
| 105 |
|
| 106 |
// Helper: toggles a single accordion panel |
| 107 |
// openPanel / closePanel are defined above. |
| 108 |
|
| 109 |
// Accordion: click trigger |
| 110 |
if (accordionTrigger === "click") { |
| 111 |
if (accordionType === "accordion") { |
| 112 |
$accButtons.on("click", function () { |
| 113 |
const currentIndex = $accButtons.index(this); |
| 114 |
|
| 115 |
// Deactivate all except the current |
| 116 |
$accButtons.each((i, btn) => { |
| 117 |
if (i !== currentIndex) $(btn).removeClass("king-addons-acc-active"); |
| 118 |
}); |
| 119 |
$scope.find(".king-addons-acc-panel").each((i, panel) => { |
| 120 |
if (i !== currentIndex) { |
| 121 |
closePanel($(panel).prev(".king-addons-acc-button")); |
| 122 |
} |
| 123 |
}); |
| 124 |
|
| 125 |
// Toggle the current |
| 126 |
togglePanel($(this)); |
| 127 |
}); |
| 128 |
} else { |
| 129 |
// Accordion: toggle each panel independently |
| 130 |
$accButtons.each((_, btn) => { |
| 131 |
$(btn).on("click", function () { |
| 132 |
togglePanel($(this)); |
| 133 |
}); |
| 134 |
}); |
| 135 |
} |
| 136 |
// Open active index if set |
| 137 |
if (activeIndex > -1) $accButtons.eq(activeIndex).trigger("click"); |
| 138 |
|
| 139 |
// Accordion: hover trigger |
| 140 |
} else if (accordionTrigger === "hover") { |
| 141 |
$accItems.on("mouseenter", function () { |
| 142 |
const currentIndex = $accItems.index(this); |
| 143 |
const $btn = $(this).find(".king-addons-acc-button"); |
| 144 |
|
| 145 |
openPanel($btn); |
| 146 |
|
| 147 |
// Deactivate others |
| 148 |
$accItems.each((i, item) => { |
| 149 |
if (i !== currentIndex) { |
| 150 |
closePanel($(item).find(".king-addons-acc-button")); |
| 151 |
} |
| 152 |
}); |
| 153 |
}); |
| 154 |
// Open active index if set |
| 155 |
if (activeIndex > -1) $accItems.eq(activeIndex).trigger("mouseenter"); |
| 156 |
} |
| 157 |
|
| 158 |
// Search input events |
| 159 |
const $searchInput = $scope.find(".king-addons-acc-search-input"); |
| 160 |
$searchInput.on({ |
| 161 |
focus: () => $scope.addClass("king-addons-acc-search-input-focus"), |
| 162 |
blur: () => $scope.removeClass("king-addons-search-form-input-focus"), |
| 163 |
}); |
| 164 |
|
| 165 |
// Clear icon |
| 166 |
const $clearIcon = $scope.find(".king-addons-acc-search-input-wrap i.fa-times"); |
| 167 |
$clearIcon.on("click", () => { |
| 168 |
$searchInput.val("").trigger("keyup"); |
| 169 |
}); |
| 170 |
|
| 171 |
// Handle icon box border settings |
| 172 |
const $iconBoxes = $scope.find(".king-addons-acc-icon-box"); |
| 173 |
const setIconBoxBorders = () => { |
| 174 |
$iconBoxes.each((_, box) => { |
| 175 |
const $box = $(box); |
| 176 |
$box.find(".king-addons-acc-icon-box-after").css({ |
| 177 |
"border-top": $box.height() / 2 + "px solid transparent", |
| 178 |
"border-bottom": $box.height() / 2 + "px solid transparent", |
| 179 |
}); |
| 180 |
}); |
| 181 |
}; |
| 182 |
setIconBoxBorders(); |
| 183 |
$(window).on("resize", setIconBoxBorders); |
| 184 |
|
| 185 |
// Search filtering |
| 186 |
const $allInAccordion = $accordion.children(); |
| 187 |
$searchInput.on("keyup", function () { |
| 188 |
setTimeout(() => { |
| 189 |
const query = $(this).val().trim(); |
| 190 |
if (query.length) { |
| 191 |
$clearIcon.css("display", "inline-block"); |
| 192 |
$allInAccordion.each((_, el) => { |
| 193 |
const $item = $(el); |
| 194 |
if (!$item.hasClass("king-addons-accordion-item-wrap")) return; |
| 195 |
|
| 196 |
// Match text? |
| 197 |
if ($item.text().toUpperCase().indexOf(query.toUpperCase()) === -1) { |
| 198 |
// Hide and deactivate |
| 199 |
$item.hide(); |
| 200 |
if ( |
| 201 |
$item.find(".king-addons-acc-button").hasClass("king-addons-acc-active") && |
| 202 |
$item.find(".king-addons-acc-panel").hasClass("king-addons-acc-panel-active") |
| 203 |
) { |
| 204 |
$item |
| 205 |
.find(".king-addons-acc-button") |
| 206 |
.removeClass("king-addons-acc-active"); |
| 207 |
$item |
| 208 |
.find(".king-addons-acc-panel") |
| 209 |
.removeClass("king-addons-acc-panel-active"); |
| 210 |
} |
| 211 |
} else { |
| 212 |
// Show and activate |
| 213 |
$item.show(); |
| 214 |
const $btn = $item.find(".king-addons-acc-button"); |
| 215 |
if (!$btn.hasClass("king-addons-acc-active")) { |
| 216 |
openPanel($btn); |
| 217 |
} |
| 218 |
} |
| 219 |
}); |
| 220 |
} else { |
| 221 |
$clearIcon.css("display", "none"); |
| 222 |
$allInAccordion.each((_, el) => { |
| 223 |
const $item = $(el); |
| 224 |
if ($item.hasClass("king-addons-accordion-item-wrap")) { |
| 225 |
$item.show(); |
| 226 |
closePanel($item.find(".king-addons-acc-button")); |
| 227 |
} |
| 228 |
}); |
| 229 |
} |
| 230 |
}, 1000); |
| 231 |
}); |
| 232 |
}, |
| 233 |
}), |
| 234 |
{ $element: $scope } |
| 235 |
); |
| 236 |
} |
| 237 |
); |
| 238 |
}); |
| 239 |
})(jQuery); |
