← All changes | assets/src/apps/js/utils/utils.js +228 -228 4.3.9 → 4.4.8 View file →

		@@ -1,228 +1,228 @@
1		-/**
2		- * Utils functions
3		- *
4		- * @param url
5		- * @param data
6		- * @param functions
7		- * @since 4.2.5.1
8		- * @version 1.0.3
9		- */
10		-const lpClassName = {
11		- hidden: 'lp-hidden',
12		- loading: 'loading',
13		- elCollapse: 'lp-collapse',
14		- elSectionToggle: '.lp-section-toggle',
15		- elTriggerToggle: '.lp-trigger-toggle',
16		-};
17		-
18		-const lpFetchAPI = ( url, data = {}, functions = {} ) => {
19		- if ( 'function' === typeof functions.before ) {
20		- functions.before();
21		- }
22		-
23		- fetch( url, { method: 'GET', ...data } )
24		- .then( ( response ) => response.json() )
25		- .then( ( response ) => {
26		- if ( 'function' === typeof functions.success ) {
27		- functions.success( response );
28		- }
29		- } )
30		- .catch( ( err ) => {
31		- if ( 'function' === typeof functions.error ) {
32		- functions.error( err );
33		- }
34		- } )
35		- .finally( () => {
36		- if ( 'function' === typeof functions.completed ) {
37		- functions.completed();
38		- }
39		- } );
40		-};
41		-
42		-/**
43		- * Get current URL without params.
44		- *
45		- * @since 4.2.5.1
46		- */
47		-const lpGetCurrentURLNoParam = () => {
48		- let currentUrl = window.location.href;
49		- const hasParams = currentUrl.includes( '?' );
50		- if ( hasParams ) {
51		- currentUrl = currentUrl.split( '?' )[ 0 ];
52		- }
53		-
54		- return currentUrl;
55		-};
56		-
57		-const lpAddQueryArgs = ( endpoint, args ) => {
58		- const url = new URL( endpoint );
59		-
60		- Object.keys( args ).forEach( ( arg ) => {
61		- url.searchParams.set( arg, args[ arg ] );
62		- } );
63		-
64		- return url;
65		-};
66		-
67		-/**
68		- * Listen element viewed.
69		- *
70		- * @param el
71		- * @param callback
72		- * @since 4.2.5.8
73		- */
74		-const listenElementViewed = ( el, callback ) => {
75		- const observerSeeItem = new IntersectionObserver( function ( entries ) {
76		- for ( const entry of entries ) {
77		- if ( entry.isIntersecting ) {
78		- callback( entry );
79		- }
80		- }
81		- } );
82		-
83		- observerSeeItem.observe( el );
84		-};
85		-
86		-/**
87		- * Listen element created.
88		- *
89		- * @param callback
90		- * @since 4.2.5.8
91		- */
92		-const listenElementCreated = ( callback ) => {
93		- const observerCreateItem = new MutationObserver( function ( mutations ) {
94		- mutations.forEach( function ( mutation ) {
95		- if ( mutation.addedNodes ) {
96		- mutation.addedNodes.forEach( function ( node ) {
97		- if ( node.nodeType === 1 ) {
98		- callback( node );
99		- }
100		- } );
101		- }
102		- } );
103		- } );
104		-
105		- observerCreateItem.observe( document, { childList: true, subtree: true } );
106		- // End.
107		-};
108		-
109		-/**
110		- * Listen element created.
111		- *
112		- * @param selector
113		- * @param callback
114		- * @since 4.2.7.1
115		- */
116		-const lpOnElementReady = ( selector, callback ) => {
117		- const element = document.querySelector( selector );
118		- if ( element ) {
119		- callback( element );
120		- return;
121		- }
122		-
123		- const observer = new MutationObserver( ( mutations, obs ) => {
124		- const element = document.querySelector( selector );
125		- if ( element ) {
126		- obs.disconnect();
127		- callback( element );
128		- }
129		- } );
130		-
131		- observer.observe( document.documentElement, {
132		- childList: true,
133		- subtree: true,
134		- } );
135		-};
136		-
137		-// Parse JSON from string with content include LP_AJAX_START.
138		-const lpAjaxParseJsonOld = ( data ) => {
139		- if ( typeof data !== 'string' ) {
140		- return data;
141		- }
142		-
143		- const m = String.raw( { raw: data } ).match( /<-- LP_AJAX_START -->(.*)<-- LP_AJAX_END -->/s );
144		-
145		- try {
146		- if ( m ) {
147		- data = JSON.parse( m[ 1 ].replace( /(?:\r\n|\r|\n)/g, '' ) );
148		- } else {
149		- data = JSON.parse( data );
150		- }
151		- } catch ( e ) {
152		- data = {};
153		- }
154		-
155		- return data;
156		-};
157		-
158		-// status 0: hide, 1: show
159		-const lpShowHideEl = ( el, status = 0 ) => {
160		- if ( ! el ) {
161		- return;
162		- }
163		-
164		- if ( ! status ) {
165		- el.classList.add( lpClassName.hidden );
166		- } else {
167		- el.classList.remove( lpClassName.hidden );
168		- }
169		-};
170		-
171		-// status 0: hide, 1: show
172		-const lpSetLoadingEl = ( el, status ) => {
173		- if ( ! el ) {
174		- return;
175		- }
176		-
177		- if ( ! status ) {
178		- el.classList.remove( lpClassName.loading );
179		- } else {
180		- el.classList.add( lpClassName.loading );
181		- }
182		-};
183		-
184		-// Toggle collapse section
185		-const toggleCollapse = ( e, target, elTriggerClassName = '', elsExclude = [], callback ) => {
186		- if ( ! elTriggerClassName ) {
187		- elTriggerClassName = lpClassName.elTriggerToggle;
188		- }
189		-
190		- // Exclude elements, which should not trigger the collapse toggle
191		- if ( elsExclude && elsExclude.length > 0 ) {
192		- for ( const elExclude of elsExclude ) {
193		- if ( target.closest( elExclude ) ) {
194		- return;
195		- }
196		- }
197		- }
198		-
199		- const elTrigger = target.closest( elTriggerClassName );
200		- if ( ! elTrigger ) {
201		- return;
202		- }
203		-
204		- const elSectionToggle = elTrigger.closest( `${ lpClassName.elSectionToggle }` );
205		- if ( ! elSectionToggle ) {
206		- return;
207		- }
208		-
209		- elSectionToggle.classList.toggle( `${ lpClassName.elCollapse }` );
210		-
211		- if ( 'function' === typeof callback ) {
212		- callback( elSectionToggle );
213		- }
214		-};
215		-
216		-export {
217		- lpFetchAPI,
218		- lpAddQueryArgs,
219		- lpGetCurrentURLNoParam,
220		- listenElementViewed,
221		- listenElementCreated,
222		- lpOnElementReady,
223		- lpAjaxParseJsonOld,
224		- lpShowHideEl,
225		- lpSetLoadingEl,
226		- lpClassName,
227		- toggleCollapse,
228		-};
	1	+/**
	2	+ * Utils functions
	3	+ *
	4	+ * @param url
	5	+ * @param data
	6	+ * @param functions
	7	+ * @since 4.2.5.1
	8	+ * @version 1.0.3
	9	+ */
	10	+const lpClassName = {
	11	+ hidden: 'lp-hidden',
	12	+ loading: 'loading',
	13	+ elCollapse: 'lp-collapse',
	14	+ elSectionToggle: '.lp-section-toggle',
	15	+ elTriggerToggle: '.lp-trigger-toggle',
	16	+};
	17	+
	18	+const lpFetchAPI = ( url, data = {}, functions = {} ) => {
	19	+ if ( 'function' === typeof functions.before ) {
	20	+ functions.before();
	21	+ }
	22	+
	23	+ fetch( url, { method: 'GET', ...data } )
	24	+ .then( ( response ) => response.json() )
	25	+ .then( ( response ) => {
	26	+ if ( 'function' === typeof functions.success ) {
	27	+ functions.success( response );
	28	+ }
	29	+ } )
	30	+ .catch( ( err ) => {
	31	+ if ( 'function' === typeof functions.error ) {
	32	+ functions.error( err );
	33	+ }
	34	+ } )
	35	+ .finally( () => {
	36	+ if ( 'function' === typeof functions.completed ) {
	37	+ functions.completed();
	38	+ }
	39	+ } );
	40	+};
	41	+
	42	+/**
	43	+ * Get current URL without params.
	44	+ *
	45	+ * @since 4.2.5.1
	46	+ */
	47	+const lpGetCurrentURLNoParam = () => {
	48	+ let currentUrl = window.location.href;
	49	+ const hasParams = currentUrl.includes( '?' );
	50	+ if ( hasParams ) {
	51	+ currentUrl = currentUrl.split( '?' )[ 0 ];
	52	+ }
	53	+
	54	+ return currentUrl;
	55	+};
	56	+
	57	+const lpAddQueryArgs = ( endpoint, args ) => {
	58	+ const url = new URL( endpoint );
	59	+
	60	+ Object.keys( args ).forEach( ( arg ) => {
	61	+ url.searchParams.set( arg, args[ arg ] );
	62	+ } );
	63	+
	64	+ return url;
	65	+};
	66	+
	67	+/**
	68	+ * Listen element viewed.
	69	+ *
	70	+ * @param el
	71	+ * @param callback
	72	+ * @since 4.2.5.8
	73	+ */
	74	+const listenElementViewed = ( el, callback ) => {
	75	+ const observerSeeItem = new IntersectionObserver( function ( entries ) {
	76	+ for ( const entry of entries ) {
	77	+ if ( entry.isIntersecting ) {
	78	+ callback( entry );
	79	+ }
	80	+ }
	81	+ } );
	82	+
	83	+ observerSeeItem.observe( el );
	84	+};
	85	+
	86	+/**
	87	+ * Listen element created.
	88	+ *
	89	+ * @param callback
	90	+ * @since 4.2.5.8
	91	+ */
	92	+const listenElementCreated = ( callback ) => {
	93	+ const observerCreateItem = new MutationObserver( function ( mutations ) {
	94	+ mutations.forEach( function ( mutation ) {
	95	+ if ( mutation.addedNodes ) {
	96	+ mutation.addedNodes.forEach( function ( node ) {
	97	+ if ( node.nodeType === 1 ) {
	98	+ callback( node );
	99	+ }
	100	+ } );
	101	+ }
	102	+ } );
	103	+ } );
	104	+
	105	+ observerCreateItem.observe( document, { childList: true, subtree: true } );
	106	+ // End.
	107	+};
	108	+
	109	+/**
	110	+ * Listen element created.
	111	+ *
	112	+ * @param selector
	113	+ * @param callback
	114	+ * @since 4.2.7.1
	115	+ */
	116	+const lpOnElementReady = ( selector, callback ) => {
	117	+ const element = document.querySelector( selector );
	118	+ if ( element ) {
	119	+ callback( element );
	120	+ return;
	121	+ }
	122	+
	123	+ const observer = new MutationObserver( ( mutations, obs ) => {
	124	+ const element = document.querySelector( selector );
	125	+ if ( element ) {
	126	+ obs.disconnect();
	127	+ callback( element );
	128	+ }
	129	+ } );
	130	+
	131	+ observer.observe( document.documentElement, {
	132	+ childList: true,
	133	+ subtree: true,
	134	+ } );
	135	+};
	136	+
	137	+// Parse JSON from string with content include LP_AJAX_START.
	138	+const lpAjaxParseJsonOld = ( data ) => {
	139	+ if ( typeof data !== 'string' ) {
	140	+ return data;
	141	+ }
	142	+
	143	+ const m = String.raw( { raw: data } ).match( /<-- LP_AJAX_START -->(.*)<-- LP_AJAX_END -->/s );
	144	+
	145	+ try {
	146	+ if ( m ) {
	147	+ data = JSON.parse( m[ 1 ].replace( /(?:\r\n|\r|\n)/g, '' ) );
	148	+ } else {
	149	+ data = JSON.parse( data );
	150	+ }
	151	+ } catch ( e ) {
	152	+ data = {};
	153	+ }
	154	+
	155	+ return data;
	156	+};
	157	+
	158	+// status 0: hide, 1: show
	159	+const lpShowHideEl = ( el, status = 0 ) => {
	160	+ if ( ! el ) {
	161	+ return;
	162	+ }
	163	+
	164	+ if ( ! status ) {
	165	+ el.classList.add( lpClassName.hidden );
	166	+ } else {
	167	+ el.classList.remove( lpClassName.hidden );
	168	+ }
	169	+};
	170	+
	171	+// status 0: hide, 1: show
	172	+const lpSetLoadingEl = ( el, status ) => {
	173	+ if ( ! el ) {
	174	+ return;
	175	+ }
	176	+
	177	+ if ( ! status ) {
	178	+ el.classList.remove( lpClassName.loading );
	179	+ } else {
	180	+ el.classList.add( lpClassName.loading );
	181	+ }
	182	+};
	183	+
	184	+// Toggle collapse section
	185	+const toggleCollapse = ( e, target, elTriggerClassName = '', elsExclude = [], callback ) => {
	186	+ if ( ! elTriggerClassName ) {
	187	+ elTriggerClassName = lpClassName.elTriggerToggle;
	188	+ }
	189	+
	190	+ // Exclude elements, which should not trigger the collapse toggle
	191	+ if ( elsExclude && elsExclude.length > 0 ) {
	192	+ for ( const elExclude of elsExclude ) {
	193	+ if ( target.closest( elExclude ) ) {
	194	+ return;
	195	+ }
	196	+ }
	197	+ }
	198	+
	199	+ const elTrigger = target.closest( elTriggerClassName );
	200	+ if ( ! elTrigger ) {
	201	+ return;
	202	+ }
	203	+
	204	+ const elSectionToggle = elTrigger.closest( `${ lpClassName.elSectionToggle }` );
	205	+ if ( ! elSectionToggle ) {
	206	+ return;
	207	+ }
	208	+
	209	+ elSectionToggle.classList.toggle( `${ lpClassName.elCollapse }` );
	210	+
	211	+ if ( 'function' === typeof callback ) {
	212	+ callback( elSectionToggle );
	213	+ }
	214	+};
	215	+
	216	+export {
	217	+ lpFetchAPI,
	218	+ lpAddQueryArgs,
	219	+ lpGetCurrentURLNoParam,
	220	+ listenElementViewed,
	221	+ listenElementCreated,
	222	+ lpOnElementReady,
	223	+ lpAjaxParseJsonOld,
	224	+ lpShowHideEl,
	225	+ lpSetLoadingEl,
	226	+ lpClassName,
	227	+ toggleCollapse,
	228	+};