← All changes | includes/widgets/Mega_Menu/script.js +111 -40 51.1.14 → 51.1.87 View file →

		@@ -96,30 +96,10 @@
96	96	});
97	97	}
98	98	});
99	99
100		- // Responsive logo alignment
101		- const applyLogoAlignment = () => {
102		- $mainMenu.each(function () {
103		- const $menu = $(this);
104		- const breakpoint = parseInt($menu.data('mobile-breakpoint') || '1024', 10);
105		- if (window.innerWidth > breakpoint) {
106		- $menu.find('.king-addons-mega-menu-logo').css('justify-content', '');
107		- } else {
108		- const $logo = $menu.find('.king-addons-mega-menu-logo');
109		- if ($logo.hasClass('king-addons-logo-mobile-alignment-left')) {
110		- $logo.css('justify-content', 'flex-start');
111		- } else if ($logo.hasClass('king-addons-logo-mobile-alignment-center')) {
112		- $logo.css('justify-content', 'center');
113		- } else if ($logo.hasClass('king-addons-logo-mobile-alignment-right')) {
114		- $logo.css('justify-content', 'flex-end');
115		- }
116		- }
117		- });
118		- };
119		- $(window).on('resize', applyLogoAlignment);
120		- applyLogoAlignment();
121	100
	101	+
122	102	// Mobile menu toggle logic
123	103	const $mobileToggle = $scope.find('.king-addons-mobile-menu-toggle');
124	104	const $mobileMenu = $scope.find('.king-addons-mobile-menu');
125	105	const $mobileClose = $scope.find('.king-addons-mobile-menu-close');
		@@ -295,8 +275,9 @@
295	275	$mainMenu.removeClass('king-addons-center-logo-active');
296	276
297	277	// Only proceed if current position is center
298	278	if (currentPosition !== 'center') return;
	279	+ if (window.innerWidth <= 1024) return;
299	280
300	281	const splitAt = parseInt($mainMenu.attr('data-split-at')) || 2;
301	282	const $menuItems = $mainMenu.find('.king-addons-menu-items > li');
302	283	const $logoPlaceholder = $mainMenu.find('.king-addons-center-logo-placeholder');
		@@ -302,9 +283,19 @@
302	283	const $logoPlaceholder = $mainMenu.find('.king-addons-center-logo-placeholder');
303	284
304	285	if ($menuItems.length > splitAt && $logoPlaceholder.length) {
305	286	// Clone logo and insert it after the split position
306		- const $logoClone = $logoPlaceholder.children().first().clone();
	287	+ const $logoClone = $logoPlaceholder.children().first().clone(true, true);
	288	+
	289	+ // Clean any previously injected Lottie DOM from the clone
	290	+ // (cloning after Lottie init copies <svg>/<canvas> which would produce duplicates)
	291	+ $logoClone.find('.king-addons-lottie-animations').each(function() {
	292	+ const $container = jQuery(this);
	293	+ // Remove any rendered content and runtime flags
	294	+ $container.empty();
	295	+ $container.removeData('lottie-initialized');
	296	+ $container.removeData('lottie-animation');
	297	+ });
307	298	$logoClone.addClass('king-addons-center-logo-inserted');
308	299
309	300	// Insert logo after the specified menu item
310	301	$menuItems.eq(splitAt - 1).after($logoClone);
		@@ -310,8 +301,20 @@
310	301	$menuItems.eq(splitAt - 1).after($logoClone);
311	302
312	303	// Add special class to menu for center layout
313	304	$mainMenu.addClass('king-addons-center-logo-active');
	305	+
	306	+ // Ensure Lottie animations are initialized for cloned logo, if any
	307	+ try {
	308	+ // Initialize Lottie only for not-yet-initialized elements to avoid duplicates
	309	+ $mainMenu.find('.king-addons-lottie-animations').each(function() {
	310	+ const $el = jQuery(this);
	311	+ if (!$el.data('lottie-initialized')) {
	312	+ kingAddonsInitializeLottieLogos($mainMenu);
	313	+ return false; // one pass is enough; internal init loops through all
	314	+ }
	315	+ });
	316	+ } catch (e) {}
314	317	}
315	318	}
316	319
317	320	/**
		@@ -343,15 +346,15 @@
343	346
344	347	function checkLottie() {
345	348	const lottieLib = getLottieLibrary();
346	349	if (lottieLib) {
347		- console.log('Lottie library found, initializing animations');
	350	+ // console.log('Lottie library found, initializing animations');
348	351	kingAddonsInitializeLottieLogos($mainMenu);
349	352	} else if (attempts < maxAttempts) {
350	353	attempts++;
351	354	setTimeout(checkLottie, 100);
352	355	} else {
353		- console.log('Lottie library not loaded after 5 seconds');
	356	+ // console.log('Lottie library not loaded after 5 seconds');
354	357	// Try one more time with alternative approach
355	358	tryAlternativeLottieInit($mainMenu);
356	359	}
357	360	}
		@@ -367,9 +370,9 @@
367	370	if (document.readyState === 'complete') {
368	371	setTimeout(function() {
369	372	const lottieLib = getLottieLibrary();
370	373	if (lottieLib) {
371		- console.log('Lottie library found on window load, initializing');
	374	+ // console.log('Lottie library found on window load, initializing');
372	375	kingAddonsInitializeLottieLogos($mainMenu);
373	376	}
374	377	}, 500);
375	378	} else {
		@@ -376,9 +379,9 @@
376	379	window.addEventListener('load', function() {
377	380	setTimeout(function() {
378	381	const lottieLib = getLottieLibrary();
379	382	if (lottieLib) {
380		- console.log('Lottie library found after window load, initializing');
	383	+ // console.log('Lottie library found after window load, initializing');
381	384	kingAddonsInitializeLottieLogos($mainMenu);
382	385	}
383	386	}, 500);
384	387	});
		@@ -435,34 +438,50 @@
435	438	}
436	439
437	440	// Handle triggers
438	441	if (settings.trigger === 'hover') {
	442	+ const isInNavigation = $element.closest('.king-addons-mega-menu').length > 0;
439	443	$element.on('mouseenter', function() {
440	444	animation.play();
441	445	});
442	446	$element.on('mouseleave', function() {
	447	+ // Do not pause on mouseleave while a King Addons popup is open
	448	+ if (isInNavigation && document.querySelector('.king-addons-pb-template-popup.king-addons-pb-popup-open')) {
	449	+ animation.play();
	450	+ return;
	451	+ }
443	452	animation.pause();
444	453	});
445	454	} else if (settings.trigger === 'viewport') {
446		- // Simple viewport detection
447		- const observer = new IntersectionObserver((entries) => {
448		- entries.forEach(entry => {
449		- if (entry.isIntersecting) {
450		- animation.play();
451		- } else {
452		- animation.pause();
453		- }
	455	+ // For navigation logos, viewport trigger should be more permissive
	456	+ // Check if element is in navigation context
	457	+ const isInNavigation = $element.closest('.king-addons-mega-menu').length > 0;
	458	+
	459	+ if (isInNavigation) {
	460	+ // For navigation logos, just start playing and keep playing
	461	+ // Navigation is typically always visible
	462	+ animation.play();
	463	+ } else {
	464	+ // For non-navigation elements, use standard viewport detection
	465	+ const observer = new IntersectionObserver((entries) => {
	466	+ entries.forEach(entry => {
	467	+ if (entry.isIntersecting) {
	468	+ animation.play();
	469	+ } else {
	470	+ animation.pause();
	471	+ }
	472	+ });
454	473	});
455		- });
456		- observer.observe(this);
	474	+ observer.observe(this);
	475	+ }
457	476	}
458	477
459		- console.log('Lottie animation initialized for:', jsonUrl);
	478	+ // console.log('Lottie animation initialized for:', jsonUrl);
460	479	} else {
461		- console.log('Lottie library not available');
	480	+ // console.log('Lottie library not available');
462	481	}
463	482	} catch (error) {
464		- console.log('Lottie initialization failed:', error);
	483	+ // console.log('Lottie initialization failed:', error);
465	484	}
466	485	});
467	486	}
468	487
		@@ -468,9 +487,27 @@
468	487
469	488	// Handle center logo repositioning on window resize
470	489	$(window).on('resize', function() {
471	490	$('.king-addons-mega-menu[data-center-logo="true"]').each(function() {
472		- kingAddonsCenterLogoPositioning($(this));
	491	+ const $menu = $(this);
	492	+ kingAddonsCenterLogoPositioning($menu);
	493	+ // Ensure cloned logo does not carry previous rendered SVG/canvas
	494	+ $menu.find('.king-addons-center-logo-inserted .king-addons-lottie-animations').each(function() {
	495	+ const $container = jQuery(this);
	496	+ if (!$container.data('lottie-initialized')) {
	497	+ $container.empty();
	498	+ }
	499	+ });
	500	+ // Re-initialize Lottie only for missing instances
	501	+ try {
	502	+ $menu.find('.king-addons-lottie-animations').each(function() {
	503	+ const $el = jQuery(this);
	504	+ if (!$el.data('lottie-initialized')) {
	505	+ kingAddonsInitializeLottieLogos($menu);
	506	+ return false;
	507	+ }
	508	+ });
	509	+ } catch (e) {}
473	510	});
474	511	});
475	512
476	513	// Additional Lottie initialization fallback
		@@ -492,6 +529,40 @@
492	529	});
493	530	});
494	531	}, 1000);
495	532	});
	533	+
	534	+ // Resume navigation logo Lottie animations when a King Addons popup opens
	535	+ function kingAddonsKeepNavLottieRunning() {
	536	+ const resumeAll = () => {
	537	+ document.querySelectorAll('.king-addons-mega-menu .king-addons-lottie-animations').forEach(function(el) {
	538	+ const $el = jQuery(el);
	539	+ const anim = $el.data('lottie-animation');
	540	+ if (anim) {
	541	+ anim.play();
	542	+ }
	543	+ });
	544	+ };
	545	+ // Resume when class changes on popups (open/close)
	546	+ const popups = document.querySelectorAll('.king-addons-pb-template-popup');
	547	+ popups.forEach(function(popup) {
	548	+ const observer = new MutationObserver(function(mutations) {
	549	+ mutations.forEach(function(mutation) {
	550	+ if (mutation.attributeName === 'class') {
	551	+ resumeAll();
	552	+ }
	553	+ });
	554	+ });
	555	+ observer.observe(popup, { attributes: true, attributeFilter: ['class'] });
	556	+ });
	557	+ // Resume on resize (desktop breakpoint changes)
	558	+ window.addEventListener('resize', function() {
	559	+ resumeAll();
	560	+ });
	561	+ // Resume on scroll (in case of transient viewport observers)
	562	+ window.addEventListener('scroll', function() {
	563	+ resumeAll();
	564	+ }, { passive: true });
	565	+ }
	566	+ document.addEventListener('DOMContentLoaded', kingAddonsKeepNavLottieRunning);
496	567
497	568	})(jQuery);