← All changes | includes/widgets/Accordion/script.js +239 -0 51.1.2 → 51.1.86 View file →

		@@ -1,0 +1,239 @@
	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);