← All changes | assets/src/apps/js/frontend/single-curriculum/components/search.js +89 -89 4.3.9 → 4.4.10 View file →

		@@ -1,89 +1,89 @@
1		-
2		-export const searchCourseContent = () => {
3		- const popup = document.querySelector( '#popup-course' );
4		- const list = document.querySelector( '#learn-press-course-curriculum' );
5		-
6		- if ( popup && list ) {
7		- const items = list.querySelector( '.curriculum-sections' );
8		- const form = popup.querySelector( '.search-course' );
9		- const search = popup.querySelector( '.search-course input[type="text"]' );
10		-
11		- if ( ! search || ! items || ! form ) {
12		- return;
13		- }
14		-
15		- const sections = items.querySelectorAll( 'li.section' );
16		- const dataItems = items.querySelectorAll( 'li.course-item' );
17		-
18		- const dataSearch = [];
19		-
20		- dataItems.forEach( ( item ) => {
21		- const itemID = item.dataset.id;
22		- const name = item.querySelector( '.item-name' );
23		-
24		- dataSearch.push( {
25		- id: itemID,
26		- name: name ? name.textContent.toLowerCase() : '',
27		- } );
28		- } );
29		-
30		- const submit = ( event ) => {
31		- event.preventDefault();
32		-
33		- const inputVal = search.value;
34		-
35		- form.classList.add( 'searching' );
36		-
37		- if ( ! inputVal ) {
38		- form.classList.remove( 'searching' );
39		- }
40		-
41		- const outputs = [];
42		-
43		- dataSearch.forEach( ( i ) => {
44		- if ( ! inputVal || i.name.match( inputVal.toLowerCase() ) ) {
45		- outputs.push( i.id );
46		-
47		- dataItems.forEach( ( c ) => {
48		- if ( outputs.indexOf( c.dataset.id ) !== -1 ) {
49		- c.classList.remove( 'hide-if-js' );
50		- } else {
51		- c.classList.add( 'hide-if-js' );
52		- }
53		- } );
54		- }
55		- } );
56		-
57		- sections.forEach( ( section ) => {
58		- const listItem = section.querySelectorAll( '.course-item' );
59		- const isTrue = [];
60		-
61		- listItem.forEach( ( a ) => {
62		- if ( outputs.includes( a.dataset.id ) ) {
63		- isTrue.push( a.dataset.id );
64		- }
65		- } );
66		-
67		- if ( isTrue.length === 0 ) {
68		- section.classList.add( 'hide-if-js' );
69		- } else {
70		- section.classList.remove( 'hide-if-js' );
71		- }
72		- } );
73		- };
74		-
75		- const clear = form.querySelector( '.clear' );
76		-
77		- if ( clear ) {
78		- clear.addEventListener( 'click', ( e ) => {
79		- e.preventDefault();
80		- search.value = '';
81		-
82		- submit( e );
83		- } );
84		- }
85		-
86		- form.addEventListener( 'submit', submit );
87		- search.addEventListener( 'keyup', submit );
88		- }
89		-};
	1	+
	2	+export const searchCourseContent = () => {
	3	+ const popup = document.querySelector( '#popup-course' );
	4	+ const list = document.querySelector( '#learn-press-course-curriculum' );
	5	+
	6	+ if ( popup && list ) {
	7	+ const items = list.querySelector( '.curriculum-sections' );
	8	+ const form = popup.querySelector( '.search-course' );
	9	+ const search = popup.querySelector( '.search-course input[type="text"]' );
	10	+
	11	+ if ( ! search || ! items || ! form ) {
	12	+ return;
	13	+ }
	14	+
	15	+ const sections = items.querySelectorAll( 'li.section' );
	16	+ const dataItems = items.querySelectorAll( 'li.course-item' );
	17	+
	18	+ const dataSearch = [];
	19	+
	20	+ dataItems.forEach( ( item ) => {
	21	+ const itemID = item.dataset.id;
	22	+ const name = item.querySelector( '.item-name' );
	23	+
	24	+ dataSearch.push( {
	25	+ id: itemID,
	26	+ name: name ? name.textContent.toLowerCase() : '',
	27	+ } );
	28	+ } );
	29	+
	30	+ const submit = ( event ) => {
	31	+ event.preventDefault();
	32	+
	33	+ const inputVal = search.value;
	34	+
	35	+ form.classList.add( 'searching' );
	36	+
	37	+ if ( ! inputVal ) {
	38	+ form.classList.remove( 'searching' );
	39	+ }
	40	+
	41	+ const outputs = [];
	42	+
	43	+ dataSearch.forEach( ( i ) => {
	44	+ if ( ! inputVal || i.name.match( inputVal.toLowerCase() ) ) {
	45	+ outputs.push( i.id );
	46	+
	47	+ dataItems.forEach( ( c ) => {
	48	+ if ( outputs.indexOf( c.dataset.id ) !== -1 ) {
	49	+ c.classList.remove( 'hide-if-js' );
	50	+ } else {
	51	+ c.classList.add( 'hide-if-js' );
	52	+ }
	53	+ } );
	54	+ }
	55	+ } );
	56	+
	57	+ sections.forEach( ( section ) => {
	58	+ const listItem = section.querySelectorAll( '.course-item' );
	59	+ const isTrue = [];
	60	+
	61	+ listItem.forEach( ( a ) => {
	62	+ if ( outputs.includes( a.dataset.id ) ) {
	63	+ isTrue.push( a.dataset.id );
	64	+ }
	65	+ } );
	66	+
	67	+ if ( isTrue.length === 0 ) {
	68	+ section.classList.add( 'hide-if-js' );
	69	+ } else {
	70	+ section.classList.remove( 'hide-if-js' );
	71	+ }
	72	+ } );
	73	+ };
	74	+
	75	+ const clear = form.querySelector( '.clear' );
	76	+
	77	+ if ( clear ) {
	78	+ clear.addEventListener( 'click', ( e ) => {
	79	+ e.preventDefault();
	80	+ search.value = '';
	81	+
	82	+ submit( e );
	83	+ } );
	84	+ }
	85	+
	86	+ form.addEventListener( 'submit', submit );
	87	+ search.addEventListener( 'keyup', submit );
	88	+ }
	89	+};