← All changes | assets/src/js/utils.js +170 -5 4.4.2 → 4.4.8 View file →

		@@ -4,9 +4,9 @@
4	4	* @param url
5	5	* @param data
6	6	* @param functions
7	7	* @since 4.2.5.1
8		- * @version 1.0.6
	8	+ * @version 1.0.7
9	9	*/
10	10	export const lpClassName = {
11	11	hidden: 'lp-hidden',
12	12	loading: 'loading',
		@@ -12,8 +12,11 @@
12	12	loading: 'loading',
13	13	elCollapse: 'lp-collapse',
14	14	elSectionToggle: '.lp-section-toggle',
15	15	elTriggerToggle: '.lp-trigger-toggle',
	16	+ elBtnFullScreen: '.lp-btn-full-screen-view',
	17	+ elFullScreen: 'lp-full-screen-view',
	18	+ elBtnFullScreenClose: 'lp-full-screen-view__close',
16	19	};
17	20
18	21	export const lpFetchAPI = ( url, data = {}, functions = {} ) => {
19	22	if ( 'function' === typeof functions.before ) {
		@@ -71,9 +74,9 @@
71	74	* @param callback
72	75	* @since 4.2.5.8
73	76	*/
74	77	export const listenElementViewed = ( el, callback ) => {
75		- const observerSeeItem = new IntersectionObserver( function( entries ) {
	78	+ const observerSeeItem = new IntersectionObserver( function ( entries ) {
76	79	for ( const entry of entries ) {
77	80	if ( entry.isIntersecting ) {
78	81	callback( entry );
79	82	}
		@@ -89,12 +92,12 @@
89	92	* @param callback
90	93	* @since 4.2.5.8
91	94	*/
92	95	export const listenElementCreated = ( callback ) => {
93		- const observerCreateItem = new MutationObserver( function( mutations ) {
94		- mutations.forEach( function( mutation ) {
	96	+ const observerCreateItem = new MutationObserver( function ( mutations ) {
	97	+ mutations.forEach( function ( mutation ) {
95	98	if ( mutation.addedNodes ) {
96		- mutation.addedNodes.forEach( function( node ) {
	99	+ mutation.addedNodes.forEach( function ( node ) {
97	100	if ( node.nodeType === 1 ) {
98	101	callback( node );
99	102	}
100	103	} );
		@@ -353,5 +356,167 @@
353	356	return ( args ) => {
354	357	clearTimeout( timer );
355	358	timer = setTimeout( () => func( args ), wait );
356	359	};
	360	+};
	361	+
	362	+/**
	363	+ * Initialize lp-toggle-enable components.
	364	+ *
	365	+ * Finds all `.lp-toggle-enable` elements and wires up toggle behavior.
	366	+ * Reads initial state from `data-enabled` attribute ("true"/"false").
	367	+ * Calls `data-on-toggle` callback (if provided via options) on state change.
	368	+ *
	369	+ * HTML structure:
	370	+ * <label class="lp-toggle-enable" data-enabled="true">
	371	+ * <input type="checkbox" class="lp-toggle-enable__input" />
	372	+ * <span class="lp-toggle-enable__track"></span>
	373	+ * </label>
	374	+ *
	375	+ * @param {string} selector CSS selector for toggle elements (default: '.lp-toggle-enable')
	376	+ * @param {Function} onToggle Optional callback( el, isEnabled ) called on state change
	377	+ * @since 4.4.5
	378	+ * @version 1.0.0
	379	+ */
	380	+window.lpToggleEnableInit = 0;
	381	+export const toggleEnable = ( onToggle = null ) => {
	382	+ if ( window.lpToggleEnableInit ) {
	383	+ return;
	384	+ }
	385	+ window.lpToggleEnableInit = 1;
	386	+
	387	+ const selector = '.lp-toggle-enable';
	388	+
	389	+ const updateUI = ( toggle, isEnabled ) => {
	390	+ toggle.classList.toggle( 'is-enabled', isEnabled );
	391	+ const input = toggle.querySelector( '.lp-toggle-enable__input' );
	392	+ if ( input ) {
	393	+ input.checked = isEnabled;
	394	+ input.value = isEnabled ? '1' : '0';
	395	+ }
	396	+ };
	397	+
	398	+ // Delegate click handling via eventHandlers.
	399	+ eventHandlers( 'click', [
	400	+ {
	401	+ selector,
	402	+ callBack: ( args ) => {
	403	+ const { e, target } = args;
	404	+ const toggle = target.closest( selector );
	405	+
	406	+ if ( ! toggle || toggle.classList.contains( 'is-disabled' ) ) {
	407	+ return;
	408	+ }
	409	+
	410	+ e.preventDefault();
	411	+
	412	+ const isEnabled = ! toggle.classList.contains( 'is-enabled' );
	413	+ updateUI( toggle, isEnabled );
	414	+
	415	+ if ( 'function' === typeof onToggle ) {
	416	+ onToggle( toggle, isEnabled );
	417	+ }
	418	+ },
	419	+ },
	420	+ ] );
	421	+};
	422	+
	423	+/**
	424	+ * Initialize custom fullscreen view buttons.
	425	+ *
	426	+ * Delegates clicks on `.lp-btn-full-screen-view` buttons to
	427	+ * `lpToggleFullscreenView`. Reads the `data-target` attribute to find the
	428	+ * target element. Falls back to the button's parent element when
	429	+ * `data-target` is not provided.
	430	+ *
	431	+ * @since 4.4.5
	432	+ * @version 1.0.0
	433	+ */
	434	+window.lpFullScreenViewInit = 0;
	435	+export const fullScreenView = () => {
	436	+ if ( window.lpFullScreenViewInit ) {
	437	+ return;
	438	+ }
	439	+ window.lpFullScreenViewInit = 1;
	440	+
	441	+ let lastScrollY = 0;
	442	+
	443	+ const lpToggleFullscreenView = ( elTarget, elBtnFullScreen = null ) => {
	444	+ const isFullscreen = elTarget.classList.contains(
	445	+ lpClassName.elFullScreen
	446	+ );
	447	+
	448	+ if ( isFullscreen ) {
	449	+ elTarget.classList.remove( lpClassName.elFullScreen );
	450	+ document.documentElement.classList.remove(
	451	+ 'lp-full-screen-active'
	452	+ );
	453	+ window.scrollTo( 0, lastScrollY );
	454	+ } else {
	455	+ lastScrollY = window.scrollY;
	456	+ elTarget.classList.add( lpClassName.elFullScreen );
	457	+ document.documentElement.classList.add( 'lp-full-screen-active' );
	458	+ }
	459	+
	460	+ if ( ! isFullscreen ) {
	461	+ if (
	462	+ ! elTarget.querySelector(
	463	+ `.${ lpClassName.elBtnFullScreenClose }`
	464	+ )
	465	+ ) {
	466	+ const closeButton = document.createElement( 'button' );
	467	+ closeButton.type = 'button';
	468	+ closeButton.className = lpClassName.elBtnFullScreenClose;
	469	+ closeButton.setAttribute( 'aria-label', 'Close' );
	470	+ closeButton.innerHTML =
	471	+ lpData.i18n.closeButtonFullScreen || 'Close &times;';
	472	+
	473	+ closeButton.addEventListener( 'click', ( e ) => {
	474	+ e.preventDefault();
	475	+ lpToggleFullscreenView( elTarget );
	476	+ } );
	477	+
	478	+ elTarget.appendChild( closeButton );
	479	+ }
	480	+ } else {
	481	+ const closeButton = elTarget.querySelector(
	482	+ `.${ lpClassName.elBtnFullScreenClose }`
	483	+ );
	484	+ if ( closeButton ) {
	485	+ closeButton.remove();
	486	+ }
	487	+ }
	488	+ };
	489	+
	490	+ eventHandlers( 'click', [
	491	+ {
	492	+ selector: lpClassName.elBtnFullScreen,
	493	+ callBack: ( args ) => {
	494	+ const { e, target } = args;
	495	+ const elBtnFullScreen = target.closest(
	496	+ lpClassName.elBtnFullScreen
	497	+ );
	498	+
	499	+ if ( ! elBtnFullScreen ) {
	500	+ console.log( 'No full screen button found' );
	501	+ return;
	502	+ }
	503	+
	504	+ e.preventDefault();
	505	+
	506	+ let elTarget = null;
	507	+ const targetSelector = elBtnFullScreen.dataset.targetFullscreen;
	508	+ console.log( targetSelector );
	509	+ if ( targetSelector ) {
	510	+ elTarget = document.querySelector( targetSelector );
	511	+ }
	512	+
	513	+ if ( ! elTarget ) {
	514	+ console.log( 'No target element found' );
	515	+ return;
	516	+ }
	517	+
	518	+ lpToggleFullscreenView( elTarget, elBtnFullScreen );
	519	+ },
	520	+ },
	521	+ ] );
357	522	};