Squeeze – Image Optimization & Compression, WEBP Conversion / 1.6

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

squeeze / assets / js / admin.js

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

185 lines 6.1 KB

Raw Download Zip

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