← All changes | assets/src/js/frontend/courses-v2.js +316 -316 4.3.9 → 4.4.9 View file →

		@@ -1,316 +1,316 @@
1		-/**
2		- * Handle events for courses list.
3		- *
4		- * @since 4.2.5.8
5		- * @version 1.0.1
6		- */
7		-
8		-import API from '../api';
9		-import {
10		- lpAddQueryArgs,
11		- lpGetCurrentURLNoParam,
12		- listenElementViewed,
13		- listenElementCreated,
14		- lpOnElementReady,
15		-} from '../utils.js';
16		-
17		-if ( 'undefined' === typeof lpData ) {
18		- console.log( 'lpData is undefined' );
19		-}
20		-
21		-// Events
22		-document.addEventListener( 'change', function( e ) {
23		- const target = e.target;
24		-
25		- window.lpCoursesList.onChangeSortBy( e, target );
26		- window.lpCoursesList.onChangeTypeLayout( e, target );
27		-} );
28		-document.addEventListener( 'click', function( e ) {
29		- const target = e.target;
30		-
31		- window.lpCoursesList.LoadMore( e, target );
32		-} );
33		-
34		-document.addEventListener( 'keyup', function( e ) {
35		- const target = e.target;
36		-
37		- window.lpCoursesList.searchCourse( e, target );
38		-} );
39		-document.addEventListener( 'submit', function( e ) {
40		- const target = e.target;
41		-
42		- //window.lpCourseList.searchCourse( e, target );
43		-} );
44		-
45		-lpOnElementReady( '.course-filter-btn-mobile', function( el ) {
46		- const widgetCourseFilter = document.querySelector( '.widget_course_filter' );
47		- if ( ! widgetCourseFilter ) {
48		- el.remove();
49		- }
50		-} );
51		-
52		-let timeOutSearch;
53		-window.lpCoursesList = ( () => {
54		- const classListCourse = '.lp-list-courses-no-css';
55		- const classLPTarget = '.lp-target';
56		- const classLoadMore = 'courses-btn-load-more-no-css';
57		- const classPageResult = '.courses-page-result';
58		- const classLoading = '.lp-loading-no-css';
59		- const urlCurrent = lpGetCurrentURLNoParam();
60		- return {
61		- LoadMore: ( e, target ) => {
62		- const btnLoadMore = target.closest( `.${ classLoadMore + ':not(.disabled)' }` );
63		- if ( ! btnLoadMore ) {
64		- return;
65		- }
66		-
67		- const elLPTarget = btnLoadMore.closest( `${ classLPTarget }` );
68		- if ( ! elLPTarget ) {
69		- return;
70		- }
71		-
72		- e.preventDefault();
73		- btnLoadMore.classList.add( 'disabled' );
74		-
75		- const elLoading = btnLoadMore.querySelector( classLoading );
76		- const dataObj = JSON.parse( elLPTarget.dataset.send );
77		- const dataSend = { ...dataObj };
78		- if ( ! dataSend.args.hasOwnProperty( 'paged' ) ) {
79		- dataSend.args.paged = 1;
80		- }
81		-
82		- dataSend.args.paged++;
83		- elLPTarget.dataset.send = JSON.stringify( dataSend );
84		- if ( elLoading ) {
85		- elLoading.classList.remove( 'hide' );
86		- }
87		-
88		- const callBack = {
89		- success: ( response ) => {
90		- const { status, message, data } = response;
91		- const paged = parseInt( data.paged );
92		- const totalPages = parseInt( data.total_pages );
93		-
94		- const newEl = document.createElement( 'div' );
95		- newEl.innerHTML = data.content || '';
96		- const elListCourse = elLPTarget.querySelector( classListCourse );
97		- const elPageResult = elLPTarget.querySelector( classPageResult );
98		- const elPageResultNew = newEl.querySelector( classPageResult );
99		-
100		- elListCourse.insertAdjacentHTML( 'beforeend', newEl.querySelector( classListCourse ).innerHTML );
101		- if ( elPageResult && elPageResultNew ) {
102		- elPageResult.innerHTML = elPageResultNew.innerHTML;
103		- }
104		-
105		- if ( paged >= totalPages ) {
106		- btnLoadMore.remove();
107		- }
108		- },
109		- error: ( error ) => {
110		- console.log( error );
111		- },
112		- completed: () => {
113		- //console.log( 'completed' );
114		- if ( elLoading ) {
115		- elLoading.classList.add( 'hide' );
116		- }
117		- btnLoadMore.classList.remove( 'disabled' );
118		- },
119		- };
120		-
121		- window.lpAJAXG.fetchAJAX( dataSend, callBack );
122		- },
123		- LoadInfinite: () => {
124		- // When see element, will call API to load more items.
125		- const callBackAfterSeeItem = ( entry ) => {
126		- const elInfinite = entry.target;
127		- const elLoading = elInfinite.querySelector( `${ classLoading }:not(.disabled)` );
128		- if ( ! elLoading ) {
129		- return;
130		- }
131		- elLoading.classList.remove( 'hide' );
132		- elLoading.classList.add( 'disabled' );
133		-
134		- const elLPTarget = elInfinite.closest( classLPTarget );
135		- if ( ! elLPTarget ) {
136		- return;
137		- }
138		-
139		- const dataObj = JSON.parse( elLPTarget.dataset.send );
140		- const dataSend = { ...dataObj }; // Clone object
141		-
142		- if ( ! dataSend.args.hasOwnProperty( 'paged' ) ) {
143		- dataSend.args.paged = 1;
144		- }
145		-
146		- // Handle set data send to call API
147		- dataSend.args.paged++;
148		- elLPTarget.dataset.send = JSON.stringify( dataSend );
149		- const callBack = {
150		- success: ( response ) => {
151		- const { status, message, data } = response;
152		-
153		- const newEl = document.createElement( 'div' );
154		- newEl.innerHTML = data.content || '';
155		- const elListCourse = elLPTarget.querySelector( classListCourse );
156		- const elPageResult = elLPTarget.querySelector( classPageResult );
157		- const elPageResultNew = newEl.querySelector( classPageResult );
158		-
159		- elListCourse.insertAdjacentHTML( 'beforeend', newEl.querySelector( classListCourse ).innerHTML );
160		- if ( elPageResult && elPageResultNew ) {
161		- elPageResult.innerHTML = elPageResultNew.innerHTML;
162		- }
163		-
164		- if ( data.total_pages === data.paged ) {
165		- elInfinite.remove();
166		- }
167		- },
168		- error: ( error ) => {
169		- console.log( error );
170		- },
171		- completed: () => {
172		- //console.log( 'completed' );
173		- elLoading.classList.add( 'hide' );
174		- elLoading.classList.remove( 'disabled' );
175		- },
176		- };
177		-
178		- window.lpAJAXG.fetchAJAX( dataSend, callBack );
179		- };
180		-
181		- // Listen el courses load infinite have just created.
182		- listenElementCreated( ( node ) => {
183		- if ( node.classList.contains( 'courses-load-infinite-no-css' ) ) {
184		- listenElementViewed( node, callBackAfterSeeItem );
185		- } else if ( node.classList.contains( 'wp-block-learnpress-list-courses' ) ) { // For block Gutenberg
186		- const elInfinite = node.querySelector( '.courses-load-infinite-no-css' );
187		- if ( elInfinite ) {
188		- listenElementViewed( elInfinite, callBackAfterSeeItem );
189		- }
190		- }
191		- } );
192		-
193		- // If el created on DOMContentLoaded.
194		- const elInfinite = document.querySelector( '.courses-load-infinite-no-css' );
195		- if ( elInfinite ) {
196		- listenElementViewed( elInfinite, callBackAfterSeeItem );
197		- }
198		- },
199		- onChangeSortBy: ( e, target ) => {
200		- if ( ! target.classList.contains( 'courses-order-by' ) ) {
201		- return;
202		- }
203		-
204		- const elLPTarget = target.closest( classLPTarget );
205		- if ( ! elLPTarget ) {
206		- lpData.urlParams.paged = 1;
207		- lpData.urlParams.order_by = target.value || '';
208		- window.location.href = lpAddQueryArgs( urlCurrent, lpData.urlParams );
209		- return;
210		- }
211		-
212		- e.preventDefault();
213		-
214		- const dataObj = JSON.parse( elLPTarget.dataset.send );
215		- const dataSend = { ...dataObj };
216		- dataSend.args.paged = 1;
217		- dataSend.args.order_by = target.value || '';
218		- elLPTarget.dataset.send = JSON.stringify( dataSend );
219		-
220		- // Set url params to reload page.
221		- // Todo: need check allow set url params.
222		- lpData.urlParams.paged = dataSend.args.paged;
223		- lpData.urlParams.order_by = dataSend.args.order_by;
224		- window.history.pushState( {}, '', lpAddQueryArgs( urlCurrent, lpData.urlParams ) );
225		- // End.
226		-
227		- // Show loading
228		- window.lpAJAXG.showHideLoading( elLPTarget, 1 );
229		- // End
230		-
231		- const callBack = {
232		- success: ( response ) => {
233		- //console.log( 'response', response );
234		- const { status, message, data } = response;
235		- elLPTarget.innerHTML = data.content || '';
236		- },
237		- error: ( error ) => {
238		- console.log( error );
239		- },
240		- completed: () => {
241		- //console.log( 'completed' );
242		- window.lpAJAXG.showHideLoading( elLPTarget, 0 );
243		- },
244		- };
245		-
246		- window.lpAJAXG.fetchAJAX( dataSend, callBack );
247		- },
248		- onChangeTypeLayout: ( e, target ) => {
249		- if ( 'lp-switch-layout-btn' !== target.getAttribute( 'name' ) ) {
250		- return;
251		- }
252		-
253		- const elListCourse = document.querySelector( classListCourse );
254		- if ( ! elListCourse ) {
255		- return;
256		- }
257		- e.preventDefault();
258		- const layout = target.value;
259		- if ( layout ) {
260		- elListCourse.dataset.layout = layout;
261		- window.wpCookies.set( 'courses-layout', layout, 24 * 60 * 60, '/' );
262		- }
263		- },
264		- searchCourse: ( e, target ) => {
265		- if ( 'c_search' !== target.name ) {
266		- return;
267		- }
268		-
269		- const elLPTarget = target.closest( classLPTarget );
270		- if ( ! elLPTarget ) {
271		- return;
272		- }
273		-
274		- e.preventDefault();
275		- const dataObj = JSON.parse( elLPTarget.dataset.send );
276		- const dataSend = { ...dataObj };
277		-
278		- const keyword = target.value;
279		- dataSend.args.c_search = keyword || '';
280		- dataSend.args.paged = 1;
281		- elLPTarget.dataset.send = JSON.stringify( dataSend );
282		-
283		- // Set url params to reload page.
284		- // Todo: need check allow set url params.
285		- lpData.urlParams.paged = dataSend.args.paged;
286		- lpData.urlParams.c_search = dataSend.args.c_search;
287		- window.history.pushState( {}, '', lpAddQueryArgs( lpGetCurrentURLNoParam(), lpData.urlParams ) );
288		- // End.
289		-
290		- if ( ! keyword || ( keyword && keyword.length > 2 ) ) {
291		- if ( undefined !== timeOutSearch ) {
292		- clearTimeout( timeOutSearch );
293		- }
294		-
295		- timeOutSearch = setTimeout( function() {
296		- const callBack = {
297		- success: ( response ) => {
298		- //console.log( 'response', response );
299		- const { status, message, data } = response;
300		- elLPTarget.innerHTML = data.content || '';
301		- },
302		- error: ( error ) => {
303		- console.log( error );
304		- },
305		- completed: () => {
306		- //console.log( 'completed' );
307		- },
308		- };
309		-
310		- window.lpAJAXG.fetchAJAX( dataSend, callBack );
311		- }, 800 );
312		- }
313		- },
314		- };
315		-} )();
316		-window.lpCoursesList.LoadInfinite();
	1	+/**
	2	+ * Handle events for courses list.
	3	+ *
	4	+ * @since 4.2.5.8
	5	+ * @version 1.0.1
	6	+ */
	7	+
	8	+import API from '../api';
	9	+import {
	10	+ lpAddQueryArgs,
	11	+ lpGetCurrentURLNoParam,
	12	+ listenElementViewed,
	13	+ listenElementCreated,
	14	+ lpOnElementReady,
	15	+} from '../utils.js';
	16	+
	17	+if ( 'undefined' === typeof lpData ) {
	18	+ console.log( 'lpData is undefined' );
	19	+}
	20	+
	21	+// Events
	22	+document.addEventListener( 'change', function( e ) {
	23	+ const target = e.target;
	24	+
	25	+ window.lpCoursesList.onChangeSortBy( e, target );
	26	+ window.lpCoursesList.onChangeTypeLayout( e, target );
	27	+} );
	28	+document.addEventListener( 'click', function( e ) {
	29	+ const target = e.target;
	30	+
	31	+ window.lpCoursesList.LoadMore( e, target );
	32	+} );
	33	+
	34	+document.addEventListener( 'keyup', function( e ) {
	35	+ const target = e.target;
	36	+
	37	+ window.lpCoursesList.searchCourse( e, target );
	38	+} );
	39	+document.addEventListener( 'submit', function( e ) {
	40	+ const target = e.target;
	41	+
	42	+ //window.lpCourseList.searchCourse( e, target );
	43	+} );
	44	+
	45	+lpOnElementReady( '.course-filter-btn-mobile', function( el ) {
	46	+ const widgetCourseFilter = document.querySelector( '.widget_course_filter' );
	47	+ if ( ! widgetCourseFilter ) {
	48	+ el.remove();
	49	+ }
	50	+} );
	51	+
	52	+let timeOutSearch;
	53	+window.lpCoursesList = ( () => {
	54	+ const classListCourse = '.lp-list-courses-no-css';
	55	+ const classLPTarget = '.lp-target';
	56	+ const classLoadMore = 'courses-btn-load-more-no-css';
	57	+ const classPageResult = '.courses-page-result';
	58	+ const classLoading = '.lp-loading-no-css';
	59	+ const urlCurrent = lpGetCurrentURLNoParam();
	60	+ return {
	61	+ LoadMore: ( e, target ) => {
	62	+ const btnLoadMore = target.closest( `.${ classLoadMore + ':not(.disabled)' }` );
	63	+ if ( ! btnLoadMore ) {
	64	+ return;
	65	+ }
	66	+
	67	+ const elLPTarget = btnLoadMore.closest( `${ classLPTarget }` );
	68	+ if ( ! elLPTarget ) {
	69	+ return;
	70	+ }
	71	+
	72	+ e.preventDefault();
	73	+ btnLoadMore.classList.add( 'disabled' );
	74	+
	75	+ const elLoading = btnLoadMore.querySelector( classLoading );
	76	+ const dataObj = JSON.parse( elLPTarget.dataset.send );
	77	+ const dataSend = { ...dataObj };
	78	+ if ( ! dataSend.args.hasOwnProperty( 'paged' ) ) {
	79	+ dataSend.args.paged = 1;
	80	+ }
	81	+
	82	+ dataSend.args.paged++;
	83	+ elLPTarget.dataset.send = JSON.stringify( dataSend );
	84	+ if ( elLoading ) {
	85	+ elLoading.classList.remove( 'hide' );
	86	+ }
	87	+
	88	+ const callBack = {
	89	+ success: ( response ) => {
	90	+ const { status, message, data } = response;
	91	+ const paged = parseInt( data.paged );
	92	+ const totalPages = parseInt( data.total_pages );
	93	+
	94	+ const newEl = document.createElement( 'div' );
	95	+ newEl.innerHTML = data.content || '';
	96	+ const elListCourse = elLPTarget.querySelector( classListCourse );
	97	+ const elPageResult = elLPTarget.querySelector( classPageResult );
	98	+ const elPageResultNew = newEl.querySelector( classPageResult );
	99	+
	100	+ elListCourse.insertAdjacentHTML( 'beforeend', newEl.querySelector( classListCourse ).innerHTML );
	101	+ if ( elPageResult && elPageResultNew ) {
	102	+ elPageResult.innerHTML = elPageResultNew.innerHTML;
	103	+ }
	104	+
	105	+ if ( paged >= totalPages ) {
	106	+ btnLoadMore.remove();
	107	+ }
	108	+ },
	109	+ error: ( error ) => {
	110	+ console.log( error );
	111	+ },
	112	+ completed: () => {
	113	+ //console.log( 'completed' );
	114	+ if ( elLoading ) {
	115	+ elLoading.classList.add( 'hide' );
	116	+ }
	117	+ btnLoadMore.classList.remove( 'disabled' );
	118	+ },
	119	+ };
	120	+
	121	+ window.lpAJAXG.fetchAJAX( dataSend, callBack );
	122	+ },
	123	+ LoadInfinite: () => {
	124	+ // When see element, will call API to load more items.
	125	+ const callBackAfterSeeItem = ( entry ) => {
	126	+ const elInfinite = entry.target;
	127	+ const elLoading = elInfinite.querySelector( `${ classLoading }:not(.disabled)` );
	128	+ if ( ! elLoading ) {
	129	+ return;
	130	+ }
	131	+ elLoading.classList.remove( 'hide' );
	132	+ elLoading.classList.add( 'disabled' );
	133	+
	134	+ const elLPTarget = elInfinite.closest( classLPTarget );
	135	+ if ( ! elLPTarget ) {
	136	+ return;
	137	+ }
	138	+
	139	+ const dataObj = JSON.parse( elLPTarget.dataset.send );
	140	+ const dataSend = { ...dataObj }; // Clone object
	141	+
	142	+ if ( ! dataSend.args.hasOwnProperty( 'paged' ) ) {
	143	+ dataSend.args.paged = 1;
	144	+ }
	145	+
	146	+ // Handle set data send to call API
	147	+ dataSend.args.paged++;
	148	+ elLPTarget.dataset.send = JSON.stringify( dataSend );
	149	+ const callBack = {
	150	+ success: ( response ) => {
	151	+ const { status, message, data } = response;
	152	+
	153	+ const newEl = document.createElement( 'div' );
	154	+ newEl.innerHTML = data.content || '';
	155	+ const elListCourse = elLPTarget.querySelector( classListCourse );
	156	+ const elPageResult = elLPTarget.querySelector( classPageResult );
	157	+ const elPageResultNew = newEl.querySelector( classPageResult );
	158	+
	159	+ elListCourse.insertAdjacentHTML( 'beforeend', newEl.querySelector( classListCourse ).innerHTML );
	160	+ if ( elPageResult && elPageResultNew ) {
	161	+ elPageResult.innerHTML = elPageResultNew.innerHTML;
	162	+ }
	163	+
	164	+ if ( data.total_pages === data.paged ) {
	165	+ elInfinite.remove();
	166	+ }
	167	+ },
	168	+ error: ( error ) => {
	169	+ console.log( error );
	170	+ },
	171	+ completed: () => {
	172	+ //console.log( 'completed' );
	173	+ elLoading.classList.add( 'hide' );
	174	+ elLoading.classList.remove( 'disabled' );
	175	+ },
	176	+ };
	177	+
	178	+ window.lpAJAXG.fetchAJAX( dataSend, callBack );
	179	+ };
	180	+
	181	+ // Listen el courses load infinite have just created.
	182	+ listenElementCreated( ( node ) => {
	183	+ if ( node.classList.contains( 'courses-load-infinite-no-css' ) ) {
	184	+ listenElementViewed( node, callBackAfterSeeItem );
	185	+ } else if ( node.classList.contains( 'wp-block-learnpress-list-courses' ) ) { // For block Gutenberg
	186	+ const elInfinite = node.querySelector( '.courses-load-infinite-no-css' );
	187	+ if ( elInfinite ) {
	188	+ listenElementViewed( elInfinite, callBackAfterSeeItem );
	189	+ }
	190	+ }
	191	+ } );
	192	+
	193	+ // If el created on DOMContentLoaded.
	194	+ const elInfinite = document.querySelector( '.courses-load-infinite-no-css' );
	195	+ if ( elInfinite ) {
	196	+ listenElementViewed( elInfinite, callBackAfterSeeItem );
	197	+ }
	198	+ },
	199	+ onChangeSortBy: ( e, target ) => {
	200	+ if ( ! target.classList.contains( 'courses-order-by' ) ) {
	201	+ return;
	202	+ }
	203	+
	204	+ const elLPTarget = target.closest( classLPTarget );
	205	+ if ( ! elLPTarget ) {
	206	+ lpData.urlParams.paged = 1;
	207	+ lpData.urlParams.order_by = target.value || '';
	208	+ window.location.href = lpAddQueryArgs( urlCurrent, lpData.urlParams );
	209	+ return;
	210	+ }
	211	+
	212	+ e.preventDefault();
	213	+
	214	+ const dataObj = JSON.parse( elLPTarget.dataset.send );
	215	+ const dataSend = { ...dataObj };
	216	+ dataSend.args.paged = 1;
	217	+ dataSend.args.order_by = target.value || '';
	218	+ elLPTarget.dataset.send = JSON.stringify( dataSend );
	219	+
	220	+ // Set url params to reload page.
	221	+ // Todo: need check allow set url params.
	222	+ lpData.urlParams.paged = dataSend.args.paged;
	223	+ lpData.urlParams.order_by = dataSend.args.order_by;
	224	+ window.history.pushState( {}, '', lpAddQueryArgs( urlCurrent, lpData.urlParams ) );
	225	+ // End.
	226	+
	227	+ // Show loading
	228	+ window.lpAJAXG.showHideLoading( elLPTarget, 1 );
	229	+ // End
	230	+
	231	+ const callBack = {
	232	+ success: ( response ) => {
	233	+ //console.log( 'response', response );
	234	+ const { status, message, data } = response;
	235	+ elLPTarget.innerHTML = data.content || '';
	236	+ },
	237	+ error: ( error ) => {
	238	+ console.log( error );
	239	+ },
	240	+ completed: () => {
	241	+ //console.log( 'completed' );
	242	+ window.lpAJAXG.showHideLoading( elLPTarget, 0 );
	243	+ },
	244	+ };
	245	+
	246	+ window.lpAJAXG.fetchAJAX( dataSend, callBack );
	247	+ },
	248	+ onChangeTypeLayout: ( e, target ) => {
	249	+ if ( 'lp-switch-layout-btn' !== target.getAttribute( 'name' ) ) {
	250	+ return;
	251	+ }
	252	+
	253	+ const elListCourse = document.querySelector( classListCourse );
	254	+ if ( ! elListCourse ) {
	255	+ return;
	256	+ }
	257	+ e.preventDefault();
	258	+ const layout = target.value;
	259	+ if ( layout ) {
	260	+ elListCourse.dataset.layout = layout;
	261	+ window.wpCookies.set( 'courses-layout', layout, 24 * 60 * 60, '/' );
	262	+ }
	263	+ },
	264	+ searchCourse: ( e, target ) => {
	265	+ if ( 'c_search' !== target.name ) {
	266	+ return;
	267	+ }
	268	+
	269	+ const elLPTarget = target.closest( classLPTarget );
	270	+ if ( ! elLPTarget ) {
	271	+ return;
	272	+ }
	273	+
	274	+ e.preventDefault();
	275	+ const dataObj = JSON.parse( elLPTarget.dataset.send );
	276	+ const dataSend = { ...dataObj };
	277	+
	278	+ const keyword = target.value;
	279	+ dataSend.args.c_search = keyword || '';
	280	+ dataSend.args.paged = 1;
	281	+ elLPTarget.dataset.send = JSON.stringify( dataSend );
	282	+
	283	+ // Set url params to reload page.
	284	+ // Todo: need check allow set url params.
	285	+ lpData.urlParams.paged = dataSend.args.paged;
	286	+ lpData.urlParams.c_search = dataSend.args.c_search;
	287	+ window.history.pushState( {}, '', lpAddQueryArgs( lpGetCurrentURLNoParam(), lpData.urlParams ) );
	288	+ // End.
	289	+
	290	+ if ( ! keyword || ( keyword && keyword.length > 2 ) ) {
	291	+ if ( undefined !== timeOutSearch ) {
	292	+ clearTimeout( timeOutSearch );
	293	+ }
	294	+
	295	+ timeOutSearch = setTimeout( function() {
	296	+ const callBack = {
	297	+ success: ( response ) => {
	298	+ //console.log( 'response', response );
	299	+ const { status, message, data } = response;
	300	+ elLPTarget.innerHTML = data.content || '';
	301	+ },
	302	+ error: ( error ) => {
	303	+ console.log( error );
	304	+ },
	305	+ completed: () => {
	306	+ //console.log( 'completed' );
	307	+ },
	308	+ };
	309	+
	310	+ window.lpAJAXG.fetchAJAX( dataSend, callBack );
	311	+ }, 800 );
	312	+ }
	313	+ },
	314	+ };
	315	+} )();
	316	+window.lpCoursesList.LoadInfinite();