← All changes | assets/src/js/frontend/curriculum.js +202 -202 4.3.8 → 4.4.9 View file →

		@@ -1,202 +1,202 @@
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		-} );
	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	+} );