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

[WORK IN PROGRESS] Basic Admin UI Enhancements with toggle fixes

Browse Source
This commit is contained in:
Marcus Quinn
2025-04-08 01:24:17 +01:00
parent a4c69999f6
commit b5aeeaf2c4
8 changed files with 466 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
admin/js/wp-allstars-admin-colors.js Normal file
View File

@ -0,0 +1,74 @@
/**
* WP Allstars Admin Colors Script
*
* Handles toggling the admin color scheme
*/
(function($) {
'use strict';
// Once the DOM is ready
$(document).ready(function() {
// Find the color scheme toggle
var $toggle = $('#wp_allstars_admin_color_scheme');
if (!$toggle.length) {
return;
}
// Listen for changes to the toggle
$toggle.on('change', function() {
var $this = $(this);
var enabled = $this.is(':checked');
var $notification = $this.closest('label').find('.wp-setting-notification');
// Show loading notification
if ($notification.length) {
$notification.text('Saving...').show();
} else {
$notification = $('<span class="wp-setting-notification">Saving...</span>');
$this.closest('label').append($notification);
}
// Send AJAX request
$.ajax({
url: wpAllstarsColors.ajax_url,
type: 'POST',
data: {
action: 'wp_allstars_update_color_scheme',
nonce: wpAllstarsColors.nonce,
enabled: enabled ? 1 : 0
},
success: function(response) {
if (response.success) {
// Show success notification
$notification.text('Saved!').removeClass('error');
// Reload page after a short delay to apply new color scheme
setTimeout(function() {
window.location.reload();
}, 1000);
} else {
// Show error notification
$notification.text('Error').addClass('error');
// Revert toggle
$this.prop('checked', !enabled);
// Log error
console.error('Error updating color scheme:', response.data);
}
},
error: function(xhr, status, error) {
// Show error notification
$notification.text('Error').addClass('error');
// Revert toggle
$this.prop('checked', !enabled);
// Log error
console.error('AJAX error:', error);
}
});
});
});
})(jQuery);

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

@ -1,387 +1,72 @@
// Define loadTheme in the global scope so it can be called from inline scripts
var loadTheme;
/**
* WP Allstars Admin Script
*
* Handles UI interactions in the admin settings
*/
(function($) {
'use strict';
jQuery(document).ready(function($) {
// Function to show notification
function showNotification(message, $element, isError = false) {
// Remove any existing notifications
$('.wp-setting-notification').remove();
// Create notification element
var $notification = $('<span class="wp-setting-notification' + (isError ? ' error' : '') + '">' + message + '</span>');
// If element is provided, show notification next to it
if ($element && $element.length) {
$element.after($notification);
} else {
// Fallback to header if no element provided
$('.wp-allstars-header h1').after($notification);
}
// Fade out after delay
setTimeout(function() {
$notification.fadeOut(300, function() {
$(this).remove();
});
}, 2000);
}
// Handle option updates
function updateOption(option, value) {
return $.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'wp_allstars_update_option',
option: option,
value: value,
nonce: wpAllstars.nonce
// Document ready handler
$(document).ready(function() {
// Handle toggle switches
$('.wp-toggle-switch input[type="checkbox"]').on('change', function() {
var $this = $(this);
var option = $this.attr('id');
var value = $this.is(':checked') ? 1 : 0;
// Don't handle the admin color scheme toggle here - it has its own handler
if (option === 'wp_allstars_admin_color_scheme') {
return;
}
}).then(function(response) {
if (!response.success) {
throw new Error(response.data || 'Error saving setting');
// Show update notification
var $notification = $this.closest('label').find('.wp-setting-notification');
if ($notification.length === 0) {
$notification = $('<span class="wp-setting-notification">Saving...</span>');
$this.closest('label').append($notification);
} else {
$notification.text('Saving...').removeClass('error').show();
}
return response;
});
}
// Handle toggle switch clicks
$('.wp-toggle-switch').on('click', function(e) {
e.stopPropagation();
var $checkbox = $(this).find('input[type="checkbox"]');
var isChecked = $checkbox.is(':checked');
$checkbox.prop('checked', !isChecked).trigger('change');
});
// Prevent label clicks from toggling the checkbox directly
$('.wp-setting-label, .wp-allstars-toggle-left label').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
// Handle checkbox changes
$('.wp-toggle-switch input[type="checkbox"]').on('change', function(e) {
e.stopPropagation();
var $input = $(this);
var option = $input.attr('name');
var value = $input.is(':checked') ? 1 : 0;
var $label = $input.closest('.wp-setting-left, .wp-allstars-toggle-left').find('label');
updateOption(option, value)
.then(function() {
showNotification('Saved', $label);
})
.catch(function() {
showNotification('Error saving settings', $label, true);
});
});
// Handle text input changes
$('.wp-allstars-setting-row input[type="text"], .wp-allstars-setting-row input[type="number"], .wp-allstars-setting-row textarea').on('blur change', function() {
var $input = $(this);
var option = $input.attr('name');
var value = $input.val();
var $label = $input.closest('.wp-allstars-setting-row').find('label').first();
updateOption(option, value)
.then(function() {
showNotification('Saved', $label);
})
.catch(function(error) {
console.error('Error:', error);
showNotification('Error saving setting', $label, true);
});
});
// Toggle expandable panels
$('.wp-allstars-toggle-header').on('click', function(e) {
if (!$(e.target).closest('.wp-toggle-switch').length &&
!$(e.target).closest('label').length) {
var $settings = $(this).closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
var isExpanded = $(this).attr('aria-expanded') === 'true';
$(this).attr('aria-expanded', !isExpanded);
$settings.slideToggle(200);
}
});
// Set initial panel states
$('.wp-allstars-toggle-header').each(function() {
var $settings = $(this).closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
var isExpanded = $(this).attr('aria-expanded') === 'true';
if (!isExpanded) {
$settings.hide();
}
});
// Remove JavaScript-based tab switching - let the native WordPress tab links work
// Plugin category filters
if ($('#wpa-plugin-filters').length) {
$('#wpa-plugin-filters a').on('click', function(e) {
e.preventDefault();
var category = $(this).data('category');
// Update active filter
$('#wpa-plugin-filters a').removeClass('current');
$(this).addClass('current');
// Load plugins for the selected category
loadPlugins(category);
});
// Load initial plugins if we're on the recommended tab
if ($('#recommended').is(':visible') && $('#wpa-plugin-list').is(':empty')) {
loadPlugins('minimal');
}
}
// Load theme tab content if we're on the theme tab
if ($('#theme').is(':visible') && $('#wpa-theme-list').length && $('#wpa-theme-list').is(':empty')) {
loadTheme();
}
// Function to load plugins
function loadPlugins(category) {
var $container = $('#wpa-plugin-list');
var $loadingOverlay = $('<div class="wp-allstars-loading-overlay"><span class="spinner is-active"></span></div>');
// Show loading overlay
$container.css('position', 'relative').append($loadingOverlay);
// Clear existing plugins
$container.empty().append($loadingOverlay);
// AJAX request to get plugins
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'wp_allstars_get_plugins',
category: category,
_wpnonce: wpAllstars.nonce
},
success: function(response) {
// Remove loading overlay
$loadingOverlay.remove();
if (response.success) {
// Append plugins HTML
$container.html(response.data);
// Initialize plugin action buttons
initPluginActions();
// Individual plugin card spinners have been removed
} else {
// Show error message
$container.html('<div class="notice notice-error"><p>' + response.data + '</p></div>');
}
},
error: function(xhr, status, error) {
// Remove loading overlay
$loadingOverlay.remove();
// Show error message
$container.html('<div class="notice notice-error"><p>Failed to load plugins. Please try again. Error: ' + error + '</p></div>');
console.error('AJAX Error:', xhr.responseText);
}
});
}
// Theme handlers are initialized directly from the inline script
// We don't need a separate loadTheme function anymore
// Initialize plugin action buttons
function initPluginActions() {
// Remove any existing event handlers to prevent duplicates
$('.plugin-card .install-now').off('click');
$('.plugin-card .update-now').off('click');
$('.plugin-card .activate-now').off('click');
// Install plugin
$('.plugin-card .install-now').on('click', function(e) {
e.preventDefault();
var $button = $(this);
var slug = $button.data('slug');
$button.addClass('updating-message').text('Installing...');
wp.updates.installPlugin({
slug: slug,
success: function(response) {
$button.removeClass('updating-message').addClass('updated-message').text('Installed!');
setTimeout(function() {
// Replace the button with an activate button
var $parent = $button.parent();
$button.remove();
$parent.html('<a class="button activate-now" href="' + response.activateUrl + '" data-slug="' + slug + '" aria-label="Activate ' + slug + '">Activate</a>');
// Re-initialize the event handlers
initPluginActions();
}, 1000);
},
error: function(response) {
$button.removeClass('updating-message').text('Install Now');
alert(response.errorMessage);
}
});
});
// Update plugin
$('.plugin-card .update-now').on('click', function(e) {
e.preventDefault();
var $button = $(this);
var slug = $button.data('slug');
$button.addClass('updating-message').text('Updating...');
wp.updates.updatePlugin({
slug: slug,
success: function() {
$button.removeClass('updating-message').addClass('updated-message').text('Updated!');
setTimeout(function() {
$button.removeClass('update-now updated-message')
.addClass('button-disabled')
.text('Active');
}, 1000);
},
error: function(response) {
$button.removeClass('updating-message').text('Update Now');
alert(response.errorMessage);
}
});
});
// Activate plugin
$('.plugin-card .activate-now').on('click', function(e) {
e.preventDefault();
var $button = $(this);
var url = $button.attr('href');
var slug = $button.data('slug');
$button.addClass('updating-message').text('Activating...');
// Save the option via AJAX
$.ajax({
url: url,
dataType: 'html',
success: function() {
$button.removeClass('updating-message').addClass('updated-message').text('Activated!');
setTimeout(function() {
// Replace the button with an active button
var $parent = $button.parent();
$button.remove();
$parent.html('<button type="button" class="button button-disabled" disabled="disabled">Active</button>');
}, 1000);
},
error: function() {
$button.removeClass('updating-message').text('Activate');
alert('Failed to activate plugin. Please try again or activate from the Plugins page.');
}
});
});
}
// Expose initPluginActions to global scope for use in other scripts
window.initPluginActions = initPluginActions;
// Initialize theme handlers
function initThemeHandlers() {
console.log('Initializing theme handlers');
// Remove any existing event handlers to prevent duplicates
$('.theme-actions .install-now').off('click');
$('.theme-actions .activate-now').off('click');
// Install theme - use wp.updates.installTheme AJAX method
$('.theme-actions .install-now').on('click', function(e) {
e.preventDefault();
var $button = $(this);
var slug = $button.data('slug');
var buttonText = $button.text();
$button.addClass('updating-message').attr('aria-label', wp.updates.l10n.installing);
wp.updates.installTheme({
slug: slug,
success: function(response) {
$button.removeClass('updating-message').addClass('updated-message').attr('aria-label', wp.updates.l10n.installed);
setTimeout(function() {
// Replace the button with an activate button
var $parent = $button.parent();
$button.remove();
// Create activate URL with nonce
var activateUrl = ajaxurl + '?action=wp_allstars_activate_theme&theme=' + slug + '&_wpnonce=' + wpAllstars.nonce;
$parent.prepend('<a href="' + activateUrl + '" class="button button-primary activate-now" data-slug="' + slug + '" data-name="Kadence" data-nonce="' + wpAllstars.nonce + '">Activate</a>');
// Re-initialize the event handlers
initThemeHandlers();
}, 1000);
},
error: function(response) {
$button.removeClass('updating-message').text(buttonText);
alert(response.errorMessage || 'Error installing theme');
}
});
});
// Activate theme - use AJAX
$('.theme-actions .activate-now').on('click', function(e) {
e.preventDefault();
var $button = $(this);
var slug = $button.data('slug');
var nonce = $button.data('nonce');
var buttonText = $button.text();
$button.addClass('updating-message').attr('aria-label', 'Activating...');
$.ajax({
url: ajaxurl,
url: wpAllstars.ajaxurl,
type: 'POST',
data: {
action: 'wp_allstars_activate_theme',
theme: slug,
_wpnonce: wpAllstars.nonce
action: 'wp_allstars_update_option',
nonce: wpAllstars.nonce,
option: option,
value: value
},
success: function(response) {
if (response.success) {
$button.removeClass('updating-message').addClass('updated-message').attr('aria-label', 'Activated');
$notification.text('Saved!');
setTimeout(function() {
// Replace the button with an active button
var $parent = $button.parent();
$button.remove();
$parent.prepend('<button type="button" class="button button-disabled" disabled="disabled">Active</button>');
// Optionally reload the page to show the activated theme
// window.location.reload();
}, 1000);
$notification.fadeOut(300);
}, 2000);
} else {
$button.removeClass('updating-message').text(buttonText);
alert(response.data || 'Error activating theme');
$notification.text('Error').addClass('error');
console.error('Error saving option:', response.data);
}
},
error: function(xhr, status, error) {
$button.removeClass('updating-message').text(buttonText);
alert('Failed to activate theme. Please try again or activate from the Themes page. Error: ' + error);
$notification.text('Error').addClass('error');
console.error('AJAX error:', error);
}
});
});
}
// Expose initThemeHandlers to global scope for use in other scripts
window.initThemeHandlers = initThemeHandlers;
});
// Toggle expandable panels
$('.wp-allstars-toggle-header').on('click', function() {
var $this = $(this);
var $settings = $this.next('.wp-allstars-toggle-settings');
var isExpanded = $this.attr('aria-expanded') === 'true';
// Toggle aria-expanded attribute
$this.attr('aria-expanded', !isExpanded);
// Toggle settings visibility
$settings.slideToggle(200);
});
});
})(jQuery);