← All changes | assets/src/js/loadAJAX.js +266 -261 4.3.8 → 4.4.8 View file →

		@@ -1,261 +1,266 @@
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.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	+ // Check btnNumber is tag a
	145	+ if ( btnNumber.tagName.toLowerCase() !== 'a' ) {
	146	+ return;
	147	+ }
	148	+
	149	+ const elLPTarget = btnNumber.closest( `${ classLPTarget }` );
	150	+ if ( ! elLPTarget ) {
	151	+ return;
	152	+ }
	153	+
	154	+ e.preventDefault();
	155	+
	156	+ const dataObj = JSON.parse( elLPTarget.dataset.send );
	157	+ const dataSend = { ...dataObj };
	158	+ if ( ! dataSend.args.hasOwnProperty( 'paged' ) ) {
	159	+ dataSend.args.paged = 1;
	160	+ }
	161	+
	162	+ if ( btnNumber.classList.contains( 'prev' ) ) {
	163	+ dataSend.args.paged--;
	164	+ } else if ( btnNumber.classList.contains( 'next' ) ) {
	165	+ dataSend.args.paged++;
	166	+ } else {
	167	+ const pagedNumber = parseInt( btnNumber.textContent );
	168	+ if ( isNaN( pagedNumber ) || pagedNumber < 1 ) {
	169	+ return;
	170	+ }
	171	+
	172	+ dataSend.args.paged = pagedNumber;
	173	+ }
	174	+
	175	+ elLPTarget.dataset.send = JSON.stringify( dataSend );
	176	+
	177	+ // Set url params to reload page.
	178	+ if ( ! dataSend.args.hasOwnProperty( 'enableUpdateParamsUrl' ) ||
	179	+ dataSend.args.enableUpdateParamsUrl ) {
	180	+ lpSettings.urlParams.paged = dataSend.args.paged;
	181	+ window.history.pushState( {}, '', lpAddQueryArgs( urlCurrent, lpSettings.urlParams ) );
	182	+ }
	183	+ // End.
	184	+
	185	+ // Show loading
	186	+ window.lpAJAXG.showHideLoading( elLPTarget, 1 );
	187	+ // End
	188	+
	189	+ // Scroll to archive element
	190	+ if (
	191	+ ! dataSend.args.hasOwnProperty( 'enableScrollToView' ) ||
	192	+ dataSend.args.enableScrollToView
	193	+ ) {
	194	+ const elLPTargetY = elLPTarget.getBoundingClientRect().top + window.scrollY - 100;
	195	+ window.scrollTo( { top: elLPTargetY } );
	196	+ }
	197	+
	198	+ const callBack = {
	199	+ success: ( response ) => {
	200	+ //console.log( 'response', response );
	201	+ const { status, message, data } = response;
	202	+ elLPTarget.innerHTML = data.content || '';
	203	+ },
	204	+ error: ( error ) => {
	205	+ console.log( error );
	206	+ },
	207	+ completed: () => {
	208	+ //console.log( 'completed' );
	209	+ window.lpAJAXG.showHideLoading( elLPTarget, 0 );
	210	+ },
	211	+ };
	212	+
	213	+ window.lpAJAXG.fetchAJAX( dataSend, callBack );
	214	+ },
	215	+ getDataSetCurrent: ( elLPTarget ) => {
	216	+ return JSON.parse( elLPTarget.dataset.send );
	217	+ },
	218	+ setDataSetCurrent: ( elLPTarget, dataSend ) => {
	219	+ return ( elLPTarget.dataset.send = JSON.stringify( dataSend ) );
	220	+ },
	221	+ showHideLoading: ( elLPTarget, status ) => {
	222	+ const elLoading = elLPTarget.nextElementSibling?.querySelector( '.lp-loading-change' );
	223	+ if ( elLoading ) {
	224	+ lpShowHideEl( elLoading, status );
	225	+ }
	226	+ },
	227	+ };
	228	+};
	229	+
	230	+window.lpAJAXG = lpAJAX();
	231	+window.lpAJAXG.getElements();
	232	+
	233	+// Events
	234	+document.addEventListener( 'click', function ( e ) {
	235	+ const target = e.target;
	236	+
	237	+ window.lpAJAXG.clickNumberPage( e, target );
	238	+} );
	239	+
	240	+// Listen element created
	241	+listenElementCreated( ( node ) => {
	242	+ if ( node.classList.contains( 'lp-load-ajax-element' ) ) {
	243	+ //console.log( 'Element created', node );
	244	+ window.lpAJAXG.getElements();
	245	+ }
	246	+} );
	247	+
	248	+// Listen element ready
	249	+lpOnElementReady( '.lp-load-ajax-element', ( element ) => {
	250	+ //console.log( 'Element ready', element );
	251	+ window.lpAJAXG.getElements();
	252	+} );
	253	+
	254	+// Case 2: readystatechange, find all elements with the class '.lp-load-ajax-element' not have class 'loaded'
	255	+document.addEventListener( 'readystatechange', ( event ) => {
	256	+ //console.log( 'readystatechange' );
	257	+ window.lpAJAXG.getElements();
	258	+} );
	259	+
	260	+// Case 3: DOMContentLoaded, find all elements with the class '.lp-load-ajax-element' not have class 'loaded'
	261	+document.addEventListener( 'DOMContentLoaded', () => {
	262	+ //console.log( 'DOMContentLoaded' );
	263	+ window.lpAJAXG.getElements();
	264	+} );
	265	+
	266	+export default lpAJAX;