marcus/wpa-superstar-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement standard WordPress plugin loading spinner

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-16 18:48:00 +00:00
parent 7b9c0fbfe9
commit a28f3ed267
2 changed files with 52 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
admin/js/wp-allstars-admin.js
View File

@ -1,3 +1,6 @@
// Define loadTheme in the global scope so it can be called from inline scripts
var loadTheme;
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
// Function to show notification // Function to show notification
function showNotification(message, $element, isError = false) { function showNotification(message, $element, isError = false) {
@ -20,6 +23,7 @@ jQuery(document).ready(function($) {
$notification.fadeOut(300, function() { $notification.fadeOut(300, function() {
$(this).remove(); $(this).remove();
}); });
}, 2000); }, 2000);
} }
@ -40,6 +44,7 @@ jQuery(document).ready(function($) {
} }
return response; return response;
}); });
} }
// Handle toggle switch clicks // Handle toggle switch clicks
@ -50,11 +55,13 @@ jQuery(document).ready(function($) {
$checkbox.prop('checked', !isChecked).trigger('change'); $checkbox.prop('checked', !isChecked).trigger('change');
}); });
// Prevent label clicks from toggling the checkbox directly // Prevent label clicks from toggling the checkbox directly
$('.wp-setting-label, .wp-allstars-toggle-left label').on('click', function(e) { $('.wp-setting-label, .wp-allstars-toggle-left label').on('click', function(e) {
e.stopPropagation(); e.stopPropagation();
}); });
// Handle checkbox changes // Handle checkbox changes
$('.wp-toggle-switch input[type="checkbox"]').on('change', function(e) { $('.wp-toggle-switch input[type="checkbox"]').on('change', function(e) {
e.stopPropagation(); e.stopPropagation();
@ -70,8 +77,10 @@ jQuery(document).ready(function($) {
.catch(function() { .catch(function() {
showNotification('Error saving settings', $label, true); showNotification('Error saving settings', $label, true);
}); });
}); });
// Handle text input changes // Handle text input changes
$('.wp-allstars-setting-row input[type="text"], .wp-allstars-setting-row input[type="number"], .wp-allstars-setting-row textarea').on('change', function() { $('.wp-allstars-setting-row input[type="text"], .wp-allstars-setting-row input[type="number"], .wp-allstars-setting-row textarea').on('change', function() {
var $input = $(this); var $input = $(this);
@ -87,8 +96,10 @@ jQuery(document).ready(function($) {
console.error('Error:', error); console.error('Error:', error);
showNotification('Error saving setting', $label, true); showNotification('Error saving setting', $label, true);
}); });
}); });
// Toggle expandable panels // Toggle expandable panels
$('.wp-allstars-toggle-header').on('click', function(e) { $('.wp-allstars-toggle-header').on('click', function(e) {
if (!$(e.target).closest('.wp-toggle-switch').length && if (!$(e.target).closest('.wp-toggle-switch').length &&
@ -101,6 +112,7 @@ jQuery(document).ready(function($) {
} }
}); });
// Set initial panel states // Set initial panel states
$('.wp-allstars-toggle-header').each(function() { $('.wp-allstars-toggle-header').each(function() {
var $settings = $(this).closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings'); var $settings = $(this).closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
@ -111,6 +123,7 @@ jQuery(document).ready(function($) {
} }
}); });
// Remove JavaScript-based tab switching - let the native WordPress tab links work // Remove JavaScript-based tab switching - let the native WordPress tab links work
// Plugin category filters // Plugin category filters
@ -127,6 +140,7 @@ jQuery(document).ready(function($) {
loadPlugins(category); loadPlugins(category);
}); });
// Load initial plugins if we're on the recommended tab // Load initial plugins if we're on the recommended tab
if ($('#recommended').is(':visible') && $('#wpa-plugin-list').is(':empty')) { if ($('#recommended').is(':visible') && $('#wpa-plugin-list').is(':empty')) {
loadPlugins('minimal'); loadPlugins('minimal');
@ -141,7 +155,7 @@ jQuery(document).ready(function($) {
// Function to load plugins // Function to load plugins
function loadPlugins(category) { function loadPlugins(category) {
var $container = $('#wpa-plugin-list'); var $container = $('#wpa-plugin-list');
var $loadingOverlay = $('<div class="wp-allstars-loading-overlay"><span class="spinner is-active"></span></div>'); var $loadingOverlay = $('<div class="wp-allstars-loading-overlay"><span class="spinner is-active"></span><p>Loading plugins...</p></div>');
// Show loading overlay // Show loading overlay
$container.css('position', 'relative').append($loadingOverlay); $container.css('position', 'relative').append($loadingOverlay);
@ -168,6 +182,14 @@ jQuery(document).ready(function($) {
// Initialize plugin action buttons // Initialize plugin action buttons
initPluginActions(); initPluginActions();
// Show standard WordPress spinner in each plugin card
$('.plugin-card .plugin-spinner').addClass('is-active').show();
// Hide spinners after all plugin details have loaded
setTimeout(function() {
$('.plugin-card .plugin-spinner').removeClass('is-active').hide();
}, 1000);
} else { } else {
// Show error message // Show error message
$container.html('<div class="notice notice-error"><p>' + response.data + '</p></div>'); $container.html('<div class="notice notice-error"><p>' + response.data + '</p></div>');
@ -182,17 +204,20 @@ jQuery(document).ready(function($) {
console.error('AJAX Error:', xhr.responseText); console.error('AJAX Error:', xhr.responseText);
} }
}); });
} }
// Function to load themes // Function to load themes
function loadTheme() { loadTheme = function() {
var $container = $('#wpa-theme-list'); var $container = $('#wpa-theme-list');
// Clear existing themes and show loading message // Create loading overlay with clear visual indicator
$container.empty().html('<div class="wp-allstars-loading-overlay"><span class="spinner is-active"></span><p>Loading themes...</p></div>'); var loadingHTML = '<div class="wp-allstars-loading-overlay" id="theme-loading-overlay"><span class="spinner is-active"></span><p>Loading themes...</p></div>';
var $loadingOverlay = $container.find('.wp-allstars-loading-overlay');
// Ensure container has proper positioning for overlay // Clear existing content and add loading overlay
$container.empty().html(loadingHTML);
// Ensure container has relative positioning for the overlay
$container.css('position', 'relative'); $container.css('position', 'relative');
// AJAX request to get themes // AJAX request to get themes
@ -205,7 +230,7 @@ jQuery(document).ready(function($) {
}, },
success: function(response) { success: function(response) {
if (response.success) { if (response.success) {
// Replace all content (including loading overlay) with new HTML // Replace all content with new HTML
$container.html(response.data); $container.html(response.data);
// Initialize theme action buttons // Initialize theme action buttons
@ -219,12 +244,9 @@ jQuery(document).ready(function($) {
// Show error message // Show error message
$container.html('<div class="notice notice-error"><p>Failed to load themes. Please try again. Error: ' + error + '</p></div>'); $container.html('<div class="notice notice-error"><p>Failed to load themes. Please try again. Error: ' + error + '</p></div>');
console.error('AJAX Error:', xhr.responseText); console.error('AJAX Error:', xhr.responseText);
},
complete: function() {
// Ensure the loading overlay is removed in all cases
$loadingOverlay.remove();
} }
}); });
} }
// Initialize plugin action buttons // Initialize plugin action buttons
@ -253,8 +275,10 @@ jQuery(document).ready(function($) {
alert(response.errorMessage); alert(response.errorMessage);
} }
}); });
}); });
// Update plugin // Update plugin
$('.plugin-card .update-now').on('click', function(e) { $('.plugin-card .update-now').on('click', function(e) {
e.preventDefault(); e.preventDefault();
@ -278,8 +302,10 @@ jQuery(document).ready(function($) {
alert(response.errorMessage); alert(response.errorMessage);
} }
}); });
}); });
// Activate plugin // Activate plugin
$('.plugin-card .activate-now').on('click', function(e) { $('.plugin-card .activate-now').on('click', function(e) {
e.preventDefault(); e.preventDefault();
@ -304,7 +330,9 @@ jQuery(document).ready(function($) {
alert('Failed to activate plugin. Please try again or activate from the Plugins page.'); alert('Failed to activate plugin. Please try again or activate from the Plugins page.');
} }
}); });
}); });
} }
// Initialize theme handlers // Initialize theme handlers
@ -334,8 +362,10 @@ jQuery(document).ready(function($) {
alert(response.errorMessage); alert(response.errorMessage);
} }
}); });
}); });
// Activate theme // Activate theme
$('.theme-browser .theme-actions .activate-now').on('click', function(e) { $('.theme-browser .theme-actions .activate-now').on('click', function(e) {
e.preventDefault(); e.preventDefault();
@ -362,6 +392,8 @@ jQuery(document).ready(function($) {
alert('Failed to activate theme. Please try again or activate from the Themes page.'); alert('Failed to activate theme. Please try again or activate from the Themes page.');
} }
}); });
}); });
} }
}); });

10
admin/settings.php
View File

@ -627,7 +627,7 @@ function wp_allstars_settings_page() {
if ($("#wpa-plugin-list").length && $("#wpa-plugin-list").is(":empty")) { if ($("#wpa-plugin-list").length && $("#wpa-plugin-list").is(":empty")) {
var category = "' . esc_js($active_category) . '"; var category = "' . esc_js($active_category) . '";
var $container = $("#wpa-plugin-list"); var $container = $("#wpa-plugin-list");
var $loadingOverlay = $("<div class=\"wp-allstars-loading-overlay\"><span class=\"spinner is-active\"></span></div>"); var $loadingOverlay = $("<div class=\"wp-allstars-loading-overlay\"><span class=\"spinner is-active\"></span><p>Loading plugins...</p></div>");
// Show loading overlay // Show loading overlay
$container.css("position", "relative").append($loadingOverlay); $container.css("position", "relative").append($loadingOverlay);
@ -649,6 +649,14 @@ function wp_allstars_settings_page() {
if (typeof initPluginActions === "function") { if (typeof initPluginActions === "function") {
initPluginActions(); initPluginActions();
} }
// Show standard WordPress spinner in each plugin card
$(".plugin-card .plugin-spinner").addClass("is-active").show();
// Hide spinners after all plugin details have loaded
setTimeout(function() {
$(".plugin-card .plugin-spinner").removeClass("is-active").hide();
}, 1000);
} else { } else {
$container.html("<div class=\"notice notice-error\"><p>" + response.data + "</p></div>"); $container.html("<div class=\"notice notice-error\"><p>" + response.data + "</p></div>");
} }