← All changes | assets/src/js/admin/init-tom-select.js +292 -292 4.3.8 → 4.4.8 View file →

		@@ -1,292 +1,292 @@
1		-import { AdminUtilsFunctions, Api, Utils } from './utils-admin.js';
2		-
3		-/**
4		- * Handle data response from API for tom-select
5		- *
6		- * @param {*} response
7		- * @param {*} tomSelectEl
8		- * @param dataStruct
9		- * @param fetchAPI
10		- * @param customOptions
11		- * @param {*} callBack
12		- */
13		-const handleResponse = (
14		- response,
15		- tomSelectEl,
16		- dataStruct,
17		- fetchAPI,
18		- customOptions = {},
19		- callBack
20		-) => {
21		- if ( ! response || ! tomSelectEl || ! dataStruct || ! fetchAPI || ! callBack ) {
22		- return;
23		- }
24		-
25		- //Function format render data
26		- const getTextOption = ( data ) => {
27		- if ( ! dataStruct.keyGetValue?.text || ! dataStruct.keyGetValue.key_render ) {
28		- return;
29		- }
30		-
31		- let text = dataStruct.keyGetValue.text;
32		- for ( const [ key, value ] of Object.entries( dataStruct.keyGetValue.key_render ) ) {
33		- text = text.replace( new RegExp( `{{${ value }}}`, 'g' ), data[ value ] );
34		- }
35		- return text;
36		- };
37		-
38		- // Get default item tom-select
39		- const defaultIds = tomSelectEl.dataset?.saved ? JSON.parse( tomSelectEl.dataset.saved ) : 0;
40		- let options = [];
41		-
42		- // Format response data set option tom-select
43		- if ( response.data[ dataStruct.dataType ].length > 0 ) {
44		- options = response.data[ dataStruct.dataType ].map( ( item ) => ( {
45		- value: item[ dataStruct.keyGetValue.value ],
46		- text: getTextOption( item ),
47		- } ) );
48		- }
49		-
50		- // Setting option tom-select
51		- const settingOption = {
52		- items: defaultIds,
53		- render: {
54		- item( data, escape ) {
55		- return (
56		- `` +
57		- `<li data-id="${ data.value }">
58		- <div class="item">${ data.text }</div>
59		- </li>`
60		- );
61		- },
62		- },
63		- onChange: ( data ) => {
64		- if ( data.length < 1 ) {
65		- tomSelectEl.value = '';
66		- }
67		- },
68		- ...customOptions,
69		- options,
70		- };
71		-
72		- if ( null != tomSelectEl.tomSelectInstance ) {
73		- tomSelectEl.tomSelectInstance.addOptions( options );
74		- return options;
75		- }
76		-
77		- tomSelectEl.tomSelectInstance = AdminUtilsFunctions.buildTomSelect(
78		- tomSelectEl,
79		- settingOption,
80		- fetchAPI,
81		- {},
82		- callBack
83		- );
84		-
85		- return options;
86		-};
87		-
88		-//Init Tom-select with available options
89		-const initTomSelectWithOption = ( tomSelectEl, settingTomSelect = {} ) => {
90		- if ( ! tomSelectEl ) {
91		- return null;
92		- }
93		-
94		- if ( null != tomSelectEl.tomSelectInstance ) {
95		- return null;
96		- }
97		-
98		- tomSelectEl.tomSelectInstance = AdminUtilsFunctions.buildTomSelect(
99		- tomSelectEl,
100		- settingTomSelect
101		- );
102		-};
103		-
104		-// Init Tom-select
105		-const initTomSelect = ( tomSelectEl, customOptions = {}, customParams = {} ) => {
106		- if ( ! tomSelectEl ) {
107		- return;
108		- }
109		-
110		- if ( tomSelectEl.classList.contains( 'loaded' ) ) {
111		- return;
112		- }
113		-
114		- tomSelectEl.classList.add( 'loaded' );
115		-
116		- const defaultIds = tomSelectEl.dataset?.saved ? JSON.parse( tomSelectEl.dataset.saved ) : 0;
117		- const dataStruct = tomSelectEl?.dataset?.struct ? JSON.parse( tomSelectEl.dataset.struct ) : '';
118		-
119		- if ( ! dataStruct ) {
120		- initTomSelectWithOption( tomSelectEl );
121		- return;
122		- }
123		-
124		- const getParentElByTagName = ( tag, el ) => {
125		- const newEl = el.parentElement;
126		-
127		- if ( newEl.tagName.toLowerCase() === tag ) {
128		- return newEl;
129		- }
130		-
131		- if ( newEl.tagName.toLowerCase() === 'html' ) {
132		- return false;
133		- }
134		-
135		- return getParentElByTagName( tag, newEl );
136		- };
137		-
138		- const formParent = getParentElByTagName( 'form', tomSelectEl );
139		-
140		- if ( formParent ) {
141		- const elInput = formParent.querySelector(
142		- 'input[name="' + tomSelectEl.getAttribute( 'name' ) + '"]'
143		- );
144		- if ( elInput ) {
145		- elInput.remove();
146		- }
147		- }
148		-
149		- const dataSendApi = dataStruct.dataSendApi ?? '';
150		- const urlApi = dataStruct.urlApi ?? '';
151		-
152		- const settingTomSelect = {
153		- ...dataStruct.setting,
154		- ...customOptions,
155		- };
156		-
157		- if ( ! urlApi ) {
158		- initTomSelectWithOption( tomSelectEl, settingTomSelect );
159		- return;
160		- }
161		-
162		- const fetchFunction = ( keySearch = '', customParams, callback ) => {
163		- const url = urlApi;
164		- const dataSend = { current_ids: defaultIds, ...dataSendApi, ...customParams };
165		- dataSend.search = keySearch;
166		- const params = {
167		- headers: {
168		- 'Content-Type': 'application/json',
169		- 'X-WP-Nonce': lpData.nonce,
170		- },
171		- method: 'POST',
172		- body: JSON.stringify( dataSend ),
173		- };
174		- Utils.lpFetchAPI( url, params, callback );
175		- };
176		-
177		- const callBackApi = {
178		- success: ( response ) => {
179		- handleResponse(
180		- response,
181		- tomSelectEl,
182		- dataStruct,
183		- fetchFunction,
184		- settingTomSelect,
185		- callBackApi
186		- );
187		- },
188		- };
189		-
190		- // Fetch data for first load tom-select
191		- // Get ids selected, and show list without ids selected with limit.
192		- let idNotIn = [];
193		- if ( typeof defaultIds === 'object' ) {
194		- idNotIn = Object.entries( defaultIds ).map( ( [ key, value ] ) => ( { key, value } ) );
195		- }
196		-
197		- if ( dataSendApi?.id_not_in ) {
198		- idNotIn = [ ...idNotIn, ...dataSendApi.id_not_in ];
199		- }
200		-
201		- customParams.id_not_in = idNotIn.join( ',' );
202		-
203		- fetchFunction( '', customParams, callBackApi );
204		-};
205		-
206		-// Init Tom-select user in admin
207		-const searchUserOnListPost = () => {
208		- if ( lpData.show_search_author_field === '0' ) {
209		- return;
210		- }
211		-
212		- const elPostFilter = document.querySelector( '#posts-filter' );
213		- if ( ! elPostFilter ) {
214		- return;
215		- }
216		-
217		- let elSearchPost = elPostFilter.querySelector( '.search-box' );
218		- if ( ! elSearchPost ) {
219		- elPostFilter.insertAdjacentHTML( 'afterbegin', lpData.show_search_author_field );
220		- elSearchPost = elPostFilter.querySelector( '.search-box' );
221		- }
222		-
223		- if ( ! elSearchPost ) {
224		- return;
225		- }
226		-
227		- const selectNew = elSearchPost.querySelector( 'select#author' );
228		- if ( selectNew ) {
229		- return;
230		- }
231		-
232		- const createSelectUserHtml = () => {
233		- let defaultId = '';
234		- const authorIdFilter = lpData.urlParams.author;
235		- if ( authorIdFilter ) {
236		- defaultId = JSON.stringify( authorIdFilter );
237		- }
238		-
239		- const dataStruct = {
240		- urlApi: Api.admin.apiSearchUsers,
241		- dataType: 'users',
242		- keyGetValue: {
243		- value: 'ID',
244		- text: '{{display_name}}(#{{ID}}) - {{user_email}}',
245		- key_render: {
246		- display_name: 'display_name',
247		- user_email: 'user_email',
248		- ID: 'ID',
249		- },
250		- },
251		- setting: {
252		- placeholder: 'Choose user',
253		- },
254		- };
255		-
256		- const dataStructJson = JSON.stringify( dataStruct );
257		-
258		- const htmlSelectUser =
259		- `` +
260		- `<select data-struct='${ dataStructJson }' style='display:none;' data-saved='${ defaultId }'
261		- id="author" name="author" class="select lp-tom-select">` +
262		- `</select>`;
263		-
264		- const elInputSearch = elSearchPost.querySelector( 'input[name="s"]' );
265		- if ( elInputSearch ) {
266		- elInputSearch.insertAdjacentHTML( 'afterend', htmlSelectUser );
267		- }
268		-
269		- // Remove input hide default of WP.
270		- const elInputAuthor = elPostFilter.querySelector( 'input[name="author"]' );
271		- if ( elInputAuthor ) {
272		- elInputAuthor.remove();
273		- }
274		- };
275		- createSelectUserHtml();
276		-};
277		-
278		-const initElsTomSelect = () => {
279		- const tomSelectEls = document.querySelectorAll( 'select.lp-tom-select:not(.loaded)' );
280		-
281		- if ( tomSelectEls.length ) {
282		- tomSelectEls.forEach( ( tomSelectEl ) => {
283		- // Not build elements tom-select in Widget left classic of WordPress.
284		- if ( tomSelectEl.closest( '.widget-liquid-left' ) ) {
285		- return;
286		- }
287		- initTomSelect( tomSelectEl );
288		- } );
289		- }
290		-};
291		-
292		-export { initTomSelect, searchUserOnListPost, initElsTomSelect };
	1	+import { AdminUtilsFunctions, Api, Utils } from './utils-admin.js';
	2	+
	3	+/**
	4	+ * Handle data response from API for tom-select
	5	+ *
	6	+ * @param {*} response
	7	+ * @param {*} tomSelectEl
	8	+ * @param dataStruct
	9	+ * @param fetchAPI
	10	+ * @param customOptions
	11	+ * @param {*} callBack
	12	+ */
	13	+const handleResponse = (
	14	+ response,
	15	+ tomSelectEl,
	16	+ dataStruct,
	17	+ fetchAPI,
	18	+ customOptions = {},
	19	+ callBack
	20	+) => {
	21	+ if ( ! response || ! tomSelectEl || ! dataStruct || ! fetchAPI || ! callBack ) {
	22	+ return;
	23	+ }
	24	+
	25	+ //Function format render data
	26	+ const getTextOption = ( data ) => {
	27	+ if ( ! dataStruct.keyGetValue?.text || ! dataStruct.keyGetValue.key_render ) {
	28	+ return;
	29	+ }
	30	+
	31	+ let text = dataStruct.keyGetValue.text;
	32	+ for ( const [ key, value ] of Object.entries( dataStruct.keyGetValue.key_render ) ) {
	33	+ text = text.replace( new RegExp( `{{${ value }}}`, 'g' ), data[ value ] );
	34	+ }
	35	+ return text;
	36	+ };
	37	+
	38	+ // Get default item tom-select
	39	+ const defaultIds = tomSelectEl.dataset?.saved ? JSON.parse( tomSelectEl.dataset.saved ) : 0;
	40	+ let options = [];
	41	+
	42	+ // Format response data set option tom-select
	43	+ if ( response.data[ dataStruct.dataType ].length > 0 ) {
	44	+ options = response.data[ dataStruct.dataType ].map( ( item ) => ( {
	45	+ value: item[ dataStruct.keyGetValue.value ],
	46	+ text: getTextOption( item ),
	47	+ } ) );
	48	+ }
	49	+
	50	+ // Setting option tom-select
	51	+ const settingOption = {
	52	+ items: defaultIds,
	53	+ render: {
	54	+ item( data, escape ) {
	55	+ return (
	56	+ `` +
	57	+ `<li data-id="${ data.value }">
	58	+ <div class="item">${ data.text }</div>
	59	+ </li>`
	60	+ );
	61	+ },
	62	+ },
	63	+ onChange: ( data ) => {
	64	+ if ( data.length < 1 ) {
	65	+ tomSelectEl.value = '';
	66	+ }
	67	+ },
	68	+ ...customOptions,
	69	+ options,
	70	+ };
	71	+
	72	+ if ( null != tomSelectEl.tomSelectInstance ) {
	73	+ tomSelectEl.tomSelectInstance.addOptions( options );
	74	+ return options;
	75	+ }
	76	+
	77	+ tomSelectEl.tomSelectInstance = AdminUtilsFunctions.buildTomSelect(
	78	+ tomSelectEl,
	79	+ settingOption,
	80	+ fetchAPI,
	81	+ {},
	82	+ callBack
	83	+ );
	84	+
	85	+ return options;
	86	+};
	87	+
	88	+//Init Tom-select with available options
	89	+const initTomSelectWithOption = ( tomSelectEl, settingTomSelect = {} ) => {
	90	+ if ( ! tomSelectEl ) {
	91	+ return null;
	92	+ }
	93	+
	94	+ if ( null != tomSelectEl.tomSelectInstance ) {
	95	+ return null;
	96	+ }
	97	+
	98	+ tomSelectEl.tomSelectInstance = AdminUtilsFunctions.buildTomSelect(
	99	+ tomSelectEl,
	100	+ settingTomSelect
	101	+ );
	102	+};
	103	+
	104	+// Init Tom-select
	105	+const initTomSelect = ( tomSelectEl, customOptions = {}, customParams = {} ) => {
	106	+ if ( ! tomSelectEl ) {
	107	+ return;
	108	+ }
	109	+
	110	+ if ( tomSelectEl.classList.contains( 'loaded' ) ) {
	111	+ return;
	112	+ }
	113	+
	114	+ tomSelectEl.classList.add( 'loaded' );
	115	+
	116	+ const defaultIds = tomSelectEl.dataset?.saved ? JSON.parse( tomSelectEl.dataset.saved ) : 0;
	117	+ const dataStruct = tomSelectEl?.dataset?.struct ? JSON.parse( tomSelectEl.dataset.struct ) : '';
	118	+
	119	+ if ( ! dataStruct ) {
	120	+ initTomSelectWithOption( tomSelectEl );
	121	+ return;
	122	+ }
	123	+
	124	+ const getParentElByTagName = ( tag, el ) => {
	125	+ const newEl = el.parentElement;
	126	+
	127	+ if ( newEl.tagName.toLowerCase() === tag ) {
	128	+ return newEl;
	129	+ }
	130	+
	131	+ if ( newEl.tagName.toLowerCase() === 'html' ) {
	132	+ return false;
	133	+ }
	134	+
	135	+ return getParentElByTagName( tag, newEl );
	136	+ };
	137	+
	138	+ const formParent = getParentElByTagName( 'form', tomSelectEl );
	139	+
	140	+ if ( formParent ) {
	141	+ const elInput = formParent.querySelector(
	142	+ 'input[name="' + tomSelectEl.getAttribute( 'name' ) + '"]'
	143	+ );
	144	+ if ( elInput ) {
	145	+ elInput.remove();
	146	+ }
	147	+ }
	148	+
	149	+ const dataSendApi = dataStruct.dataSendApi ?? '';
	150	+ const urlApi = dataStruct.urlApi ?? '';
	151	+
	152	+ const settingTomSelect = {
	153	+ ...dataStruct.setting,
	154	+ ...customOptions,
	155	+ };
	156	+
	157	+ if ( ! urlApi ) {
	158	+ initTomSelectWithOption( tomSelectEl, settingTomSelect );
	159	+ return;
	160	+ }
	161	+
	162	+ const fetchFunction = ( keySearch = '', customParams, callback ) => {
	163	+ const url = urlApi;
	164	+ const dataSend = { current_ids: defaultIds, ...dataSendApi, ...customParams };
	165	+ dataSend.search = keySearch;
	166	+ const params = {
	167	+ headers: {
	168	+ 'Content-Type': 'application/json',
	169	+ 'X-WP-Nonce': lpData.nonce,
	170	+ },
	171	+ method: 'POST',
	172	+ body: JSON.stringify( dataSend ),
	173	+ };
	174	+ Utils.lpFetchAPI( url, params, callback );
	175	+ };
	176	+
	177	+ const callBackApi = {
	178	+ success: ( response ) => {
	179	+ handleResponse(
	180	+ response,
	181	+ tomSelectEl,
	182	+ dataStruct,
	183	+ fetchFunction,
	184	+ settingTomSelect,
	185	+ callBackApi
	186	+ );
	187	+ },
	188	+ };
	189	+
	190	+ // Fetch data for first load tom-select
	191	+ // Get ids selected, and show list without ids selected with limit.
	192	+ let idNotIn = [];
	193	+ if ( typeof defaultIds === 'object' ) {
	194	+ idNotIn = Object.entries( defaultIds ).map( ( [ key, value ] ) => ( { key, value } ) );
	195	+ }
	196	+
	197	+ if ( dataSendApi?.id_not_in ) {
	198	+ idNotIn = [ ...idNotIn, ...dataSendApi.id_not_in ];
	199	+ }
	200	+
	201	+ customParams.id_not_in = idNotIn.join( ',' );
	202	+
	203	+ fetchFunction( '', customParams, callBackApi );
	204	+};
	205	+
	206	+// Init Tom-select user in admin
	207	+const searchUserOnListPost = () => {
	208	+ if ( lpData.show_search_author_field === '0' ) {
	209	+ return;
	210	+ }
	211	+
	212	+ const elPostFilter = document.querySelector( '#posts-filter' );
	213	+ if ( ! elPostFilter ) {
	214	+ return;
	215	+ }
	216	+
	217	+ let elSearchPost = elPostFilter.querySelector( '.search-box' );
	218	+ if ( ! elSearchPost ) {
	219	+ elPostFilter.insertAdjacentHTML( 'afterbegin', lpData.show_search_author_field );
	220	+ elSearchPost = elPostFilter.querySelector( '.search-box' );
	221	+ }
	222	+
	223	+ if ( ! elSearchPost ) {
	224	+ return;
	225	+ }
	226	+
	227	+ const selectNew = elSearchPost.querySelector( 'select#author' );
	228	+ if ( selectNew ) {
	229	+ return;
	230	+ }
	231	+
	232	+ const createSelectUserHtml = () => {
	233	+ let defaultId = '';
	234	+ const authorIdFilter = lpData.urlParams.author;
	235	+ if ( authorIdFilter ) {
	236	+ defaultId = JSON.stringify( authorIdFilter );
	237	+ }
	238	+
	239	+ const dataStruct = {
	240	+ urlApi: Api.admin.apiSearchUsers,
	241	+ dataType: 'users',
	242	+ keyGetValue: {
	243	+ value: 'ID',
	244	+ text: '{{display_name}}(#{{ID}}) - {{user_email}}',
	245	+ key_render: {
	246	+ display_name: 'display_name',
	247	+ user_email: 'user_email',
	248	+ ID: 'ID',
	249	+ },
	250	+ },
	251	+ setting: {
	252	+ placeholder: 'Choose user',
	253	+ },
	254	+ };
	255	+
	256	+ const dataStructJson = JSON.stringify( dataStruct );
	257	+
	258	+ const htmlSelectUser =
	259	+ `` +
	260	+ `<select data-struct='${ dataStructJson }' style='display:none;' data-saved='${ defaultId }'
	261	+ id="author" name="author" class="select lp-tom-select">` +
	262	+ `</select>`;
	263	+
	264	+ const elInputSearch = elSearchPost.querySelector( 'input[name="s"]' );
	265	+ if ( elInputSearch ) {
	266	+ elInputSearch.insertAdjacentHTML( 'afterend', htmlSelectUser );
	267	+ }
	268	+
	269	+ // Remove input hide default of WP.
	270	+ const elInputAuthor = elPostFilter.querySelector( 'input[name="author"]' );
	271	+ if ( elInputAuthor ) {
	272	+ elInputAuthor.remove();
	273	+ }
	274	+ };
	275	+ createSelectUserHtml();
	276	+};
	277	+
	278	+const initElsTomSelect = () => {
	279	+ const tomSelectEls = document.querySelectorAll( 'select.lp-tom-select:not(.loaded)' );
	280	+
	281	+ if ( tomSelectEls.length ) {
	282	+ tomSelectEls.forEach( ( tomSelectEl ) => {
	283	+ // Not build elements tom-select in Widget left classic of WordPress.
	284	+ if ( tomSelectEl.closest( '.widget-liquid-left' ) ) {
	285	+ return;
	286	+ }
	287	+ initTomSelect( tomSelectEl );
	288	+ } );
	289	+ }
	290	+};
	291	+
	292	+export { initTomSelect, searchUserOnListPost, initElsTomSelect };