fix: refactor version switch JS

imantsk · imantsk · commit 5e45f116ab69 · 2025-10-16T15:46:50.000+03:00
ref: #251 (comment)
diff --git a/src/js/services/settings/index.ts b/src/js/services/settings/index.ts
@@ -1,2 +1,3 @@
 export { handleSettingsTabs } from './tabs'
 export { handleEditorPreviewUpdates } from './editor-preview'
+export { initVersionSwitch } from './version'
diff --git a/src/js/services/settings/version.ts b/src/js/services/settings/version.ts
@@ -0,0 +1,182 @@
+// Handles version switching UI on the settings screen.
+// Exported init function so callers can opt-in like other settings modules.
+// Uses vanilla DOM APIs and the global `code_snippets_version_switch` config
+// injected by PHP via wp_add_inline_script.
+
+interface VersionConfig {
+	ajaxurl?: string
+	nonce_switch?: string
+	nonce_refresh?: string
+
+}
+
+interface AjaxResponse {
+	success?: boolean
+	data?: {
+		message?: string
+	}
+}
+
+declare global {
+	interface Window {
+		code_snippets_version_switch?: VersionConfig
+		__code_snippets_i18n?: Record<string, string>
+	}
+}
+
+const el = (id: string): HTMLElement | null => document.getElementById(id)
+
+const getConfig = (): VersionConfig => {
+	const w = <{ code_snippets_version_switch?: VersionConfig }><unknown>window
+	return w.code_snippets_version_switch ?? {}
+}
+
+const getCurrentVersion = (): string => (document.querySelector('.current-version')?.textContent ?? '').trim()
+
+const getI18n = (key: string, fallback: string): string => window.__code_snippets_i18n?.[key] ?? fallback
+
+const bindDropdown = (
+	dropdown: HTMLSelectElement,
+	button: HTMLButtonElement | null,
+	currentVersion: string,
+): void => {
+	dropdown.addEventListener('change', (): void => {
+		const selectedVersion = dropdown.value
+		if (!button) {
+			return
+		}
+		if (!selectedVersion || selectedVersion === currentVersion) {
+			button.disabled = true
+			const warn = el('version-switch-warning')
+			if (warn) { warn.setAttribute('style', 'display: none;') }
+		} else {
+			button.disabled = false
+			const warn = el('version-switch-warning')
+			if (warn) { warn.setAttribute('style', '') }
+		}
+	})
+}
+
+const SUCCESS_RELOAD_MS = 3000
+
+const postForm = async (data: Record<string, string>, cfg: VersionConfig): Promise<AjaxResponse> => {
+	const body = new URLSearchParams()
+	Object.keys(data).forEach(k => body.append(k, data[k]))
+	const resp = await fetch(cfg.ajaxurl ?? '/wp-admin/admin-ajax.php', {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
+		body: body.toString(),
+		credentials: 'same-origin',
+	})
+	const json = <AjaxResponse> await resp.json()
+	return json
+}
+
+const bindSwitch = (
+	button: HTMLButtonElement,
+	dropdown: HTMLSelectElement,
+	result: HTMLDivElement,
+	cfg: VersionConfig,
+	currentVersion: string,
+): void => {
+	button.addEventListener('click', (): void => {
+		void (async (): Promise<void> => {
+			const targetVersion = dropdown.value
+			if (!targetVersion || targetVersion === currentVersion) {
+				result.className = 'notice notice-warning'
+				result.innerHTML = `<p>${getI18n('selectDifferent', 'Please select a different version to switch to.')}</p>`
+				result.style.display = ''
+				return
+			}
+
+			button.disabled = true
+			const originalText = button.textContent ?? ''
+			button.textContent = getI18n('switching', 'Switching...')
+
+			result.className = 'notice notice-info'
+			result.innerHTML = `<p>${getI18n('processing', 'Processing version switch. Please wait...')}</p>`
+			result.style.display = ''
+
+			try {
+				const response = await postForm({
+					action: 'code_snippets_switch_version',
+					target_version: targetVersion,
+					nonce: cfg.nonce_switch ?? '',
+				}, cfg)
+
+				if (response.success) {
+					result.className = 'notice notice-success'
+					result.innerHTML = `<p>${response.data?.message ?? ''}</p>`
+					setTimeout(() => window.location.reload(), SUCCESS_RELOAD_MS)
+					return
+				}
+
+				result.className = 'notice notice-error'
+				result.innerHTML = `<p>${response.data?.message ?? getI18n('error', 'An error occurred.')}</p>`
+				button.disabled = false
+				button.textContent = originalText
+			} catch (_err) {
+				result.className = 'notice notice-error'
+				result.innerHTML = `<p>${getI18n('errorSwitch', 'An error occurred while switching versions. Please try again.')}</p>`
+				button.disabled = false
+				button.textContent = originalText
+			}
+		})()
+	})
+}
+
+const REFRESH_RELOAD_MS = 1000
+
+const bindRefresh = (
+	btn: HTMLButtonElement,
+	cfg: VersionConfig,
+): void => {
+	btn.addEventListener('click', (): void => {
+		void (async (): Promise<void> => {
+			const original = btn.textContent ?? ''
+			btn.disabled = true
+			btn.textContent = getI18n('refreshing', 'Refreshing...')
+
+			try {
+				await postForm({
+					action: 'code_snippets_refresh_versions',
+					nonce: cfg.nonce_refresh ?? '',
+				}, cfg)
+
+				btn.textContent = getI18n('refreshed', 'Refreshed!')
+				setTimeout(() => {
+					btn.disabled = false
+					btn.textContent = original
+					window.location.reload()
+				}, REFRESH_RELOAD_MS)
+			} catch {
+				btn.disabled = false
+				btn.textContent = original
+			}
+		})()
+	})
+}
+
+export const initVersionSwitch = (): void => {
+	const cfg = getConfig()
+	const currentVersion = getCurrentVersion()
+
+	const button = <HTMLButtonElement | null> el('switch-version-btn')
+	const dropdown = <HTMLSelectElement | null> el('target_version')
+	const result = <HTMLDivElement | null> el('version-switch-result')
+	const refreshBtn = <HTMLButtonElement | null> el('refresh-versions-btn')
+
+	if (dropdown) {
+		bindDropdown(dropdown, button, currentVersion)
+	}
+
+	if (button && dropdown && result) {
+		bindSwitch(button, dropdown, result, cfg, currentVersion)
+	}
+
+	if (refreshBtn) {
+		bindRefresh(refreshBtn, cfg)
+	}
+}
+
+
diff --git a/src/js/settings.ts b/src/js/settings.ts
@@ -1,4 +1,5 @@
-import { handleEditorPreviewUpdates, handleSettingsTabs } from './services/settings'
+import { handleEditorPreviewUpdates, handleSettingsTabs, initVersionSwitch } from './services/settings'
 
 handleSettingsTabs()
 handleEditorPreviewUpdates()
+initVersionSwitch()
diff --git a/src/php/settings/editor-preview.php b/src/php/settings/editor-preview.php
@@ -63,6 +63,25 @@ function enqueue_editor_preview_assets() {
 	$inline_script = 'var code_snippets_editor_settings = ' . wp_json_encode( $editor_fields ) . ';';
 
 	wp_add_inline_script( 'code-snippets-settings-menu', $inline_script, 'before' );
+
+	// Provide configuration and simple i18n for the version switch JS module.
+	$version_switch = array(
+		'ajaxurl' => admin_url( 'admin-ajax.php' ),
+		'nonce_switch' => wp_create_nonce( 'code_snippets_version_switch' ),
+		'nonce_refresh' => wp_create_nonce( 'code_snippets_refresh_versions' ),
+	);
+
+	$strings = array(
+		'selectDifferent' => esc_html__( 'Please select a different version to switch to.', 'code-snippets' ),
+		'switching' => esc_html__( 'Switching...', 'code-snippets' ),
+		'processing' => esc_html__( 'Processing version switch. Please wait...', 'code-snippets' ),
+		'error' => esc_html__( 'An error occurred.', 'code-snippets' ),
+		'errorSwitch' => esc_html__( 'An error occurred while switching versions. Please try again.', 'code-snippets' ),
+		'refreshing' => esc_html__( 'Refreshing...', 'code-snippets' ),
+		'refreshed' => esc_html__( 'Refreshed!', 'code-snippets' ),
+	);
+
+	wp_add_inline_script( 'code-snippets-settings-menu', 'var code_snippets_version_switch = ' . wp_json_encode( $version_switch ) . '; var __code_snippets_i18n = ' . wp_json_encode( $strings ) . ';', 'before' );
 }
 
 /**
diff --git a/src/php/settings/version-switch.php b/src/php/settings/version-switch.php
@@ -286,40 +286,33 @@ function log_version_switch_attempt( string $target_version, $result, string $de
  * @return array Result array with success status and message
  */
 function handle_version_switch( string $target_version ): array {
-	// Check user capabilities
+
 	if ( ! current_user_can( 'update_plugins' ) ) {
 		return create_error_response( __( 'You do not have permission to update plugins.', 'code-snippets' ) );
 	}
 
-	// Validate target version
 	$available_versions = get_available_versions();
 	$validation = validate_target_version( $target_version, $available_versions );
 	
 	if ( ! $validation['success'] ) {
 		return create_error_response( $validation['message'] );
 	}
 
-	// Check if already on target version
 	if ( get_current_version() === $target_version ) {
 		return create_error_response( __( 'Already on the specified version.', 'code-snippets' ) );
 	}
 
-	// Set switch in progress
 	set_transient( PROGRESS_KEY, $target_version, PROGRESS_TIMEOUT );
 
-	// Perform the version installation
 	$install_result = perform_version_install( $validation['download_url'] );
 
-	// Clear progress transient
 	delete_transient( PROGRESS_KEY );
 
-	// Handle the result
 	if ( is_wp_error( $install_result ) ) {
 		return create_error_response( $install_result->get_error_message() );
 	}
 
 	if ( $install_result ) {
-		// Clear version cache on success
 		delete_transient( VERSION_CACHE_KEY );
 
 		return [
@@ -331,7 +324,6 @@ function handle_version_switch( string $target_version ): array {
 		];
 	}
 
-	// If we get here, the installation failed but didn't return a WP_Error
 	return handle_installation_failure( $target_version, $validation['download_url'], $install_result );
 }
 
@@ -384,76 +376,7 @@ function render_version_switch_field( array $args ): void {
 
 			<div id="version-switch-result" class="notice" style="display: none;"></div>
 		<?php endif; ?>
-	</div>
-
-	<script type="text/javascript">
-	jQuery(document).ready(function($) {
-		var currentVersion = '<?php echo esc_js( $current_version ); ?>';
-		var $button = $('#switch-version-btn');
-		var $dropdown = $('#target_version');
-		var $result = $('#version-switch-result');
-		
-		// Handle dropdown changes - enable/disable button and show/hide warning
-		$dropdown.on('change', function() {
-			var selectedVersion = $(this).val();
-			
-			if (!selectedVersion || selectedVersion === currentVersion) {
-				// Current version or no selection - disable button and hide warning
-				$button.prop('disabled', true);
-				$('#version-switch-warning').hide();
-			} else {
-				// Different version selected - enable button and show warning
-				$button.prop('disabled', false);
-				$('#version-switch-warning').show();
-			}
-		});
-		
-		$button.on('click', function() {
-			var targetVersion = $dropdown.val();
-			
-			if (!targetVersion || targetVersion === currentVersion) {
-				$result.removeClass('notice-success notice-error').addClass('notice-warning')
-					.html('<p><?php esc_html_e( 'Please select a different version to switch to.', 'code-snippets' ); ?></p>')
-					.show();
-				return;
-			}
-
-			// Disable button and show loading
-			$button.prop('disabled', true).text('<?php esc_html_e( 'Switching...', 'code-snippets' ); ?>');
-			$result.removeClass('notice-success notice-error notice-warning').addClass('notice-info')
-				.html('<p><?php esc_html_e( 'Processing version switch. Please wait...', 'code-snippets' ); ?></p>')
-				.show();
-
-			// Make AJAX request
-			$.post(ajaxurl, {
-				action: 'code_snippets_switch_version',
-				target_version: targetVersion,
-				nonce: '<?php echo esc_js( wp_create_nonce( 'code_snippets_version_switch' ) ); ?>'
-			})
-			.done(function(response) {
-				if (response.success) {
-					$result.removeClass('notice-info notice-error').addClass('notice-success')
-						.html('<p>' + response.data.message + '</p>');
-					
-					// Refresh page after 3 seconds
-					setTimeout(function() {
-						window.location.reload();
-					}, 3000);
-				} else {
-					$result.removeClass('notice-info notice-success').addClass('notice-error')
-						.html('<p>' + response.data.message + '</p>');
-					$button.prop('disabled', false).text('<?php esc_html_e( 'Switch Version', 'code-snippets' ); ?>');
-				}
-			})
-			.fail(function() {
-				$result.removeClass('notice-info notice-success').addClass('notice-error')
-					.html('<p><?php esc_html_e( 'An error occurred while switching versions. Please try again.', 'code-snippets' ); ?></p>');
-				$button.prop('disabled', false).text('<?php esc_html_e( 'Switch Version', 'code-snippets' ); ?>');
-			});
-		});
-	});
-	</script>
-	<?php
+	</div><?php
 }
 
 /**
@@ -504,33 +427,7 @@ function render_refresh_versions_field( array $args ): void {
 	</button>
 	<p class="description">
 		<?php esc_html_e( 'Check for the latest available plugin versions from WordPress.org.', 'code-snippets' ); ?>
-	</p>
-
-	<script type="text/javascript">
-	jQuery(document).ready(function($) {
-		$('#refresh-versions-btn').on('click', function() {
-			var $button = $(this);
-			$button.prop('disabled', true).text('<?php esc_html_e( 'Refreshing...', 'code-snippets' ); ?>');
-
-			$.post(ajaxurl, {
-				action: 'code_snippets_refresh_versions',
-				nonce: '<?php echo esc_js( wp_create_nonce( 'code_snippets_refresh_versions' ) ); ?>'
-			})
-			.done(function(response) {
-				$button.text('<?php esc_html_e( 'Refreshed!', 'code-snippets' ); ?>');
-				setTimeout(function() {
-					$button.prop('disabled', false).text('<?php esc_html_e( 'Refresh Available Versions', 'code-snippets' ); ?>');
-					// Reload page to show updated versions
-					window.location.reload();
-				}, 1000);
-			})
-			.fail(function() {
-				$button.prop('disabled', false).text('<?php esc_html_e( 'Refresh Available Versions', 'code-snippets' ); ?>');
-			});
-		});
-	});
-	</script>
-	<?php
+	</p><?php
 }
 
 /**

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`export { handleSettingsTabs } from './tabs'`
`2`	`2`	`export { handleEditorPreviewUpdates } from './editor-preview'`
	`3`	`+export { initVersionSwitch } from './version'`