King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder / 51.1.65

King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder v51.1.65

king-addons / includes / widgets / Content_Toggle / script.js

script.js in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.65, at includes/widgets/Content_Toggle/script.js

178 lines 5.9 KB

Raw Download Zip

1	"use strict";
2
3	(function ($) {
4	const ANIMATION_DURATION = 220;
5
6	const parseSelectors = (value) => {
7	if (!value) {
8	return [];
9	}
10
11	return value
12	.split(",")
13	.map((item) => item.trim())
14	.filter((item) => item.length > 0);
15	};
16
17	const applyVisibility = (selectors, activeClass, hiddenClass, makeVisible) => {
18	if (!selectors.length) {
19	return;
20	}
21
22	selectors.forEach((selector) => {
23	document.querySelectorAll(selector).forEach((node) => {
24	if (hiddenClass) {
25	if (makeVisible) {
26	node.classList.remove(hiddenClass);
27	} else {
28	node.classList.add(hiddenClass);
29	}
30	}
31
32	if (activeClass) {
33	if (makeVisible) {
34	node.classList.add(activeClass);
35	} else {
36	node.classList.remove(activeClass);
37	}
38	}
39	});
40	});
41	};
42
43	const initContentToggle = ($scope) => {
44	const root = $scope[0]?.querySelector(".king-addons-content-toggle");
45
46	if (!root) {
47	return;
48	}
49
50	const panes = {
51	primary: root.querySelector(".king-addons-content-toggle__pane--primary"),
52	secondary: root.querySelector(".king-addons-content-toggle__pane--secondary"),
53	};
54
55	const labels = {
56	primary: root.querySelector(".king-addons-content-toggle__label--primary"),
57	secondary: root.querySelector(".king-addons-content-toggle__label--secondary"),
58	};
59
60	const switcher = root.querySelector(".king-addons-content-toggle__switch");
61
62	const dataset = root.dataset;
63	const activeClass = dataset.activeClass \|\| "";
64	const hiddenClass = dataset.hiddenClass \|\| "";
65	const primaryTargets = parseSelectors(dataset.primaryTargets);
66	const secondaryTargets = parseSelectors(dataset.secondaryTargets);
67	const primaryHide = parseSelectors(dataset.primaryHide);
68	const secondaryHide = parseSelectors(dataset.secondaryHide);
69
70	let currentState = dataset.defaultState === "secondary" ? "secondary" : "primary";
71
72	const updateExternal = (state) => {
73	if (
74	!activeClass &&
75	!hiddenClass &&
76	!primaryTargets.length &&
77	!secondaryTargets.length &&
78	!primaryHide.length &&
79	!secondaryHide.length
80	) {
81	return;
82	}
83
84	if (state === "primary") {
85	applyVisibility(primaryTargets, activeClass, hiddenClass, true);
86	applyVisibility(secondaryTargets, activeClass, hiddenClass, false);
87	applyVisibility(primaryHide, activeClass, hiddenClass, false);
88	applyVisibility(secondaryHide, activeClass, hiddenClass, true);
89	return;
90	}
91
92	applyVisibility(secondaryTargets, activeClass, hiddenClass, true);
93	applyVisibility(primaryTargets, activeClass, hiddenClass, false);
94	applyVisibility(secondaryHide, activeClass, hiddenClass, false);
95	applyVisibility(primaryHide, activeClass, hiddenClass, true);
96	};
97
98	const hidePane = (pane) => {
99	if (!pane) {
100	return;
101	}
102	pane.classList.remove("is-active");
103	window.setTimeout(() => {
104	pane.setAttribute("hidden", "hidden");
105	}, ANIMATION_DURATION);
106	};
107
108	const showPane = (pane) => {
109	if (!pane) {
110	return;
111	}
112	pane.removeAttribute("hidden");
113	window.requestAnimationFrame(() => {
114	pane.classList.add("is-active");
115	});
116	};
117
118	const applyState = (nextState) => {
119	if (!panes[nextState]) {
120	return;
121	}
122
123	if (currentState !== nextState) {
124	hidePane(panes[currentState]);
125	showPane(panes[nextState]);
126	}
127
128	root.classList.toggle("king-addons-content-toggle--secondary-active", nextState === "secondary");
129	root.classList.toggle("king-addons-content-toggle--primary-active", nextState === "primary");
130
131	if (switcher) {
132	switcher.setAttribute("aria-checked", nextState === "secondary" ? "true" : "false");
133	switcher.dataset.target = nextState === "primary" ? "secondary" : "primary";
134	}
135
136	if (labels.primary) {
137	labels.primary.classList.toggle("is-active", nextState === "primary");
138	labels.primary.setAttribute("aria-pressed", nextState === "primary" ? "true" : "false");
139	}
140
141	if (labels.secondary) {
142	labels.secondary.classList.toggle("is-active", nextState === "secondary");
143	labels.secondary.setAttribute("aria-pressed", nextState === "secondary" ? "true" : "false");
144	}
145
146	currentState = nextState;
147	updateExternal(currentState);
148	};
149
150	if (switcher) {
151	switcher.addEventListener("click", () => {
152	applyState(currentState === "primary" ? "secondary" : "primary");
153	});
154	}
155
156	if (labels.primary) {
157	labels.primary.addEventListener("click", () => applyState("primary"));
158	}
159
160	if (labels.secondary) {
161	labels.secondary.addEventListener("click", () => applyState("secondary"));
162	}
163
164	// Ensure external selectors are synced on initial render.
165	updateExternal(currentState);
166	};
167
168	$(window).on("elementor/frontend/init", function () {
169	elementorFrontend.hooks.addAction("frontend/element_ready/king-addons-content-toggle.default", function ($scope) {
170	initContentToggle($scope);
171	});
172	});
173	})(jQuery);
174
175
176
177
178