← All changes | assets/src/apps/js/frontend/single-curriculum/skeleton.js +196 -67 4.1.6.9 → 4.4.10 View file →

		@@ -1,14 +1,33 @@
1		-
2	1	// Rest API load content in Tab Curriculum - Nhamdv.
3	2	import { addQueryArgs } from '@wordpress/url';
4		-import apiFetch from '@wordpress/api-fetch';
	3	+//import apiFetch from '@wordpress/api-fetch';
5	4	import scrollToItemCurrent from './scrolltoitem';
6	5	import { searchCourseContent } from './components/search';
7	6
8	7	export default function courseCurriculumSkeleton( courseID = '' ) {
	8	+ let idItemViewing = 0;
	9	+ const elItemViewing = document.querySelector( '.viewing-course-item' );
	10	+ if ( elItemViewing ) {
	11	+ const regex = new RegExp( '^viewing-course-item-([0-9].*)' );
	12	+ const classList = elItemViewing.classList;
	13	+
	14	+ classList.forEach( function( className ) {
	15	+ const compare = regex.exec( className );
	16	+
	17	+ if ( compare ) {
	18	+ idItemViewing = compare[ 1 ];
	19	+ return false;
	20	+ }
	21	+ } );
	22	+ }
	23	+
	24	+ let isLoadingItems = false;
	25	+ let isLoadingSections = false;
9	26	const Sekeleton = () => {
10		- const elementCurriculum = document.querySelector( '.learnpress-course-curriculum' );
	27	+ const elementCurriculum = document.querySelector(
	28	+ '.learnpress-course-curriculum'
	29	+ );
11	30
12	31	if ( ! elementCurriculum ) {
13	32	return;
14	33	}
		@@ -22,47 +41,76 @@
22	41	const sectionID = ele.dataset.section;
23	42
24	43	try {
25	44	const page = 1;
26		- const response = await apiFetch( {
27		- path: addQueryArgs( 'lp/v1/lazy-load/course-curriculum', {
28		- courseId: courseID || lpGlobalSettings.post_id || '',
29		- page,
30		- sectionID: sectionID || '',
31		- } ),
32		- method: 'GET',
	45	+ let url = lpData.lp_rest_url + 'lp/v1/lazy-load/course-curriculum/';
	46	+ url = addQueryArgs( url, {
	47	+ courseId: courseID || lpGlobalSettings.post_id || '',
	48	+ page,
	49	+ sectionID: sectionID || '',
	50	+ idItemViewing,
33	51	} );
	52	+ let paramsFetch = {};
	53	+ if ( 0 !== parseInt( lpData.user_id ) ) {
	54	+ paramsFetch = {
	55	+ headers: {
	56	+ 'X-WP-Nonce': lpData.nonce,
	57	+ },
	58	+ };
	59	+ }
34	60
	61	+ let response = await fetch( url, { method: 'GET', ...paramsFetch } );
	62	+ response = await response.json();
	63	+
35	64	const { data, status, message } = response;
36		- let section_ids = data.section_ids;
	65	+ const section_ids = data.section_ids;
37	66
38	67	if ( status === 'error' ) {
39	68	throw new Error( message || 'Error' );
40	69	}
41	70
42		- let returnData = data.content;
43		- if ( undefined === returnData ) { // For old Eduma <= 4.6.0
44		- returnData = data;
45		- section_ids = response.section_ids;
46		- }
	71	+ const returnData = data.content;
47	72
48	73	if ( sectionID ) {
49	74	if ( section_ids && ! section_ids.includes( sectionID ) ) {
50		- const response2 = await getResponsive( '', page + 1, sectionID );
	75	+ const response2 = await getResponsive(
	76	+ '',
	77	+ page + 1,
	78	+ sectionID
	79	+ );
51	80
52	81	if ( response2 ) {
53	82	const { data2, pages2, page2 } = response2;
54	83
55		- await parseContentItems( { ele, returnData, sectionID, itemID, data2, pages2, page2 } );
	84	+ await parseContentItems( {
	85	+ ele,
	86	+ returnData,
	87	+ sectionID,
	88	+ itemID,
	89	+ data2,
	90	+ pages2,
	91	+ page2,
	92	+ } );
56	93	}
57	94	} else {
58		- await parseContentItems( { ele, returnData, sectionID, itemID } );
	95	+ await parseContentItems( {
	96	+ ele,
	97	+ returnData,
	98	+ sectionID,
	99	+ itemID,
	100	+ } );
59	101	}
60		- } else {
	102	+ } else {
61	103	returnData && ele.insertAdjacentHTML( 'beforeend', returnData );
62	104	}
63	105	} catch ( error ) {
64		- ele.insertAdjacentHTML( 'beforeend', `<div class="lp-ajax-message error" style="display:block">${ error.message || 'Error: Query lp/v1/lazy-load/course-curriculum' }</div>` );
	106	+ ele.insertAdjacentHTML(
	107	+ 'beforeend',
	108	+ `<div class="lp-ajax-message error" style="display:block">${
	109	+ error.message ||
	110	+ 'Error: Query lp/v1/lazy-load/course-curriculum'
	111	+ }</div>`
	112	+ );
65	113	}
66	114
67	115	skeleton && skeleton.remove();
68	116
		@@ -68,9 +116,17 @@
68	116
69	117	searchCourseContent();
70	118	};
71	119
72		- const parseContentItems = async ( { ele, returnData, sectionID, itemID, data2, pages2, page2 } ) => {
	120	+ const parseContentItems = async ( {
	121	+ ele,
	122	+ returnData,
	123	+ sectionID,
	124	+ itemID,
	125	+ data2,
	126	+ pages2,
	127	+ page2,
	128	+ } ) => {
73	129	const parser = new DOMParser();
74	130	const doc = parser.parseFromString( returnData, 'text/html' );
75	131
76	132	if ( data2 ) {
		@@ -94,12 +150,19 @@
94	150	if ( section ) {
95	151	const items = section.querySelectorAll( '.course-item' );
96	152	const item_ids = [ ...items ].map( ( item ) => item.dataset.id );
97	153	const sectionContent = section.querySelector( '.section-content' );
98		- const itemLoadMore = section.querySelector( '.section-item__loadmore' );
	154	+ const itemLoadMore = section.querySelector(
	155	+ '.section-item__loadmore'
	156	+ );
99	157
100	158	if ( itemID && ! item_ids.includes( itemID ) ) {
101		- const responseItem = await getResponsiveItem( '', 2, sectionID, itemID );
	159	+ const responseItem = await getResponsiveItem(
	160	+ '',
	161	+ 2,
	162	+ sectionID,
	163	+ itemID
	164	+ );
102	165
103	166	const { data3, pages3, paged3, page } = responseItem;
104	167
105	168	if ( pages3 <= paged3 || pages3 <= page ) {
		@@ -119,16 +182,25 @@
119	182	scrollToItemCurrent.init();
120	183	};
121	184
122	185	const getResponsiveItem = async ( returnData, paged, sectionID, itemID ) => {
123		- const response = await apiFetch( {
124		- path: addQueryArgs( 'lp/v1/lazy-load/course-curriculum-items', {
125		- sectionId: sectionID || '',
126		- page: paged,
127		- } ),
128		- method: 'GET',
	186	+ let url = lpData.lp_rest_url + 'lp/v1/lazy-load/course-curriculum-items/';
	187	+ url = addQueryArgs( url, {
	188	+ sectionId: sectionID || '',
	189	+ page: paged,
129	190	} );
	191	+ let paramsFetch = {};
	192	+ if ( 0 !== parseInt( lpData.user_id ) ) {
	193	+ paramsFetch = {
	194	+ headers: {
	195	+ 'X-WP-Nonce': lpData.nonce,
	196	+ },
	197	+ };
	198	+ }
130	199
	200	+ let response = await fetch( url, { method: 'GET', ...paramsFetch } );
	201	+ response = await response.json();
	202	+
131	203	const { data, status, pages, message } = response;
132	204
133	205	const { page } = data;
134	206
		@@ -134,69 +206,98 @@
134	206
135	207	let item_ids;
136	208
137	209	if ( status === 'success' ) {
138		- let dataTmp = data.content;
	210	+ const dataTmp = data.content;
139	211	item_ids = data.item_ids;
140	212
141		- if ( undefined === dataTmp ) { // For old Eduma <= 4.6.0
142		- dataTmp = data;
143		- item_ids = response.item_ids;
144		- }
145		-
146	213	returnData += dataTmp;
147	214
148	215	if ( sectionID && item_ids && itemID && ! item_ids.includes( itemID ) ) {
149		- return getResponsiveItem( returnData, paged + 1, sectionID, itemID );
	216	+ return getResponsiveItem(
	217	+ returnData,
	218	+ paged + 1,
	219	+ sectionID,
	220	+ itemID
	221	+ );
150	222	}
151	223	}
152	224
153		- return { data3: returnData, pages3: pages || data.pages, status3: status, message3: message, page: page || 0 };
	225	+ isLoadingItems = false;
	226	+
	227	+ return {
	228	+ data3: returnData,
	229	+ pages3: pages || data.pages,
	230	+ status3: status,
	231	+ message3: message,
	232	+ page: page || 0,
	233	+ };
154	234	};
155	235
156	236	const getResponsive = async ( returnData, page, sectionID ) => {
157		- const response = await apiFetch( {
158		- path: addQueryArgs( 'lp/v1/lazy-load/course-curriculum', {
159		- courseId: courseID || lpGlobalSettings.post_id || '',
160		- page,
161		- sectionID: sectionID || '',
162		- loadMore: true,
163		- } ),
164		- method: 'GET',
	237	+ let url = lpData.lp_rest_url + 'lp/v1/lazy-load/course-curriculum/';
	238	+ url = addQueryArgs( url, {
	239	+ courseId: courseID || lpGlobalSettings.post_id || '',
	240	+ page,
	241	+ sectionID: sectionID || '',
	242	+ loadMore: true,
165	243	} );
	244	+ let paramsFetch = {};
	245	+ if ( 0 !== parseInt( lpData.user_id ) ) {
	246	+ paramsFetch = {
	247	+ headers: {
	248	+ 'X-WP-Nonce': lpData.nonce,
	249	+ },
	250	+ };
	251	+ }
166	252
	253	+ let response = await fetch( url, { method: 'GET', ...paramsFetch } );
	254	+ response = await response.json();
	255	+
167	256	const { data, status, message } = response;
168	257
169		- let returnDataTmp = data.content;
170		- let section_ids = data.section_ids;
171		- let pages = data.pages;
172		- if ( undefined === returnDataTmp ) { // For old Eduma <= 4.6.0
173		- returnDataTmp = data;
174		- section_ids = response.section_ids;
175		- pages = response.pages;
176		- }
	258	+ const returnDataTmp = data.content;
	259	+ const section_ids = data.section_ids;
	260	+ const pages = data.pages;
177	261
178	262	if ( status === 'success' ) {
179	263	returnData += returnDataTmp;
180	264
181		- if ( sectionID && section_ids && section_ids.length > 0 && ! section_ids.includes( sectionID ) ) {
	265	+ if (
	266	+ sectionID &&
	267	+ section_ids &&
	268	+ section_ids.length > 0 &&
	269	+ ! section_ids.includes( sectionID )
	270	+ ) {
182	271	return getResponsive( returnData, page + 1, sectionID );
183	272	}
184	273	}
185	274
186		- return { data2: returnData, pages2: pages || data.pages, page2: page, status2: status, message2: message };
	275	+ isLoadingSections = false;
	276	+
	277	+ return {
	278	+ data2: returnData,
	279	+ pages2: pages || data.pages,
	280	+ page2: page,
	281	+ status2: status,
	282	+ message2: message,
	283	+ };
187	284	};
188	285
189	286	Sekeleton();
190	287
191	288	document.addEventListener( 'click', ( e ) => {
192		- const sectionBtns = document.querySelectorAll( '.section-item__loadmore' );
	289	+ const sectionBtns = document.querySelectorAll(
	290	+ '.section-item__loadmore'
	291	+ );
193	292
194	293	[ ...sectionBtns ].map( async ( sectionBtn ) => {
195		- if ( sectionBtn.contains( e.target ) ) {
	294	+ if ( sectionBtn.contains( e.target ) && ! isLoadingItems ) {
	295	+ isLoadingItems = true;
196	296	const sectionItem = sectionBtn.parentNode;
197	297	const sectionId = sectionItem.getAttribute( 'data-section-id' );
198		- const sectionContent = sectionItem.querySelector( '.section-content' );
	298	+ const sectionContent =
	299	+ sectionItem.querySelector( '.section-content' );
199	300
200	301	const paged = parseInt( sectionBtn.dataset.page );
201	302
202	303	sectionBtn.classList.add( 'loading' );
		@@ -201,9 +302,14 @@
201	302
202	303	sectionBtn.classList.add( 'loading' );
203	304
204	305	try {
205		- const response = await getResponsiveItem( '', paged + 1, sectionId, '' );
	306	+ const response = await getResponsiveItem(
	307	+ '',
	308	+ paged + 1,
	309	+ sectionId,
	310	+ ''
	311	+ );
206	312
207	313	const { data3, pages3, status3, message3 } = response;
208	314
209	315	if ( status3 === 'error' ) {
		@@ -217,9 +323,15 @@
217	323	}
218	324
219	325	sectionContent.insertAdjacentHTML( 'beforeend', data3 );
220	326	} catch ( e ) {
221		- sectionContent.insertAdjacentHTML( 'beforeend', `<div class="lp-ajax-message error" style="display:block">${ e.message || 'Error: Query lp/v1/lazy-load/course-curriculum' }</div>` );
	327	+ sectionContent.insertAdjacentHTML(
	328	+ 'beforeend',
	329	+ `<div class="lp-ajax-message error" style="display:block">${
	330	+ e.message ||
	331	+ 'Error: Query lp/v1/lazy-load/course-curriculum'
	332	+ }</div>`
	333	+ );
222	334	}
223	335
224	336	sectionBtn.classList.remove( 'loading' );
225	337
		@@ -227,21 +339,31 @@
227	339	}
228	340	} );
229	341
230	342	// Load more Sections
231		- const moreSections = document.querySelectorAll( '.curriculum-more__button' );
	343	+ const moreSections = document.querySelectorAll(
	344	+ '.curriculum-more__button'
	345	+ );
232	346
233	347	[ ...moreSections ].map( async ( moreSection ) => {
234		- if ( moreSection.contains( e.target ) ) {
	348	+ if ( moreSection.contains( e.target ) && ! isLoadingSections ) {
	349	+ isLoadingSections = true;
235	350	const paged = parseInt( moreSection.dataset.page );
236	351
237		- const sections = moreSection.parentNode.parentNode.querySelector( '.curriculum-sections' );
	352	+ const sections =
	353	+ moreSection.parentNode.parentNode.querySelector(
	354	+ '.curriculum-sections'
	355	+ );
238	356
239	357	if ( paged && sections ) {
240	358	moreSection.classList.add( 'loading' );
241	359
242	360	try {
243		- const response2 = await getResponsive( '', paged + 1, '' );
	361	+ const response2 = await getResponsive(
	362	+ '',
	363	+ paged + 1,
	364	+ ''
	365	+ );
244	366
245	367	const { data2, pages2, status2, message2 } = response2;
246	368
247	369	if ( status2 === 'error' ) {
		@@ -255,9 +377,15 @@
255	377	}
256	378
257	379	sections.insertAdjacentHTML( 'beforeend', data2 );
258	380	} catch ( e ) {
259		- sections.insertAdjacentHTML( 'beforeend', `<div class="lp-ajax-message error" style="display:block">${ e.message || 'Error: Query lp/v1/lazy-load/course-curriculum' }</div>` );
	381	+ sections.insertAdjacentHTML(
	382	+ 'beforeend',
	383	+ `<div class="lp-ajax-message error" style="display:block">${
	384	+ e.message ||
	385	+ 'Error: Query lp/v1/lazy-load/course-curriculum'
	386	+ }</div>`
	387	+ );
260	388	}
261	389
262	390	moreSection.classList.remove( 'loading' );
263	391
		@@ -273,9 +401,10 @@
273	401	[ ...sections ].map( ( section ) => {
274	402	if ( section.contains( e.target ) ) {
275	403	const toggle = section.querySelector( '.section-left' );
276	404
277		- toggle.contains( e.target ) && section.classList.toggle( 'closed' );
	405	+ toggle.contains( e.target ) &&
	406	+ section.classList.toggle( 'closed' );
278	407	}
279	408	} );
280	409	}
281	410	} );