Move JavaScript and CSS to separate files and fix accordion functionality
This commit is contained in:
Marcus Quinn
@ -144,61 +144,83 @@ input:checked + .wp-toggle-slider:before {
|
|||||||
|
|
||||||
/* Toggle Sections */
|
/* Toggle Sections */
|
||||||
.wp-allstars-toggle {
|
.wp-allstars-toggle {
|
||||||
margin: 0;
|
|
||||||
padding: 16px 20px;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ccd0d4;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
box-shadow: 0 1px 4px rgba(0,0,0,0.02);
|
margin-bottom: 15px;
|
||||||
transition: all .15s ease-in-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-allstars-toggle:hover {
|
.wp-allstars-toggle-header {
|
||||||
border-color: #2271b1;
|
padding: 15px;
|
||||||
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wp-allstars-toggle-main {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-allstars-toggle label {
|
.wp-allstars-toggle label {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 14px;
|
gap: 10px;
|
||||||
line-height: 1.4;
|
margin: 0;
|
||||||
font-weight: 500;
|
|
||||||
color: #1d2327;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wp-allstars-expand-settings {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #2271b1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wp-allstars-expand-settings:hover {
|
||||||
|
background-color: #f0f0f1;
|
||||||
|
color: #135e96;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wp-allstars-expand-settings:focus {
|
||||||
|
outline: 1px solid #2271b1;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wp-allstars-expand-settings .dashicons {
|
||||||
|
display: block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wp-allstars-toggle-settings {
|
||||||
|
border-top: 1px solid #ccd0d4;
|
||||||
|
padding: 15px;
|
||||||
|
background: #f9f9f9;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-allstars-toggle .description {
|
.wp-allstars-toggle .description {
|
||||||
margin: 6px 0 0 52px;
|
margin: 8px 0 0;
|
||||||
color: #666;
|
color: #646970;
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-toggle-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Settings Dropdown */
|
|
||||||
.wp-allstars-toggle-settings {
|
|
||||||
display: none;
|
|
||||||
margin-top: 15px;
|
|
||||||
padding: 15px;
|
|
||||||
background: #f6f7f7;
|
|
||||||
border: 1px solid #c3c4c7;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-toggle-settings.is-open {
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-allstars-setting-row {
|
.wp-allstars-setting-row {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-allstars-setting-row:last-child {
|
.wp-allstars-setting-row:last-child {
|
||||||
@ -207,62 +229,15 @@ input:checked + .wp-toggle-slider:before {
|
|||||||
|
|
||||||
.wp-allstars-setting-row label {
|
.wp-allstars-setting-row label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 5px;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
color: #1d2327;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-allstars-setting-row input[type="text"],
|
.wp-allstars-setting-row input[type="text"],
|
||||||
.wp-allstars-setting-row input[type="number"],
|
.wp-allstars-setting-row input[type="number"],
|
||||||
.wp-allstars-setting-row select,
|
|
||||||
.wp-allstars-setting-row textarea {
|
.wp-allstars-setting-row textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
padding: 8px;
|
|
||||||
border: 1px solid #8c8f94;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 0 0 transparent;
|
|
||||||
transition: border-color .15s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-setting-row input[type="text"]:focus,
|
|
||||||
.wp-allstars-setting-row input[type="number"]:focus,
|
|
||||||
.wp-allstars-setting-row select:focus,
|
|
||||||
.wp-allstars-setting-row textarea:focus {
|
|
||||||
border-color: #2271b1;
|
|
||||||
box-shadow: 0 0 0 1px #2271b1;
|
|
||||||
outline: 2px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Expand/Collapse Button */
|
|
||||||
.wp-allstars-expand-settings {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
padding: 4px 8px;
|
|
||||||
background: #f0f0f1;
|
|
||||||
border: 1px solid #c3c4c7;
|
|
||||||
border-radius: 3px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
color: #50575e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-expand-settings:hover {
|
|
||||||
background: #fff;
|
|
||||||
border-color: #2271b1;
|
|
||||||
color: #2271b1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-expand-settings .dashicons {
|
|
||||||
font-size: 16px;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-expand-settings[aria-expanded="true"] .dashicons {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Clear floats after tabs */
|
/* Clear floats after tabs */
|
||||||
|
|||||||
@ -75,20 +75,41 @@ jQuery(document).ready(function($) {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Expand/collapse settings functionality
|
// Handle accordion functionality
|
||||||
$('.wp-allstars-expand-settings').on('click', function(e) {
|
$('.wp-allstars-expand-settings').each(function() {
|
||||||
e.preventDefault();
|
|
||||||
var $button = $(this);
|
var $button = $(this);
|
||||||
var $settings = $button.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
|
var $panel = $button.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
|
||||||
|
var $icon = $button.find('.dashicons');
|
||||||
var isExpanded = $button.attr('aria-expanded') === 'true';
|
var isExpanded = $button.attr('aria-expanded') === 'true';
|
||||||
|
|
||||||
$button.attr('aria-expanded', !isExpanded);
|
// Set initial state
|
||||||
$button.find('.dashicons').toggleClass('dashicons-arrow-down-alt2 dashicons-arrow-up-alt2');
|
|
||||||
|
|
||||||
if (isExpanded) {
|
if (isExpanded) {
|
||||||
$settings.slideUp(200);
|
$panel.show();
|
||||||
|
$icon.css('transform', 'rotate(180deg)');
|
||||||
} else {
|
} else {
|
||||||
$settings.slideDown(200);
|
$panel.hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.wp-allstars-expand-settings').on('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
var $button = $(this);
|
||||||
|
var $panel = $button.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
|
||||||
|
var $icon = $button.find('.dashicons');
|
||||||
|
var isExpanded = $button.attr('aria-expanded') === 'true';
|
||||||
|
|
||||||
|
// Toggle state
|
||||||
|
$button.attr('aria-expanded', !isExpanded);
|
||||||
|
|
||||||
|
// Rotate icon
|
||||||
|
$icon.css('transform', !isExpanded ? 'rotate(180deg)' : '');
|
||||||
|
|
||||||
|
// Toggle panel
|
||||||
|
if (!isExpanded) {
|
||||||
|
$panel.slideDown(200);
|
||||||
|
} else {
|
||||||
|
$panel.slideUp(200);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -595,7 +595,7 @@ function wp_allstars_activate_theme() {
|
|||||||
}
|
}
|
||||||
add_action('wp_ajax_wp_allstars_activate_theme', 'wp_allstars_activate_theme');
|
add_action('wp_ajax_wp_allstars_activate_theme', 'wp_allstars_activate_theme');
|
||||||
|
|
||||||
// Settings page HTML
|
// Register settings page HTML
|
||||||
function wp_allstars_settings_page() {
|
function wp_allstars_settings_page() {
|
||||||
global $tabs;
|
global $tabs;
|
||||||
|
|
||||||
@ -680,7 +680,7 @@ function wp_allstars_settings_page() {
|
|||||||
<?php esc_html_e('Import images that have external URLs into your Media Library when saving. Consider disabling during large data imports with many external image URLs.', 'wp-allstars'); ?>
|
<?php esc_html_e('Import images that have external URLs into your Media Library when saving. Consider disabling during large data imports with many external image URLs.', 'wp-allstars'); ?>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="wp-allstars-toggle-settings" style="display: none;">
|
<div class="wp-allstars-toggle-settings">
|
||||||
<div class="wp-allstars-setting-row">
|
<div class="wp-allstars-setting-row">
|
||||||
<label for="wp_max_width"><?php esc_html_e('Max Width', 'wp-allstars'); ?></label>
|
<label for="wp_max_width"><?php esc_html_e('Max Width', 'wp-allstars'); ?></label>
|
||||||
<input type="number"
|
<input type="number"
|
||||||
@ -739,140 +739,6 @@ function wp_allstars_settings_page() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
|
||||||
jQuery(document).ready(function($) {
|
|
||||||
// Set initial state of panels
|
|
||||||
$('.wp-allstars-toggle-settings').each(function() {
|
|
||||||
var $panel = $(this);
|
|
||||||
var $button = $panel.closest('.wp-allstars-toggle').find('.wp-allstars-expand-settings');
|
|
||||||
var isExpanded = $button.attr('aria-expanded') === 'true';
|
|
||||||
|
|
||||||
// Set initial visibility without animation
|
|
||||||
$panel.toggle(isExpanded);
|
|
||||||
if (isExpanded) {
|
|
||||||
$button.find('.dashicons').css('transform', 'rotate(180deg)');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle click events
|
|
||||||
$('.wp-allstars-expand-settings').on('click', function() {
|
|
||||||
var $button = $(this);
|
|
||||||
var $panel = $button.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
|
|
||||||
var $icon = $button.find('.dashicons');
|
|
||||||
var isExpanded = $button.attr('aria-expanded') === 'true';
|
|
||||||
|
|
||||||
// Update state
|
|
||||||
$button.attr('aria-expanded', !isExpanded);
|
|
||||||
|
|
||||||
// Update icon
|
|
||||||
$icon.css('transform', !isExpanded ? 'rotate(180deg)' : '');
|
|
||||||
|
|
||||||
// Toggle panel
|
|
||||||
$panel.slideToggle(200);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.wp-allstars-toggle {
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #ccd0d4;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-toggle-header {
|
|
||||||
padding: 15px;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-toggle-main {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-toggle label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
margin: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-expand-settings {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
padding: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #2271b1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
border-radius: 3px;
|
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-expand-settings:hover {
|
|
||||||
background-color: #f0f0f1;
|
|
||||||
color: #135e96;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-expand-settings:focus {
|
|
||||||
outline: 1px solid #2271b1;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-expand-settings .dashicons {
|
|
||||||
display: block;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 16px;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
transform-origin: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-toggle-settings {
|
|
||||||
border-top: 1px solid #ccd0d4;
|
|
||||||
padding: 15px;
|
|
||||||
background: #f9f9f9;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-toggle .description {
|
|
||||||
margin: 8px 0 0;
|
|
||||||
color: #646970;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-setting-row {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-setting-row:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-setting-row label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-allstars-setting-row input[type="text"],
|
|
||||||
.wp-allstars-setting-row input[type="number"],
|
|
||||||
.wp-allstars-setting-row textarea {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<?php elseif ($active_tab == 'theme'): ?>
|
<?php elseif ($active_tab == 'theme'): ?>
|
||||||
<div class="wp-list-table-container">
|
<div class="wp-list-table-container">
|
||||||
<div class="wpa-loading-overlay">
|
<div class="wpa-loading-overlay">
|
||||||
@ -880,145 +746,6 @@ function wp_allstars_settings_page() {
|
|||||||
</div>
|
</div>
|
||||||
<div id="wpa-theme-list"></div>
|
<div id="wpa-theme-list"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
|
||||||
jQuery(document).ready(function($) {
|
|
||||||
var loadingStartTime;
|
|
||||||
var currentRequest = null;
|
|
||||||
|
|
||||||
function loadTheme() {
|
|
||||||
// Show loading overlay
|
|
||||||
$('.wpa-loading-overlay').fadeIn();
|
|
||||||
loadingStartTime = Date.now();
|
|
||||||
|
|
||||||
// Cancel previous request if it exists
|
|
||||||
if (currentRequest) {
|
|
||||||
currentRequest.abort();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Make the AJAX request
|
|
||||||
currentRequest = $.ajax({
|
|
||||||
url: ajaxurl,
|
|
||||||
data: {
|
|
||||||
action: 'wp_allstars_get_theme',
|
|
||||||
_ajax_nonce: '<?php echo wp_create_nonce("updates"); ?>'
|
|
||||||
},
|
|
||||||
beforeSend: function() {
|
|
||||||
if (currentRequest) {
|
|
||||||
currentRequest.abort();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
success: function(response) {
|
|
||||||
if (response.success) {
|
|
||||||
ensureMinLoadingTime(function() {
|
|
||||||
$('#wpa-theme-list').html(response.data);
|
|
||||||
$('.wpa-loading-overlay').fadeOut();
|
|
||||||
|
|
||||||
// Initialize theme installation handlers
|
|
||||||
initThemeHandlers();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
console.error('Server returned error:', response);
|
|
||||||
$('.wpa-loading-overlay').fadeOut();
|
|
||||||
$('#wpa-theme-list').html('<div class="notice notice-error"><p>Failed to load theme: ' + (response.data || 'Unknown error') + '</p></div>');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
error: function(xhr, status, error) {
|
|
||||||
console.error('Failed to load theme:', {xhr: xhr, status: status, error: error});
|
|
||||||
$('.wpa-loading-overlay').fadeOut();
|
|
||||||
$('#wpa-theme-list').html('<div class="notice notice-error"><p>Failed to load theme. Please try again. Error: ' + error + '</p></div>');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function initThemeHandlers() {
|
|
||||||
// Handle theme installation
|
|
||||||
$('.install-theme').on('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
var $button = $(this);
|
|
||||||
var slug = $button.data('slug');
|
|
||||||
|
|
||||||
$button.addClass('updating-message').text('Installing...');
|
|
||||||
|
|
||||||
wp.updates.installTheme({
|
|
||||||
slug: slug,
|
|
||||||
success: function(response) {
|
|
||||||
$button
|
|
||||||
.removeClass('updating-message install-theme')
|
|
||||||
.addClass('button-primary activate-theme')
|
|
||||||
.text('Activate');
|
|
||||||
|
|
||||||
// Refresh the theme display
|
|
||||||
loadTheme();
|
|
||||||
},
|
|
||||||
error: function(error) {
|
|
||||||
$button.removeClass('updating-message');
|
|
||||||
console.error('Theme installation failed:', error);
|
|
||||||
if (error.errorMessage) {
|
|
||||||
alert(error.errorMessage);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle theme activation
|
|
||||||
$('.activate-theme').on('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
var $button = $(this);
|
|
||||||
var slug = $button.data('slug');
|
|
||||||
|
|
||||||
$button.addClass('updating-message').text('Activating...');
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: ajaxurl,
|
|
||||||
type: 'POST',
|
|
||||||
data: {
|
|
||||||
action: 'wp_allstars_activate_theme',
|
|
||||||
theme: slug,
|
|
||||||
_ajax_nonce: '<?php echo wp_create_nonce("updates"); ?>'
|
|
||||||
},
|
|
||||||
success: function(response) {
|
|
||||||
if (response.success) {
|
|
||||||
$button.removeClass('updating-message').text('Activated');
|
|
||||||
setTimeout(function() {
|
|
||||||
if (response.data && response.data.customize_url) {
|
|
||||||
window.location.href = response.data.customize_url;
|
|
||||||
} else {
|
|
||||||
window.location.reload();
|
|
||||||
}
|
|
||||||
}, 1000);
|
|
||||||
} else {
|
|
||||||
$button.removeClass('updating-message').text('Activate');
|
|
||||||
alert(response.data || 'Theme activation failed. Please try again.');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
error: function(xhr, status, error) {
|
|
||||||
$button.removeClass('updating-message').text('Activate');
|
|
||||||
console.error('Theme activation failed:', error);
|
|
||||||
alert('Theme activation failed: ' + error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function to ensure minimum loading time
|
|
||||||
function ensureMinLoadingTime(callback) {
|
|
||||||
var currentTime = Date.now();
|
|
||||||
var elapsed = currentTime - loadingStartTime;
|
|
||||||
var minLoadingTime = 500;
|
|
||||||
|
|
||||||
if (elapsed < minLoadingTime) {
|
|
||||||
setTimeout(callback, minLoadingTime - elapsed);
|
|
||||||
} else {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load theme on page load
|
|
||||||
loadTheme();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<?php elseif ($active_tab == 'recommended'): ?>
|
<?php elseif ($active_tab == 'recommended'): ?>
|
||||||
<div class="wpa-plugin-filters">
|
<div class="wpa-plugin-filters">
|
||||||
<a href="?page=wp-allstars&tab=recommended&category=minimal"
|
<a href="?page=wp-allstars&tab=recommended&category=minimal"
|
||||||
@ -1093,193 +820,8 @@ function wp_allstars_settings_page() {
|
|||||||
</div>
|
</div>
|
||||||
<div id="wpa-plugin-list"></div>
|
<div id="wpa-plugin-list"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
|
||||||
jQuery(document).ready(function($) {
|
|
||||||
var loadingStartTime;
|
|
||||||
var currentRequest = null;
|
|
||||||
|
|
||||||
function loadPlugins(category) {
|
|
||||||
// Show loading overlay
|
|
||||||
$('.wpa-loading-overlay').fadeIn();
|
|
||||||
loadingStartTime = Date.now();
|
|
||||||
|
|
||||||
// Cancel previous request if it exists
|
|
||||||
if (currentRequest) {
|
|
||||||
currentRequest.abort();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Make the AJAX request
|
|
||||||
currentRequest = $.ajax({
|
|
||||||
url: ajaxurl,
|
|
||||||
data: {
|
|
||||||
action: 'wp_allstars_get_plugins',
|
|
||||||
category: category || 'minimal',
|
|
||||||
_ajax_nonce: '<?php echo wp_create_nonce("updates"); ?>'
|
|
||||||
},
|
|
||||||
beforeSend: function() {
|
|
||||||
if (currentRequest) {
|
|
||||||
currentRequest.abort();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
success: function(response) {
|
|
||||||
if (response.success) {
|
|
||||||
ensureMinLoadingTime(function() {
|
|
||||||
$('#wpa-plugin-list').html(response.data);
|
|
||||||
$('.wpa-loading-overlay').fadeOut();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
console.error('Server returned error:', response);
|
|
||||||
$('.wpa-loading-overlay').fadeOut();
|
|
||||||
$('#wpa-plugin-list').html('<div class="notice notice-error"><p>Failed to load plugins: ' + (response.data || 'Unknown error') + '</p></div>');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
error: function(xhr, status, error) {
|
|
||||||
console.error('Failed to load plugins:', {xhr: xhr, status: status, error: error});
|
|
||||||
$('.wpa-loading-overlay').fadeOut();
|
|
||||||
$('#wpa-plugin-list').html('<div class="notice notice-error"><p>Failed to load plugins. Please try again. Error: ' + error + '</p></div>');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function to ensure minimum loading time
|
|
||||||
function ensureMinLoadingTime(callback) {
|
|
||||||
var currentTime = Date.now();
|
|
||||||
var elapsed = currentTime - loadingStartTime;
|
|
||||||
var minLoadingTime = 500;
|
|
||||||
|
|
||||||
if (elapsed < minLoadingTime) {
|
|
||||||
setTimeout(callback, minLoadingTime - elapsed);
|
|
||||||
} else {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load plugins on page load with current category from URL
|
|
||||||
var urlParams = new URLSearchParams(window.location.search);
|
|
||||||
var currentCategory = urlParams.get('category') || 'minimal';
|
|
||||||
loadPlugins(currentCategory);
|
|
||||||
|
|
||||||
// Handle category filter clicks
|
|
||||||
$('.wpa-plugin-filters a').on('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
var category = new URLSearchParams($(this).attr('href').split('?')[1]).get('category');
|
|
||||||
loadPlugins(category);
|
|
||||||
|
|
||||||
// Update URL without page reload
|
|
||||||
var newUrl = $(this).attr('href');
|
|
||||||
history.pushState({}, '', newUrl);
|
|
||||||
|
|
||||||
// Update active state
|
|
||||||
$('.wpa-plugin-filters a').removeClass('button-primary');
|
|
||||||
$(this).addClass('button-primary');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<?php elseif ($active_tab == 'pro'): ?>
|
<?php elseif ($active_tab == 'pro'): ?>
|
||||||
<div class="wpa-pro-plugins">
|
<div class="wpa-pro-plugins">
|
||||||
<style>
|
|
||||||
.wpa-pro-plugins {
|
|
||||||
padding: 20px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
|
|
||||||
gap: 24px;
|
|
||||||
max-width: 1920px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.wpa-pro-plugin {
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
padding: 24px;
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
.wpa-pro-plugin:hover {
|
|
||||||
border-color: #2271b1;
|
|
||||||
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
|
||||||
}
|
|
||||||
.wpa-pro-plugin h3 {
|
|
||||||
margin: 0 0 12px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #1d2327;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
.wpa-pro-plugin p {
|
|
||||||
margin: 0 0 16px;
|
|
||||||
color: #50575e;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
.wpa-pro-plugin .button-group {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
.wpa-pro-plugin .button {
|
|
||||||
text-decoration: none;
|
|
||||||
min-width: 120px;
|
|
||||||
text-align: center;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 28px;
|
|
||||||
padding: 0 12px;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: normal;
|
|
||||||
margin: 0;
|
|
||||||
border: 1px solid #0071a1 !important;
|
|
||||||
border-radius: 3px !important;
|
|
||||||
background: #f6f7f7;
|
|
||||||
color: #0071a1;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
box-shadow: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.wpa-pro-plugin .button:hover {
|
|
||||||
background: #f0f0f1;
|
|
||||||
border-color: #0071a1;
|
|
||||||
color: #0071a1;
|
|
||||||
}
|
|
||||||
.wpa-pro-plugin .button-primary {
|
|
||||||
background: #0071a1;
|
|
||||||
border-color: #0071a1;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.wpa-pro-plugin .button-primary:hover {
|
|
||||||
background: #005d8c;
|
|
||||||
border-color: #005d8c;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 960px) {
|
|
||||||
.wpa-pro-plugins {
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
|
||||||
gap: 20px;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
.wpa-pro-plugin {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 782px) {
|
|
||||||
.wpa-pro-plugins {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 16px;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
.wpa-pro-plugin {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
.wpa-pro-plugin .button {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
$pro_plugins = wp_allstars_get_pro_plugins_config();
|
$pro_plugins = wp_allstars_get_pro_plugins_config();
|
||||||
foreach ($pro_plugins as $key => $plugin) {
|
foreach ($pro_plugins as $key => $plugin) {
|
||||||
@ -1325,3 +867,14 @@ function wp_allstars_settings_page() {
|
|||||||
</div>
|
</div>
|
||||||
<?php
|
<?php
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Enqueue admin scripts and styles
|
||||||
|
function wp_allstars_admin_enqueue_scripts($hook) {
|
||||||
|
if ('settings_page_wp-allstars' !== $hook) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
wp_enqueue_style('wp-allstars-admin', plugins_url('css/wp-allstars-admin.css', __FILE__));
|
||||||
|
wp_enqueue_script('wp-allstars-admin', plugins_url('js/wp-allstars-admin.js', __FILE__), array('jquery'), WP_ALLSTARS_VERSION, true);
|
||||||
|
}
|
||||||
|
add_action('admin_enqueue_scripts', 'wp_allstars_admin_enqueue_scripts');
|
||||||
Reference in New Issue
Block a user