From 4c1bee9dbec133c827b7c8cce176236c67885bc3 Mon Sep 17 00:00:00 2001 From: marcusquinn <6428977+marcusquinn@users.noreply.github.com> Date: Mon, 21 Apr 2025 15:04:05 +0100 Subject: [PATCH] Fix CSS and JavaScript formatting issues - Updated stylelint configuration to fix CSS formatting issues - Updated ESLint configuration to fix JavaScript issues - Added global variables to ESLint configuration --- .eslintrc.json | 11 ++ .stylelintrc.json | 39 +---- admin/css/admin-styles.css | 6 +- admin/css/update-source-selector.css | 8 +- admin/js/admin-scripts.js | 178 ++++++++++---------- admin/js/update-source-selector.js | 240 +++++++++++++-------------- assets/css/admin.css | 2 +- assets/js/admin.js | 8 +- 8 files changed, 235 insertions(+), 257 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 6147cda..4a42e06 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -5,6 +5,17 @@ "es6": true }, "extends": "eslint:recommended", + "globals": { + "wp": "readonly", + "wpstData": "readonly", + "wpstModalData": "readonly", + "Cypress": "readonly", + "cy": "readonly", + "describe": "readonly", + "it": "readonly", + "before": "readonly", + "module": "readonly" + }, "parserOptions": { "ecmaVersion": 2018, "sourceType": "module" diff --git a/.stylelintrc.json b/.stylelintrc.json index 4de50cf..93f69e7 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,43 +1,10 @@ { "extends": "stylelint-config-standard", "rules": { - "indentation": 4, - "string-quotes": "single", - "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", + "alpha-value-notation": "percentage", + "color-function-notation": "modern", "font-weight-notation": "numeric", - "font-family-name-quotes": "always-where-recommended", - "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" + "media-feature-range-notation": "context" }, "ignoreFiles": [ "vendor/**", diff --git a/admin/css/admin-styles.css b/admin/css/admin-styles.css index 6b096e7..040509b 100644 --- a/admin/css/admin-styles.css +++ b/admin/css/admin-styles.css @@ -11,7 +11,7 @@ padding: 20px; background: #fff; 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 { @@ -98,7 +98,7 @@ padding: 20px; background: #fff; 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 { @@ -124,7 +124,7 @@ } /* Responsive Styles */ -@media screen and (max-width: 782px) { +@media screen and (width <= 782px) { .wpst-form-table th { width: 100%; display: block; diff --git a/admin/css/update-source-selector.css b/admin/css/update-source-selector.css index 013fd23..3f8b91e 100644 --- a/admin/css/update-source-selector.css +++ b/admin/css/update-source-selector.css @@ -14,7 +14,7 @@ width: 100%; height: 100%; overflow: auto; - background-color: rgba(0, 0, 0, 0.4); + background-color: rgb(0 0 0 / 40%); } .wpst-modal-content { @@ -23,7 +23,7 @@ margin: 10% auto; padding: 20px; 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; max-width: 90%; } @@ -45,7 +45,7 @@ top: 10px; right: 15px; font-size: 20px; - font-weight: bold; + font-weight: 700; color: #666; cursor: pointer; } @@ -108,7 +108,7 @@ display: inline-block; width: 20px; height: 20px; - border: 2px solid rgba(0, 0, 0, 0.1); + border: 2px solid rgb(0 0 0 / 10%); border-radius: 50%; border-top-color: #0073aa; animation: wpst-spin 1s ease-in-out infinite; diff --git a/admin/js/admin-scripts.js b/admin/js/admin-scripts.js index 5afe43d..09d8711 100644 --- a/admin/js/admin-scripts.js +++ b/admin/js/admin-scripts.js @@ -5,131 +5,131 @@ */ (function ($) { - 'use strict'; + 'use strict'; - /** + /** * Admin functionality */ - const WPSTAdmin = { - /** + const WPSTAdmin = { + /** * Initialize */ - init: function () { - // Initialize components. - this.initComponents(); + init: function () { + // Initialize components. + this.initComponents(); - // Bind events. - this.bindEvents(); - }, + // Bind events. + this.bindEvents(); + }, - /** + /** * Initialize components */ - initComponents: function () { - // Initialize any components here. - }, + initComponents: function () { + // Initialize any components here. + }, - /** + /** * Bind events */ - bindEvents: function () { - // Example: Toggle sections. - $( '.wpst-toggle-section' ).on( 'click', this.toggleSection ); + bindEvents: function () { + // Example: Toggle sections. + $( '.wpst-toggle-section' ).on( 'click', this.toggleSection ); - // Example: Form submission. - $( '#wpst-settings-form' ).on( 'submit', this.handleFormSubmit ); - }, + // Example: Form submission. + $( '#wpst-settings-form' ).on( 'submit', this.handleFormSubmit ); + }, - /** + /** * Toggle section visibility * * @param {Event} e Click event */ - toggleSection: function (e) { - e.preventDefault(); + toggleSection: function (e) { + e.preventDefault(); - const $this = $( this ); - const target = $this.data( 'target' ); + const $this = $( this ); + const target = $this.data( 'target' ); - $( target ).slideToggle( 200 ); - $this.toggleClass( 'open' ); - }, + $( target ).slideToggle( 200 ); + $this.toggleClass( 'open' ); + }, - /** + /** * Handle form submission * * @param {Event} e Submit event */ - handleFormSubmit: function (e) { - e.preventDefault(); + handleFormSubmit: function (e) { + e.preventDefault(); - const $form = $( this ); - const $submitButton = $form.find( 'input[type="submit"]' ); - const formData = $form.serialize(); + const $form = $( this ); + const $submitButton = $form.find( 'input[type="submit"]' ); + const formData = $form.serialize(); - // Disable submit button and show loading state. - $submitButton.prop( 'disabled', true ).addClass( 'loading' ); + // Disable submit button and show loading state. + $submitButton.prop( 'disabled', true ).addClass( 'loading' ); - // Send AJAX request. - $.ajax( - { - url: wpstData.ajaxUrl, - type: 'POST', - data: { - action: 'wpst_save_settings', - nonce: wpstData.nonce, - formData: formData - }, - success: function (response) { - if (response.success) { - WPSTAdmin.showNotice( 'success', response.data.message ); - } else { - WPSTAdmin.showNotice( 'error', response.data.message ); - } - }, - error: function () { - WPSTAdmin.showNotice( 'error', 'An error occurred. Please try again.' ); - }, - complete: function () { - // Re-enable submit button and remove loading state. - $submitButton.prop( 'disabled', false ).removeClass( 'loading' ); - } - } - ); - }, + // Send AJAX request. + $.ajax( + { + url: wpstData.ajaxUrl, + type: 'POST', + data: { + action: 'wpst_save_settings', + nonce: wpstData.nonce, + formData: formData + }, + success: function (response) { + if (response.success) { + WPSTAdmin.showNotice( 'success', response.data.message ); + } else { + WPSTAdmin.showNotice( 'error', response.data.message ); + } + }, + error: function () { + WPSTAdmin.showNotice( 'error', 'An error occurred. Please try again.' ); + }, + complete: function () { + // Re-enable submit button and remove loading state. + $submitButton.prop( 'disabled', false ).removeClass( 'loading' ); + } + } + ); + }, - /** + /** * Show admin notice * * @param {string} type Notice type (success, error, warning) * @param {string} message Notice message */ - showNotice: function (type, message) { - const $notice = $( '

' + message + '

' ); + showNotice: function (type, message) { + const $notice = $( '

' + message + '

' ); - // Add notice to the page. - $( '.wpst-notices' ).html( $notice ); + // Add notice to the page. + $( '.wpst-notices' ).html( $notice ); - // Automatically remove notice after 5 seconds. - setTimeout( - function () { - $notice.fadeOut( - 300, - function () { - $( this ).remove(); - } - ); - }, - 5000 - ); - } - }; + // Automatically remove notice after 5 seconds. + setTimeout( + function () { + $notice.fadeOut( + 300, + function () { + $( this ).remove(); + } + ); + }, + 5000 + ); + } + }; - // Initialize when document is ready. - $( document ).ready( - function () { - WPSTAdmin.init(); - } - ); + // Initialize when document is ready. + $( document ).ready( + function () { + WPSTAdmin.init(); + } + ); })( jQuery ); diff --git a/admin/js/update-source-selector.js b/admin/js/update-source-selector.js index d782527..5f21f36 100644 --- a/admin/js/update-source-selector.js +++ b/admin/js/update-source-selector.js @@ -5,174 +5,174 @@ */ (function ($) { - 'use strict'; + 'use strict'; - /** + /** * Update Source Selector functionality */ - const WPSTUpdateSourceSelector = { - /** + const WPSTUpdateSourceSelector = { + /** * Modal element */ - $modal: null, + $modal: null, - /** + /** * Selected source */ - selectedSource: '', + selectedSource: '', - /** + /** * Initialize */ - init: function () { - // Cache DOM elements. - this.$modal = $( '#wpst-update-source-modal' ); + init: function () { + // Cache DOM elements. + this.$modal = $( '#wpst-update-source-modal' ); - // Bind events. - this.bindEvents(); - }, + // Bind events. + this.bindEvents(); + }, - /** + /** * Bind events */ - bindEvents: function () { - // Open modal when clicking on the update source link. - $( document ).on( 'click', '.wpst-update-source-selector', this.openModal.bind( this ) ); + bindEvents: function () { + // Open modal when clicking on the update source link. + $( document ).on( 'click', '.wpst-update-source-selector', this.openModal.bind( this ) ); - // Close modal when clicking on the close button or outside the modal. - this.$modal.on( 'click', '.wpst-modal-close', this.closeModal.bind( this ) ); - $( document ).on( - 'click', - '.wpst-modal', - function (e) { - if ($( e.target ).hasClass( 'wpst-modal' )) { - WPSTUpdateSourceSelector.closeModal(); - } - } - ); + // Close modal when clicking on the close button or outside the modal. + this.$modal.on( 'click', '.wpst-modal-close', this.closeModal.bind( this ) ); + $( document ).on( + 'click', + '.wpst-modal', + function (e) { + if ($( e.target ).hasClass( 'wpst-modal' )) { + WPSTUpdateSourceSelector.closeModal(); + } + } + ); - // Select source option. - this.$modal.on( 'click', '.wpst-source-option', this.selectSource.bind( this ) ); + // Select source option. + this.$modal.on( 'click', '.wpst-source-option', this.selectSource.bind( this ) ); - // Save source selection. - this.$modal.on( 'click', '#wpst-save-source', this.saveSource.bind( this ) ); - }, + // Save source selection. + this.$modal.on( 'click', '#wpst-save-source', this.saveSource.bind( this ) ); + }, - /** + /** * Open the modal * * @param {Event} e Click event */ - openModal: function (e) { - e.preventDefault(); - this.$modal.show(); - }, + openModal: function (e) { + e.preventDefault(); + this.$modal.show(); + }, - /** + /** * Close the modal */ - closeModal: function () { - this.$modal.hide(); - }, + closeModal: function () { + this.$modal.hide(); + }, - /** + /** * Select a source option * * @param {Event} e Click event */ - selectSource: function (e) { - const $option = $( e.currentTarget ); + selectSource: function (e) { + const $option = $( e.currentTarget ); - // Update selected state. - this.$modal.find( '.wpst-source-option' ).removeClass( 'selected' ); - $option.addClass( 'selected' ); + // Update selected state. + this.$modal.find( '.wpst-source-option' ).removeClass( 'selected' ); + $option.addClass( 'selected' ); - // Update radio button. - $option.find( 'input[type="radio"]' ).prop( 'checked', true ); + // Update radio button. + $option.find( 'input[type="radio"]' ).prop( 'checked', true ); - // Store selected source. - this.selectedSource = $option.find( 'input[type="radio"]' ).val(); - }, + // Store selected source. + this.selectedSource = $option.find( 'input[type="radio"]' ).val(); + }, - /** + /** * Save the selected source */ - saveSource: function () { - // Validate selection. - if ( ! this.selectedSource) { - this.showMessage( 'error', 'Please select an update source.' ); - return; - } + saveSource: function () { + // Validate selection. + if ( ! this.selectedSource) { + this.showMessage( 'error', 'Please select an update source.' ); + return; + } - // Show loading state. - const $saveButton = $( '#wpst-save-source' ); - $saveButton.prop( 'disabled', true ).html( ' Saving...' ); + // Show loading state. + const $saveButton = $( '#wpst-save-source' ); + $saveButton.prop( 'disabled', true ).html( ' Saving...' ); - // Send AJAX request. - $.ajax( - { - url: wpstModalData.ajaxUrl, // WordPress AJAX URL. - type: 'POST', - data: { - action: 'wpst_set_update_source', // AJAX action hook. - nonce: wpstModalData.nonce, // Security nonce. - source: this.selectedSource - }, - success: function (response) { - if (response.success) { - WPSTUpdateSourceSelector.showMessage( 'success', response.data.message ); + // Send AJAX request. + $.ajax( + { + url: wpstModalData.ajaxUrl, // WordPress AJAX URL. + type: 'POST', + data: { + action: 'wpst_set_update_source', // AJAX action hook. + nonce: wpstModalData.nonce, // Security nonce. + source: this.selectedSource + }, + success: function (response) { + if (response.success) { + WPSTUpdateSourceSelector.showMessage( 'success', response.data.message ); - // Close modal after a short delay. - setTimeout( - function () { - WPSTUpdateSourceSelector.closeModal(); - }, - 1500 - ); - } else { - WPSTUpdateSourceSelector.showMessage( 'error', response.data.message ); - } - }, - error: function () { - WPSTUpdateSourceSelector.showMessage( 'error', 'An error occurred. Please try again.' ); - }, - complete: function () { - // Reset button state. - $saveButton.prop( 'disabled', false ).text( wpstModalData.i18n.confirm ); - } - } - ); - }, + // Close modal after a short delay. + setTimeout( + function () { + WPSTUpdateSourceSelector.closeModal(); + }, + 1500 + ); + } else { + WPSTUpdateSourceSelector.showMessage( 'error', response.data.message ); + } + }, + error: function () { + WPSTUpdateSourceSelector.showMessage( 'error', 'An error occurred. Please try again.' ); + }, + complete: function () { + // Reset button state. + $saveButton.prop( 'disabled', false ).text( wpstModalData.i18n.confirm ); + } + } + ); + }, - /** + /** * Show a message in the modal * * @param {string} type Message type (success, error) * @param {string} message Message text */ - showMessage: function (type, message) { - const $message = this.$modal.find( '.wpst-modal-message' ); + showMessage: function (type, message) { + const $message = this.$modal.find( '.wpst-modal-message' ); - // Set message content and type. - $message.html( message ).removeClass( 'success error' ).addClass( type ).show(); + // Set message content and type. + $message.html( message ).removeClass( 'success error' ).addClass( type ).show(); - // Hide message after a delay for success messages. - if (type === 'success') { - setTimeout( - function () { - $message.fadeOut( 300 ); - }, - 3000 - ); - } - } - }; + // Hide message after a delay for success messages. + if (type === 'success') { + setTimeout( + function () { + $message.fadeOut( 300 ); + }, + 3000 + ); + } + } + }; - // Initialize when document is ready. - $( document ).ready( - function () { - WPSTUpdateSourceSelector.init(); - } - ); + // Initialize when document is ready. + $( document ).ready( + function () { + WPSTUpdateSourceSelector.init(); + } + ); })( jQuery ); diff --git a/assets/css/admin.css b/assets/css/admin.css index 126215c..3a3a87d 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -6,7 +6,7 @@ padding: 20px; background: #fff; 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; } diff --git a/assets/js/admin.js b/assets/js/admin.js index 4e13984..84a6f4e 100644 --- a/assets/js/admin.js +++ b/assets/js/admin.js @@ -3,10 +3,10 @@ */ (function($) { - 'use strict'; + 'use strict'; - $(document).ready(function() { - // Plugin admin functionality will go here - }); + $(document).ready(function() { + // Plugin admin functionality will go here + }); })(jQuery);