← All changes | assets/src/js/frontend/profile/course-tab.js +142 -142 4.3.9 → 4.4.9 View file →

		@@ -1,142 +1,142 @@
1		-import { lpAddQueryArgs, lpFetchAPI } from '../../utils.js';
2		-
3		-// Rest API load content course enrolled, created - Nhamdv.
4		-const courseTab = () => {
5		- const elements = document.querySelectorAll( '.learn-press-course-tab__filter__content' );
6		-
7		- const getResponse = ( ele, dataset, append = false, viewMoreEle = false ) => {
8		- let url = lpData.lp_rest_url + 'lp/v1/profile/course-tab';
9		- url = lpAddQueryArgs( url, dataset );
10		-
11		- const callBack = {
12		- success: ( response ) => {
13		- const skeleton = ele.querySelector( '.lp-skeleton-animation' );
14		- skeleton && skeleton.remove();
15		-
16		- if ( response.status === 'success' && response.data ) {
17		- if ( append ) {
18		- ele.innerHTML += response.data;
19		- } else {
20		- ele.innerHTML = response.data;
21		- }
22		- } else if ( append ) {
23		- ele.innerHTML += `<div class="lp-ajax-message" style="display:block">${ response.message && response.message }</div>`;
24		- } else {
25		- ele.innerHTML = `<div class="lp-ajax-message" style="display:block">${ response.message && response.message }</div>`;
26		- }
27		-
28		- if ( viewMoreEle ) {
29		- viewMoreEle.classList.remove( 'loading' );
30		-
31		- const paged = parseInt( viewMoreEle.dataset.paged );
32		- const numberPage = parseInt( viewMoreEle.dataset.number );
33		-
34		- if ( numberPage <= paged ) {
35		- viewMoreEle.remove();
36		- }
37		-
38		- viewMoreEle.dataset.paged = paged + 1;
39		- }
40		-
41		- viewMore( ele, dataset );
42		- },
43		- error: ( error ) => {
44		- console.log( error );
45		- },
46		- completed: () => {
47		-
48		- },
49		- };
50		-
51		- let paramsFetch = {};
52		-
53		- if ( 0 !== parseInt( lpData.user_id ) ) {
54		- paramsFetch = {
55		- headers: {
56		- 'X-WP-Nonce': lpData.nonce,
57		- },
58		- };
59		- }
60		-
61		- lpFetchAPI( url, paramsFetch, callBack );
62		- };
63		-
64		- if ( 'IntersectionObserver' in window ) {
65		- const eleObserver = new IntersectionObserver( ( entries, observer ) => {
66		- entries.forEach( ( entry ) => {
67		- if ( entry.isIntersecting ) {
68		- const ele = entry.target;
69		-
70		- const params = ele.parentNode.querySelector( '.lp_profile_tab_input_param' );
71		- const data = { ...JSON.parse( params.value ), status: ele.dataset.tab || '' };
72		-
73		- getResponse( ele, data );
74		-
75		- eleObserver.unobserve( ele );
76		- }
77		- } );
78		- } );
79		-
80		- [ ...elements ].map( ( ele ) => {
81		- if ( ele.dataset.tab !== 'all' ) {
82		- eleObserver.observe( ele );
83		- } else {
84		- const params = ele.parentNode.querySelector( '.lp_profile_tab_input_param' );
85		- const data = { ...JSON.parse( params.value ), status: ele.dataset.tab === 'all' ? '' : ele.dataset.tab || '' };
86		-
87		- getResponse( ele, data );
88		- }
89		- } );
90		- }
91		-
92		- const changeFilter = () => {
93		- const tabs = document.querySelectorAll( '.learn-press-course-tab-filters' );
94		-
95		- tabs.forEach( ( tab ) => {
96		- const filters = tab.querySelectorAll( '.learn-press-filters a' );
97		-
98		- filters.forEach( ( filter ) => {
99		- filter.addEventListener( 'click', ( e ) => {
100		- e.preventDefault();
101		-
102		- const tabName = filter.dataset.tab;
103		-
104		- [ ...filters ].map( ( ele ) => {
105		- ele.classList.remove( 'active' );
106		- } );
107		-
108		- filter.classList.add( 'active' );
109		-
110		- [ ...tab.querySelectorAll( '.learn-press-course-tab__filter__content' ) ].map( ( ele ) => {
111		- ele.style.display = 'none';
112		-
113		- if ( ele.dataset.tab === tabName ) {
114		- ele.style.display = '';
115		- }
116		- } );
117		- } );
118		- } );
119		- } );
120		- };
121		-
122		- changeFilter();
123		-
124		- const viewMore = ( ele, dataset ) => {
125		- const viewMoreEle = ele.querySelector( 'button[data-paged]' );
126		-
127		- if ( viewMoreEle ) {
128		- viewMoreEle.addEventListener( 'click', ( e ) => {
129		- e.preventDefault();
130		-
131		- const paged = viewMoreEle && viewMoreEle.dataset.paged;
132		-
133		- viewMoreEle.classList.add( 'loading' );
134		-
135		- const element = dataset.layout === 'list' ? '.lp_profile_course_progress' : '.learn-press-courses';
136		-
137		- getResponse( ele.querySelector( element ), { ...dataset, ...{ paged } }, true, viewMoreEle );
138		- } );
139		- }
140		- };
141		-};
142		-export default courseTab;
	1	+import { lpAddQueryArgs, lpFetchAPI } from '../../utils.js';
	2	+
	3	+// Rest API load content course enrolled, created - Nhamdv.
	4	+const courseTab = () => {
	5	+ const elements = document.querySelectorAll( '.learn-press-course-tab__filter__content' );
	6	+
	7	+ const getResponse = ( ele, dataset, append = false, viewMoreEle = false ) => {
	8	+ let url = lpData.lp_rest_url + 'lp/v1/profile/course-tab';
	9	+ url = lpAddQueryArgs( url, dataset );
	10	+
	11	+ const callBack = {
	12	+ success: ( response ) => {
	13	+ const skeleton = ele.querySelector( '.lp-skeleton-animation' );
	14	+ skeleton && skeleton.remove();
	15	+
	16	+ if ( response.status === 'success' && response.data ) {
	17	+ if ( append ) {
	18	+ ele.innerHTML += response.data;
	19	+ } else {
	20	+ ele.innerHTML = response.data;
	21	+ }
	22	+ } else if ( append ) {
	23	+ ele.innerHTML += `<div class="lp-ajax-message" style="display:block">${ response.message && response.message }</div>`;
	24	+ } else {
	25	+ ele.innerHTML = `<div class="lp-ajax-message" style="display:block">${ response.message && response.message }</div>`;
	26	+ }
	27	+
	28	+ if ( viewMoreEle ) {
	29	+ viewMoreEle.classList.remove( 'loading' );
	30	+
	31	+ const paged = parseInt( viewMoreEle.dataset.paged );
	32	+ const numberPage = parseInt( viewMoreEle.dataset.number );
	33	+
	34	+ if ( numberPage <= paged ) {
	35	+ viewMoreEle.remove();
	36	+ }
	37	+
	38	+ viewMoreEle.dataset.paged = paged + 1;
	39	+ }
	40	+
	41	+ viewMore( ele, dataset );
	42	+ },
	43	+ error: ( error ) => {
	44	+ console.log( error );
	45	+ },
	46	+ completed: () => {
	47	+
	48	+ },
	49	+ };
	50	+
	51	+ let paramsFetch = {};
	52	+
	53	+ if ( 0 !== parseInt( lpData.user_id ) ) {
	54	+ paramsFetch = {
	55	+ headers: {
	56	+ 'X-WP-Nonce': lpData.nonce,
	57	+ },
	58	+ };
	59	+ }
	60	+
	61	+ lpFetchAPI( url, paramsFetch, callBack );
	62	+ };
	63	+
	64	+ if ( 'IntersectionObserver' in window ) {
	65	+ const eleObserver = new IntersectionObserver( ( entries, observer ) => {
	66	+ entries.forEach( ( entry ) => {
	67	+ if ( entry.isIntersecting ) {
	68	+ const ele = entry.target;
	69	+
	70	+ const params = ele.parentNode.querySelector( '.lp_profile_tab_input_param' );
	71	+ const data = { ...JSON.parse( params.value ), status: ele.dataset.tab || '' };
	72	+
	73	+ getResponse( ele, data );
	74	+
	75	+ eleObserver.unobserve( ele );
	76	+ }
	77	+ } );
	78	+ } );
	79	+
	80	+ [ ...elements ].map( ( ele ) => {
	81	+ if ( ele.dataset.tab !== 'all' ) {
	82	+ eleObserver.observe( ele );
	83	+ } else {
	84	+ const params = ele.parentNode.querySelector( '.lp_profile_tab_input_param' );
	85	+ const data = { ...JSON.parse( params.value ), status: ele.dataset.tab === 'all' ? '' : ele.dataset.tab || '' };
	86	+
	87	+ getResponse( ele, data );
	88	+ }
	89	+ } );
	90	+ }
	91	+
	92	+ const changeFilter = () => {
	93	+ const tabs = document.querySelectorAll( '.learn-press-course-tab-filters' );
	94	+
	95	+ tabs.forEach( ( tab ) => {
	96	+ const filters = tab.querySelectorAll( '.learn-press-filters a' );
	97	+
	98	+ filters.forEach( ( filter ) => {
	99	+ filter.addEventListener( 'click', ( e ) => {
	100	+ e.preventDefault();
	101	+
	102	+ const tabName = filter.dataset.tab;
	103	+
	104	+ [ ...filters ].map( ( ele ) => {
	105	+ ele.classList.remove( 'active' );
	106	+ } );
	107	+
	108	+ filter.classList.add( 'active' );
	109	+
	110	+ [ ...tab.querySelectorAll( '.learn-press-course-tab__filter__content' ) ].map( ( ele ) => {
	111	+ ele.style.display = 'none';
	112	+
	113	+ if ( ele.dataset.tab === tabName ) {
	114	+ ele.style.display = '';
	115	+ }
	116	+ } );
	117	+ } );
	118	+ } );
	119	+ } );
	120	+ };
	121	+
	122	+ changeFilter();
	123	+
	124	+ const viewMore = ( ele, dataset ) => {
	125	+ const viewMoreEle = ele.querySelector( 'button[data-paged]' );
	126	+
	127	+ if ( viewMoreEle ) {
	128	+ viewMoreEle.addEventListener( 'click', ( e ) => {
	129	+ e.preventDefault();
	130	+
	131	+ const paged = viewMoreEle && viewMoreEle.dataset.paged;
	132	+
	133	+ viewMoreEle.classList.add( 'loading' );
	134	+
	135	+ const element = dataset.layout === 'list' ? '.lp_profile_course_progress' : '.learn-press-courses';
	136	+
	137	+ getResponse( ele.querySelector( element ), { ...dataset, ...{ paged } }, true, viewMoreEle );
	138	+ } );
	139	+ }
	140	+ };
	141	+};
	142	+export default courseTab;