Refactor(Admin): Implement Settings API & AJAX save for Settings Manager
- Refactored WPALLSTARS_Settings_Manager to use WordPress Settings API. - Stores settings in single 'wpallstars_options' array. - Implemented robust AJAX saving for specific settings (e.g., color scheme, auto-upload) via WPALLSTARS_Admin_Manager::update_option. - Updated JS and setting render functions for AJAX. - Corrected admin menu registration and script enqueue hooks. - Includes file renames from wp-allstars to wpallstars.
This commit is contained in:
@@ -1,330 +0,0 @@
|
||||
<?php
|
||||
/**
|
||||
* WP Allstars UI Enhancements
|
||||
*
|
||||
* Responsible for enhancing the WordPress admin interface with improved UI components
|
||||
* like cards, panels, buttons, and responsive design elements.
|
||||
*
|
||||
* @package WP_ALLSTARS
|
||||
* @version v0.2.3.3
|
||||
*/
|
||||
|
||||
if (!defined('WPINC')) {
|
||||
exit;
|
||||
}
|
||||
|
||||
class WP_Allstars_UI_Enhancements {
|
||||
/**
|
||||
* Constructor
|
||||
* Initialize hooks and settings
|
||||
*/
|
||||
public function __construct() {
|
||||
// Register scripts and styles
|
||||
add_action('admin_enqueue_scripts', array($this, 'enqueue_assets'));
|
||||
|
||||
// Add body class for enhanced UI
|
||||
add_filter('admin_body_class', array($this, 'add_body_class'));
|
||||
|
||||
// Initialize UI components
|
||||
$this->init_components();
|
||||
|
||||
// Ensure toggle functionality works
|
||||
add_action('admin_footer', array($this, 'ensure_toggle_functionality'), 99);
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue CSS and JavaScript assets
|
||||
*/
|
||||
public function enqueue_assets($hook) {
|
||||
// Only load on WP Allstars pages
|
||||
if (strpos($hook, 'wp-allstars') === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Already registered in main plugin file, but ensure they're enqueued
|
||||
wp_enqueue_style('wp-allstars-admin');
|
||||
wp_enqueue_script('wp-allstars-admin');
|
||||
|
||||
// Add UI enhancements script
|
||||
wp_enqueue_script(
|
||||
'wp-allstars-ui-enhancements',
|
||||
plugin_dir_url(dirname(__FILE__)) . 'admin/js/wp-allstars-ui-enhancements.js',
|
||||
array('jquery', 'wp-allstars-admin'),
|
||||
WP_ALLSTARS_VERSION,
|
||||
true
|
||||
);
|
||||
|
||||
// Add enhanced UI styles
|
||||
wp_enqueue_style(
|
||||
'wp-allstars-ui-enhancements',
|
||||
plugin_dir_url(dirname(__FILE__)) . 'admin/css/wp-allstars-ui-enhancements.css',
|
||||
array('wp-allstars-admin'),
|
||||
WP_ALLSTARS_VERSION
|
||||
);
|
||||
|
||||
// Localize script with settings
|
||||
wp_localize_script('wp-allstars-ui-enhancements', 'wpAllstarsUI', array(
|
||||
'ajaxurl' => admin_url('ajax.php'),
|
||||
'nonce' => wp_create_nonce('wp_allstars_ui_nonce'),
|
||||
));
|
||||
}
|
||||
|
||||
/**
|
||||
* Add body class for enhanced UI
|
||||
*/
|
||||
public function add_body_class($classes) {
|
||||
if (isset($_GET['page']) && strpos($_GET['page'], 'wp-allstars') !== false) {
|
||||
$classes .= ' wp-allstars-enhanced-ui';
|
||||
}
|
||||
return $classes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize UI components
|
||||
*/
|
||||
private function init_components() {
|
||||
// Add accordion functionality
|
||||
add_action('admin_footer', array($this, 'render_accordion_template'));
|
||||
|
||||
// Add card component
|
||||
add_action('admin_footer', array($this, 'render_card_template'));
|
||||
|
||||
// Add notification system
|
||||
add_action('admin_footer', array($this, 'render_notification_template'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Ensure toggle switch functionality
|
||||
* This adds JS to reinitialize toggle switch handlers after our enhanced UI is applied
|
||||
*/
|
||||
public function ensure_toggle_functionality() {
|
||||
// Only on WP Allstars pages
|
||||
if (!isset($_GET['page']) || strpos($_GET['page'], 'wp-allstars') === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get the nonce value
|
||||
$nonce = wp_create_nonce('wp-allstars-nonce');
|
||||
|
||||
?>
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function($) {
|
||||
// Make sure the wpAllstars object is available
|
||||
if (typeof wpAllstars === 'undefined') {
|
||||
window.wpAllstars = {
|
||||
ajaxurl: '<?php echo esc_url(admin_url('admin-ajax.php')); ?>',
|
||||
nonce: '<?php echo esc_js($nonce); ?>'
|
||||
};
|
||||
}
|
||||
|
||||
// Remove any existing handlers first to prevent duplicates
|
||||
$('.wp-toggle-switch input[type="checkbox"]').off('change');
|
||||
$('.wp-allstars-toggle-header').off('click');
|
||||
|
||||
// Re-bind toggle switch handlers
|
||||
$('.wp-toggle-switch input[type="checkbox"]').on('change', function() {
|
||||
console.log('Toggle switch changed:', this.id);
|
||||
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;
|
||||
}
|
||||
|
||||
// Show update notification
|
||||
var $notification = $this.closest('.wp-setting-left').find('.wp-setting-notification');
|
||||
if ($notification.length === 0) {
|
||||
$notification = $('<span class="wp-setting-notification">Saving...</span>');
|
||||
$this.closest('.wp-setting-left').append($notification);
|
||||
} else {
|
||||
$notification.text('Saving...').removeClass('error').show();
|
||||
}
|
||||
|
||||
// Save the option via AJAX
|
||||
$.ajax({
|
||||
url: wpAllstars.ajaxurl,
|
||||
type: 'POST',
|
||||
data: {
|
||||
action: 'wp_allstars_update_option',
|
||||
nonce: wpAllstars.nonce,
|
||||
option: option,
|
||||
value: value
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
$notification.text('Saved!');
|
||||
setTimeout(function() {
|
||||
$notification.fadeOut(300);
|
||||
}, 2000);
|
||||
} else {
|
||||
$notification.text('Error').addClass('error');
|
||||
console.error('Error saving option:', response.data);
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
$notification.text('Error').addClass('error');
|
||||
console.error('AJAX error:', error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Re-bind 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);
|
||||
});
|
||||
|
||||
// Special handling for admin color scheme toggle if exists
|
||||
if (typeof wpAllstarsColors !== 'undefined') {
|
||||
var $colorToggle = $('#wp_allstars_admin_color_scheme');
|
||||
if ($colorToggle.length) {
|
||||
$colorToggle.off('change').on('change', function() {
|
||||
var isModern = $(this).is(':checked');
|
||||
|
||||
// Show saving notification
|
||||
var $notification = $colorToggle.closest('.wp-setting-left').find('.wp-setting-notification');
|
||||
if ($notification.length === 0) {
|
||||
$notification = $('<span class="wp-setting-notification">Saving...</span>');
|
||||
$colorToggle.closest('.wp-setting-left').append($notification);
|
||||
} else {
|
||||
$notification.text('Saving...').removeClass('error').show();
|
||||
}
|
||||
|
||||
// Save the option via AJAX
|
||||
$.ajax({
|
||||
url: wpAllstarsColors.ajaxurl,
|
||||
type: 'POST',
|
||||
data: {
|
||||
action: 'wp_allstars_update_color_scheme',
|
||||
nonce: wpAllstarsColors.nonce,
|
||||
is_modern: isModern ? 1 : 0
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
if (isModern) {
|
||||
$('body').addClass('wp-allstars-modern-admin');
|
||||
} else {
|
||||
$('body').removeClass('wp-allstars-modern-admin');
|
||||
}
|
||||
|
||||
$notification.text('Saved!');
|
||||
setTimeout(function() {
|
||||
$notification.fadeOut(300);
|
||||
}, 2000);
|
||||
} else {
|
||||
$notification.text('Error').addClass('error');
|
||||
console.error('Error updating color scheme:', response.data);
|
||||
|
||||
// Revert toggle
|
||||
$colorToggle.prop('checked', !isModern);
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
$notification.text('Error').addClass('error');
|
||||
console.error('AJAX error:', error);
|
||||
|
||||
// Revert toggle
|
||||
$colorToggle.prop('checked', !isModern);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Render accordion template
|
||||
*/
|
||||
public function render_accordion_template() {
|
||||
// Only on WP Allstars pages
|
||||
if (!isset($_GET['page']) || strpos($_GET['page'], 'wp-allstars') === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
?>
|
||||
<script type="text/html" id="tmpl-wp-allstars-accordion">
|
||||
<div class="wp-allstars-accordion" role="tablist">
|
||||
<div class="wp-allstars-accordion-header" role="tab" id="accordion-header-{{data.id}}" aria-expanded="false">
|
||||
<div class="wp-allstars-accordion-title">{{data.title}}</div>
|
||||
<div class="wp-allstars-accordion-icon"></div>
|
||||
</div>
|
||||
<div class="wp-allstars-accordion-content" role="tabpanel" aria-labelledby="accordion-header-{{data.id}}">
|
||||
<div class="wp-allstars-accordion-inner">
|
||||
{{{data.content}}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Render card template
|
||||
*/
|
||||
public function render_card_template() {
|
||||
// Only on WP Allstars pages
|
||||
if (!isset($_GET['page']) || strpos($_GET['page'], 'wp-allstars') === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
?>
|
||||
<script type="text/html" id="tmpl-wp-allstars-card">
|
||||
<div class="wp-allstars-card">
|
||||
<# if (data.header) { #>
|
||||
<div class="wp-allstars-card-header">
|
||||
<# if (data.icon) { #>
|
||||
<div class="wp-allstars-card-icon">{{{data.icon}}}</div>
|
||||
<# } #>
|
||||
<div class="wp-allstars-card-title">{{data.header}}</div>
|
||||
</div>
|
||||
<# } #>
|
||||
<div class="wp-allstars-card-content">
|
||||
{{{data.content}}}
|
||||
</div>
|
||||
<# if (data.footer) { #>
|
||||
<div class="wp-allstars-card-footer">
|
||||
{{{data.footer}}}
|
||||
</div>
|
||||
<# } #>
|
||||
</div>
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Render notification template
|
||||
*/
|
||||
public function render_notification_template() {
|
||||
// Only on WP Allstars pages
|
||||
if (!isset($_GET['page']) || strpos($_GET['page'], 'wp-allstars') === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
?>
|
||||
<script type="text/html" id="tmpl-wp-allstars-notification">
|
||||
<div class="wp-allstars-notification wp-allstars-notification-{{data.type}}">
|
||||
<div class="wp-allstars-notification-icon"></div>
|
||||
<div class="wp-allstars-notification-content">
|
||||
<# if (data.title) { #>
|
||||
<div class="wp-allstars-notification-title">{{data.title}}</div>
|
||||
<# } #>
|
||||
<div class="wp-allstars-notification-message">{{data.message}}</div>
|
||||
</div>
|
||||
<div class="wp-allstars-notification-dismiss"></div>
|
||||
</div>
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user