| 1 |
"use strict"; |
| 2 |
|
| 3 |
(function ($) { |
| 4 |
const ANIMATION_DURATION = 180; |
| 5 |
const ZOOM_DURATION = 200; |
| 6 |
|
| 7 |
const normalizeAnimation = (value) => { |
| 8 |
const animation = (value || "slide").toString(); |
| 9 |
const allowed = ["slide", "fade", "zoom", "none"]; |
| 10 |
return allowed.includes(animation) ? animation : "slide"; |
| 11 |
}; |
| 12 |
|
| 13 |
const openItem = ($item, animation) => { |
| 14 |
const $answer = $item.find(".king-addons-faq__answer"); |
| 15 |
const $button = $item.find(".king-addons-faq__question"); |
| 16 |
|
| 17 |
clearTimeout($item.data("kngFaqTimer")); |
| 18 |
$item.removeData("kngFaqTimer"); |
| 19 |
|
| 20 |
$button.attr("aria-expanded", "true"); |
| 21 |
$answer.attr("aria-hidden", "false"); |
| 22 |
|
| 23 |
if (animation === "none") { |
| 24 |
$answer.show(); |
| 25 |
return; |
| 26 |
} |
| 27 |
|
| 28 |
if (animation === "fade") { |
| 29 |
$answer.stop(true, true).fadeIn(ANIMATION_DURATION); |
| 30 |
return; |
| 31 |
} |
| 32 |
|
| 33 |
if (animation === "zoom") { |
| 34 |
$answer.stop(true, true).show(); |
| 35 |
requestAnimationFrame(() => { |
| 36 |
$item.addClass("is-open"); |
| 37 |
}); |
| 38 |
return; |
| 39 |
} |
| 40 |
|
| 41 |
$answer.stop(true, true).slideDown(ANIMATION_DURATION); |
| 42 |
}; |
| 43 |
|
| 44 |
const closeItem = ($item, animation) => { |
| 45 |
const $answer = $item.find(".king-addons-faq__answer"); |
| 46 |
const $button = $item.find(".king-addons-faq__question"); |
| 47 |
|
| 48 |
clearTimeout($item.data("kngFaqTimer")); |
| 49 |
$item.removeData("kngFaqTimer"); |
| 50 |
|
| 51 |
$button.attr("aria-expanded", "false"); |
| 52 |
$answer.attr("aria-hidden", "true"); |
| 53 |
|
| 54 |
if (animation === "none") { |
| 55 |
$answer.hide(); |
| 56 |
return; |
| 57 |
} |
| 58 |
|
| 59 |
if (animation === "fade") { |
| 60 |
$answer.stop(true, true).fadeOut(ANIMATION_DURATION); |
| 61 |
return; |
| 62 |
} |
| 63 |
|
| 64 |
if (animation === "zoom") { |
| 65 |
$item.removeClass("is-open"); |
| 66 |
const timer = setTimeout(() => { |
| 67 |
if ($button.attr("aria-expanded") === "false") { |
| 68 |
$answer.hide(); |
| 69 |
} |
| 70 |
$item.removeData("kngFaqTimer"); |
| 71 |
}, ZOOM_DURATION); |
| 72 |
$item.data("kngFaqTimer", timer); |
| 73 |
return; |
| 74 |
} |
| 75 |
|
| 76 |
$answer.stop(true, true).slideUp(ANIMATION_DURATION); |
| 77 |
}; |
| 78 |
|
| 79 |
const toggleItem = ($item, single, animation) => { |
| 80 |
const $button = $item.find(".king-addons-faq__question"); |
| 81 |
const isOpen = $button.attr("aria-expanded") === "true"; |
| 82 |
|
| 83 |
if (single && !isOpen) { |
| 84 |
$item.siblings(".king-addons-faq__item").each(function () { |
| 85 |
closeItem($(this), animation); |
| 86 |
}); |
| 87 |
} |
| 88 |
|
| 89 |
if (isOpen) { |
| 90 |
closeItem($item, animation); |
| 91 |
} else { |
| 92 |
openItem($item, animation); |
| 93 |
} |
| 94 |
}; |
| 95 |
|
| 96 |
const expandAll = ($list, animation) => { |
| 97 |
$list.find(".king-addons-faq__item").each(function () { |
| 98 |
openItem($(this), animation); |
| 99 |
}); |
| 100 |
}; |
| 101 |
|
| 102 |
const collapseAll = ($list, animation) => { |
| 103 |
$list.find(".king-addons-faq__item").each(function () { |
| 104 |
closeItem($(this), animation); |
| 105 |
}); |
| 106 |
}; |
| 107 |
|
| 108 |
const initSearch = ($wrapper) => { |
| 109 |
const $search = $wrapper.find(".king-addons-faq__search"); |
| 110 |
if (!$search.length) return; |
| 111 |
|
| 112 |
$search.on("input", function () { |
| 113 |
const query = $(this).val().toString().toLowerCase(); |
| 114 |
$wrapper.find(".king-addons-faq__item").each(function () { |
| 115 |
const $item = $(this); |
| 116 |
const text = $item.text().toLowerCase(); |
| 117 |
if (text.includes(query)) { |
| 118 |
$item.show(); |
| 119 |
} else { |
| 120 |
$item.hide(); |
| 121 |
} |
| 122 |
}); |
| 123 |
}); |
| 124 |
}; |
| 125 |
|
| 126 |
const initToggleAll = ($wrapper, $list, animation) => { |
| 127 |
const $toggle = $wrapper.find(".king-addons-faq__toggle-all"); |
| 128 |
if (!$toggle.length) return; |
| 129 |
|
| 130 |
$toggle.on("click", function () { |
| 131 |
const state = $(this).data("state"); |
| 132 |
if (state === "collapse") { |
| 133 |
expandAll($list, animation); |
| 134 |
$(this).data("state", "expand").text($(this).data("label-collapse") || window.kngFaqCollapse || "Collapse all"); |
| 135 |
} else { |
| 136 |
collapseAll($list, animation); |
| 137 |
$(this).data("state", "collapse").text($(this).data("label-expand") || window.kngFaqExpand || "Expand all"); |
| 138 |
} |
| 139 |
}); |
| 140 |
}; |
| 141 |
|
| 142 |
const initFaq = ($scope) => { |
| 143 |
const $wrapper = $scope.find(".king-addons-faq"); |
| 144 |
if (!$wrapper.length) return; |
| 145 |
|
| 146 |
const single = $wrapper.data("single") === "yes"; |
| 147 |
const animation = normalizeAnimation($wrapper.data("animate")); |
| 148 |
const $list = $wrapper.find(".king-addons-faq__list"); |
| 149 |
|
| 150 |
$wrapper.on("click", ".king-addons-faq__question", function () { |
| 151 |
const $item = $(this).closest(".king-addons-faq__item"); |
| 152 |
toggleItem($item, single, animation); |
| 153 |
}); |
| 154 |
|
| 155 |
initSearch($wrapper); |
| 156 |
initToggleAll($wrapper, $list, animation); |
| 157 |
}; |
| 158 |
|
| 159 |
$(window).on("elementor/frontend/init", function () { |
| 160 |
elementorFrontend.hooks.addAction( |
| 161 |
"frontend/element_ready/king-addons-faq-schema.default", |
| 162 |
function ($scope) { |
| 163 |
initFaq($scope); |
| 164 |
} |
| 165 |
); |
| 166 |
}); |
| 167 |
})(jQuery); |
| 168 |
|
| 169 |
|
| 170 |
|
| 171 |
|
| 172 |
|
| 173 |
|
| 174 |
|
