330 lines
13 KiB
PHP
330 lines
13 KiB
PHP
<?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
|
|
}
|
|
}
|