wpallstars/wp-plugin-starter-template-for-ai-coding
Template
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix CSS and JavaScript formatting issues

Browse Source 
- Updated stylelint configuration to fix CSS formatting issues
- Updated ESLint configuration to fix JavaScript issues
- Added global variables to ESLint configuration
This commit is contained in:
Marcus Quinn
2025-04-21 15:04:05 +01:00
parent 200cc5671d
commit 4c1bee9dbe
8 changed files with 235 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
.eslintrc.json
View File

@@ -5,6 +5,17 @@
"es6": true "es6": true
}, },
"extends": "eslint:recommended", "extends": "eslint:recommended",
"globals": {
"wp": "readonly",
"wpstData": "readonly",
"wpstModalData": "readonly",
"Cypress": "readonly",
"cy": "readonly",
"describe": "readonly",
"it": "readonly",
"before": "readonly",
"module": "readonly"
},
"parserOptions": { "parserOptions": {
"ecmaVersion": 2018, "ecmaVersion": 2018,
"sourceType": "module" "sourceType": "module"

39
.stylelintrc.json
View File

@@ -1,43 +1,10 @@
{ {
"extends": "stylelint-config-standard", "extends": "stylelint-config-standard",
"rules": { "rules": {
"indentation": 4, "alpha-value-notation": "percentage",
"string-quotes": "single", "color-function-notation": "modern",
"no-duplicate-selectors": true,
"color-hex-case": "lower",
"color-hex-length": "short",
"selector-combinator-space-after": "always",
"selector-attribute-quotes": "always",
"selector-attribute-operator-space-before": "never",
"selector-attribute-operator-space-after": "never",
"selector-attribute-brackets-space-inside": "never",
"declaration-block-trailing-semicolon": "always",
"declaration-colon-space-before": "never",
"declaration-colon-space-after": "always",
"property-no-vendor-prefix": true,
"value-no-vendor-prefix": true,
"number-leading-zero": "always",
"function-url-quotes": "always",
"font-weight-notation": "numeric", "font-weight-notation": "numeric",
"font-family-name-quotes": "always-where-recommended", "media-feature-range-notation": "context"
"at-rule-no-vendor-prefix": true,
"selector-no-vendor-prefix": true,
"media-feature-name-no-vendor-prefix": true,
"at-rule-empty-line-before": [
"always",
{
"except": [
"blockless-after-same-name-blockless",
"first-nested"
],
"ignore": [
"after-comment"
]
}
],
"at-rule-name-case": "lower",
"at-rule-name-space-after": "always-single-line",
"at-rule-semicolon-newline-after": "always"
}, },
"ignoreFiles": [ "ignoreFiles": [
"vendor/**", "vendor/**",

6
admin/css/admin-styles.css
View File

@@ -11,7 +11,7 @@
padding: 20px; padding: 20px;
background: #fff; background: #fff;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
} }
.wpst-admin-header { .wpst-admin-header {
@@ -98,7 +98,7 @@
padding: 20px; padding: 20px;
background: #fff; background: #fff;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
} }
.wpst-card-header { .wpst-card-header {
@@ -124,7 +124,7 @@
} }
/* Responsive Styles */ /* Responsive Styles */
@media screen and (max-width: 782px) { @media screen and (width <= 782px) {
.wpst-form-table th { .wpst-form-table th {
width: 100%; width: 100%;
display: block; display: block;

8
admin/css/update-source-selector.css
View File

@@ -14,7 +14,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
background-color: rgba(0, 0, 0, 0.4); background-color: rgb(0 0 0 / 40%);
} }
.wpst-modal-content { .wpst-modal-content {
@@ -23,7 +23,7 @@
margin: 10% auto; margin: 10% auto;
padding: 20px; padding: 20px;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
width: 500px; width: 500px;
max-width: 90%; max-width: 90%;
} }
@@ -45,7 +45,7 @@
top: 10px; top: 10px;
right: 15px; right: 15px;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: 700;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
} }
@@ -108,7 +108,7 @@
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
border: 2px solid rgba(0, 0, 0, 0.1); border: 2px solid rgb(0 0 0 / 10%);
border-radius: 50%; border-radius: 50%;
border-top-color: #0073aa; border-top-color: #0073aa;
animation: wpst-spin 1s ease-in-out infinite; animation: wpst-spin 1s ease-in-out infinite;

178
admin/js/admin-scripts.js
View File

@@ -5,131 +5,131 @@
*/ */
(function ($) { (function ($) {
'use strict'; 'use strict';
/** /**
* Admin functionality * Admin functionality
*/ */
const WPSTAdmin = { const WPSTAdmin = {
/** /**
* Initialize * Initialize
*/ */
init: function () { init: function () {
// Initialize components. // Initialize components.
this.initComponents(); this.initComponents();
// Bind events. // Bind events.
this.bindEvents(); this.bindEvents();
}, },
/** /**
* Initialize components * Initialize components
*/ */
initComponents: function () { initComponents: function () {
// Initialize any components here. // Initialize any components here.
}, },
/** /**
* Bind events * Bind events
*/ */
bindEvents: function () { bindEvents: function () {
// Example: Toggle sections. // Example: Toggle sections.
$( '.wpst-toggle-section' ).on( 'click', this.toggleSection ); $( '.wpst-toggle-section' ).on( 'click', this.toggleSection );
// Example: Form submission. // Example: Form submission.
$( '#wpst-settings-form' ).on( 'submit', this.handleFormSubmit ); $( '#wpst-settings-form' ).on( 'submit', this.handleFormSubmit );
}, },
/** /**
* Toggle section visibility * Toggle section visibility
* *
* @param {Event} e Click event * @param {Event} e Click event
*/ */
toggleSection: function (e) { toggleSection: function (e) {
e.preventDefault(); e.preventDefault();
const $this = $( this ); const $this = $( this );
const target = $this.data( 'target' ); const target = $this.data( 'target' );
$( target ).slideToggle( 200 ); $( target ).slideToggle( 200 );
$this.toggleClass( 'open' ); $this.toggleClass( 'open' );
}, },
/** /**
* Handle form submission * Handle form submission
* *
* @param {Event} e Submit event * @param {Event} e Submit event
*/ */
handleFormSubmit: function (e) { handleFormSubmit: function (e) {
e.preventDefault(); e.preventDefault();
const $form = $( this ); const $form = $( this );
const $submitButton = $form.find( 'input[type="submit"]' ); const $submitButton = $form.find( 'input[type="submit"]' );
const formData = $form.serialize(); const formData = $form.serialize();
// Disable submit button and show loading state. // Disable submit button and show loading state.
$submitButton.prop( 'disabled', true ).addClass( 'loading' ); $submitButton.prop( 'disabled', true ).addClass( 'loading' );
// Send AJAX request. // Send AJAX request.
$.ajax( $.ajax(
{ {
url: wpstData.ajaxUrl, url: wpstData.ajaxUrl,
type: 'POST', type: 'POST',
data: { data: {
action: 'wpst_save_settings', action: 'wpst_save_settings',
nonce: wpstData.nonce, nonce: wpstData.nonce,
formData: formData formData: formData
}, },
success: function (response) { success: function (response) {
if (response.success) { if (response.success) {
WPSTAdmin.showNotice( 'success', response.data.message ); WPSTAdmin.showNotice( 'success', response.data.message );
} else { } else {
WPSTAdmin.showNotice( 'error', response.data.message ); WPSTAdmin.showNotice( 'error', response.data.message );
} }
}, },
error: function () { error: function () {
WPSTAdmin.showNotice( 'error', 'An error occurred. Please try again.' ); WPSTAdmin.showNotice( 'error', 'An error occurred. Please try again.' );
}, },
complete: function () { complete: function () {
// Re-enable submit button and remove loading state. // Re-enable submit button and remove loading state.
$submitButton.prop( 'disabled', false ).removeClass( 'loading' ); $submitButton.prop( 'disabled', false ).removeClass( 'loading' );
} }
} }
); );
}, },
/** /**
* Show admin notice * Show admin notice
* *
* @param {string} type Notice type (success, error, warning) * @param {string} type Notice type (success, error, warning)
* @param {string} message Notice message * @param {string} message Notice message
*/ */
showNotice: function (type, message) { showNotice: function (type, message) {
const $notice = $( '<div class="wpst-notice ' + type + '"><p>' + message + '</p></div>' ); const $notice = $( '<div class="wpst-notice ' + type + '"><p>' + message + '</p></div>' );
// Add notice to the page. // Add notice to the page.
$( '.wpst-notices' ).html( $notice ); $( '.wpst-notices' ).html( $notice );
// Automatically remove notice after 5 seconds. // Automatically remove notice after 5 seconds.
setTimeout( setTimeout(
function () { function () {
$notice.fadeOut( $notice.fadeOut(
300, 300,
function () { function () {
$( this ).remove(); $( this ).remove();
} }
); );
}, },
5000 5000
); );
} }
}; };
// Initialize when document is ready. // Initialize when document is ready.
$( document ).ready( $( document ).ready(
function () { function () {
WPSTAdmin.init(); WPSTAdmin.init();
} }
); );
})( jQuery ); })( jQuery );

240
admin/js/update-source-selector.js
View File

@@ -5,174 +5,174 @@
*/ */
(function ($) { (function ($) {
'use strict'; 'use strict';
/** /**
* Update Source Selector functionality * Update Source Selector functionality
*/ */
const WPSTUpdateSourceSelector = { const WPSTUpdateSourceSelector = {
/** /**
* Modal element * Modal element
*/ */
$modal: null, $modal: null,
/** /**
* Selected source * Selected source
*/ */
selectedSource: '', selectedSource: '',
/** /**
* Initialize * Initialize
*/ */
init: function () { init: function () {
// Cache DOM elements. // Cache DOM elements.
this.$modal = $( '#wpst-update-source-modal' ); this.$modal = $( '#wpst-update-source-modal' );
// Bind events. // Bind events.
this.bindEvents(); this.bindEvents();
}, },
/** /**
* Bind events * Bind events
*/ */
bindEvents: function () { bindEvents: function () {
// Open modal when clicking on the update source link. // Open modal when clicking on the update source link.
$( document ).on( 'click', '.wpst-update-source-selector', this.openModal.bind( this ) ); $( document ).on( 'click', '.wpst-update-source-selector', this.openModal.bind( this ) );
// Close modal when clicking on the close button or outside the modal. // Close modal when clicking on the close button or outside the modal.
this.$modal.on( 'click', '.wpst-modal-close', this.closeModal.bind( this ) ); this.$modal.on( 'click', '.wpst-modal-close', this.closeModal.bind( this ) );
$( document ).on( $( document ).on(
'click', 'click',
'.wpst-modal', '.wpst-modal',
function (e) { function (e) {
if ($( e.target ).hasClass( 'wpst-modal' )) { if ($( e.target ).hasClass( 'wpst-modal' )) {
WPSTUpdateSourceSelector.closeModal(); WPSTUpdateSourceSelector.closeModal();
} }
} }
); );
// Select source option. // Select source option.
this.$modal.on( 'click', '.wpst-source-option', this.selectSource.bind( this ) ); this.$modal.on( 'click', '.wpst-source-option', this.selectSource.bind( this ) );
// Save source selection. // Save source selection.
this.$modal.on( 'click', '#wpst-save-source', this.saveSource.bind( this ) ); this.$modal.on( 'click', '#wpst-save-source', this.saveSource.bind( this ) );
}, },
/** /**
* Open the modal * Open the modal
* *
* @param {Event} e Click event * @param {Event} e Click event
*/ */
openModal: function (e) { openModal: function (e) {
e.preventDefault(); e.preventDefault();
this.$modal.show(); this.$modal.show();
}, },
/** /**
* Close the modal * Close the modal
*/ */
closeModal: function () { closeModal: function () {
this.$modal.hide(); this.$modal.hide();
}, },
/** /**
* Select a source option * Select a source option
* *
* @param {Event} e Click event * @param {Event} e Click event
*/ */
selectSource: function (e) { selectSource: function (e) {
const $option = $( e.currentTarget ); const $option = $( e.currentTarget );
// Update selected state. // Update selected state.
this.$modal.find( '.wpst-source-option' ).removeClass( 'selected' ); this.$modal.find( '.wpst-source-option' ).removeClass( 'selected' );
$option.addClass( 'selected' ); $option.addClass( 'selected' );
// Update radio button. // Update radio button.
$option.find( 'input[type="radio"]' ).prop( 'checked', true ); $option.find( 'input[type="radio"]' ).prop( 'checked', true );
// Store selected source. // Store selected source.
this.selectedSource = $option.find( 'input[type="radio"]' ).val(); this.selectedSource = $option.find( 'input[type="radio"]' ).val();
}, },
/** /**
* Save the selected source * Save the selected source
*/ */
saveSource: function () { saveSource: function () {
// Validate selection. // Validate selection.
if ( ! this.selectedSource) { if ( ! this.selectedSource) {
this.showMessage( 'error', 'Please select an update source.' ); this.showMessage( 'error', 'Please select an update source.' );
return; return;
} }
// Show loading state. // Show loading state.
const $saveButton = $( '#wpst-save-source' ); const $saveButton = $( '#wpst-save-source' );
$saveButton.prop( 'disabled', true ).html( '<span class="wpst-loading"></span> Saving...' ); $saveButton.prop( 'disabled', true ).html( '<span class="wpst-loading"></span> Saving...' );
// Send AJAX request. // Send AJAX request.
$.ajax( $.ajax(
{ {
url: wpstModalData.ajaxUrl, // WordPress AJAX URL. url: wpstModalData.ajaxUrl, // WordPress AJAX URL.
type: 'POST', type: 'POST',
data: { data: {
action: 'wpst_set_update_source', // AJAX action hook. action: 'wpst_set_update_source', // AJAX action hook.
nonce: wpstModalData.nonce, // Security nonce. nonce: wpstModalData.nonce, // Security nonce.
source: this.selectedSource source: this.selectedSource
}, },
success: function (response) { success: function (response) {
if (response.success) { if (response.success) {
WPSTUpdateSourceSelector.showMessage( 'success', response.data.message ); WPSTUpdateSourceSelector.showMessage( 'success', response.data.message );
// Close modal after a short delay. // Close modal after a short delay.
setTimeout( setTimeout(
function () { function () {
WPSTUpdateSourceSelector.closeModal(); WPSTUpdateSourceSelector.closeModal();
}, },
1500 1500
); );
} else { } else {
WPSTUpdateSourceSelector.showMessage( 'error', response.data.message ); WPSTUpdateSourceSelector.showMessage( 'error', response.data.message );
} }
}, },
error: function () { error: function () {
WPSTUpdateSourceSelector.showMessage( 'error', 'An error occurred. Please try again.' ); WPSTUpdateSourceSelector.showMessage( 'error', 'An error occurred. Please try again.' );
}, },
complete: function () { complete: function () {
// Reset button state. // Reset button state.
$saveButton.prop( 'disabled', false ).text( wpstModalData.i18n.confirm ); $saveButton.prop( 'disabled', false ).text( wpstModalData.i18n.confirm );
} }
} }
); );
}, },
/** /**
* Show a message in the modal * Show a message in the modal
* *
* @param {string} type Message type (success, error) * @param {string} type Message type (success, error)
* @param {string} message Message text * @param {string} message Message text
*/ */
showMessage: function (type, message) { showMessage: function (type, message) {
const $message = this.$modal.find( '.wpst-modal-message' ); const $message = this.$modal.find( '.wpst-modal-message' );
// Set message content and type. // Set message content and type.
$message.html( message ).removeClass( 'success error' ).addClass( type ).show(); $message.html( message ).removeClass( 'success error' ).addClass( type ).show();
// Hide message after a delay for success messages. // Hide message after a delay for success messages.
if (type === 'success') { if (type === 'success') {
setTimeout( setTimeout(
function () { function () {
$message.fadeOut( 300 ); $message.fadeOut( 300 );
}, },
3000 3000
); );
} }
} }
}; };
// Initialize when document is ready. // Initialize when document is ready.
$( document ).ready( $( document ).ready(
function () { function () {
WPSTUpdateSourceSelector.init(); WPSTUpdateSourceSelector.init();
} }
); );
})( jQuery ); })( jQuery );

2
assets/css/admin.css
View File

@@ -6,7 +6,7 @@
padding: 20px; padding: 20px;
background: #fff; background: #fff;
border: 1px solid #ccd0d4; border: 1px solid #ccd0d4;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
margin-top: 20px; margin-top: 20px;
} }

8
assets/js/admin.js
View File

@@ -3,10 +3,10 @@
*/ */
(function($) { (function($) {
'use strict'; 'use strict';
$(document).ready(function() { $(document).ready(function() {
// Plugin admin functionality will go here // Plugin admin functionality will go here
}); });
})(jQuery); })(jQuery);