← All changes | assets/src/apps/js/frontend/single-curriculum/skeleton.js +186 -65 4.1.7.3 → 4.4.10 View file →

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