← All changes | includes/widgets/Image_Accordion/script.js +71 -19 51.1.63 → 51.1.86 View file →

		@@ -33,8 +33,56 @@
33	33	lightboxAttr = $wrap.attr("lightbox"),
34	34	lightboxSettings = lightboxAttr ? JSON.parse(lightboxAttr) : "",
35	35	$accordionItems = $elem.find(".king-addons-image-accordion-item");
36	36
	37	+ // Content stays at the open-item size for the whole animation.
	38	+ // Clearing that size when the transition ends was an instant
	39	+ // resize: the text wrapped and the block jumped.
	40	+ const contentAxis = () =>
	41	+ $wrap.css("flex-direction") === "column" ? "height" : "width";
	42	+
	43	+ const setOpenContentSize = () => {
	44	+ const axis = contentAxis();
	45	+ const margin = axis === "height" ? "margin-bottom" : "margin-right";
	46	+ const count = $accordionItems.length;
	47	+ let gaps = 0;
	48	+
	49	+ $accordionItems.each(function (index) {
	50	+ if (index < count - 1) {
	51	+ gaps += parseFloat($(this).css(margin)) || 0;
	52	+ }
	53	+ });
	54	+
	55	+ const total =
	56	+ ($wrap[axis === "height" ? "innerHeight" : "innerWidth"]() || 0) - gaps;
	57	+ const activeGrow = parseFloat(settings.activeItem.activeWidth) || 1;
	58	+ let inactiveGrow = 1;
	59	+
	60	+ $accordionItems.each(function () {
	61	+ if (!$(this).hasClass("king-addons-image-accordion-item-grow")) {
	62	+ inactiveGrow = parseFloat(window.getComputedStyle(this).flexGrow) || 1;
	63	+ return false;
	64	+ }
	65	+ });
	66	+
	67	+ const sum = activeGrow + inactiveGrow * Math.max(count - 1, 0);
	68	+ if (total <= 0 || sum <= 0) {
	69	+ return;
	70	+ }
	71	+
	72	+ $wrap[0].style.setProperty(
	73	+ "--king-acc-open-size",
	74	+ Math.round((total * activeGrow) / sum) + "px"
	75	+ );
	76	+ };
	77	+
	78	+ setOpenContentSize();
	79	+ const resizeEvent = "resize.kingAddonsImageAccordion" + ($elem.data("id") || "item");
	80	+ $(window).off(resizeEvent).on(resizeEvent, setOpenContentSize);
	81	+ this.onDestroy = () => {
	82	+ $(window).off(resizeEvent);
	83	+ };
	84	+
37	85	// Adjust row/column layout if necessary
38	86	if ($wrapContainer.hasClass("king-addons-acc-no-column")) {
39	87	if (!$elem.hasClass("king-addons-image-accordion-row")) {
40	88	$elem
		@@ -169,28 +217,32 @@
169	217	// Interaction type: "hover"
170	218	if (settings.activeItem.interaction === "hover") {
171	219	mediaHoverLink();
172	220
173		- $accordionItems
174		- .on("mouseenter", function () {
175		- $accordionItems.removeClass(
176		- "king-addons-image-accordion-item-grow"
177		- );
178		- $accordionItems
179		- .find(".king-addons-animation-wrap")
180		- .removeClass("king-addons-animation-wrap-active");
	221	+ $accordionItems.on("mouseenter", function () {
	222	+ if ($(this).hasClass("king-addons-image-accordion-item-grow")) {
	223	+ return;
	224	+ }
	225	+ $accordionItems.removeClass(
	226	+ "king-addons-image-accordion-item-grow"
	227	+ );
	228	+ $accordionItems
	229	+ .find(".king-addons-animation-wrap")
	230	+ .removeClass("king-addons-animation-wrap-active");
181	231
182		- $(this).addClass("king-addons-image-accordion-item-grow");
183		- $(this)
184		- .find(".king-addons-animation-wrap")
185		- .addClass("king-addons-animation-wrap-active");
186		- })
187		- .on("mouseleave", function () {
188		- $(this).removeClass("king-addons-image-accordion-item-grow");
189		- $(this)
190		- .find(".king-addons-animation-wrap")
191		- .removeClass("king-addons-animation-wrap-active");
192		- });
	232	+ $(this).addClass("king-addons-image-accordion-item-grow");
	233	+ $(this)
	234	+ .find(".king-addons-animation-wrap")
	235	+ .addClass("king-addons-animation-wrap-active");
	236	+ });
	237	+ $wrap.on("mouseleave", function () {
	238	+ $accordionItems.removeClass(
	239	+ "king-addons-image-accordion-item-grow"
	240	+ );
	241	+ $accordionItems
	242	+ .find(".king-addons-animation-wrap")
	243	+ .removeClass("king-addons-animation-wrap-active");
	244	+ });
193	245
194	246	// Interaction type: "click"
195	247	} else if (settings.activeItem.interaction === "click") {
196	248	$elem