Squeeze – Image Optimization & Compression, WEBP Conversion / 1.5

Squeeze – Image Optimization & Compression, WEBP Conversion v1.5

squeeze / assets / js / admin.js

admin.js in Squeeze – Image Optimization & Compression, WEBP Conversion 1.5, at assets/js/admin.js

183 lines 6.1 KB

Raw Download Zip

1	(function() {
2	const { __ } = wp.i18n;
3	const restoreButton = document.querySelector("input[name='squeeze_restore_button']")
4	const postsFilterForm = document.querySelector("#posts-filter")
5	/**
6	* Handle restore defaults button click
7	*/
8	restoreButton?.addEventListener("click", (event) => {
9	const form = event.target.closest("form");
10	const squeeze_setting_restore_defaults = form.querySelector("#squeeze_setting_restore_defaults")
11	squeeze_setting_restore_defaults.value = "1"; // triggers 'update_option_squeeze_options' hook
12	HTMLFormElement.prototype.submit.call(form) // default method submit() doesn't work when form has input with name="submit"
13	})
14
15	postsFilterForm?.addEventListener("submit", (event) => {
16	const action = postsFilterForm.querySelector("select[name='action']").value;
17
18	if (action === "squeeze_bulk_delete_backup") {
19	event.preventDefault();
20	if (confirm("Are you sure you want to delete backups of the selected images?")) {
21	postsFilterForm.submit();
22	}
23	}
24	});
25
26	document.addEventListener('DOMContentLoaded', () => {
27	/**
28	* Get Tab Key
29	*/
30	const getTabKey = (href) => href.replace('#', '');
31
32	/**
33	* Hide all tabs
34	*/
35	const hideAllTabs = (tabs) => {
36	tabs.forEach((tab) => {
37	const href = getTabKey(tab.getAttribute('href'));
38	const content = document.getElementById(href);
39	if (content) {
40	content.style.display = 'none';
41	}
42	});
43	};
44
45	/**
46	* Activate Tab
47	*/
48	const activateTab = (tab, tabs) => {
49	const href = getTabKey(tab.getAttribute('href'));
50	const content = document.getElementById(href);
51
52	tabs.forEach((t) => t.classList.remove('nav-tab-active'));
53	tab.classList.add('nav-tab-active');
54
55	if (content) {
56	content.style.display = '';
57	}
58
59	window.history.pushState({ tab: href }, tab.textContent, `#${href}`);
60	};
61
62	/**
63	* Initialize Tabs
64	*/
65	const initializeTabs = () => {
66	const tabs = Array.from(document.querySelectorAll('a.nav-tab'));
67	let activeTab = null;
68	let firstTab = null;
69
70	hideAllTabs(tabs);
71
72	tabs.forEach((tab, index) => {
73	const href = getTabKey(tab.getAttribute('href'));
74	if (!firstTab) firstTab = tab;
75	if (tab.classList.contains('nav-tab-active')) activeTab = tab;
76
77	tab.addEventListener('click', (e) => {
78	e.preventDefault();
79	hideAllTabs(tabs);
80	activateTab(tab, tabs);
81	});
82
83	if (window.location.hash === `#${href}`) {
84	activeTab = tab;
85	}
86	});
87
88	if (!activeTab) {
89	activeTab = firstTab;
90	}
91
92	if (activeTab) {
93	activateTab(activeTab, tabs);
94	}
95	};
96
97	/**
98	* Handle Back/Forward Navigation
99	*/
100	const handlePopState = () => {
101	const hash = window.location.hash;
102	const tab = document.querySelector(`a.nav-tab[href="${hash}"]`);
103	if (tab) {
104	const tabs = Array.from(document.querySelectorAll('a.nav-tab'));
105	hideAllTabs(tabs);
106	activateTab(tab, tabs);
107	}
108	};
109
110	initializeTabs();
111	window.addEventListener('popstate', handlePopState);
112
113	// hide hidden options if no :has support
114	if (!CSS.supports('selector(:has(*))')) {
115	const hiddenOptions = document.querySelectorAll('.form-table .squeeze-hidden');
116	hiddenOptions.forEach((option) => {
117	const tr = option.closest('tr');
118	tr.style.display = 'none';
119	});
120	}
121
122	const autoWebpCheckbox = document.querySelector('input[name="squeeze_options[auto_webp]"]');
123	autoWebpCheckbox?.addEventListener('change', (event) => {
124	const webpReplaceUrlsCheckbox = document.querySelector('input[name="squeeze_options[webp_replace_urls]"]');
125	if (event.target.checked) {
126	webpReplaceUrlsCheckbox.classList.remove('squeeze-hidden');
127	webpReplaceUrlsCheckbox.closest('tr').style.display = '';
128	} else {
129	webpReplaceUrlsCheckbox.classList.add('squeeze-hidden');
130	webpReplaceUrlsCheckbox.closest('tr').style.display = 'none';
131	}
132	});
133	});
134
135	/**
136	* Create a new MediaLibrarySqueezeFilter
137	*
138	* @see https://gist.github.com/danielbachhuber/0e4ff7ad82ffc15ceacf
139	*/
140	const MediaLibrarySqueezeFilter = wp.media.view.AttachmentFilters.extend({
141	id: 'media-attachment-squeeze-filter',
142
143	createFilters() {
144	this.filters = {
145	all: {
146	text: __('Squeeze: All images', 'squeeze'),
147	props: {
148	squeeze_filter: 'all'
149	},
150	priority: 10,
151	},
152
153	nonsqueezed: {
154	text: __('Non Squeezed Images', 'squeeze'),
155	props: {
156	squeeze_filter: 'non-squeezed'
157	},
158	priority: 20,
159	},
160	};
161	},
162	});
163
164	/**
165	* Extend and override wp.media.view.AttachmentsBrowser to include our new filter.
166	*/
167	const AttachmentsBrowser = wp.media.view.AttachmentsBrowser;
168	wp.media.view.AttachmentsBrowser = wp.media.view.AttachmentsBrowser.extend({
169	createToolbar() {
170	// Make sure to load the original toolbar
171	AttachmentsBrowser.prototype.createToolbar.call(this);
172	this.toolbar.set(
173	'MediaLibrarySqueezeFilter',
174	new MediaLibrarySqueezeFilter({
175	controller: this.controller,
176	model: this.collection.props,
177	priority: -75,
178	}).render()
179	);
180	},
181	});
182
183	})()