← All changes | assets/src/js/admin/addons.js +341 -341 4.3.8 → 4.4.8 View file →

		@@ -1,341 +1,341 @@
1		-/**
2		- * Script handle admin notices.
3		- *
4		- * @since 4.1.7.3.2
5		- * @version 1.0.1
6		- */
7		-import API from '../api';
8		-let elAddonsPage;
9		-let dataHtml;
10		-let dataAddons;
11		-let elLPAddons;
12		-const queryString = window.location.search;
13		-const urlParams = new URLSearchParams( queryString );
14		-const tab = urlParams.get( 'tab' );
15		-let elNotifyActionWrapper;
16		-const isHandling = [];
17		-
18		-// API get list addons.
19		-const getAddons = ( set = '' ) => {
20		- const params = tab ? `?tab=${ tab }` : `?${ set }`;
21		- fetch( API.admin.apiAddons + params, {
22		- method: 'GET',
23		- headers: {
24		- 'X-WP-Nonce': lpDataAdmin.nonce,
25		- },
26		- } ).then( ( res ) =>
27		- res.json()
28		- ).then( ( res ) => {
29		- // console.log(data);
30		- const { status, message, data } = res;
31		- if ( status === 'success' ) {
32		- dataHtml = data.html;
33		- dataAddons = data.addons;
34		- } else {
35		- dataHtml = message;
36		- }
37		- } ).catch( ( err ) => {
38		- console.log( err );
39		- } );
40		-};
41		-// API send action install, update, activate, deactivate.
42		-const addonsAction = ( data, callBack ) => {
43		- const addonSlug = data.addon.slug;
44		-
45		- if ( isHandling.indexOf( addonSlug ) !== -1 ) {
46		- return;
47		- }
48		- isHandling.push( addonSlug );
49		-
50		- fetch( API.admin.apiAddonAction, {
51		- method: 'POST',
52		- headers: {
53		- 'Content-Type': 'application/json',
54		- 'X-WP-Nonce': lpDataAdmin.nonce,
55		- },
56		- body: JSON.stringify( { ...data } ),
57		- } ).then( ( res ) =>
58		- res.json()
59		- ).then( ( res ) => {
60		- const indexAddonHanding = isHandling.indexOf( addonSlug );
61		- if ( indexAddonHanding !== -1 ) {
62		- isHandling.splice( indexAddonHanding, 1 );
63		- }
64		-
65		- const { status, message, data } = res;
66		-
67		- if ( callBack ) {
68		- callBack( status, message, data );
69		- }
70		-
71		- handleNotify( status, message );
72		- } ).catch( ( err ) => {
73		- handleNotify( 'error', `error js: ${ err }` );
74		- console.log( err );
75		- } );
76		-};
77		-// Show notify.
78		-const handleNotify = ( status, message ) => {
79		- const elNotifyAction = elNotifyActionWrapper.querySelector( '.lp-notify-action' );
80		- const elNotifyActionNew = elNotifyAction.cloneNode( true );
81		- elNotifyActionNew.classList.remove( 'clone' );
82		- elNotifyActionWrapper.insertBefore( elNotifyActionNew, elNotifyActionWrapper[ 0 ] );
83		- const elSuccess = elNotifyActionNew.querySelector( `.${ elNotifyActionNew.classList.value }__success` );
84		- const elFailed = elNotifyActionNew.querySelector( `.${ elNotifyActionNew.classList.value }__error` );
85		-
86		- if ( status === 'success' ) {
87		- elSuccess.classList.add( 'show' );
88		- elSuccess.querySelector( '.message' ).innerHTML = message;
89		- } else {
90		- elFailed.classList.add( 'show' );
91		- elFailed.querySelector( '.message' ).innerHTML = message;
92		- }
93		-
94		- elNotifyActionWrapper.classList.add( 'show' );
95		- setTimeout( () => {
96		- elNotifyActionNew.remove();
97		-
98		- const elNotifyAction = elNotifyActionWrapper.querySelectorAll( '.lp-notify-action' );
99		- if ( elNotifyAction.length === 1 ) {
100		- elNotifyActionWrapper.classList.remove( 'show' );
101		- }
102		- }, status === 'success' ? 3000 : 4000 );
103		-};
104		-// Get addons when js loaded.
105		-getAddons();
106		-// Search Addons.
107		-const searchAddons = ( name ) => {
108		- const elAddonItems = elAddonsPage.querySelectorAll( '.lp-addon-item' );
109		- let totalItems = 0;
110		-
111		- elAddonItems.forEach( ( elAddonItem ) => {
112		- const addonName = elAddonItem.querySelector( 'a' ).textContent;
113		- if ( elAddonItem.classList.contains( 'hide' ) ) {
114		- return;
115		- }
116		-
117		- if ( addonName.toLowerCase().includes( name.toLowerCase() ) ) {
118		- elAddonItem.classList.remove( 'search-not-found' );
119		- totalItems++;
120		- } else {
121		- elAddonItem.classList.add( 'search-not-found' );
122		- }
123		- } );
124		-
125		- setGridItems( totalItems );
126		-};
127		-// Set grid style items.
128		-const setGridItems = ( totalItems ) => {
129		- if ( totalItems < 4 ) {
130		- elLPAddons.classList.add( 'max-3-items' );
131		- } else {
132		- elLPAddons.classList.remove( 'max-3-items' );
133		- }
134		-};
135		-// Check element loaded and data API returned.
136		-const loadElData = setInterval( () => {
137		- if ( ! elAddonsPage || ! elNotifyActionWrapper ) {
138		- elAddonsPage = document.querySelector( '.lp-addons-page' );
139		- elNotifyActionWrapper = document.querySelector( '.lp-notify-action-wrapper' );
140		- } else if ( dataHtml && elAddonsPage && elNotifyActionWrapper ) {
141		- elAddonsPage.innerHTML = dataHtml;
142		- elLPAddons = elAddonsPage.querySelector( '#lp-addons' );
143		- const elNavTabWrapper = document.querySelector( '.lp-nav-tab-wrapper' );
144		- if ( ! elNavTabWrapper ) {
145		- clearInterval( loadElData );
146		- return;
147		- }
148		-
149		- const elNavTabWrapperClone = elNavTabWrapper.cloneNode( true );
150		- elAddonsPage.insertBefore( elNavTabWrapperClone, elAddonsPage.children[ 0 ] );
151		- elNavTabWrapperClone.style.display = 'flex';
152		- elNavTabWrapper.remove();
153		- const elNavActive = elNavTabWrapperClone.querySelector( '.nav-tab.nav-tab-active span' );
154		- setGridItems( parseInt( elNavActive.textContent ) );
155		-
156		- clearInterval( loadElData );
157		- }
158		-}, 1 );
159		-
160		-document.addEventListener( 'DOMContentLoaded', ( e ) => {
161		-} );
162		-
163		-/*** Events ***/
164		-document.addEventListener( 'click', ( e ) => {
165		- let el = e.target;
166		- const tagName = el.tagName.toLowerCase();
167		- if ( tagName === 'span' ) {
168		- e.preventDefault();
169		- const elBtnAction = el.closest( '.btn-addon-action' );
170		- if ( elBtnAction ) {
171		- elBtnAction.click();
172		- }
173		- }
174		-
175		- // Events actions: activate, deactivate.
176		- /*if ( el.classList.contains( 'lp-toggle-switch-label' ) ) {
177		- //e.preventDefault();
178		-
179		- const elAddonItem = el.closest( '.lp-addon-item' );
180		- const idLabel = el.getAttribute( 'for' );
181		- const elInput = document.querySelector( `#${ idLabel }` );
182		- const action = elInput.getAttribute( 'data-action' );
183		- const addon = dataAddons[ elAddonItem.dataset.slug ];
184		- const addonSlug = addon.slug;
185		- const parent = el.closest( '.lp-toggle-switch' );
186		- const label = parent.querySelector( `label[for=${ idLabel }]` );
187		- const dashicons = parent.querySelector( '.dashicons-update' );
188		- dashicons.style.display = 'inline-block';
189		- label.style.display = 'none';
190		- const data = { action, addon };
191		- addonsAction( data, function( status, message, data ) {
192		- const elAddon = document.querySelector( `#${ addonSlug }` );
193		- if ( elAddon ) {
194		- const parent = elAddon.closest( '.lp-toggle-switch' );
195		- if ( parent ) {
196		- const dashicons = parent.querySelector( '.dashicons-update' );
197		- dashicons.style.display = 'none';
198		- if ( action === 'deactivate' ) {
199		- elAddon.setAttribute( 'data-action', 'activate' );
200		- } else if ( action === 'activate' ) {
201		- elAddon.setAttribute( 'data-action', 'deactivate' );
202		- }
203		- const label = parent.querySelector( `label[for=${ addonSlug }]` );
204		- label.style.display = 'inline-flex';
205		- }
206		- }
207		-
208		- if ( status === 'success' ) {
209		- if ( action === 'deactivate' ) {
210		- elAddonItem.classList.remove( 'activated' );
211		- }
212		- if ( action === 'activate' ) {
213		- elAddonItem.classList.add( 'activated' );
214		- }
215		- }
216		- } );
217		- }*/
218		-
219		- // Events actions: install, update, delete.
220		- if ( el.closest( '.btn-addon-action' ) ) {
221		- el = el.closest( '.btn-addon-action' );
222		- e.preventDefault();
223		- el.classList.add( 'handling' );
224		- let purchaseCode = '';
225		- const elAddonItem = el.closest( '.lp-addon-item' );
226		- const addon = dataAddons[ elAddonItem.dataset.slug ];
227		- const action = el.dataset.action;
228		- const elItemPurchase = elAddonItem.querySelector( '.lp-addon-item__purchase' );
229		- //const elToggleSwitchInput = elAddonItem.querySelector( '.lp-toggle-switch-input' );
230		-
231		- if ( action === 'purchase' ) {
232		- elItemPurchase.style.display = 'block';
233		- elItemPurchase.querySelector( '.purchase-install' ).style.display = 'flex';
234		- return;
235		- } else if ( action === 'update-purchase-code' ) {
236		- elItemPurchase.querySelector( '.purchase-update' ).style.display = 'flex';
237		- elItemPurchase.style.display = 'block';
238		- return;
239		- } else if ( action === 'buy' ) {
240		- const link = el.dataset.link;
241		- window.open( link, '_blank' );
242		- return;
243		- } else if ( action === 'cancel' ) {
244		- elItemPurchase.style.display = 'none';
245		- return;
246		- } else if ( action === 'install' ) {
247		- if ( el.dataset.link ) {
248		- el.classList.remove( 'handling' );
249		- const link = el.dataset.link;
250		- window.open( link, '_blank' );
251		- return;
252		- }
253		- }
254		-
255		- // Send request to server.
256		- if ( elItemPurchase ) {
257		- purchaseCode = elItemPurchase.querySelector( 'input[name=purchase-code]' ).value;
258		- }
259		-
260		- const data = { purchase_code: purchaseCode, action, addon };
261		- addonsAction( data, function( status, message, data ) {
262		- if ( status === 'success' ) {
263		- if ( action === 'install' ) {
264		- elAddonItem.classList.add( 'installed', 'activated' );
265		- elAddonItem.classList.remove( 'not_installed' );
266		- elItemPurchase.style.display = 'none';
267		- /*elToggleSwitchInput.setAttribute( 'checked', 'checked' );
268		- elToggleSwitchInput.setAttribute( 'data-action', 'deactivate' );*/
269		- const elNavInstalled = document.querySelector( '.nav-tab[data-tab=installed] span' );
270		- elNavInstalled.textContent = parseInt( elNavInstalled.textContent ) + 1;
271		- const elNavNoInstalled = document.querySelector( '.nav-tab[data-tab=not_installed] span' );
272		- elNavNoInstalled.textContent = parseInt( elNavNoInstalled.textContent ) - 1;
273		- elItemPurchase.querySelector( '.purchase-install' ).style.display = 'none';
274		- elItemPurchase.querySelector( '.purchase-update' ).querySelector( '.enter-purchase-code' ).value = purchaseCode;
275		- } else if ( action === 'update' ) {
276		- const elAddonVersionCurrent = elAddonItem.querySelector( '.addon-version-current' );
277		- elAddonVersionCurrent.innerHTML = addon.version;
278		- elAddonItem.classList.remove( 'update' );
279		- } else if ( action === 'activate' ) {
280		- elAddonItem.classList.add( 'activated' );
281		- } else if ( action === 'deactivate' ) {
282		- elAddonItem.classList.remove( 'activated' );
283		- } else if ( action === 'update-purchase' ) {
284		- elItemPurchase.style.display = 'none';
285		- }
286		- }
287		-
288		- el.classList.remove( 'handling' );
289		- } );
290		- }
291		-
292		- if ( el.classList.contains( 'nav-tab' ) ) {
293		- e.preventDefault();
294		- const elTabs = document.querySelectorAll( '.nav-tab' );
295		- elTabs.forEach( function( elTab ) {
296		- elTab.classList.remove( 'nav-tab-active' );
297		- } );
298		- el.classList.add( 'nav-tab-active' );
299		- const tabName = el.dataset.tab;
300		- const elAddonItems = elAddonsPage.querySelectorAll( '.lp-addon-item' );
301		- const elSearch = elAddonsPage.querySelector( '#lp-search-addons__input' );
302		- elSearch.value = '';
303		-
304		- urlParams.set( 'tab', tabName );
305		- window.history.pushState( {}, '', `${ window.location.pathname }?${ urlParams.toString() }` );
306		- let totalItems = 0;
307		- elAddonItems.forEach( ( elAddonItem ) => {
308		- elAddonItem.classList.remove( 'search-not-found' );
309		- if ( 'all' === tabName || elAddonItem.classList.contains( tabName ) ) {
310		- elAddonItem.classList.remove( 'hide' );
311		- totalItems++;
312		- } else {
313		- elAddonItem.classList.add( 'hide' );
314		- }
315		- } );
316		-
317		- setGridItems( totalItems );
318		- }
319		-} );
320		-
321		-/*** Event search addons. ***/
322		-document.addEventListener( 'input', ( e ) => {
323		- const el = e.target;
324		-
325		- if ( 'lp-search-addons__input' === el.id ) {
326		- const keyword = el.value;
327		- searchAddons( keyword );
328		- }
329		-
330		- // Events change input purchase code.
331		- if ( el.classList.contains( 'enter-purchase-code' ) ) {
332		- e.preventDefault();
333		- const purchaseCode = el.value;
334		- const elItemPurchase = el.closest( '.lp-addon-item__purchase' );
335		-
336		- if ( elItemPurchase ) {
337		- const input = elItemPurchase.querySelector( 'input[name=purchase-code]' );
338		- input.value = purchaseCode;
339		- }
340		- }
341		-} );
	1	+/**
	2	+ * Script handle admin notices.
	3	+ *
	4	+ * @since 4.1.7.3.2
	5	+ * @version 1.0.1
	6	+ */
	7	+import API from '../api';
	8	+let elAddonsPage;
	9	+let dataHtml;
	10	+let dataAddons;
	11	+let elLPAddons;
	12	+const queryString = window.location.search;
	13	+const urlParams = new URLSearchParams( queryString );
	14	+const tab = urlParams.get( 'tab' );
	15	+let elNotifyActionWrapper;
	16	+const isHandling = [];
	17	+
	18	+// API get list addons.
	19	+const getAddons = ( set = '' ) => {
	20	+ const params = tab ? `?tab=${ tab }` : `?${ set }`;
	21	+ fetch( API.admin.apiAddons + params, {
	22	+ method: 'GET',
	23	+ headers: {
	24	+ 'X-WP-Nonce': lpDataAdmin.nonce,
	25	+ },
	26	+ } ).then( ( res ) =>
	27	+ res.json()
	28	+ ).then( ( res ) => {
	29	+ // console.log(data);
	30	+ const { status, message, data } = res;
	31	+ if ( status === 'success' ) {
	32	+ dataHtml = data.html;
	33	+ dataAddons = data.addons;
	34	+ } else {
	35	+ dataHtml = message;
	36	+ }
	37	+ } ).catch( ( err ) => {
	38	+ console.log( err );
	39	+ } );
	40	+};
	41	+// API send action install, update, activate, deactivate.
	42	+const addonsAction = ( data, callBack ) => {
	43	+ const addonSlug = data.addon.slug;
	44	+
	45	+ if ( isHandling.indexOf( addonSlug ) !== -1 ) {
	46	+ return;
	47	+ }
	48	+ isHandling.push( addonSlug );
	49	+
	50	+ fetch( API.admin.apiAddonAction, {
	51	+ method: 'POST',
	52	+ headers: {
	53	+ 'Content-Type': 'application/json',
	54	+ 'X-WP-Nonce': lpDataAdmin.nonce,
	55	+ },
	56	+ body: JSON.stringify( { ...data } ),
	57	+ } ).then( ( res ) =>
	58	+ res.json()
	59	+ ).then( ( res ) => {
	60	+ const indexAddonHanding = isHandling.indexOf( addonSlug );
	61	+ if ( indexAddonHanding !== -1 ) {
	62	+ isHandling.splice( indexAddonHanding, 1 );
	63	+ }
	64	+
	65	+ const { status, message, data } = res;
	66	+
	67	+ if ( callBack ) {
	68	+ callBack( status, message, data );
	69	+ }
	70	+
	71	+ handleNotify( status, message );
	72	+ } ).catch( ( err ) => {
	73	+ handleNotify( 'error', `error js: ${ err }` );
	74	+ console.log( err );
	75	+ } );
	76	+};
	77	+// Show notify.
	78	+const handleNotify = ( status, message ) => {
	79	+ const elNotifyAction = elNotifyActionWrapper.querySelector( '.lp-notify-action' );
	80	+ const elNotifyActionNew = elNotifyAction.cloneNode( true );
	81	+ elNotifyActionNew.classList.remove( 'clone' );
	82	+ elNotifyActionWrapper.insertBefore( elNotifyActionNew, elNotifyActionWrapper[ 0 ] );
	83	+ const elSuccess = elNotifyActionNew.querySelector( `.${ elNotifyActionNew.classList.value }__success` );
	84	+ const elFailed = elNotifyActionNew.querySelector( `.${ elNotifyActionNew.classList.value }__error` );
	85	+
	86	+ if ( status === 'success' ) {
	87	+ elSuccess.classList.add( 'show' );
	88	+ elSuccess.querySelector( '.message' ).innerHTML = message;
	89	+ } else {
	90	+ elFailed.classList.add( 'show' );
	91	+ elFailed.querySelector( '.message' ).innerHTML = message;
	92	+ }
	93	+
	94	+ elNotifyActionWrapper.classList.add( 'show' );
	95	+ setTimeout( () => {
	96	+ elNotifyActionNew.remove();
	97	+
	98	+ const elNotifyAction = elNotifyActionWrapper.querySelectorAll( '.lp-notify-action' );
	99	+ if ( elNotifyAction.length === 1 ) {
	100	+ elNotifyActionWrapper.classList.remove( 'show' );
	101	+ }
	102	+ }, status === 'success' ? 3000 : 4000 );
	103	+};
	104	+// Get addons when js loaded.
	105	+getAddons();
	106	+// Search Addons.
	107	+const searchAddons = ( name ) => {
	108	+ const elAddonItems = elAddonsPage.querySelectorAll( '.lp-addon-item' );
	109	+ let totalItems = 0;
	110	+
	111	+ elAddonItems.forEach( ( elAddonItem ) => {
	112	+ const addonName = elAddonItem.querySelector( 'a' ).textContent;
	113	+ if ( elAddonItem.classList.contains( 'hide' ) ) {
	114	+ return;
	115	+ }
	116	+
	117	+ if ( addonName.toLowerCase().includes( name.toLowerCase() ) ) {
	118	+ elAddonItem.classList.remove( 'search-not-found' );
	119	+ totalItems++;
	120	+ } else {
	121	+ elAddonItem.classList.add( 'search-not-found' );
	122	+ }
	123	+ } );
	124	+
	125	+ setGridItems( totalItems );
	126	+};
	127	+// Set grid style items.
	128	+const setGridItems = ( totalItems ) => {
	129	+ if ( totalItems < 4 ) {
	130	+ elLPAddons.classList.add( 'max-3-items' );
	131	+ } else {
	132	+ elLPAddons.classList.remove( 'max-3-items' );
	133	+ }
	134	+};
	135	+// Check element loaded and data API returned.
	136	+const loadElData = setInterval( () => {
	137	+ if ( ! elAddonsPage || ! elNotifyActionWrapper ) {
	138	+ elAddonsPage = document.querySelector( '.lp-addons-page' );
	139	+ elNotifyActionWrapper = document.querySelector( '.lp-notify-action-wrapper' );
	140	+ } else if ( dataHtml && elAddonsPage && elNotifyActionWrapper ) {
	141	+ elAddonsPage.innerHTML = dataHtml;
	142	+ elLPAddons = elAddonsPage.querySelector( '#lp-addons' );
	143	+ const elNavTabWrapper = document.querySelector( '.lp-nav-tab-wrapper' );
	144	+ if ( ! elNavTabWrapper ) {
	145	+ clearInterval( loadElData );
	146	+ return;
	147	+ }
	148	+
	149	+ const elNavTabWrapperClone = elNavTabWrapper.cloneNode( true );
	150	+ elAddonsPage.insertBefore( elNavTabWrapperClone, elAddonsPage.children[ 0 ] );
	151	+ elNavTabWrapperClone.style.display = 'flex';
	152	+ elNavTabWrapper.remove();
	153	+ const elNavActive = elNavTabWrapperClone.querySelector( '.nav-tab.nav-tab-active span' );
	154	+ setGridItems( parseInt( elNavActive.textContent ) );
	155	+
	156	+ clearInterval( loadElData );
	157	+ }
	158	+}, 1 );
	159	+
	160	+document.addEventListener( 'DOMContentLoaded', ( e ) => {
	161	+} );
	162	+
	163	+/*** Events ***/
	164	+document.addEventListener( 'click', ( e ) => {
	165	+ let el = e.target;
	166	+ const tagName = el.tagName.toLowerCase();
	167	+ if ( tagName === 'span' ) {
	168	+ e.preventDefault();
	169	+ const elBtnAction = el.closest( '.btn-addon-action' );
	170	+ if ( elBtnAction ) {
	171	+ elBtnAction.click();
	172	+ }
	173	+ }
	174	+
	175	+ // Events actions: activate, deactivate.
	176	+ /*if ( el.classList.contains( 'lp-toggle-switch-label' ) ) {
	177	+ //e.preventDefault();
	178	+
	179	+ const elAddonItem = el.closest( '.lp-addon-item' );
	180	+ const idLabel = el.getAttribute( 'for' );
	181	+ const elInput = document.querySelector( `#${ idLabel }` );
	182	+ const action = elInput.getAttribute( 'data-action' );
	183	+ const addon = dataAddons[ elAddonItem.dataset.slug ];
	184	+ const addonSlug = addon.slug;
	185	+ const parent = el.closest( '.lp-toggle-switch' );
	186	+ const label = parent.querySelector( `label[for=${ idLabel }]` );
	187	+ const dashicons = parent.querySelector( '.dashicons-update' );
	188	+ dashicons.style.display = 'inline-block';
	189	+ label.style.display = 'none';
	190	+ const data = { action, addon };
	191	+ addonsAction( data, function( status, message, data ) {
	192	+ const elAddon = document.querySelector( `#${ addonSlug }` );
	193	+ if ( elAddon ) {
	194	+ const parent = elAddon.closest( '.lp-toggle-switch' );
	195	+ if ( parent ) {
	196	+ const dashicons = parent.querySelector( '.dashicons-update' );
	197	+ dashicons.style.display = 'none';
	198	+ if ( action === 'deactivate' ) {
	199	+ elAddon.setAttribute( 'data-action', 'activate' );
	200	+ } else if ( action === 'activate' ) {
	201	+ elAddon.setAttribute( 'data-action', 'deactivate' );
	202	+ }
	203	+ const label = parent.querySelector( `label[for=${ addonSlug }]` );
	204	+ label.style.display = 'inline-flex';
	205	+ }
	206	+ }
	207	+
	208	+ if ( status === 'success' ) {
	209	+ if ( action === 'deactivate' ) {
	210	+ elAddonItem.classList.remove( 'activated' );
	211	+ }
	212	+ if ( action === 'activate' ) {
	213	+ elAddonItem.classList.add( 'activated' );
	214	+ }
	215	+ }
	216	+ } );
	217	+ }*/
	218	+
	219	+ // Events actions: install, update, delete.
	220	+ if ( el.closest( '.btn-addon-action' ) ) {
	221	+ el = el.closest( '.btn-addon-action' );
	222	+ e.preventDefault();
	223	+ el.classList.add( 'handling' );
	224	+ let purchaseCode = '';
	225	+ const elAddonItem = el.closest( '.lp-addon-item' );
	226	+ const addon = dataAddons[ elAddonItem.dataset.slug ];
	227	+ const action = el.dataset.action;
	228	+ const elItemPurchase = elAddonItem.querySelector( '.lp-addon-item__purchase' );
	229	+ //const elToggleSwitchInput = elAddonItem.querySelector( '.lp-toggle-switch-input' );
	230	+
	231	+ if ( action === 'purchase' ) {
	232	+ elItemPurchase.style.display = 'block';
	233	+ elItemPurchase.querySelector( '.purchase-install' ).style.display = 'flex';
	234	+ return;
	235	+ } else if ( action === 'update-purchase-code' ) {
	236	+ elItemPurchase.querySelector( '.purchase-update' ).style.display = 'flex';
	237	+ elItemPurchase.style.display = 'block';
	238	+ return;
	239	+ } else if ( action === 'buy' ) {
	240	+ const link = el.dataset.link;
	241	+ window.open( link, '_blank' );
	242	+ return;
	243	+ } else if ( action === 'cancel' ) {
	244	+ elItemPurchase.style.display = 'none';
	245	+ return;
	246	+ } else if ( action === 'install' ) {
	247	+ if ( el.dataset.link ) {
	248	+ el.classList.remove( 'handling' );
	249	+ const link = el.dataset.link;
	250	+ window.open( link, '_blank' );
	251	+ return;
	252	+ }
	253	+ }
	254	+
	255	+ // Send request to server.
	256	+ if ( elItemPurchase ) {
	257	+ purchaseCode = elItemPurchase.querySelector( 'input[name=purchase-code]' ).value;
	258	+ }
	259	+
	260	+ const data = { purchase_code: purchaseCode, action, addon };
	261	+ addonsAction( data, function( status, message, data ) {
	262	+ if ( status === 'success' ) {
	263	+ if ( action === 'install' ) {
	264	+ elAddonItem.classList.add( 'installed', 'activated' );
	265	+ elAddonItem.classList.remove( 'not_installed' );
	266	+ elItemPurchase.style.display = 'none';
	267	+ /*elToggleSwitchInput.setAttribute( 'checked', 'checked' );
	268	+ elToggleSwitchInput.setAttribute( 'data-action', 'deactivate' );*/
	269	+ const elNavInstalled = document.querySelector( '.nav-tab[data-tab=installed] span' );
	270	+ elNavInstalled.textContent = parseInt( elNavInstalled.textContent ) + 1;
	271	+ const elNavNoInstalled = document.querySelector( '.nav-tab[data-tab=not_installed] span' );
	272	+ elNavNoInstalled.textContent = parseInt( elNavNoInstalled.textContent ) - 1;
	273	+ elItemPurchase.querySelector( '.purchase-install' ).style.display = 'none';
	274	+ elItemPurchase.querySelector( '.purchase-update' ).querySelector( '.enter-purchase-code' ).value = purchaseCode;
	275	+ } else if ( action === 'update' ) {
	276	+ const elAddonVersionCurrent = elAddonItem.querySelector( '.addon-version-current' );
	277	+ elAddonVersionCurrent.innerHTML = addon.version;
	278	+ elAddonItem.classList.remove( 'update' );
	279	+ } else if ( action === 'activate' ) {
	280	+ elAddonItem.classList.add( 'activated' );
	281	+ } else if ( action === 'deactivate' ) {
	282	+ elAddonItem.classList.remove( 'activated' );
	283	+ } else if ( action === 'update-purchase' ) {
	284	+ elItemPurchase.style.display = 'none';
	285	+ }
	286	+ }
	287	+
	288	+ el.classList.remove( 'handling' );
	289	+ } );
	290	+ }
	291	+
	292	+ if ( el.classList.contains( 'nav-tab' ) ) {
	293	+ e.preventDefault();
	294	+ const elTabs = document.querySelectorAll( '.nav-tab' );
	295	+ elTabs.forEach( function( elTab ) {
	296	+ elTab.classList.remove( 'nav-tab-active' );
	297	+ } );
	298	+ el.classList.add( 'nav-tab-active' );
	299	+ const tabName = el.dataset.tab;
	300	+ const elAddonItems = elAddonsPage.querySelectorAll( '.lp-addon-item' );
	301	+ const elSearch = elAddonsPage.querySelector( '#lp-search-addons__input' );
	302	+ elSearch.value = '';
	303	+
	304	+ urlParams.set( 'tab', tabName );
	305	+ window.history.pushState( {}, '', `${ window.location.pathname }?${ urlParams.toString() }` );
	306	+ let totalItems = 0;
	307	+ elAddonItems.forEach( ( elAddonItem ) => {
	308	+ elAddonItem.classList.remove( 'search-not-found' );
	309	+ if ( 'all' === tabName || elAddonItem.classList.contains( tabName ) ) {
	310	+ elAddonItem.classList.remove( 'hide' );
	311	+ totalItems++;
	312	+ } else {
	313	+ elAddonItem.classList.add( 'hide' );
	314	+ }
	315	+ } );
	316	+
	317	+ setGridItems( totalItems );
	318	+ }
	319	+} );
	320	+
	321	+/*** Event search addons. ***/
	322	+document.addEventListener( 'input', ( e ) => {
	323	+ const el = e.target;
	324	+
	325	+ if ( 'lp-search-addons__input' === el.id ) {
	326	+ const keyword = el.value;
	327	+ searchAddons( keyword );
	328	+ }
	329	+
	330	+ // Events change input purchase code.
	331	+ if ( el.classList.contains( 'enter-purchase-code' ) ) {
	332	+ e.preventDefault();
	333	+ const purchaseCode = el.value;
	334	+ const elItemPurchase = el.closest( '.lp-addon-item__purchase' );
	335	+
	336	+ if ( elItemPurchase ) {
	337	+ const input = elItemPurchase.querySelector( 'input[name=purchase-code]' );
	338	+ input.value = purchaseCode;
	339	+ }
	340	+ }
	341	+} );