← All changes | assets/dist/js/admin/list-students-enrolled.js +158 -37 4.4.4 → 4.4.10 View file →

		@@ -11,8 +11,9 @@
11	11	__webpack_require__.r(__webpack_exports__);
12	12	/* harmony export */ __webpack_require__.d(__webpack_exports__, {
13	13	/* harmony export */ debounce: () => (/* binding */ debounce),
14	14	/* harmony export */ eventHandlers: () => (/* binding */ eventHandlers),
	15	+/* harmony export */ fullScreenView: () => (/* binding */ fullScreenView),
15	16	/* harmony export */ getDataOfForm: () => (/* binding */ getDataOfForm),
16	17	/* harmony export */ getFieldKeysOfForm: () => (/* binding */ getFieldKeysOfForm),
17	18	/* harmony export */ listenElementCreated: () => (/* binding */ listenElementCreated),
18	19	/* harmony export */ listenElementViewed: () => (/* binding */ listenElementViewed),
		@@ -24,9 +25,10 @@
24	25	/* harmony export */ lpOnElementReady: () => (/* binding */ lpOnElementReady),
25	26	/* harmony export */ lpSetLoadingEl: () => (/* binding */ lpSetLoadingEl),
26	27	/* harmony export */ lpShowHideEl: () => (/* binding */ lpShowHideEl),
27	28	/* harmony export */ mergeDataWithDatForm: () => (/* binding */ mergeDataWithDatForm),
28		-/* harmony export */ toggleCollapse: () => (/* binding */ toggleCollapse)
	29	+/* harmony export */ toggleCollapse: () => (/* binding */ toggleCollapse),
	30	+/* harmony export */ toggleEnable: () => (/* binding */ toggleEnable)
29	31	/* harmony export */ });
30	32	/**
31	33	* Utils functions
32	34	*
		@@ -33,9 +35,9 @@
33	35	* @param url
34	36	* @param data
35	37	* @param functions
36	38	* @since 4.2.5.1
37		- * @version 1.0.6
	39	+ * @version 1.0.7
38	40	*/
39	41	const lpClassName = {
40	42	hidden: 'lp-hidden',
41	43	loading: 'loading',
		@@ -40,9 +42,12 @@
40	42	hidden: 'lp-hidden',
41	43	loading: 'loading',
42	44	elCollapse: 'lp-collapse',
43	45	elSectionToggle: '.lp-section-toggle',
44		- elTriggerToggle: '.lp-trigger-toggle'
	46	+ elTriggerToggle: '.lp-trigger-toggle',
	47	+ elBtnFullScreen: '.lp-btn-full-screen-view',
	48	+ elFullScreen: 'lp-full-screen-view',
	49	+ elBtnFullScreenClose: 'lp-full-screen-view__close'
45	50	};
46	51	const lpFetchAPI = (url, data = {}, functions = {}) => {
47	52	if ('function' === typeof functions.before) {
48	53	functions.before();
		@@ -360,8 +365,141 @@
360	365	timer = setTimeout(() => func(args), wait);
361	366	};
362	367	};
363	368
	369	+/**
	370	+ * Initialize lp-toggle-enable components.
	371	+ *
	372	+ * Finds all `.lp-toggle-enable` elements and wires up toggle behavior.
	373	+ * Reads initial state from `data-enabled` attribute ("true"/"false").
	374	+ * Calls `data-on-toggle` callback (if provided via options) on state change.
	375	+ *
	376	+ * HTML structure:
	377	+ * <label class="lp-toggle-enable" data-enabled="true">
	378	+ * <input type="checkbox" class="lp-toggle-enable__input" />
	379	+ * <span class="lp-toggle-enable__track"></span>
	380	+ * </label>
	381	+ *
	382	+ * @param {string} selector CSS selector for toggle elements (default: '.lp-toggle-enable')
	383	+ * @param {Function} onToggle Optional callback( el, isEnabled ) called on state change
	384	+ * @since 4.4.5
	385	+ * @version 1.0.0
	386	+ */
	387	+window.lpToggleEnableInit = 0;
	388	+const toggleEnable = (onToggle = null) => {
	389	+ if (window.lpToggleEnableInit) {
	390	+ return;
	391	+ }
	392	+ window.lpToggleEnableInit = 1;
	393	+ const selector = '.lp-toggle-enable';
	394	+ const updateUI = (toggle, isEnabled) => {
	395	+ toggle.classList.toggle('is-enabled', isEnabled);
	396	+ const input = toggle.querySelector('.lp-toggle-enable__input');
	397	+ if (input) {
	398	+ input.checked = isEnabled;
	399	+ input.value = isEnabled ? '1' : '0';
	400	+ }
	401	+ };
	402	+
	403	+ // Delegate click handling via eventHandlers.
	404	+ eventHandlers('click', [{
	405	+ selector,
	406	+ callBack: args => {
	407	+ const {
	408	+ e,
	409	+ target
	410	+ } = args;
	411	+ const toggle = target.closest(selector);
	412	+ if (!toggle || toggle.classList.contains('is-disabled')) {
	413	+ return;
	414	+ }
	415	+ e.preventDefault();
	416	+ const isEnabled = !toggle.classList.contains('is-enabled');
	417	+ updateUI(toggle, isEnabled);
	418	+ if ('function' === typeof onToggle) {
	419	+ onToggle(toggle, isEnabled);
	420	+ }
	421	+ }
	422	+ }]);
	423	+};
	424	+
	425	+/**
	426	+ * Initialize custom fullscreen view buttons.
	427	+ *
	428	+ * Delegates clicks on `.lp-btn-full-screen-view` buttons to
	429	+ * `lpToggleFullscreenView`. Reads the `data-target` attribute to find the
	430	+ * target element. Falls back to the button's parent element when
	431	+ * `data-target` is not provided.
	432	+ *
	433	+ * @since 4.4.5
	434	+ * @version 1.0.0
	435	+ */
	436	+window.lpFullScreenViewInit = 0;
	437	+const fullScreenView = () => {
	438	+ if (window.lpFullScreenViewInit) {
	439	+ return;
	440	+ }
	441	+ window.lpFullScreenViewInit = 1;
	442	+ let lastScrollY = 0;
	443	+ const lpToggleFullscreenView = (elTarget, elBtnFullScreen = null) => {
	444	+ const isFullscreen = elTarget.classList.contains(lpClassName.elFullScreen);
	445	+ if (isFullscreen) {
	446	+ elTarget.classList.remove(lpClassName.elFullScreen);
	447	+ document.documentElement.classList.remove('lp-full-screen-active');
	448	+ window.scrollTo(0, lastScrollY);
	449	+ } else {
	450	+ lastScrollY = window.scrollY;
	451	+ elTarget.classList.add(lpClassName.elFullScreen);
	452	+ document.documentElement.classList.add('lp-full-screen-active');
	453	+ }
	454	+ if (!isFullscreen) {
	455	+ if (!elTarget.querySelector(`.${lpClassName.elBtnFullScreenClose}`)) {
	456	+ const closeButton = document.createElement('button');
	457	+ closeButton.type = 'button';
	458	+ closeButton.className = lpClassName.elBtnFullScreenClose;
	459	+ closeButton.setAttribute('aria-label', 'Close');
	460	+ closeButton.innerHTML = lpData.i18n.closeButtonFullScreen || 'Close &times;';
	461	+ closeButton.addEventListener('click', e => {
	462	+ e.preventDefault();
	463	+ lpToggleFullscreenView(elTarget);
	464	+ });
	465	+ elTarget.appendChild(closeButton);
	466	+ }
	467	+ } else {
	468	+ const closeButton = elTarget.querySelector(`.${lpClassName.elBtnFullScreenClose}`);
	469	+ if (closeButton) {
	470	+ closeButton.remove();
	471	+ }
	472	+ }
	473	+ };
	474	+ eventHandlers('click', [{
	475	+ selector: lpClassName.elBtnFullScreen,
	476	+ callBack: args => {
	477	+ const {
	478	+ e,
	479	+ target
	480	+ } = args;
	481	+ const elBtnFullScreen = target.closest(lpClassName.elBtnFullScreen);
	482	+ if (!elBtnFullScreen) {
	483	+ console.log('No full screen button found');
	484	+ return;
	485	+ }
	486	+ e.preventDefault();
	487	+ let elTarget = null;
	488	+ const targetSelector = elBtnFullScreen.dataset.targetFullscreen;
	489	+ console.log(targetSelector);
	490	+ if (targetSelector) {
	491	+ elTarget = document.querySelector(targetSelector);
	492	+ }
	493	+ if (!elTarget) {
	494	+ console.log('No target element found');
	495	+ return;
	496	+ }
	497	+ lpToggleFullscreenView(elTarget, elBtnFullScreen);
	498	+ }
	499	+ }]);
	500	+};
	501	+
364	502	/***/ }
365	503
366	504	/******/ });
367	505	/************************************************************************/
		@@ -464,12 +602,12 @@
464	602	class ListStudentsEnrolled {
465	603	constructor() {
466	604	this.instructorId = null;
467	605	this.elContainer = null;
468		- this.isRequesting = false;
469	606	}
470	607	static selectors = {
471		- elContainer: '#lp-enrolled-students',
	608	+ elContainer: '.lp-enrolled-students',
	609	+ elLayout: '.lp-students-enrolled-layout',
472	610	elForm: '.lp-enrolled-students-form',
473	611	elLPTarget: '.lp-target',
474	612	elCourseNameInput: '.lp-enrolled-filter-course-name',
475	613	elCourseIdInput: '#lp-enrolled-filter-course-id',
		@@ -503,46 +641,38 @@
503	641
504	642	// Search/Clear button click.
505	643	lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.eventHandlers('click', [{
506	644	selector: ListStudentsEnrolled.selectors.elBtnSearch,
507		- class: this,
508		- callBack: this.searchStudents.name
	645	+ callBack: this.searchStudents.bind(this)
509	646	}, {
510	647	selector: ListStudentsEnrolled.selectors.elBtnClear,
511		- class: this,
512		- callBack: this.clearFilters.name
	648	+ callBack: this.clearFilters.bind(this)
513	649	}]);
514	650
515	651	// Search on Enter key.
516	652	lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.eventHandlers('keydown', [{
517	653	selector: ListStudentsEnrolled.selectors.elSearchInput,
518		- class: this,
519		- callBack: this.triggerBtnSearch.name,
	654	+ callBack: this.triggerBtnSearch.bind(this),
520	655	checkIsEventEnter: true
521	656	}, {
522	657	selector: ListStudentsEnrolled.selectors.elCourseNameInput,
523		- class: this,
524		- callBack: this.triggerBtnSearch.name,
	658	+ callBack: this.triggerBtnSearch.bind(this),
525	659	checkIsEventEnter: true
526	660	}, {
527	661	selector: ListStudentsEnrolled.selectors.elStartDateInput,
528		- class: this,
529		- callBack: this.triggerBtnSearch.name,
	662	+ callBack: this.triggerBtnSearch.bind(this),
530	663	checkIsEventEnter: true
531	664	}, {
532	665	selector: ListStudentsEnrolled.selectors.elEndDateInput,
533		- class: this,
534		- callBack: this.triggerBtnSearch.name,
	666	+ callBack: this.triggerBtnSearch.bind(this),
535	667	checkIsEventEnter: true
536	668	}]);
537	669	lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.eventHandlers('change', [{
538	670	selector: ListStudentsEnrolled.selectors.elStartDateInput,
539		- class: this,
540		- callBack: this.checkDatesRange.name
	671	+ callBack: this.checkDatesRange.bind(this)
541	672	}, {
542	673	selector: ListStudentsEnrolled.selectors.elEndDateInput,
543		- class: this,
544		- callBack: this.checkDatesRange.name
	674	+ callBack: this.checkDatesRange.bind(this)
545	675	}]);
546	676	}
547	677
548	678	// Click button search.
		@@ -592,9 +722,9 @@
592	722	if (!btn) {
593	723	return;
594	724	}
595	725	lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.lpSetLoadingEl(btn, isLoading ? 1 : 0);
596		- btn.disabled = !!isLoading;
	726	+ //btn.disabled = !! isLoading;
597	727	}
598	728	getAjaxHandle() {
599	729	const ajaxHandle = window.lpAJAXG;
600	730	if (!ajaxHandle || typeof ajaxHandle.getDataSetCurrent !== 'function' || typeof ajaxHandle.setDataSetCurrent !== 'function' || typeof ajaxHandle.showHideLoading !== 'function' || typeof ajaxHandle.fetchAJAX !== 'function') {
		@@ -635,17 +765,14 @@
635	765	if (e) {
636	766	e.preventDefault();
637	767	}
638	768	const btn = args?.target?.closest(ListStudentsEnrolled.selectors.elBtnSearch);
639		- if (btn) {
640		- if (this.isRequesting || btn.classList.contains('loading') || btn.disabled) {
641		- return;
642		- }
643		- } else if (this.isRequesting) {
	769	+ if (!btn) {
644	770	return;
645	771	}
646	772	const elForm = btn.closest(ListStudentsEnrolled.selectors.elForm);
647		- const elLPTarget = this.elContainer.querySelector(ListStudentsEnrolled.selectors.elLPTarget);
	773	+ const elLayout = elForm.closest(ListStudentsEnrolled.selectors.elLayout);
	774	+ const elLPTarget = elLayout.querySelector(ListStudentsEnrolled.selectors.elLPTarget);
648	775	if (!elLPTarget || !elForm) {
649	776	return;
650	777	}
651	778	const ajaxHandle = this.getAjaxHandle();
		@@ -671,17 +798,14 @@
671	798	if (e) {
672	799	e.preventDefault();
673	800	}
674	801	const btn = args?.target?.closest(ListStudentsEnrolled.selectors.elBtnClear);
675		- if (btn) {
676		- if (this.isRequesting || btn.classList.contains('loading') || btn.disabled) {
677		- return;
678		- }
679		- } else if (this.isRequesting) {
	802	+ if (!btn) {
680	803	return;
681	804	}
682	805	const elForm = btn.closest(ListStudentsEnrolled.selectors.elForm);
683		- const elLPTarget = this.elContainer.querySelector(ListStudentsEnrolled.selectors.elLPTarget);
	806	+ const elLayout = elForm.closest(ListStudentsEnrolled.selectors.elLayout);
	807	+ const elLPTarget = elLayout.querySelector(ListStudentsEnrolled.selectors.elLPTarget);
684	808	if (!elLPTarget || !elForm) {
685	809	return;
686	810	}
687	811	const ajaxHandle = this.getAjaxHandle();
		@@ -706,13 +830,11 @@
706	830	*/
707	831	reloadContent(elLPTarget, dataSend, btn = null) {
708	832	const ajaxHandle = this.getAjaxHandle();
709	833	if (!ajaxHandle) {
710		- this.isRequesting = false;
711	834	this.setButtonLoadingState(btn, false);
712	835	return;
713	836	}
714		- this.isRequesting = true;
715	837	ajaxHandle.showHideLoading(elLPTarget, 1);
716	838	const callBack = {
717	839	success: response => {
718	840	const {
		@@ -724,9 +846,8 @@
724	846	}
725	847	},
726	848	error: error => console.error(error),
727	849	completed: () => {
728		- this.isRequesting = false;
729	850	ajaxHandle.showHideLoading(elLPTarget, 0);
730	851	this.setButtonLoadingState(btn, false);
731	852	}
732	853	};