← All changes | assets/src/js/loadAJAX.js +314 -261 4.3.9.1 → 4.4.9 View file →

		@@ -1,261 +1,314 @@
1		-/**
2		- * Load all you need via AJAX
3		- *
4		- * @since 4.2.5.7
5		- * @version 1.1.0
6		- */
7		-
8		-import {
9		- lpAddQueryArgs,
10		- lpFetchAPI,
11		- listenElementCreated,
12		- lpOnElementReady,
13		- lpGetCurrentURLNoParam,
14		- lpShowHideEl,
15		-} from './utils.js';
16		-
17		-// Handle general parameter in the Frontend and Backend
18		-let lpSettings = {};
19		-if ( 'undefined' !== typeof lpDataAdmin ) {
20		- lpSettings = lpDataAdmin;
21		-} else if ( 'undefined' !== typeof lpData ) {
22		- lpSettings = lpData;
23		-}
24		-// End Handle general parameter in the Frontend and Backend
25		-
26		-const lpAJAX = () => {
27		- const classLPTarget = '.lp-target';
28		- const urlCurrent = lpGetCurrentURLNoParam();
29		-
30		- return {
31		- autoLoadAPIs: () => {
32		- console.log( 'autoLoadAPIs' );
33		- },
34		- fetchAPI: ( url, params, callBack ) => {
35		- const option = { headers: {} };
36		- if ( 0 !== parseInt( lpSettings.user_id ) ) {
37		- option.headers[ 'X-WP-Nonce' ] = lpSettings.nonce;
38		- }
39		-
40		- if ( 'undefined' !== typeof params.args.method_request ) {
41		- option.method = params.args.method_request;
42		- } else {
43		- option.method = 'POST';
44		- }
45		-
46		- //params.args = { ...params.args, ...lpData.urlParams };
47		-
48		- if ( 'POST' === option.method ) {
49		- option.body = JSON.stringify( params );
50		- option.headers[ 'Content-Type' ] = 'application/json';
51		- } else {
52		- params.args = JSON.stringify( params.args );
53		- params.callback = JSON.stringify( params.callback );
54		- url = lpAddQueryArgs( url, params );
55		- }
56		-
57		- lpFetchAPI( url, option, callBack );
58		- },
59		- fetchAJAX: ( params, callBack ) => {
60		- let urlAjax = lpSettings.lpAjaxUrl;
61		-
62		- // 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 } );
65		- } else if ( params.hasOwnProperty( 'id_url' ) ) {
66		- urlAjax = lpAddQueryArgs( urlAjax, { id_url: params.id_url } );
67		- }
68		- // Set param lang here if exits, for detect translate
69		- if ( lpSettings.urlParams.hasOwnProperty( 'lang' ) ) {
70		- urlAjax = lpAddQueryArgs( urlAjax, { lang: lpSettings.urlParams.lang } );
71		- }
72		-
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		- };
83		-
84		- if ( 0 !== parseInt( lpSettings.user_id ) ) {
85		- dataSend.headers[ 'X-WP-Nonce' ] = lpSettings.nonce;
86		- }
87		-
88		- lpFetchAPI( urlAjax, dataSend, callBack );
89		- },
90		- getElements: () => {
91		- // Finds all elements with the class '.lp-load-ajax-element'
92		- const elements = document.querySelectorAll( '.lp-load-ajax-element:not(.loaded)' );
93		- //console.log( 'getElements', elements );
94		- if ( elements.length ) {
95		- elements.forEach( ( element ) => {
96		- //console.log( 'Element handing', element );
97		- const elTarget = element.querySelector( `${ classLPTarget }` );
98		- if ( ! elTarget ) {
99		- return;
100		- }
101		-
102		- const dataObj = JSON.parse( elTarget.dataset.send );
103		- const dataSend = { ...dataObj };
104		- const elLoadingFirst = element.querySelector( '.loading-first' );
105		-
106		- const callBack = {
107		- success: ( response ) => {
108		- const { status, message, data } = response;
109		-
110		- if ( 'success' === status ) {
111		- elTarget.innerHTML = data.content;
112		- } else if ( 'error' === status ) {
113		- elTarget.innerHTML = message;
114		- }
115		- },
116		- error: ( error ) => {
117		- console.log( error );
118		- },
119		- completed: () => {
120		- if ( typeof wp !== 'undefined' && wp.hooks ) {
121		- wp.hooks.doAction( 'lp-ajax-completed', element, dataSend );
122		- }
123		-
124		- window.lpAJAXG.getElements();
125		- //console.log( 'completed' );
126		- if ( elLoadingFirst ) {
127		- elLoadingFirst.remove();
128		- }
129		- },
130		- };
131		-
132		- // Call via AJAX
133		- window.lpAJAXG.fetchAJAX( dataSend, callBack );
134		- element.classList.add( 'loaded' );
135		- } );
136		- }
137		- },
138		- clickNumberPage: ( e, target ) => {
139		- const btnNumber = target.closest( '.page-numbers:not(.disabled)' );
140		- if ( ! btnNumber ) {
141		- return;
142		- }
143		-
144		- const elLPTarget = btnNumber.closest( `${ classLPTarget }` );
145		- if ( ! elLPTarget ) {
146		- return;
147		- }
148		-
149		- e.preventDefault();
150		-
151		- const dataObj = JSON.parse( elLPTarget.dataset.send );
152		- const dataSend = { ...dataObj };
153		- if ( ! dataSend.args.hasOwnProperty( 'paged' ) ) {
154		- dataSend.args.paged = 1;
155		- }
156		-
157		- if ( btnNumber.classList.contains( 'prev' ) ) {
158		- dataSend.args.paged--;
159		- } else if ( btnNumber.classList.contains( 'next' ) ) {
160		- dataSend.args.paged++;
161		- } else {
162		- const pagedNumber = parseInt( btnNumber.textContent );
163		- if ( isNaN( pagedNumber ) || pagedNumber < 1 ) {
164		- return;
165		- }
166		-
167		- dataSend.args.paged = pagedNumber;
168		- }
169		-
170		- elLPTarget.dataset.send = JSON.stringify( dataSend );
171		-
172		- // Set url params to reload page.
173		- if ( ! dataSend.args.hasOwnProperty( 'enableUpdateParamsUrl' ) ||
174		- dataSend.args.enableUpdateParamsUrl ) {
175		- lpSettings.urlParams.paged = dataSend.args.paged;
176		- window.history.pushState( {}, '', lpAddQueryArgs( urlCurrent, lpSettings.urlParams ) );
177		- }
178		- // End.
179		-
180		- // Show loading
181		- window.lpAJAXG.showHideLoading( elLPTarget, 1 );
182		- // End
183		-
184		- // Scroll to archive element
185		- if (
186		- ! dataSend.args.hasOwnProperty( 'enableScrollToView' ) ||
187		- dataSend.args.enableScrollToView
188		- ) {
189		- const elLPTargetY = elLPTarget.getBoundingClientRect().top + window.scrollY - 100;
190		- window.scrollTo( { top: elLPTargetY } );
191		- }
192		-
193		- const callBack = {
194		- success: ( response ) => {
195		- //console.log( 'response', response );
196		- const { status, message, data } = response;
197		- elLPTarget.innerHTML = data.content || '';
198		- },
199		- error: ( error ) => {
200		- console.log( error );
201		- },
202		- completed: () => {
203		- //console.log( 'completed' );
204		- window.lpAJAXG.showHideLoading( elLPTarget, 0 );
205		- },
206		- };
207		-
208		- window.lpAJAXG.fetchAJAX( dataSend, callBack );
209		- },
210		- getDataSetCurrent: ( elLPTarget ) => {
211		- return JSON.parse( elLPTarget.dataset.send );
212		- },
213		- setDataSetCurrent: ( elLPTarget, dataSend ) => {
214		- return ( elLPTarget.dataset.send = JSON.stringify( dataSend ) );
215		- },
216		- showHideLoading: ( elLPTarget, status ) => {
217		- const elLoading = elLPTarget.nextElementSibling?.querySelector( '.lp-loading-change' );
218		- if ( elLoading ) {
219		- lpShowHideEl( elLoading, status );
220		- }
221		- },
222		- };
223		-};
224		-
225		-window.lpAJAXG = lpAJAX();
226		-window.lpAJAXG.getElements();
227		-
228		-// Events
229		-document.addEventListener( 'click', function ( e ) {
230		- const target = e.target;
231		-
232		- window.lpAJAXG.clickNumberPage( e, target );
233		-} );
234		-
235		-// Listen element created
236		-listenElementCreated( ( node ) => {
237		- if ( node.classList.contains( 'lp-load-ajax-element' ) ) {
238		- //console.log( 'Element created', node );
239		- window.lpAJAXG.getElements();
240		- }
241		-} );
242		-
243		-// Listen element ready
244		-lpOnElementReady( '.lp-load-ajax-element', ( element ) => {
245		- //console.log( 'Element ready', element );
246		- window.lpAJAXG.getElements();
247		-} );
248		-
249		-// Case 2: readystatechange, find all elements with the class '.lp-load-ajax-element' not have class 'loaded'
250		-document.addEventListener( 'readystatechange', ( event ) => {
251		- //console.log( 'readystatechange' );
252		- window.lpAJAXG.getElements();
253		-} );
254		-
255		-// Case 3: DOMContentLoaded, find all elements with the class '.lp-load-ajax-element' not have class 'loaded'
256		-document.addEventListener( 'DOMContentLoaded', () => {
257		- //console.log( 'DOMContentLoaded' );
258		- window.lpAJAXG.getElements();
259		-} );
260		-
261		-export default lpAJAX;
	1	+/**
	2	+ * Load all you need via AJAX
	3	+ *
	4	+ * @since 4.2.5.7
	5	+ * @version 1.1.1
	6	+ */
	7	+
	8	+import * as lpUtils from 'lpAssetsJsPath/utils.js';
	9	+
	10	+// Handle general parameter in the Frontend and Backend
	11	+let lpSettings = {};
	12	+if ( 'undefined' !== typeof lpDataAdmin ) {
	13	+ lpSettings = lpDataAdmin;
	14	+} else if ( 'undefined' !== typeof lpData ) {
	15	+ lpSettings = lpData;
	16	+}
	17	+// End Handle general parameter in the Frontend and Backend
	18	+
	19	+const lpAJAX = () => {
	20	+ const classLPTarget = '.lp-target';
	21	+ const urlCurrent = lpUtils.lpGetCurrentURLNoParam();
	22	+
	23	+ return {
	24	+ autoLoadAPIs: () => {
	25	+ console.log( 'autoLoadAPIs' );
	26	+ },
	27	+ fetchAPI: ( url, params, callBack ) => {
	28	+ const option = { headers: {} };
	29	+ if ( 0 !== parseInt( lpSettings.user_id ) ) {
	30	+ option.headers[ 'X-WP-Nonce' ] = lpSettings.nonce;
	31	+ }
	32	+
	33	+ if ( 'undefined' !== typeof params.args.method_request ) {
	34	+ option.method = params.args.method_request;
	35	+ } else {
	36	+ option.method = 'POST';
	37	+ }
	38	+
	39	+ //params.args = { ...params.args, ...lpData.urlParams };
	40	+
	41	+ if ( 'POST' === option.method ) {
	42	+ option.body = JSON.stringify( params );
	43	+ option.headers[ 'Content-Type' ] = 'application/json';
	44	+ } else {
	45	+ params.args = JSON.stringify( params.args );
	46	+ params.callback = JSON.stringify( params.callback );
	47	+ url = lpUtils.lpAddQueryArgs( url, params );
	48	+ }
	49	+
	50	+ lpUtils.lpFetchAPI( url, option, callBack );
	51	+ },
	52	+ fetchAJAX: ( params, callBack ) => {
	53	+ let urlAjax = lpSettings.lpAjaxUrl;
	54	+
	55	+ // Set param id_url for identify.
	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	+ } );
	63	+ } else if ( params.hasOwnProperty( 'id_url' ) ) {
	64	+ urlAjax = lpUtils.lpAddQueryArgs( urlAjax, {
	65	+ id_url: params.id_url,
	66	+ } );
	67	+ }
	68	+ // Set param lang here if exits, for detect translate
	69	+ if ( lpSettings.urlParams.hasOwnProperty( 'lang' ) ) {
	70	+ urlAjax = lpUtils.lpAddQueryArgs( urlAjax, {
	71	+ lang: lpSettings.urlParams.lang,
	72	+ } );
	73	+ }
	74	+
	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;
	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	+
	111	+ if ( 0 !== parseInt( lpSettings.user_id ) ) {
	112	+ dataSend.headers[ 'X-WP-Nonce' ] = lpSettings.nonce;
	113	+ }
	114	+
	115	+ lpUtils.lpFetchAPI( urlAjax, dataSend, callBack );
	116	+ },
	117	+ getElements: () => {
	118	+ // Finds all elements with the class '.lp-load-ajax-element'
	119	+ const elements = document.querySelectorAll(
	120	+ '.lp-load-ajax-element:not(.loaded)'
	121	+ );
	122	+ //console.log( 'getElements', elements );
	123	+ if ( elements.length ) {
	124	+ elements.forEach( ( element ) => {
	125	+ //console.log( 'Element handing', element );
	126	+ const elTarget = element.querySelector(
	127	+ `${ classLPTarget }`
	128	+ );
	129	+ if ( ! elTarget ) {
	130	+ return;
	131	+ }
	132	+
	133	+ const dataObj = JSON.parse( elTarget.dataset.send );
	134	+ const dataSend = { ...dataObj };
	135	+ const elLoadingFirst =
	136	+ element.querySelector( '.loading-first' );
	137	+
	138	+ const callBack = {
	139	+ success: ( response ) => {
	140	+ const { status, message, data } = response;
	141	+
	142	+ if ( 'success' === status ) {
	143	+ elTarget.innerHTML = data.content;
	144	+ } else if ( 'error' === status ) {
	145	+ elTarget.innerHTML = message;
	146	+ }
	147	+ },
	148	+ error: ( error ) => {
	149	+ console.log( error );
	150	+ },
	151	+ completed: () => {
	152	+ if ( typeof wp !== 'undefined' && wp.hooks ) {
	153	+ wp.hooks.doAction(
	154	+ 'lp-ajax-completed',
	155	+ element,
	156	+ dataSend
	157	+ );
	158	+ }
	159	+
	160	+ window.lpAJAXG.getElements();
	161	+ //console.log( 'completed' );
	162	+ if ( elLoadingFirst ) {
	163	+ elLoadingFirst.remove();
	164	+ }
	165	+ },
	166	+ };
	167	+
	168	+ // Call via AJAX
	169	+ window.lpAJAXG.fetchAJAX( dataSend, callBack );
	170	+ element.classList.add( 'loaded' );
	171	+ } );
	172	+ }
	173	+ },
	174	+ clickNumberPage: ( e, target ) => {
	175	+ const btnNumber = target.closest( '.page-numbers:not(.disabled)' );
	176	+ if ( ! btnNumber ) {
	177	+ return;
	178	+ }
	179	+
	180	+ // Check btnNumber is tag a
	181	+ if ( btnNumber.tagName.toLowerCase() !== 'a' ) {
	182	+ return;
	183	+ }
	184	+
	185	+ const elLPTarget = btnNumber.closest( `${ classLPTarget }` );
	186	+ if ( ! elLPTarget ) {
	187	+ return;
	188	+ }
	189	+
	190	+ e.preventDefault();
	191	+
	192	+ const dataObj = JSON.parse( elLPTarget.dataset.send );
	193	+ const dataSend = { ...dataObj };
	194	+ if ( ! dataSend.args.hasOwnProperty( 'paged' ) ) {
	195	+ dataSend.args.paged = 1;
	196	+ }
	197	+
	198	+ if ( btnNumber.classList.contains( 'prev' ) ) {
	199	+ dataSend.args.paged--;
	200	+ } else if ( btnNumber.classList.contains( 'next' ) ) {
	201	+ dataSend.args.paged++;
	202	+ } else {
	203	+ const pagedNumber = parseInt( btnNumber.textContent );
	204	+ if ( isNaN( pagedNumber ) || pagedNumber < 1 ) {
	205	+ return;
	206	+ }
	207	+
	208	+ dataSend.args.paged = pagedNumber;
	209	+ }
	210	+
	211	+ elLPTarget.dataset.send = JSON.stringify( dataSend );
	212	+
	213	+ // Set url params to reload page.
	214	+ if (
	215	+ ! dataSend.args.hasOwnProperty( 'enableUpdateParamsUrl' ) ||
	216	+ dataSend.args.enableUpdateParamsUrl
	217	+ ) {
	218	+ lpSettings.urlParams.paged = dataSend.args.paged;
	219	+ window.history.pushState(
	220	+ {},
	221	+ '',
	222	+ lpUtils.lpAddQueryArgs( urlCurrent, lpSettings.urlParams )
	223	+ );
	224	+ }
	225	+ // End.
	226	+
	227	+ // Show loading
	228	+ window.lpAJAXG.showHideLoading( elLPTarget, 1 );
	229	+ // End
	230	+
	231	+ // Scroll to archive element
	232	+ if (
	233	+ ! dataSend.args.hasOwnProperty( 'enableScrollToView' ) ||
	234	+ dataSend.args.enableScrollToView
	235	+ ) {
	236	+ const elLPTargetY =
	237	+ elLPTarget.getBoundingClientRect().top +
	238	+ window.scrollY -
	239	+ 100;
	240	+ window.scrollTo( { top: elLPTargetY } );
	241	+ }
	242	+
	243	+ const callBack = {
	244	+ success: ( response ) => {
	245	+ //console.log( 'response', response );
	246	+ const { status, message, data } = response;
	247	+ elLPTarget.innerHTML = data.content || '';
	248	+ },
	249	+ error: ( error ) => {
	250	+ console.log( error );
	251	+ },
	252	+ completed: () => {
	253	+ //console.log( 'completed' );
	254	+ window.lpAJAXG.showHideLoading( elLPTarget, 0 );
	255	+ },
	256	+ };
	257	+
	258	+ window.lpAJAXG.fetchAJAX( dataSend, callBack );
	259	+ },
	260	+ getDataSetCurrent: ( elLPTarget ) => {
	261	+ return JSON.parse( elLPTarget.dataset.send );
	262	+ },
	263	+ setDataSetCurrent: ( elLPTarget, dataSend ) => {
	264	+ return ( elLPTarget.dataset.send = JSON.stringify( dataSend ) );
	265	+ },
	266	+ showHideLoading: ( elLPTarget, status ) => {
	267	+ const elLoading =
	268	+ elLPTarget.nextElementSibling?.querySelector(
	269	+ '.lp-loading-change'
	270	+ );
	271	+ if ( elLoading ) {
	272	+ lpUtils.lpShowHideEl( elLoading, status );
	273	+ }
	274	+ },
	275	+ };
	276	+};
	277	+
	278	+window.lpAJAXG = lpAJAX();
	279	+window.lpAJAXG.getElements();
	280	+
	281	+// Events
	282	+document.addEventListener( 'click', function ( e ) {
	283	+ const target = e.target;
	284	+
	285	+ window.lpAJAXG.clickNumberPage( e, target );
	286	+} );
	287	+
	288	+// Listen element created
	289	+lpUtils.listenElementCreated( ( node ) => {
	290	+ if ( node.classList.contains( 'lp-load-ajax-element' ) ) {
	291	+ //console.log( 'Element created', node );
	292	+ window.lpAJAXG.getElements();
	293	+ }
	294	+} );
	295	+
	296	+// Listen element ready
	297	+lpUtils.lpOnElementReady( '.lp-load-ajax-element', ( element ) => {
	298	+ //console.log( 'Element ready', element );
	299	+ window.lpAJAXG.getElements();
	300	+} );
	301	+
	302	+// Case 2: readystatechange, find all elements with the class '.lp-load-ajax-element' not have class 'loaded'
	303	+document.addEventListener( 'readystatechange', ( event ) => {
	304	+ //console.log( 'readystatechange' );
	305	+ window.lpAJAXG.getElements();
	306	+} );
	307	+
	308	+// Case 3: DOMContentLoaded, find all elements with the class '.lp-load-ajax-element' not have class 'loaded'
	309	+document.addEventListener( 'DOMContentLoaded', () => {
	310	+ //console.log( 'DOMContentLoaded' );
	311	+ window.lpAJAXG.getElements();
	312	+} );
	313	+
	314	+export default lpAJAX;