LearnPress – WordPress LMS Plugin for Create and Sell Online Courses / 4.4.1

LearnPress – WordPress LMS Plugin for Create and Sell Online Courses v4.4.1

learnpress / assets / src / js / frontend / curriculum.js

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

203 lines 5.2 KB

Raw Download Zip

1	/**
2	* Handle curriculum
3	*
4	* @version 1.0.2
5	* @since 4.2.7.6
6	*/
7
8	import * as lpUtils from 'lpAssetsJsPath/utils.js';
9
10	// Events
11	/**
12	* 1. Handle click section header
13	*/
14	document.addEventListener( 'click', ( e ) => {
15	const target = e.target;
16
17	const elSectionHeader = target.closest( '.course-section-header' );
18	if ( elSectionHeader ) {
19	const elSection = elSectionHeader.closest( '.course-section' );
20	if ( ! elSection ) {
21	return;
22	}
23
24	e.preventDefault();
25	toggleSection( elSection );
26	}
27
28	if ( target.classList.contains( 'course-toggle-all-sections' ) ) {
29	e.preventDefault();
30	toggleSectionAll( target );
31	}
32	} );
33
34	/**
35	* 1. Handle search title course
36	*/
37	document.addEventListener( 'keyup', ( e ) => {
38	const target = e.target;
39
40	// code compare html with name = search
41	if ( target.name === 's' && target.closest( 'form.search-course' ) ) {
42	const value = target.value;
43	searchItemCourse( value );
44	}
45	} );
46
47	/**
48	* 1. Handle submit form search
49	*/
50	document.addEventListener( 'submit', ( e ) => {
51	const target = e.target;
52
53	// Stop enter form search
54	if ( target.closest( 'form.search-course' ) ) {
55	e.preventDefault();
56	}
57	} );
58	// End events
59
60	const toggleSectionAll = ( elToggleAllSections ) => {
61	const elCurriculum = elToggleAllSections.closest( '.lp-course-curriculum' );
62	const elSections = elCurriculum.querySelectorAll( '.course-section' );
63	const elExpand = elCurriculum.querySelector( '.course-toggle-all-sections' );
64	const elCollapse = elCurriculum.querySelector( '.course-toggle-all-sections.lp-collapse' );
65
66	if ( elToggleAllSections.classList.contains( 'lp-collapse' ) ) {
67	lpUtils.lpShowHideEl( elExpand, 1 );
68	lpUtils.lpShowHideEl( elCollapse, 0 );
69
70	elSections.forEach( ( el ) => {
71	if ( ! el.classList.contains( 'lp-collapse' ) ) {
72	el.classList.add( 'lp-collapse' );
73	}
74	} );
75	} else {
76	elSections.forEach( ( el ) => {
77	lpUtils.lpShowHideEl( elExpand, 0 );
78	lpUtils.lpShowHideEl( elCollapse, 1 );
79
80	if ( el.classList.contains( 'lp-collapse' ) ) {
81	el.classList.remove( 'lp-collapse' );
82	}
83	} );
84	}
85	};
86
87	const toggleSection = ( elSection ) => {
88	const elCurriculum = elSection.closest( '.lp-course-curriculum' );
89
90	// Toggle section
91	elSection.classList.toggle( 'lp-collapse' );
92
93	// Check all sections collapsed
94	checkAllSectionsCollapsed( elCurriculum );
95	};
96
97	const checkAllSectionsCollapsed = ( elCurriculum ) => {
98	const elSections = elCurriculum.querySelectorAll( '.course-section' );
99	const elExpand = elCurriculum.querySelector( '.course-toggle-all-sections' );
100	const elCollapse = elCurriculum.querySelector( '.course-toggle-all-sections.lp-collapse' );
101
102	let isAllCollapsed = false;
103	elSections.forEach( ( el ) => {
104	if ( el.classList.contains( 'lp-collapse' ) ) {
105	isAllCollapsed = true;
106	}
107	} );
108
109	if ( isAllCollapsed ) {
110	lpUtils.lpShowHideEl( elExpand, 1 );
111	lpUtils.lpShowHideEl( elCollapse, 0 );
112	} else {
113	lpUtils.lpShowHideEl( elExpand, 0 );
114	lpUtils.lpShowHideEl( elCollapse, 1 );
115	}
116	};
117
118	// Search title item of course by text
119	const searchItemCourse = ( text ) => {
120	const elCurriculum = document.querySelector( '.lp-course-curriculum' );
121	const elSections = elCurriculum.querySelectorAll( '.course-section' );
122
123	elSections.forEach( ( elSection ) => {
124	let found = false;
125
126	elSection.querySelectorAll( '.course-item' ).forEach( ( elItem ) => {
127	const elSection = elItem.closest( '.course-section' );
128	const titleItem = elItem.querySelector( '.course-item-title' ).textContent;
129
130	if ( ! searchText( titleItem, text ) ) {
131	lpUtils.lpShowHideEl( elItem, 0 );
132	elItem.classList.add( 'lp-hide' );
133	} else {
134	found = true;
135	lpUtils.lpShowHideEl( elItem, 1 );
136	elSection.classList.remove( 'lp-collapse' );
137	}
138	} );
139
140	if ( ! found ) {
141	lpUtils.lpShowHideEl( elSection, 0 );
142	} else {
143	lpUtils.lpShowHideEl( elSection, 1 );
144	}
145	} );
146	};
147
148	const normalizeVietnamese = ( str ) => {
149	return str.normalize( 'NFD' ).replace( /[\u0300-\u036f]/g, '' );
150	};
151
152	/**
153	* Search string on text
154	* Logic:
155	* User enter text: "11 lesson"
156	* JS will search string has word "lesson" and "11"
157	* Result: "Lesson 11: Introduction"
158	* Result: "11 lesson: Introduction"
159	*
160	* @param text
161	* @param searchTerm
162	*/
163	const searchText = ( text, searchTerm ) => {
164	const normalizedText = normalizeVietnamese( text.toLowerCase() );
165	const searchTermArr = searchTerm.trim().split( ' ' );
166	const length = searchTermArr.length;
167
168	let found = 0;
169	searchTermArr.forEach( ( term ) => {
170	const normalizedSearchTerm = normalizeVietnamese( term.toLowerCase() );
171	const regex = new RegExp( normalizedSearchTerm, 'gi' );
172	if ( regex.test( normalizedText ) ) {
173	found++;
174	}
175	} );
176
177	return found === length;
178	};
179
180	// Scroll to item viewing
181	const scrollToItemViewing = ( elCurriculum ) => {
182	const elItemCurrent = elCurriculum.querySelector( 'li.current' );
183	if ( ! elItemCurrent ) {
184	return;
185	}
186
187	elItemCurrent.scrollIntoView( {
188	behavior: 'smooth',
189	} );
190	};
191
192	lpUtils.lpOnElementReady( '.lp-course-curriculum', ( elCurriculum ) => {
193	checkAllSectionsCollapsed( elCurriculum );
194
195	// Set interval to check if item viewing is changed
196	const interval = setInterval( () => {
197	if ( document.readyState === 'complete' ) {
198	clearInterval( interval );
199	scrollToItemViewing( elCurriculum );
200	}
201	}, 300 );
202	} );
203