← All changes | assets/src/js/loadAJAX.js +92 -39 4.3.7 → 4.4.9 View file →

		@@ -1,19 +1,12 @@
1	1	/**
2	2	* Load all you need via AJAX
3	3	*
4	4	* @since 4.2.5.7
5		- * @version 1.1.0
	5	+ * @version 1.1.1
6	6	*/
7	7
8		-import {
9		- lpAddQueryArgs,
10		- lpFetchAPI,
11		- listenElementCreated,
12		- lpOnElementReady,
13		- lpGetCurrentURLNoParam,
14		- lpShowHideEl,
15		-} from './utils.js';
	8	+import * as lpUtils from 'lpAssetsJsPath/utils.js';
16	9
17	10	// Handle general parameter in the Frontend and Backend
18	11	let lpSettings = {};
19	12	if ( 'undefined' !== typeof lpDataAdmin ) {
		@@ -24,9 +17,9 @@
24	17	// End Handle general parameter in the Frontend and Backend
25	18
26	19	const lpAJAX = () => {
27	20	const classLPTarget = '.lp-target';
28		- const urlCurrent = lpGetCurrentURLNoParam();
	21	+ const urlCurrent = lpUtils.lpGetCurrentURLNoParam();
29	22
30	23	return {
31	24	autoLoadAPIs: () => {
32	25	console.log( 'autoLoadAPIs' );
		@@ -50,52 +43,90 @@
50	43	option.headers[ 'Content-Type' ] = 'application/json';
51	44	} else {
52	45	params.args = JSON.stringify( params.args );
53	46	params.callback = JSON.stringify( params.callback );
54		- url = lpAddQueryArgs( url, params );
	47	+ url = lpUtils.lpAddQueryArgs( url, params );
55	48	}
56	49
57		- lpFetchAPI( url, option, callBack );
	50	+ lpUtils.lpFetchAPI( url, option, callBack );
58	51	},
59	52	fetchAJAX: ( params, callBack ) => {
60	53	let urlAjax = lpSettings.lpAjaxUrl;
61	54
62	55	// Set param id_url for identify.
63		- if ( params.hasOwnProperty( 'args' ) && params.args.hasOwnProperty( 'id_url' ) ) {
64		- urlAjax = lpAddQueryArgs( urlAjax, { id_url: params.args.id_url } );
	56	+ if (
	57	+ params.hasOwnProperty( 'args' ) &&
	58	+ params.args.hasOwnProperty( 'id_url' )
	59	+ ) {
	60	+ urlAjax = lpUtils.lpAddQueryArgs( urlAjax, {
	61	+ id_url: params.args.id_url,
	62	+ } );
65	63	} else if ( params.hasOwnProperty( 'id_url' ) ) {
66		- urlAjax = lpAddQueryArgs( urlAjax, { id_url: params.id_url } );
	64	+ urlAjax = lpUtils.lpAddQueryArgs( urlAjax, {
	65	+ id_url: params.id_url,
	66	+ } );
67	67	}
68	68	// Set param lang here if exits, for detect translate
69	69	if ( lpSettings.urlParams.hasOwnProperty( 'lang' ) ) {
70		- urlAjax = lpAddQueryArgs( urlAjax, { lang: lpSettings.urlParams.lang } );
	70	+ urlAjax = lpUtils.lpAddQueryArgs( urlAjax, {
	71	+ lang: lpSettings.urlParams.lang,
	72	+ } );
71	73	}
72	74
73		- const formData = new FormData();
74		- const action = params.hasOwnProperty( 'action' ) ? params.action : 'load_content_via_ajax';
75		- formData.append( 'nonce', lpSettings.nonce );
76		- formData.append( 'lp-load-ajax', action );
77		- formData.append( 'data', JSON.stringify( params ) );
78		- const dataSend = {
79		- method: 'POST',
80		- headers: {},
81		- body: formData,
82		- };
	75	+ const action = params.hasOwnProperty( 'action' )
	76	+ ? params.action
	77	+ : 'load_content_via_ajax';
	78	+ const isGet =
	79	+ params.hasOwnProperty( 'method_request' ) &&
	80	+ 'GET' === String( params.method_request ).toUpperCase();
	81	+ let dataSend;
83	82
	83	+ if ( isGet ) {
	84	+ // Don't send method_request back to server; keep URL shorter.
	85	+ const paramsForSend = { ...params };
	86	+ delete paramsForSend.method_request;
	87	+
	88	+ urlAjax = lpUtils.lpAddQueryArgs( urlAjax, {
	89	+ nonce: lpSettings.nonce,
	90	+ 'lp-load-ajax': action,
	91	+ data: JSON.stringify( paramsForSend ),
	92	+ } );
	93	+
	94	+ dataSend = {
	95	+ method: 'GET',
	96	+ headers: {},
	97	+ };
	98	+ } else {
	99	+ const formData = new FormData();
	100	+ formData.append( 'nonce', lpSettings.nonce );
	101	+ formData.append( 'lp-load-ajax', action );
	102	+ formData.append( 'data', JSON.stringify( params ) );
	103	+
	104	+ dataSend = {
	105	+ method: 'POST',
	106	+ headers: {},
	107	+ body: formData,
	108	+ };
	109	+ }
	110	+
84	111	if ( 0 !== parseInt( lpSettings.user_id ) ) {
85	112	dataSend.headers[ 'X-WP-Nonce' ] = lpSettings.nonce;
86	113	}
87	114
88		- lpFetchAPI( urlAjax, dataSend, callBack );
	115	+ lpUtils.lpFetchAPI( urlAjax, dataSend, callBack );
89	116	},
90	117	getElements: () => {
91	118	// Finds all elements with the class '.lp-load-ajax-element'
92		- const elements = document.querySelectorAll( '.lp-load-ajax-element:not(.loaded)' );
	119	+ const elements = document.querySelectorAll(
	120	+ '.lp-load-ajax-element:not(.loaded)'
	121	+ );
93	122	//console.log( 'getElements', elements );
94	123	if ( elements.length ) {
95	124	elements.forEach( ( element ) => {
96	125	//console.log( 'Element handing', element );
97		- const elTarget = element.querySelector( `${ classLPTarget }` );
	126	+ const elTarget = element.querySelector(
	127	+ `${ classLPTarget }`
	128	+ );
98	129	if ( ! elTarget ) {
99	130	return;
100	131	}
101	132
		@@ -100,9 +131,10 @@
100	131	}
101	132
102	133	const dataObj = JSON.parse( elTarget.dataset.send );
103	134	const dataSend = { ...dataObj };
104		- const elLoadingFirst = element.querySelector( '.loading-first' );
	135	+ const elLoadingFirst =
	136	+ element.querySelector( '.loading-first' );
105	137
106	138	const callBack = {
107	139	success: ( response ) => {
108	140	const { status, message, data } = response;
		@@ -117,9 +149,13 @@
117	149	console.log( error );
118	150	},
119	151	completed: () => {
120	152	if ( typeof wp !== 'undefined' && wp.hooks ) {
121		- wp.hooks.doAction( 'lp-ajax-completed', element, dataSend );
	153	+ wp.hooks.doAction(
	154	+ 'lp-ajax-completed',
	155	+ element,
	156	+ dataSend
	157	+ );
122	158	}
123	159
124	160	window.lpAJAXG.getElements();
125	161	//console.log( 'completed' );
		@@ -140,8 +176,13 @@
140	176	if ( ! btnNumber ) {
141	177	return;
142	178	}
143	179
	180	+ // Check btnNumber is tag a
	181	+ if ( btnNumber.tagName.toLowerCase() !== 'a' ) {
	182	+ return;
	183	+ }
	184	+
144	185	const elLPTarget = btnNumber.closest( `${ classLPTarget }` );
145	186	if ( ! elLPTarget ) {
146	187	return;
147	188	}
		@@ -169,12 +210,18 @@
169	210
170	211	elLPTarget.dataset.send = JSON.stringify( dataSend );
171	212
172	213	// Set url params to reload page.
173		- if ( ! dataSend.args.hasOwnProperty( 'enableUpdateParamsUrl' ) ||
174		- dataSend.args.enableUpdateParamsUrl ) {
	214	+ if (
	215	+ ! dataSend.args.hasOwnProperty( 'enableUpdateParamsUrl' ) ||
	216	+ dataSend.args.enableUpdateParamsUrl
	217	+ ) {
175	218	lpSettings.urlParams.paged = dataSend.args.paged;
176		- window.history.pushState( {}, '', lpAddQueryArgs( urlCurrent, lpSettings.urlParams ) );
	219	+ window.history.pushState(
	220	+ {},
	221	+ '',
	222	+ lpUtils.lpAddQueryArgs( urlCurrent, lpSettings.urlParams )
	223	+ );
177	224	}
178	225	// End.
179	226
180	227	// Show loading
		@@ -185,9 +232,12 @@
185	232	if (
186	233	! dataSend.args.hasOwnProperty( 'enableScrollToView' ) ||
187	234	dataSend.args.enableScrollToView
188	235	) {
189		- const elLPTargetY = elLPTarget.getBoundingClientRect().top + window.scrollY - 100;
	236	+ const elLPTargetY =
	237	+ elLPTarget.getBoundingClientRect().top +
	238	+ window.scrollY -
	239	+ 100;
190	240	window.scrollTo( { top: elLPTargetY } );
191	241	}
192	242
193	243	const callBack = {
		@@ -213,11 +263,14 @@
213	263	setDataSetCurrent: ( elLPTarget, dataSend ) => {
214	264	return ( elLPTarget.dataset.send = JSON.stringify( dataSend ) );
215	265	},
216	266	showHideLoading: ( elLPTarget, status ) => {
217		- const elLoading = elLPTarget.nextElementSibling?.querySelector( '.lp-loading-change' );
	267	+ const elLoading =
	268	+ elLPTarget.nextElementSibling?.querySelector(
	269	+ '.lp-loading-change'
	270	+ );
218	271	if ( elLoading ) {
219		- lpShowHideEl( elLoading, status );
	272	+ lpUtils.lpShowHideEl( elLoading, status );
220	273	}
221	274	},
222	275	};
223	276	};
		@@ -232,9 +285,9 @@
232	285	window.lpAJAXG.clickNumberPage( e, target );
233	286	} );
234	287
235	288	// Listen element created
236		-listenElementCreated( ( node ) => {
	289	+lpUtils.listenElementCreated( ( node ) => {
237	290	if ( node.classList.contains( 'lp-load-ajax-element' ) ) {
238	291	//console.log( 'Element created', node );
239	292	window.lpAJAXG.getElements();
240	293	}
		@@ -240,9 +293,9 @@
240	293	}
241	294	} );
242	295
243	296	// Listen element ready
244		-lpOnElementReady( '.lp-load-ajax-element', ( element ) => {
	297	+lpUtils.lpOnElementReady( '.lp-load-ajax-element', ( element ) => {
245	298	//console.log( 'Element ready', element );
246	299	window.lpAJAXG.getElements();
247	300	} );
248	301