← All changes | js/services/settings/version.ts +52 -43 3.9.6 → trunk View file →

		@@ -1,6 +1,6 @@
1	1	// Handles version switching UI on the settings screen.
2		-// Exported init function so callers can opt-in like other settings modules.
	2	+// Exported init function so callers can opt in like other settings modules.
3	3	// Uses vanilla DOM APIs and the global `code_snippets_version_switch` config
4	4	// injected by PHP via wp_add_inline_script.
5	5
6	6	interface VersionConfig {
		@@ -6,9 +6,8 @@
6	6	interface VersionConfig {
7	7	ajaxurl?: string
8	8	nonce_switch?: string
9	9	nonce_refresh?: string
10		-
11	10	}
12	11
13	12	interface AjaxResponse {
14	13	success?: boolean
		@@ -19,41 +18,44 @@
19	18
20	19	declare global {
21	20	interface Window {
22	21	code_snippets_version_switch?: VersionConfig
23		- __code_snippets_i18n?: Record<string, string>
	22	+ __code_snippets_i18n?: {
	23	+ selectDifferent: string
	24	+ switching: string
	25	+ processing: string
	26	+ error: string
	27	+ errorSwitch: string
	28	+ refreshing: string
	29	+ refreshed: string
	30	+ }
24	31	}
25	32	}
26	33
27		-const el = (id: string): HTMLElement | null => document.getElementById(id)
	34	+const i18n = window.__code_snippets_i18n
28	35
29		-const getConfig = (): VersionConfig => {
30		- const w = <{ code_snippets_version_switch?: VersionConfig }><unknown>window
31		- return w.code_snippets_version_switch ?? {}
32		-}
	36	+const getCurrentVersion = (): string =>
	37	+ (document.querySelector('.current-version')?.textContent ?? '').trim()
33	38
34		-const getCurrentVersion = (): string => (document.querySelector('.current-version')?.textContent ?? '').trim()
35		-
36		-const getI18n = (key: string, fallback: string): string => window.__code_snippets_i18n?.[key] ?? fallback
37		-
38	39	const bindDropdown = (
39	40	dropdown: HTMLSelectElement,
40	41	button: HTMLButtonElement | null,
41		- currentVersion: string,
	42	+ currentVersion: string
42	43	): void => {
43		- dropdown.addEventListener('change', (): void => {
	44	+ const warningNotice = document.getElementById('version-switch-warning')
	45	+
	46	+ dropdown.addEventListener('change', () => {
44	47	const selectedVersion = dropdown.value
45	48	if (!button) {
46	49	return
47	50	}
	51	+
48	52	if (!selectedVersion || selectedVersion === currentVersion) {
49	53	button.disabled = true
50		- const warn = el('version-switch-warning')
51		- if (warn) { warn.setAttribute('style', 'display: none;') }
	54	+ warningNotice?.classList.add('hidden')
52	55	} else {
53	56	button.disabled = false
54		- const warn = el('version-switch-warning')
55		- if (warn) { warn.setAttribute('style', '') }
	57	+ warningNotice?.classList.remove('hidden')
56	58	}
57	59	})
58	60	}
59	61
		@@ -58,19 +60,24 @@
58	60	}
59	61
60	62	const SUCCESS_RELOAD_MS = 3000
61	63
62		-const postForm = async (data: Record<string, string>, cfg: VersionConfig): Promise<AjaxResponse> => {
	64	+const postForm = async (data: Record<string, string>, config: VersionConfig): Promise<AjaxResponse> => {
63	65	const body = new URLSearchParams()
64	66	Object.keys(data).forEach(k => body.append(k, data[k]))
65		- const resp = await fetch(cfg.ajaxurl ?? '/wp-admin/admin-ajax.php', {
	67	+
	68	+ if (!config.ajaxurl) {
	69	+ throw new Error('ajaxurl not defined in config')
	70	+ }
	71	+
	72	+ const resp = await fetch(config.ajaxurl, {
66	73	method: 'POST',
67	74	headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
68	75	body: body.toString(),
69		- credentials: 'same-origin',
	76	+ credentials: 'same-origin'
70	77	})
71		- const json = <AjaxResponse> await resp.json()
72		- return json
	78	+
	79	+ return <AjaxResponse> await resp.json()
73	80	}
74	81
75	82	const bindSwitch = (
76	83	button: HTMLButtonElement,
		@@ -76,9 +83,9 @@
76	83	button: HTMLButtonElement,
77	84	dropdown: HTMLSelectElement,
78	85	result: HTMLDivElement,
79	86	cfg: VersionConfig,
80		- currentVersion: string,
	87	+ currentVersion: string
81	88	): void => {
82	89	button.addEventListener('click', (): void => {
83	90	void (async (): Promise<void> => {
84	91	const targetVersion = dropdown.value
		@@ -83,9 +90,9 @@
83	90	void (async (): Promise<void> => {
84	91	const targetVersion = dropdown.value
85	92	if (!targetVersion || targetVersion === currentVersion) {
86	93	result.className = 'notice notice-warning'
87		- result.innerHTML = `<p>${getI18n('selectDifferent', 'Please select a different version to switch to.')}</p>`
	94	+ result.innerHTML = `<p>${i18n?.selectDifferent}</p>`
88	95	result.style.display = ''
89	96	return
90	97	}
91	98
		@@ -90,12 +97,12 @@
90	97	}
91	98
92	99	button.disabled = true
93	100	const originalText = button.textContent ?? ''
94		- button.textContent = getI18n('switching', 'Switching...')
	101	+ button.textContent = i18n?.switching ?? ''
95	102
96	103	result.className = 'notice notice-info'
97		- result.innerHTML = `<p>${getI18n('processing', 'Processing version switch. Please wait...')}</p>`
	104	+ result.innerHTML = `<p>${i18n?.processing}</p>`
98	105	result.style.display = ''
99	106
100	107	try {
101	108	const response = await postForm({
		@@ -100,9 +107,9 @@
100	107	try {
101	108	const response = await postForm({
102	109	action: 'code_snippets_switch_version',
103	110	target_version: targetVersion,
104		- nonce: cfg.nonce_switch ?? '',
	111	+ nonce: cfg.nonce_switch ?? ''
105	112	}, cfg)
106	113
107	114	if (response.success) {
108	115	result.className = 'notice notice-success'
		@@ -111,14 +118,14 @@
111	118	return
112	119	}
113	120
114	121	result.className = 'notice notice-error'
115		- result.innerHTML = `<p>${response.data?.message ?? getI18n('error', 'An error occurred.')}</p>`
	122	+ result.innerHTML = `<p>${response.data?.message ?? i18n?.error}</p>`
116	123	button.disabled = false
117	124	button.textContent = originalText
118	125	} catch (_err) {
119	126	result.className = 'notice notice-error'
120		- result.innerHTML = `<p>${getI18n('errorSwitch', 'An error occurred while switching versions. Please try again.')}</p>`
	127	+ result.innerHTML = `<p>${i18n?.errorSwitch}</p>`
121	128	button.disabled = false
122	129	button.textContent = originalText
123	130	}
124	131	})()
		@@ -128,23 +135,23 @@
128	135	const REFRESH_RELOAD_MS = 1000
129	136
130	137	const bindRefresh = (
131	138	btn: HTMLButtonElement,
132		- cfg: VersionConfig,
	139	+ cfg: VersionConfig
133	140	): void => {
134	141	btn.addEventListener('click', (): void => {
135	142	void (async (): Promise<void> => {
136	143	const original = btn.textContent ?? ''
137	144	btn.disabled = true
138		- btn.textContent = getI18n('refreshing', 'Refreshing...')
	145	+ btn.textContent = i18n?.error ?? ''
139	146
140	147	try {
141	148	await postForm({
142	149	action: 'code_snippets_refresh_versions',
143		- nonce: cfg.nonce_refresh ?? '',
	150	+ nonce: cfg.nonce_refresh ?? ''
144	151	}, cfg)
145	152
146		- btn.textContent = getI18n('refreshed', 'Refreshed!')
	153	+ btn.textContent = i18n?.refreshed ?? ''
147	154	setTimeout(() => {
148	155	btn.disabled = false
149	156	btn.textContent = original
150	157	window.location.reload()
		@@ -157,26 +164,28 @@
157	164	})
158	165	}
159	166
160	167	export const initVersionSwitch = (): void => {
161		- const cfg = getConfig()
162	168	const currentVersion = getCurrentVersion()
	169	+ const config = window.code_snippets_version_switch
163	170
164		- const button = <HTMLButtonElement | null> el('switch-version-btn')
165		- const dropdown = <HTMLSelectElement | null> el('target_version')
166		- const result = <HTMLDivElement | null> el('version-switch-result')
167		- const refreshBtn = <HTMLButtonElement | null> el('refresh-versions-btn')
	171	+ if (!config) {
	172	+ throw Error('version switch config missing')
	173	+ }
168	174
	175	+ const button = <HTMLButtonElement | null> document.getElementById('switch-version-btn')
	176	+ const dropdown = <HTMLSelectElement | null> document.getElementById('target_version')
	177	+ const result = <HTMLDivElement | null> document.getElementById('version-switch-result')
	178	+ const refreshBtn = <HTMLButtonElement | null> document.getElementById('refresh-versions-btn')
	179	+
169	180	if (dropdown) {
170	181	bindDropdown(dropdown, button, currentVersion)
171	182	}
172	183
173	184	if (button && dropdown && result) {
174		- bindSwitch(button, dropdown, result, cfg, currentVersion)
	185	+ bindSwitch(button, dropdown, result, config, currentVersion)
175	186	}
176	187
177	188	if (refreshBtn) {
178		- bindRefresh(refreshBtn, cfg)
	189	+ bindRefresh(refreshBtn, config)
179	190	}
180	191	}
181		-
182		-