WP Coder – Insert & Manage Code Snippets / 3.0

WP Coder – Insert & Manage Code Snippets v3.0

wp-coder / assets / js / admin.js

admin.js in WP Coder – Insert & Manage Code Snippets 3.0, at assets/js/admin.js

432 lines 13.1 KB

Raw Download Zip

1	'use strict';
2
3	const settingTabs = function () {
4	const tabs = document.getElementById('settings-tab');
5	if (!tabs) {
6	return false;
7	}
8	const tabsContent = document.querySelectorAll('#settings-content .tab-content');
9
10	const links = tabs.querySelectorAll('a');
11	links.forEach((link) => {
12	link.addEventListener('click', function () {
13	const attr = link.getAttribute('data-tab');
14	links.forEach(el => el.classList.remove('nav-tab-active'));
15	tabsContent.forEach(el => el.classList.remove('tab-content-active'));
16	link.classList.add('nav-tab-active');
17	const tabContent = document.querySelector('[data-content=' + attr + ']');
18	tabContent.classList.add('tab-content-active');
19	setLocalStorage(attr);
20	});
21	});
22
23	setTabs();
24
25	function setTabs() {
26	if (getLocalStorage() === '') {
27	return false;
28	}
29	const tab = getLocalStorage();
30	links.forEach(el => el.classList.remove('nav-tab-active'));
31	tabsContent.forEach(el => el.classList.remove('tab-content-active'));
32	const link = tabs.querySelector('a[data-tab="' + tab + '"]');
33	link.classList.add('nav-tab-active');
34	const cont = document.querySelector('[data-content=' + tab + ']');
35	cont.classList.add('tab-content-active');
36	}
37
38	function setLocalStorage(attr) {
39	sessionStorage.setItem("wowpTab", attr);
40	}
41
42	function getLocalStorage() {
43	const tab = sessionStorage.getItem("wowpTab");
44	if (!tab) {
45	return ''
46	} else {
47	return tab;
48	}
49	}
50	}
51
52	const codeEditor = function () {
53	const editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {};
54	const codemirror_gen =
55	{
56	"indentUnit": 2,
57	"indentWithTabs": true,
58	"inputStyle": "contenteditable",
59	"lineNumbers": true,
60	"lineWrapping": true,
61	"styleActiveLine": true,
62	"continueComments": true,
63	"extraKeys": {
64	"Ctrl-Space": "autocomplete",
65	"Ctrl-\/": "toggleComment",
66	"Cmd-\/": "toggleComment",
67	"Alt-F": "findPersistent",
68	"Ctrl-F": "findPersistent",
69	"Cmd-F": "findPersistent"
70	},
71	"direction": "ltr",
72	"gutters": ["CodeMirror-lint-markers"],
73	"lint": true,
74	"autoCloseBrackets": true,
75	"autoCloseTags": true,
76	"matchTags": {
77	"bothTags": true
78	},
79	"tabSize": 2,
80
81	};
82
83	const html_code = document.getElementById('html_code');
84	if (html_code) {
85	let codemirror_el =
86	{
87	"tagname-lowercase": true,
88	"attr-lowercase": true,
89	"attr-value-double-quotes": false,
90	"doctype-first": false,
91	"tag-pair": true,
92	"spec-char-escape": true,
93	"id-unique": true,
94	"src-not-empty": true,
95	"attr-no-duplication": true,
96	"alt-require": true,
97	"space-tab-mixed-disabled": "tab",
98	"attr-unsafe-chars": true,
99	"mode": 'htmlmixed',
100
101	};
102
103	editorSettings.codemirror = _.extend({}, editorSettings.codemirror, codemirror_gen, codemirror_el,);
104
105	wp.codeEditor.initialize(html_code, editorSettings);
106	}
107
108	const css_code = document.getElementById('css_code');
109	if (css_code) {
110	let codemirror_el = {"mode": 'css',};
111	editorSettings.codemirror = _.extend({}, editorSettings.codemirror, codemirror_gen, codemirror_el,);
112	const tab = document.querySelector('[data-content="css-code"]');
113	tab.classList.add('tab-content-active');
114	wp.codeEditor.initialize(css_code, editorSettings);
115	tab.classList.remove('tab-content-active');
116	}
117
118	const js_code = document.getElementById('js_code');
119	if (js_code) {
120	let codemirror_el = {
121	"boss": true,
122	"curly": true,
123	"eqeqeq": true,
124	"eqnull": true,
125	"es3": true,
126	"expr": true,
127	"immed": true,
128	"noarg": true,
129	"nonbsp": true,
130	"onevar": true,
131	"quotmark": "single",
132	"trailing": true,
133	"undef": true,
134	"unused": true,
135	"browser": true,
136	"globals": {
137	"_": false,
138	"Backbone": false,
139	"jQuery": true,
140	"JSON": false,
141	"wp": false
142	},
143	"mode": 'javascript',
144	};
145	editorSettings.codemirror = _.extend({}, editorSettings.codemirror, codemirror_gen, codemirror_el,);
146	const tab = document.querySelector('[data-content="js-code"]');
147	tab.classList.add('tab-content-active');
148	wp.codeEditor.initialize(js_code, editorSettings);
149	tab.classList.remove('tab-content-active');
150	}
151
152	}
153
154	const cloneIncludes = function () {
155
156	const template = document.getElementById('clone-includes');
157	if (!template) {
158	return false;
159	}
160
161	const addBtn = document.getElementById('add-include');
162	if (!addBtn) {
163	return false;
164	}
165
166	addBtn.addEventListener('click', (event) => {
167	event.preventDefault();
168	const clone = template.content.cloneNode(true);
169	const targetElement = document.getElementById('includes-files');
170	targetElement.appendChild(clone);
171	});
172
173	}
174
175	const removeLast = function () {
176	const btn = document.getElementById('remove-include');
177	if (!btn) {
178	return false;
179	}
180
181	btn.addEventListener('click', (event) => {
182	event.preventDefault();
183	const parentElement = document.getElementById('includes-files');
184	const lastChild = parentElement.querySelector('.wowp-fields-group:last-child');
185	if (lastChild) {
186	lastChild.remove();
187	}
188	});
189
190
191	}
192
193	const changeIncludes = function () {
194	const parentContainer = document.getElementById('includes-files');
195	if (!parentContainer) {
196	return false;
197	}
198
199	parentContainer.addEventListener('change', function (event) {
200
201	// Check if the clicked element matches the desired selector
202	if (event.target.matches('[name^="param[include]"]')) {
203	const el = event.target.value;
204	const parent = event.target.closest('.wowp-fields-group');
205	const el_js = parent.querySelector('.wowp-include-js');
206	el_js.classList.toggle('is-hidden');
207	}
208	});
209
210	}
211
212	const cloneDisplayRules = function () {
213
214	const template = document.getElementById('clone-display-rules');
215	if (!template) {
216	return false;
217	}
218
219	const addBtn = document.getElementById('add-display');
220	if (!addBtn) {
221	return false;
222	}
223
224	addBtn.addEventListener('click', (event) => {
225	event.preventDefault();
226	const clone = template.content.cloneNode(true);
227	const container = document.getElementById('display-rules');
228	const targetElement = document.querySelector('#display-rules .wowp-btn-actions');
229	container.insertBefore(clone, targetElement);
230	});
231
232	}
233
234	const removeDisplayRules = function () {
235	const btn = document.getElementById('remove-display');
236	if (!btn) {
237	return false;
238	}
239
240	btn.addEventListener('click', (event) => {
241	event.preventDefault();
242	const parentElement = document.getElementById('display-rules');
243	const lastChild = parentElement.querySelector('.wowp-fields-group:not(:first-child):nth-last-child(2)');
244	if (lastChild) {
245	lastChild.remove();
246	}
247	});
248
249	}
250
251	const changeDisplayRules = function () {
252	const parentContainer = document.getElementById('display-rules');
253	if (!parentContainer) {
254	return false;
255	}
256
257	parentContainer.addEventListener('change', function (event) {
258
259	// Check if the clicked element matches the desired selector
260	if (event.target.matches('[name^="param[show]"]')) {
261	let el = event.target.value;
262	el = default_custom_post(el);
263	const parent = event.target.closest('.wowp-fields-group');
264	const elements = parent.querySelectorAll('.wowp-field');
265	switch (el) {
266	case 'shortcode':
267	case 'everywhere':
268	case 'post_all':
269	case 'page_all':
270	elements[1].classList.add('is-hidden');
271	elements[2].classList.add('is-hidden');
272	elements[3].classList.add('is-hidden');
273	break;
274	case 'post_selected':
275	case 'post_category':
276	case 'page_selected':
277	elements[1].classList.remove('is-hidden');
278	elements[2].classList.remove('is-hidden');
279	elements[3].classList.add('is-hidden');
280	break;
281	case 'page_type':
282	elements[1].classList.remove('is-hidden');
283	elements[2].classList.add('is-hidden');
284	elements[3].classList.remove('is-hidden');
285	break;
286
287	}
288
289	}
290	});
291
292	function default_custom_post(el) {
293	if (el.includes('custom_post_selected')) {
294	return 'post_selected';
295	}
296	if (el.includes('custom_post_tax')) {
297	return 'post_category';
298	}
299	if (el.includes('custom_post_all')) {
300	return 'post_all';
301	}
302	return el;
303	}
304
305	}
306
307	const userRoles = function () {
308	const user = document.getElementById('item_user');
309	if (!user) {
310	return false;
311	}
312	const parent = user.closest('fieldset');
313
314	user.addEventListener('change', (el) => {
315	const role = user.value;
316	const roles = parent.querySelector('.wowp-users-roles');
317	if (parseInt(role) === 2) {
318	roles.classList.remove('is-hidden');
319	} else {
320	roles.classList.add('is-hidden');
321	}
322	})
323
324	const checkboxes = parent.querySelectorAll('input[type="checkbox"]');
325	const role_all = document.getElementById('user_role_all');
326
327	role_all.addEventListener('change', () => {
328	if (role_all.checked) {
329	checkboxes.forEach(el => el.checked = true);
330	} else {
331	checkboxes.forEach(el => el.checked = false);
332	}
333	});
334	}
335
336	const languages = function () {
337	const depending = document.getElementById('depending_language');
338	if (!depending) {
339	return false;
340	}
341	const parent = depending.closest('fieldset');
342
343	depending.addEventListener('change', () => {
344	if (depending.checked) {
345	parent.querySelector('.wowp-languages').classList.remove('is-hidden');
346	} else {
347	parent.querySelector('.wowp-languages').classList.add('is-hidden');
348	}
349	});
350	}
351
352	const schedule = function () {
353	const schedule = document.getElementById('schedule');
354
355	if (!schedule) {
356	return false;
357	}
358
359	const template = document.getElementById('clone-schedule');
360	const addBtn = document.getElementById('add-schedule');
361	const removeBtn = document.getElementById('remove-schedule');
362
363	addBtn.addEventListener('click', (event) => {
364	event.preventDefault();
365	const clone = template.content.cloneNode(true);
366	const container = document.getElementById('schedule');
367	const targetElement = document.querySelector('#schedule .wowp-btn-actions');
368	container.insertBefore(clone, targetElement);
369	});
370
371	removeBtn.addEventListener('click', (event) => {
372	event.preventDefault();
373	const parentElement = document.getElementById('schedule');
374	const lastChild = parentElement.querySelector('.wowp-fields-group:nth-last-child(2)');
375	if (lastChild) {
376	lastChild.remove();
377	}
378	});
379
380	schedule.addEventListener('change', function (event) {
381	if (event.target.matches('[name^="param[dates]"]')) {
382	const check_date = event.target;
383	const parent = check_date.closest('.wowp-fields-group');
384	const date_start = parent.querySelector('.wowp-field:nth-last-child(2)');
385	const date_end = parent.querySelector('.wowp-field:nth-last-child(1)');
386	if (check_date.checked) {
387	date_start.classList.remove('is-hidden');
388	date_end.classList.remove('is-hidden');
389	} else {
390	date_start.classList.add('is-hidden');
391	date_end.classList.add('is-hidden');
392	}
393
394
395	}
396	});
397
398	}
399
400	const feature = function () {
401	const texts = document.querySelectorAll('.w_card-description');
402
403	if (!texts) {
404	return false;
405	}
406	texts.forEach((el) => {
407	el.addEventListener('click', () => {
408	el.classList.toggle('is-open');
409	})
410	})
411
412	}
413
414	document.addEventListener('DOMContentLoaded', function () {
415
416	new codeEditor;
417	new cloneIncludes;
418	new removeLast;
419	new settingTabs;
420	new changeIncludes;
421
422	new cloneDisplayRules;
423	new removeDisplayRules;
424	new changeDisplayRules;
425
426	new userRoles;
427	new languages;
428
429	new schedule;
430
431	new feature;
432	})