← All changes | includes/widgets/Accordion/script.js +86 -25 51.1.84 → 51.1.86 View file →

		@@ -13,9 +13,89 @@
13	13	const accordionType = $accordion.data("accordion-type");
14	14	const accordionTrigger = $accordion.data("accordion-trigger");
15	15	const interactionSpeed = +$accordion.data("interaction-speed") * 1000;
16	16	let activeIndex = +$accordion.data("active-index") - 1;
	17	+ $accordion.css("--king-acc-speed", (interactionSpeed || 400) + "ms");
17	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	+
18	98	// Check URL for "active_panel"
19	99	const activeTabParamPos = window.location.href.indexOf("active_panel=");
20	100	if (activeTabParamPos > -1) {
21	101	activeIndex = +window.location.href
		@@ -23,17 +103,9 @@
23	103	.replace("active_panel=", "") - 1;
24	104	}
25	105
26	106	// 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		- };
	107	+ // openPanel / closePanel are defined above.
36	108
37	109	// Accordion: click trigger
38	110	if (accordionTrigger === "click") {
39	111	if (accordionType === "accordion") {
		@@ -45,11 +117,9 @@
45	117	if (i !== currentIndex) $(btn).removeClass("king-addons-acc-active");
46	118	});
47	119	$scope.find(".king-addons-acc-panel").each((i, panel) => {
48	120	if (i !== currentIndex) {
49		- $(panel)
50		- .removeClass("king-addons-acc-panel-active")
51		- .slideUp(interactionSpeed);
	121	+ closePanel($(panel).prev(".king-addons-acc-button"));
52	122	}
53	123	});
54	124
55	125	// Toggle the current
		@@ -70,21 +140,15 @@
70	140	} else if (accordionTrigger === "hover") {
71	141	$accItems.on("mouseenter", function () {
72	142	const currentIndex = $accItems.index(this);
73	143	const $btn = $(this).find(".king-addons-acc-button");
74		- const $panel = $(this).find(".king-addons-acc-panel");
75	144
76		- // Activate hovered item
77		- $btn.addClass("king-addons-acc-active");
78		- $panel.slideDown(interactionSpeed).addClass("king-addons-acc-panel-active");
	145	+ openPanel($btn);
79	146
80	147	// Deactivate others
81	148	$accItems.each((i, item) => {
82	149	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");
	150	+ closePanel($(item).find(".king-addons-acc-button"));
87	151	}
88	152	});
89	153	});
90	154	// Open active index if set
		@@ -147,12 +211,10 @@
147	211	} else {
148	212	// Show and activate
149	213	$item.show();
150	214	const $btn = $item.find(".king-addons-acc-button");
151		- const $panel = $item.find(".king-addons-acc-panel");
152	215	if (!$btn.hasClass("king-addons-acc-active")) {
153		- $btn.addClass("king-addons-acc-active");
154		- $panel.addClass("king-addons-acc-panel-active").slideDown(interactionSpeed);
	216	+ openPanel($btn);
155	217	}
156	218	}
157	219	});
158	220	} else {
		@@ -160,10 +222,9 @@
160	222	$allInAccordion.each((_, el) => {
161	223	const $item = $(el);
162	224	if ($item.hasClass("king-addons-accordion-item-wrap")) {
163	225	$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");
	226	+ closePanel($item.find(".king-addons-acc-button"));
166	227	}
167	228	});
168	229	}
169	230	}, 1000);