PluginProbe
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses / 4.3.8
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses v4.3.8
4.4.8 4.4.7 4.4.6 4.4.5 4.4.4 4.4.3 4.4.2 4.4.1 4.4.0 4.3.9.1 4.3.9 4.3.8 4.3.7 4.1.6.9 4.1.6.9.1 4.1.6.9.2 4.1.6.9.3 4.1.6.9.4 4.1.7 4.1.7.1 4.1.7.2 4.1.7.3 4.1.7.3.1 4.1.7.3.2 4.2.0 All 139 releases
learnpress / assets / src / js / frontend / courses-v2.js

courses-v2.js in LearnPress – WordPress LMS Plugin for Create and Sell Online Courses 4.3.8, at assets/src/js/frontend/courses-v2.js

317 lines 9.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
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();
317