PluginProbe
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses / 4.4.2
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses v4.4.2
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 / js / dist / frontend / curriculum.js

curriculum.js in LearnPress – WordPress LMS Plugin for Create and Sell Online Courses 4.4.2, at assets/js/dist/frontend/curriculum.js

623 lines 18.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /******/ (() => { // webpackBootstrap
2 /******/ "use strict";
3 /******/ var __webpack_modules__ = ({
4
5 /***/ "./assets/src/js/utils.js"
6 /*!********************************!*\
7 !*** ./assets/src/js/utils.js ***!
8 \********************************/
9 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
10
11 __webpack_require__.r(__webpack_exports__);
12 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
13 /* harmony export */ debounce: () => (/* binding */ debounce),
14 /* harmony export */ eventHandlers: () => (/* binding */ eventHandlers),
15 /* harmony export */ getDataOfForm: () => (/* binding */ getDataOfForm),
16 /* harmony export */ getFieldKeysOfForm: () => (/* binding */ getFieldKeysOfForm),
17 /* harmony export */ listenElementCreated: () => (/* binding */ listenElementCreated),
18 /* harmony export */ listenElementViewed: () => (/* binding */ listenElementViewed),
19 /* harmony export */ lpAddQueryArgs: () => (/* binding */ lpAddQueryArgs),
20 /* harmony export */ lpAjaxParseJsonOld: () => (/* binding */ lpAjaxParseJsonOld),
21 /* harmony export */ lpClassName: () => (/* binding */ lpClassName),
22 /* harmony export */ lpFetchAPI: () => (/* binding */ lpFetchAPI),
23 /* harmony export */ lpGetCurrentURLNoParam: () => (/* binding */ lpGetCurrentURLNoParam),
24 /* harmony export */ lpOnElementReady: () => (/* binding */ lpOnElementReady),
25 /* harmony export */ lpSetLoadingEl: () => (/* binding */ lpSetLoadingEl),
26 /* harmony export */ lpShowHideEl: () => (/* binding */ lpShowHideEl),
27 /* harmony export */ mergeDataWithDatForm: () => (/* binding */ mergeDataWithDatForm),
28 /* harmony export */ toggleCollapse: () => (/* binding */ toggleCollapse)
29 /* harmony export */ });
30 /**
31 * Utils functions
32 *
33 * @param url
34 * @param data
35 * @param functions
36 * @since 4.2.5.1
37 * @version 1.0.6
38 */
39 const lpClassName = {
40 hidden: 'lp-hidden',
41 loading: 'loading',
42 elCollapse: 'lp-collapse',
43 elSectionToggle: '.lp-section-toggle',
44 elTriggerToggle: '.lp-trigger-toggle'
45 };
46 const lpFetchAPI = (url, data = {}, functions = {}) => {
47 if ('function' === typeof functions.before) {
48 functions.before();
49 }
50 fetch(url, {
51 method: 'GET',
52 ...data
53 }).then(response => response.json()).then(response => {
54 if ('function' === typeof functions.success) {
55 functions.success(response);
56 }
57 }).catch(err => {
58 if ('function' === typeof functions.error) {
59 functions.error(err);
60 }
61 }).finally(() => {
62 if ('function' === typeof functions.completed) {
63 functions.completed();
64 }
65 });
66 };
67
68 /**
69 * Get current URL without params.
70 *
71 * @since 4.2.5.1
72 */
73 const lpGetCurrentURLNoParam = () => {
74 let currentUrl = window.location.href;
75 const hasParams = currentUrl.includes('?');
76 if (hasParams) {
77 currentUrl = currentUrl.split('?')[0];
78 }
79 return currentUrl;
80 };
81 const lpAddQueryArgs = (endpoint, args) => {
82 const url = new URL(endpoint);
83 Object.keys(args).forEach(arg => {
84 url.searchParams.set(arg, args[arg]);
85 });
86 return url;
87 };
88
89 /**
90 * Listen element viewed.
91 *
92 * @param el
93 * @param callback
94 * @since 4.2.5.8
95 */
96 const listenElementViewed = (el, callback) => {
97 const observerSeeItem = new IntersectionObserver(function (entries) {
98 for (const entry of entries) {
99 if (entry.isIntersecting) {
100 callback(entry);
101 }
102 }
103 });
104 observerSeeItem.observe(el);
105 };
106
107 /**
108 * Listen element created.
109 *
110 * @param callback
111 * @since 4.2.5.8
112 */
113 const listenElementCreated = callback => {
114 const observerCreateItem = new MutationObserver(function (mutations) {
115 mutations.forEach(function (mutation) {
116 if (mutation.addedNodes) {
117 mutation.addedNodes.forEach(function (node) {
118 if (node.nodeType === 1) {
119 callback(node);
120 }
121 });
122 }
123 });
124 });
125 observerCreateItem.observe(document, {
126 childList: true,
127 subtree: true
128 });
129 // End.
130 };
131
132 /**
133 * Listen element created.
134 *
135 * @param selector
136 * @param callback
137 * @since 4.2.7.1
138 */
139 const lpOnElementReady = (selector, callback) => {
140 const element = document.querySelector(selector);
141 if (element) {
142 callback(element);
143 return;
144 }
145 const observer = new MutationObserver((mutations, obs) => {
146 const element = document.querySelector(selector);
147 if (element) {
148 obs.disconnect();
149 callback(element);
150 }
151 });
152 observer.observe(document.documentElement, {
153 childList: true,
154 subtree: true
155 });
156 };
157
158 // Parse JSON from string with content include LP_AJAX_START.
159 const lpAjaxParseJsonOld = data => {
160 if (typeof data !== 'string') {
161 return data;
162 }
163 const m = String.raw({
164 raw: data
165 }).match(/<-- LP_AJAX_START -->(.*)<-- LP_AJAX_END -->/s);
166 try {
167 if (m) {
168 data = JSON.parse(m[1].replace(/(?:\r\n|\r|\n)/g, ''));
169 } else {
170 data = JSON.parse(data);
171 }
172 } catch (e) {
173 data = {};
174 }
175 return data;
176 };
177
178 // status 0: hide, 1: show
179 const lpShowHideEl = (el, status = 0) => {
180 if (!el) {
181 return;
182 }
183 if (!status) {
184 el.classList.add(lpClassName.hidden);
185 } else {
186 el.classList.remove(lpClassName.hidden);
187 }
188 };
189
190 // status 0: hide, 1: show
191 const lpSetLoadingEl = (el, status) => {
192 if (!el) {
193 return;
194 }
195 if (!status) {
196 el.classList.remove(lpClassName.loading);
197 } else {
198 el.classList.add(lpClassName.loading);
199 }
200 };
201
202 // Toggle collapse section
203 const toggleCollapse = (e, target, elTriggerClassName = '', elsExclude = [], callback) => {
204 if (!elTriggerClassName) {
205 elTriggerClassName = lpClassName.elTriggerToggle;
206 }
207
208 // Exclude elements, which should not trigger the collapse toggle
209 if (elsExclude && elsExclude.length > 0) {
210 for (const elExclude of elsExclude) {
211 if (target.closest(elExclude)) {
212 return;
213 }
214 }
215 }
216 const elTrigger = target.closest(elTriggerClassName);
217 if (!elTrigger) {
218 return;
219 }
220
221 //console.log( 'elTrigger', elTrigger );
222
223 const elSectionToggle = elTrigger.closest(`${lpClassName.elSectionToggle}`);
224 if (!elSectionToggle) {
225 return;
226 }
227 elSectionToggle.classList.toggle(`${lpClassName.elCollapse}`);
228 if ('function' === typeof callback) {
229 callback(elSectionToggle);
230 }
231 };
232
233 // Get data of form
234 const getDataOfForm = form => {
235 const dataSend = {};
236 const formData = new FormData(form);
237 for (const pair of formData.entries()) {
238 const key = pair[0];
239 const value = formData.getAll(key);
240 if (!dataSend.hasOwnProperty(key)) {
241 // Convert value array to string.
242 dataSend[key] = value.join(',');
243 }
244 }
245 return dataSend;
246 };
247
248 // Get field keys of form
249 const getFieldKeysOfForm = form => {
250 const keys = [];
251 const elements = form.elements;
252 for (let i = 0; i < elements.length; i++) {
253 const name = elements[i].name;
254 if (name && !keys.includes(name)) {
255 keys.push(name);
256 }
257 }
258 return keys;
259 };
260
261 // Merge data handle with data form.
262 const mergeDataWithDatForm = (elForm, dataHandle) => {
263 const dataForm = getDataOfForm(elForm);
264 const keys = getFieldKeysOfForm(elForm);
265 keys.forEach(key => {
266 if (!dataForm.hasOwnProperty(key)) {
267 delete dataHandle[key];
268 } else if (dataForm[key][0] === '') {
269 delete dataForm[key];
270 delete dataHandle[key];
271 }
272 });
273 dataHandle = {
274 ...dataHandle,
275 ...dataForm
276 };
277 return dataHandle;
278 };
279
280 /**
281 * Event trigger
282 * For each list of event handlers, listen event on document.
283 *
284 * eventName: 'click', 'change', ...
285 * eventHandlers = [ { selector: '.lp-button', callBack: function(){}, class: object } ]
286 *
287 * @param eventName
288 * @param eventHandlers
289 */
290 const eventHandlers = (eventName, eventHandlers) => {
291 document.addEventListener(eventName, e => {
292 const target = e.target;
293 let args = {
294 e,
295 target
296 };
297 eventHandlers.forEach(eventHandler => {
298 args = {
299 ...args,
300 ...eventHandler
301 };
302
303 //console.log( args );
304
305 // Check condition before call back
306 if (eventHandler.conditionBeforeCallBack) {
307 if (eventHandler.conditionBeforeCallBack(args) !== true) {
308 return;
309 }
310 }
311
312 // Special check for keydown event with checkIsEventEnter = true
313 if (eventName === 'keydown' && eventHandler.checkIsEventEnter) {
314 if (e.key !== 'Enter') {
315 return;
316 }
317 }
318 if (target.closest(eventHandler.selector)) {
319 if (eventHandler.class) {
320 // Call method of class, function callBack will understand exactly {this} is class object.
321 eventHandler.class[eventHandler.callBack](args);
322 } else {
323 // For send args is objected, {this} is eventHandler object, not class object.
324 eventHandler.callBack(args);
325 }
326 }
327 });
328 });
329 };
330
331 /**
332 * Debounce - delays function execution until after `wait` ms of inactivity.
333 *
334 * Each call resets the timer. Only the last call in a burst executes.
335 *
336 * USE CASES:
337 * - Search inputs, form validation, window resize
338 * - Multiple elements need independent timers
339 * - When you need to call with different arguments
340 *
341 * EXAMPLES:
342 * const debouncedSearch = debounce( (query) => fetchResults(query), 300 );
343 * searchInput.addEventListener('input', (e) => debouncedSearch(e.target.value));
344 *
345 * const debouncedResize = debounce( recalculateLayout, 250 );
346 * window.addEventListener('resize', debouncedResize);
347 *
348 * ⚠️ Create ONCE outside event handlers, not inside.
349 *
350 * @param {Function} func - Function to debounce (can be anonymous)
351 * @param {number} wait - Milliseconds to wait (default: 500)
352 * @return {Function} Debounced wrapper function
353 * @since 4.3.7
354 * @version 1.0.0
355 */
356 const debounce = (func, wait = 500) => {
357 let timer;
358 return args => {
359 clearTimeout(timer);
360 timer = setTimeout(() => func(args), wait);
361 };
362 };
363
364 /***/ }
365
366 /******/ });
367 /************************************************************************/
368 /******/ // The module cache
369 /******/ var __webpack_module_cache__ = {};
370 /******/
371 /******/ // The require function
372 /******/ function __webpack_require__(moduleId) {
373 /******/ // Check if module is in cache
374 /******/ var cachedModule = __webpack_module_cache__[moduleId];
375 /******/ if (cachedModule !== undefined) {
376 /******/ return cachedModule.exports;
377 /******/ }
378 /******/ // Create a new module (and put it into the cache)
379 /******/ var module = __webpack_module_cache__[moduleId] = {
380 /******/ // no module.id needed
381 /******/ // no module.loaded needed
382 /******/ exports: {}
383 /******/ };
384 /******/
385 /******/ // Execute the module function
386 /******/ if (!(moduleId in __webpack_modules__)) {
387 /******/ delete __webpack_module_cache__[moduleId];
388 /******/ var e = new Error("Cannot find module '" + moduleId + "'");
389 /******/ e.code = 'MODULE_NOT_FOUND';
390 /******/ throw e;
391 /******/ }
392 /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
393 /******/
394 /******/ // Return the exports of the module
395 /******/ return module.exports;
396 /******/ }
397 /******/
398 /************************************************************************/
399 /******/ /* webpack/runtime/define property getters */
400 /******/ (() => {
401 /******/ // define getter functions for harmony exports
402 /******/ __webpack_require__.d = (exports, definition) => {
403 /******/ for(var key in definition) {
404 /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
405 /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
406 /******/ }
407 /******/ }
408 /******/ };
409 /******/ })();
410 /******/
411 /******/ /* webpack/runtime/hasOwnProperty shorthand */
412 /******/ (() => {
413 /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
414 /******/ })();
415 /******/
416 /******/ /* webpack/runtime/make namespace object */
417 /******/ (() => {
418 /******/ // define __esModule on exports
419 /******/ __webpack_require__.r = (exports) => {
420 /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
421 /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
422 /******/ }
423 /******/ Object.defineProperty(exports, '__esModule', { value: true });
424 /******/ };
425 /******/ })();
426 /******/
427 /************************************************************************/
428 var __webpack_exports__ = {};
429 // This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
430 (() => {
431 /*!**********************************************!*\
432 !*** ./assets/src/js/frontend/curriculum.js ***!
433 \**********************************************/
434 __webpack_require__.r(__webpack_exports__);
435 /* harmony import */ var lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lpAssetsJsPath/utils.js */ "./assets/src/js/utils.js");
436 /**
437 * Handle curriculum
438 *
439 * @version 1.0.2
440 * @since 4.2.7.6
441 */
442
443
444
445 // Events
446 /**
447 * 1. Handle click section header
448 */
449 document.addEventListener('click', e => {
450 const target = e.target;
451 const elSectionHeader = target.closest('.course-section-header');
452 if (elSectionHeader) {
453 const elSection = elSectionHeader.closest('.course-section');
454 if (!elSection) {
455 return;
456 }
457 e.preventDefault();
458 toggleSection(elSection);
459 }
460 if (target.classList.contains('course-toggle-all-sections')) {
461 e.preventDefault();
462 toggleSectionAll(target);
463 }
464 });
465
466 /**
467 * 1. Handle search title course
468 */
469 document.addEventListener('keyup', e => {
470 const target = e.target;
471
472 // code compare html with name = search
473 if (target.name === 's' && target.closest('form.search-course')) {
474 const value = target.value;
475 searchItemCourse(value);
476 }
477 });
478
479 /**
480 * 1. Handle submit form search
481 */
482 document.addEventListener('submit', e => {
483 const target = e.target;
484
485 // Stop enter form search
486 if (target.closest('form.search-course')) {
487 e.preventDefault();
488 }
489 });
490 // End events
491
492 const toggleSectionAll = elToggleAllSections => {
493 const elCurriculum = elToggleAllSections.closest('.lp-course-curriculum');
494 const elSections = elCurriculum.querySelectorAll('.course-section');
495 const elExpand = elCurriculum.querySelector('.course-toggle-all-sections');
496 const elCollapse = elCurriculum.querySelector('.course-toggle-all-sections.lp-collapse');
497 if (elToggleAllSections.classList.contains('lp-collapse')) {
498 lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.lpShowHideEl(elExpand, 1);
499 lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.lpShowHideEl(elCollapse, 0);
500 elSections.forEach(el => {
501 if (!el.classList.contains('lp-collapse')) {
502 el.classList.add('lp-collapse');
503 }
504 });
505 } else {
506 elSections.forEach(el => {
507 lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.lpShowHideEl(elExpand, 0);
508 lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.lpShowHideEl(elCollapse, 1);
509 if (el.classList.contains('lp-collapse')) {
510 el.classList.remove('lp-collapse');
511 }
512 });
513 }
514 };
515 const toggleSection = elSection => {
516 const elCurriculum = elSection.closest('.lp-course-curriculum');
517
518 // Toggle section
519 elSection.classList.toggle('lp-collapse');
520
521 // Check all sections collapsed
522 checkAllSectionsCollapsed(elCurriculum);
523 };
524 const checkAllSectionsCollapsed = elCurriculum => {
525 const elSections = elCurriculum.querySelectorAll('.course-section');
526 const elExpand = elCurriculum.querySelector('.course-toggle-all-sections');
527 const elCollapse = elCurriculum.querySelector('.course-toggle-all-sections.lp-collapse');
528 let isAllCollapsed = false;
529 elSections.forEach(el => {
530 if (el.classList.contains('lp-collapse')) {
531 isAllCollapsed = true;
532 }
533 });
534 if (isAllCollapsed) {
535 lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.lpShowHideEl(elExpand, 1);
536 lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.lpShowHideEl(elCollapse, 0);
537 } else {
538 lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.lpShowHideEl(elExpand, 0);
539 lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.lpShowHideEl(elCollapse, 1);
540 }
541 };
542
543 // Search title item of course by text
544 const searchItemCourse = text => {
545 const elCurriculum = document.querySelector('.lp-course-curriculum');
546 const elSections = elCurriculum.querySelectorAll('.course-section');
547 elSections.forEach(elSection => {
548 let found = false;
549 elSection.querySelectorAll('.course-item').forEach(elItem => {
550 const elSection = elItem.closest('.course-section');
551 const titleItem = elItem.querySelector('.course-item-title').textContent;
552 if (!searchText(titleItem, text)) {
553 lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.lpShowHideEl(elItem, 0);
554 elItem.classList.add('lp-hide');
555 } else {
556 found = true;
557 lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.lpShowHideEl(elItem, 1);
558 elSection.classList.remove('lp-collapse');
559 }
560 });
561 if (!found) {
562 lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.lpShowHideEl(elSection, 0);
563 } else {
564 lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.lpShowHideEl(elSection, 1);
565 }
566 });
567 };
568 const normalizeVietnamese = str => {
569 return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
570 };
571
572 /**
573 * Search string on text
574 * Logic:
575 * User enter text: "11 lesson"
576 * JS will search string has word "lesson" and "11"
577 * Result: "Lesson 11: Introduction"
578 * Result: "11 lesson: Introduction"
579 *
580 * @param text
581 * @param searchTerm
582 */
583 const searchText = (text, searchTerm) => {
584 const normalizedText = normalizeVietnamese(text.toLowerCase());
585 const searchTermArr = searchTerm.trim().split(' ');
586 const length = searchTermArr.length;
587 let found = 0;
588 searchTermArr.forEach(term => {
589 const normalizedSearchTerm = normalizeVietnamese(term.toLowerCase());
590 const regex = new RegExp(normalizedSearchTerm, 'gi');
591 if (regex.test(normalizedText)) {
592 found++;
593 }
594 });
595 return found === length;
596 };
597
598 // Scroll to item viewing
599 const scrollToItemViewing = elCurriculum => {
600 const elItemCurrent = elCurriculum.querySelector('li.current');
601 if (!elItemCurrent) {
602 return;
603 }
604 elItemCurrent.scrollIntoView({
605 behavior: 'smooth'
606 });
607 };
608 lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.lpOnElementReady('.lp-course-curriculum', elCurriculum => {
609 checkAllSectionsCollapsed(elCurriculum);
610
611 // Set interval to check if item viewing is changed
612 const interval = setInterval(() => {
613 if (document.readyState === 'complete') {
614 clearInterval(interval);
615 scrollToItemViewing(elCurriculum);
616 }
617 }, 300);
618 });
619 })();
620
621 /******/ })()
622 ;
623 //# sourceMappingURL=curriculum.js.map