monorepo/native/wordpress/maple-icons-wp/assets/admin.js

/**
 * Maple Icons - Admin JavaScript
 *
 * @package MapleIcons
 */

(function($) {
	'use strict';

	/**
	 * Show message on a card.
	 *
	 * @param {jQuery} $card   The card element.
	 * @param {string} message The message text.
	 * @param {string} type    Message type: success, error, info.
	 */
	function showMessage($card, message, type) {
		var $message = $card.find('.mi-set-message');
		$message
			.removeClass('mi-message-success mi-message-error mi-message-info')
			.addClass('mi-message-' + type)
			.text(message)
			.show();

		// Auto-hide success messages after 5 seconds.
		if (type === 'success') {
			setTimeout(function() {
				$message.fadeOut();
			}, 5000);
		}
	}

	/**
	 * Hide message on a card.
	 *
	 * @param {jQuery} $card The card element.
	 */
	function hideMessage($card) {
		$card.find('.mi-set-message').hide();
	}

	/**
	 * Show progress bar.
	 *
	 * @param {jQuery} $card The card element.
	 */
	function showProgress($card) {
		$card.find('.mi-set-progress').show();
		$card.find('.mi-set-actions').hide();
	}

	/**
	 * Hide progress bar.
	 *
	 * @param {jQuery} $card The card element.
	 */
	function hideProgress($card) {
		$card.find('.mi-set-progress').hide();
		$card.find('.mi-set-actions').show();
	}

	/**
	 * Update progress bar.
	 *
	 * @param {jQuery} $card      The card element.
	 * @param {number} percentage Progress percentage (0-100).
	 * @param {string} text       Progress text.
	 */
	function updateProgress($card, percentage, text) {
		$card.find('.mi-progress-fill').css('width', percentage + '%');
		$card.find('.mi-progress-text').text(text);
	}

	/**
	 * Poll download progress.
	 *
	 * @param {string} slug  Icon set slug.
	 * @param {jQuery} $card The card element.
	 */
	function pollProgress(slug, $card) {
		$.ajax({
			url: miAdmin.ajaxUrl,
			type: 'POST',
			data: {
				action: 'mi_get_progress',
				nonce: miAdmin.nonce,
				slug: slug
			},
			success: function(response) {
				if (response.success && response.data.downloading) {
					var percentage = response.data.percentage || 0;
					var text = response.data.completed + ' / ' + response.data.total + ' icons';
					updateProgress($card, percentage, text);

					// Continue polling if still downloading.
					setTimeout(function() {
						pollProgress(slug, $card);
					}, 1000);
				}
			}
		});
	}

	/**
	 * Handle download button click.
	 */
	$(document).on('click', '.mi-download-btn', function(e) {
		e.preventDefault();

		var $btn = $(this);
		var $card = $btn.closest('.mi-set-card');
		var slug = $btn.data('slug');

		if ($btn.hasClass('mi-loading')) {
			return;
		}

		$btn.addClass('mi-loading');
		$card.addClass('mi-set-downloading');
		hideMessage($card);
		showProgress($card);
		updateProgress($card, 0, miAdmin.strings.downloading);

		// Start polling for progress.
		setTimeout(function() {
			pollProgress(slug, $card);
		}, 500);

		$.ajax({
			url: miAdmin.ajaxUrl,
			type: 'POST',
			data: {
				action: 'mi_download_set',
				nonce: miAdmin.nonce,
				slug: slug
			},
			success: function(response) {
				hideProgress($card);
				$btn.removeClass('mi-loading');
				$card.removeClass('mi-set-downloading');

				if (response.success) {
					showMessage($card, response.data.message || miAdmin.strings.downloadSuccess, 'success');
					// Reload page to update UI state.
					setTimeout(function() {
						location.reload();
					}, 1500);
				} else {
					showMessage($card, response.data.message || miAdmin.strings.downloadError, 'error');
				}
			},
			error: function() {
				hideProgress($card);
				$btn.removeClass('mi-loading');
				$card.removeClass('mi-set-downloading');
				showMessage($card, miAdmin.strings.downloadError, 'error');
			}
		});
	});

	/**
	 * Handle delete button click.
	 */
	$(document).on('click', '.mi-delete-btn', function(e) {
		e.preventDefault();

		var $btn = $(this);
		var $card = $btn.closest('.mi-set-card');
		var slug = $btn.data('slug');

		if ($btn.hasClass('mi-loading')) {
			return;
		}

		if (!confirm(miAdmin.strings.confirmDelete)) {
			return;
		}

		$btn.addClass('mi-loading');
		hideMessage($card);

		$.ajax({
			url: miAdmin.ajaxUrl,
			type: 'POST',
			data: {
				action: 'mi_delete_set',
				nonce: miAdmin.nonce,
				slug: slug
			},
			success: function(response) {
				$btn.removeClass('mi-loading');

				if (response.success) {
					showMessage($card, response.data.message || miAdmin.strings.deleteSuccess, 'success');
					// Reload page to update UI state.
					setTimeout(function() {
						location.reload();
					}, 1500);
				} else {
					showMessage($card, response.data.message || miAdmin.strings.deleteError, 'error');
				}
			},
			error: function() {
				$btn.removeClass('mi-loading');
				showMessage($card, miAdmin.strings.deleteError, 'error');
			}
		});
	});

	/**
	 * Handle activate button click.
	 */
	$(document).on('click', '.mi-activate-btn, .mi-deactivate-btn', function(e) {
		e.preventDefault();

		var $btn = $(this);
		var $card = $btn.closest('.mi-set-card');
		var slug = $btn.data('slug');

		if ($btn.hasClass('mi-loading')) {
			return;
		}

		$btn.addClass('mi-loading');
		hideMessage($card);

		$.ajax({
			url: miAdmin.ajaxUrl,
			type: 'POST',
			data: {
				action: 'mi_set_active',
				nonce: miAdmin.nonce,
				slug: slug
			},
			success: function(response) {
				$btn.removeClass('mi-loading');

				if (response.success) {
					showMessage($card, response.data.message || miAdmin.strings.activateSuccess, 'success');
					// Reload page to update UI state.
					setTimeout(function() {
						location.reload();
					}, 1000);
				} else {
					showMessage($card, response.data.message || miAdmin.strings.activateError, 'error');
				}
			},
			error: function() {
				$btn.removeClass('mi-loading');
				showMessage($card, miAdmin.strings.activateError, 'error');
			}
		});
	});

})(jQuery);