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

Improve settings UI and functionality

Browse Source 
- Fix toggle functionality for auto upload settings\n- Remove save changes button in favor of auto-saving\n- Improve loading spinner layout to prevent content jumping\n- Update tab navigation design\n- Enhance notification system with better positioning and styling\n- Add auto-save functionality for all settings\n- Improve error handling and feedback
This commit is contained in:
Marcus Quinn
2025-03-15 04:29:38 +00:00
parent d65aa23308
commit 6e353731c8
3 changed files with 128 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,35 +1,66 @@
jQuery(document).ready(function($) {
// Function to show notification
function showNotification(message, isError = false) {
// Remove any existing notifications
$('.wp-status').remove();
// Add notification to header
var $notification = $('<span class="wp-status' + (isError ? ' error' : '') + '">' + message + '</span>');
$('.wp-allstars-header').append($notification);
// Fade out and remove after delay
setTimeout(function() {
$notification.fadeOut(300, function() {
$(this).remove();
});
}, 2000);
}
// Handle all settings changes
function updateOption(option, value) {
return $.post(wpAllstars.ajaxurl, {
action: 'wp_allstars_update_option',
option: option,
value: value,
nonce: wpAllstars.nonce
}).then(function(response) {
if (!response.success) {
throw new Error(response.data || 'Error saving setting');
}
return response;
});
}
// Toggle switch functionality
$('.wp-allstars-toggle input[type="checkbox"]').on('change', function() {
var $input = $(this);
var option = $input.attr('name');
var value = $input.is(':checked') ? 1 : 0;
// Remove any existing status messages
$('.wp-status').remove();
updateOption(option, value)
.then(function() {
showNotification('Setting saved');
})
.catch(function(error) {
console.error('Error:', error);
showNotification('Error saving setting', true);
});
});
// Handle text, number, and textarea inputs
$('.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 option = $input.attr('name');
var value = $input.val();
// Add a small notification that fades out
var $notification = $('<span class="wp-status" style="position: fixed; top: 32px; left: 50%; transform: translateX(-50%); z-index: 99999; background: #00a32a; color: white; padding: 8px 16px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">Setting saved</span>');
$('body').append($notification);
$.post(wpAllstars.ajaxurl, {
action: 'wp_allstars_update_option',
option: option,
value: value,
nonce: wpAllstars.nonce
}, function(response) {
if (!response.success) {
console.error('Error:', response);
$notification.css('background', '#d63638').text('Error saving setting');
}
// Fade out and remove the notification after 2 seconds
setTimeout(function() {
$notification.fadeOut(300, function() {
$(this).remove();
});
}, 2000);
});
updateOption(option, value)
.then(function() {
showNotification('Setting saved');
})
.catch(function(error) {
console.error('Error:', error);
showNotification('Error saving setting', true);
});
});
// Expand/collapse settings functionality
@ -48,21 +79,4 @@ jQuery(document).ready(function($) {
$settings.slideDown(200);
}
});
// Save settings on form submit
$('form').on('submit', function() {
// Remove any existing status messages
$('.wp-status').remove();
// Add a small notification that fades out
var $notification = $('<span class="wp-status" style="position: fixed; top: 32px; left: 50%; transform: translateX(-50%); z-index: 99999; background: #00a32a; color: white; padding: 8px 16px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">Settings saved</span>');
$('body').append($notification);
// Fade out and remove the notification after 2 seconds
setTimeout(function() {
$notification.fadeOut(300, function() {
$(this).remove();
});
}, 2000);
});
});