← All changes | assets/js/admin.js +99 -52 3.4 → 4.4 View file →

		@@ -1,55 +1,7 @@
1	1	'use strict';
2	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	3
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	4	const codeEditor = function () {
53	5	const editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {};
54	6	const codemirror_gen =
55	7	{
		@@ -57,8 +9,9 @@
57	9	"indentWithTabs": true,
58	10	"inputStyle": "contenteditable",
59	11	"lineNumbers": true,
60	12	"lineWrapping": true,
	13	+ "matchBrackets": true,
61	14	"styleActiveLine": true,
62	15	"continueComments": true,
63	16	"extraKeys": {
64	17	"Ctrl-Space": "autocomplete",
		@@ -80,8 +33,9 @@
80	33
81	34	};
82	35
83	36	const html_code = document.getElementById('html_code');
	37	+ let htmleditor;
84	38	if (html_code) {
85	39	let codemirror_el =
86	40	{
87	41	"tagname-lowercase": true,
		@@ -101,10 +55,11 @@
101	55	};
102	56
103	57	editorSettings.codemirror = _.extend({}, editorSettings.codemirror, codemirror_gen, codemirror_el,);
104	58
105		- const htmleditor = wp.codeEditor.initialize(html_code, editorSettings);
	59	+ htmleditor = wp.codeEditor.initialize(html_code, editorSettings);
106	60
	61	+
107	62	const htmlNavigationMenu = document.getElementById("htmlNavigationMenu");
108	63
109	64	htmleditor.codemirror.eachLine(function (line) {
110	65	const text = line.text;
		@@ -139,14 +94,15 @@
139	94	});
140	95	}
141	96
142	97	const css_code = document.getElementById('css_code');
	98	+ let csseditor;
143	99	if (css_code) {
144	100	let codemirror_el = {"mode": 'css',};
145	101	editorSettings.codemirror = _.extend({}, editorSettings.codemirror, codemirror_gen, codemirror_el,);
146	102	// const tab = document.querySelector('[data-content="css-code"]');
147	103	// tab.classList.add('tab-content-active');
148		- const csseditor = wp.codeEditor.initialize(css_code, editorSettings);
	104	+ csseditor = wp.codeEditor.initialize(css_code, editorSettings);
149	105	// tab.classList.remove('tab-content-active');
150	106
151	107	const cssNavigationMenu = document.getElementById("cssNavigationMenu");
152	108
		@@ -183,8 +139,9 @@
183	139	});
184	140	}
185	141
186	142	const js_code = document.getElementById('js_code');
	143	+ let jseditor;
187	144	if (js_code) {
188	145	let codemirror_el = {
189	146	"boss": true,
190	147	"curly": true,
		@@ -212,9 +169,9 @@
212	169	};
213	170	editorSettings.codemirror = _.extend({}, editorSettings.codemirror, codemirror_gen, codemirror_el,);
214	171	// const tab = document.querySelector('[data-content="js-code"]');
215	172	// tab.classList.add('tab-content-active');
216		- const jseditor = wp.codeEditor.initialize(js_code, editorSettings);
	173	+ jseditor = wp.codeEditor.initialize(js_code, editorSettings);
217	174	// tab.classList.remove('tab-content-active');
218	175
219	176	const jsNavigationMenu = document.getElementById("jsNavigationMenu");
220	177
		@@ -347,8 +304,97 @@
347	304
348	305
349	306	}
350	307
	308	+
	309	+ // Live Preview
	310	+ let timeout;
	311	+ const previewCheckbox = document.getElementById('checkbox_preview');
	312	+
	313	+ function initPreviewListener() {
	314	+ document.querySelectorAll('.wowp-settings__page-content').forEach(editor => {
	315	+ editor.addEventListener('keydown', () => {
	316	+ clearTimeout(timeout);
	317	+ if (previewCheckbox.checked) {
	318	+ timeout = setTimeout(updatePreview, 500);
	319	+ }
	320	+ });
	321	+ });
	322	+ }
	323	+
	324	+
	325	+ if (previewCheckbox) {
	326	+ updatePreview();
	327	+
	328	+ previewCheckbox.addEventListener('change', () => {
	329	+ if (previewCheckbox.checked) {
	330	+ updatePreview();
	331	+ }
	332	+ });
	333	+ }
	334	+
	335	+ initPreviewListener();
	336	+
	337	+ function updatePreview() {
	338	+ const html = htmleditor.codemirror.getValue();
	339	+ const css = csseditor.codemirror.getValue();
	340	+
	341	+ let styleLinks = [];
	342	+
	343	+ document.querySelectorAll('input[id*="include_file_"]').forEach(input => {
	344	+ const url = input.value.trim();
	345	+
	346	+ if (url.includes('.css')) {
	347	+ styleLinks.push(`<link rel="stylesheet" href="${url}">`);
	348	+ }
	349	+ });
	350	+
	351	+ const iframe = document.getElementById('wowp-preview');
	352	+ iframe.setAttribute("srcdoc", `
	353	+ <!DOCTYPE html>
	354	+ <html>
	355	+ <head>
	356	+ <style>body{margin:0;padding:0;box-sizing:border-box;}</style>
	357	+ ${styleLinks.join('\n')}
	358	+ <style>${css}</style>
	359	+ </head>
	360	+ <body>${html}</body>
	361	+ </html>
	362	+ `);
	363	+ }
	364	+
	365	+ jQuery('.wowp-preview__dot.is-toggle').on('click', function () {
	366	+ jQuery(this).toggleClass('is-active');
	367	+ jQuery(this).find('.dashicons').toggleClass('is-hidden');
	368	+ jQuery('.wowp-preview__iframe #wowp-preview').toggleClass('is-hidden');
	369	+ jQuery('.wowp-preview__iframe').toggleClass('is-toggled');
	370	+ });
	371	+
	372	+ jQuery('.wowp-preview__dot.is-reset').on('click', function () {
	373	+ jQuery('.wowp-preview__iframe').removeAttr('style');
	374	+ updatePreview();
	375	+ });
	376	+
	377	+ const iframe = jQuery('.wowp-preview__iframe');
	378	+ const $size = iframe.find('.wowp-preview__size');
	379	+ // let timeout;
	380	+
	381	+ if (iframe.length && $size.length) {
	382	+ const observer = new ResizeObserver(entries => {
	383	+ for (const entry of entries) {
	384	+ const width = Math.round(entry.contentRect.width);
	385	+ const height = Math.round(entry.contentRect.height) - 50;
	386	+
	387	+ $size.text(`${width}px × ${height}px`).fadeIn(150);
	388	+
	389	+ clearTimeout(timeout);
	390	+ // timeout = setTimeout(() => $size.fadeOut(300), 3000);
	391	+ }
	392	+ });
	393	+
	394	+ observer.observe(iframe[0]);
	395	+ }
	396	+
351	397	}
352	398
353	399
354	400	const changeTemplate = function () {
		@@ -377,8 +423,9 @@
377	423	case 'post_in_category':
378	424	case 'page_selected':
379	425	case 'archive_category':
380	426	case 'archive_tag':
	427	+ case 'archive_author':
381	428	elements[1].classList.remove('is-hidden');
382	429	elements[2].classList.remove('is-hidden');
383	430	elements[3].classList.add('is-hidden');
384	431	break;
		@@ -429,8 +476,8 @@
429	476
430	477	document.addEventListener('DOMContentLoaded', function () {
431	478
432	479	new codeEditor;
433		- new settingTabs;
434	480	new changeTemplate;
435	481	new feature;
	482	+
436	483	})