woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 18:16:38 +08:00
Code Issues Projects Packages Wiki Activity Actions

♻️ Consolidate the preview button’s CSS classes

Browse source 
Class names are now generated by the base class. This allows to remove a method from all derived classes
This commit is contained in:
Philipp Stracker 2024-07-15 13:18:07 +02:00
parent 7f9cbd6f58
commit 4cde024320
No known key found for this signature in database
6 changed files with 20 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

7
modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButton.js
View file

@ -18,13 +18,6 @@ export default class ApplePayPreviewButton extends PreviewButton {
}; };
} }
createNewWrapper() {
const wrapper = super.createNewWrapper();
wrapper.classList.add( 'ppcp-button-apm', 'ppcp-button-applepay' );
return wrapper;
}
createButton( buttonConfig ) { createButton( buttonConfig ) {
const button = new ApplepayButton( const button = new ApplepayButton(
'preview', 'preview',

1
modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButtonManager.js
View file

@ -44,6 +44,7 @@ export default class ApplePayPreviewButtonManager extends PreviewButtonManager {
return new ApplePayPreviewButton( { return new ApplePayPreviewButton( {
selector: wrapperId, selector: wrapperId,
apiConfig: this.apiConfig, apiConfig: this.apiConfig,
methodName: this.methodName,
} ); } );
} }
} }

15
modules/ppcp-button/resources/js/modules/Preview/PreviewButton.js
View file

@ -5,16 +5,21 @@ import merge from 'deepmerge';
*/ */
class PreviewButton { class PreviewButton {
/** /**
* @param {string} selector - CSS ID of the wrapper, including the `#` * @param {string} selector - CSS ID of the wrapper, including the `#`
* @param {Object} apiConfig - PayPal configuration object; retrieved via a * @param {Object} apiConfig - PayPal configuration object; retrieved via a
* widgetBuilder API method * widgetBuilder API method
* @param {string} methodName - Name of the payment method, e.g. "Google Pay"
*/ */
constructor( { selector, apiConfig } ) { constructor( { selector, apiConfig, methodName = '' } ) {
this.apiConfig = apiConfig; this.apiConfig = apiConfig;
this.defaultAttributes = {}; this.defaultAttributes = {};
this.buttonConfig = {}; this.buttonConfig = {};
this.ppcpConfig = {}; this.ppcpConfig = {};
this.isDynamic = true; this.isDynamic = true;
this.methodName = methodName;
this.methodSlug = this.methodName
.toLowerCase()
.replace( /[^a-z]+/g, '' );
// The selector is usually overwritten in constructor of derived class. // The selector is usually overwritten in constructor of derived class.
this.selector = selector; this.selector = selector;
@ -31,7 +36,7 @@ class PreviewButton {
createNewWrapper() { createNewWrapper() {
const wrapper = document.createElement( 'div' ); const wrapper = document.createElement( 'div' );
const previewId = this.selector.replace( '#', '' ); const previewId = this.selector.replace( '#', '' );
const previewClass = 'ppcp-preview-button'; const previewClass = `ppcp-preview-button ppcp-button-apm ppcp-button-${ this.methodSlug }`;
wrapper.setAttribute( 'id', previewId ); wrapper.setAttribute( 'id', previewId );
wrapper.setAttribute( 'class', previewClass ); wrapper.setAttribute( 'class', previewClass );

8
modules/ppcp-button/resources/js/modules/Preview/PreviewButtonManager.js
View file

@ -21,6 +21,13 @@ class PreviewButtonManager {
*/ */
#onInit; #onInit;
/**
* Initialize the new PreviewButtonManager.
*
* @param {string} methodName - Name of the payment method, e.g. "Google Pay"
* @param {Object} buttonConfig
* @param {Object} defaultAttributes
*/
constructor( { methodName, buttonConfig, defaultAttributes } ) { constructor( { methodName, buttonConfig, defaultAttributes } ) {
// Define the payment method name in the derived class. // Define the payment method name in the derived class.
this.methodName = methodName; this.methodName = methodName;
@ -97,6 +104,7 @@ class PreviewButtonManager {
return new DummyPreviewButton( { return new DummyPreviewButton( {
selector: wrapperId, selector: wrapperId,
label: this.apiError, label: this.apiError,
methodName: this.methodName,
} ); } );
} }

7
modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButton.js
View file

@ -20,13 +20,6 @@ export default class GooglePayPreviewButton extends PreviewButton {
}; };
} }
createNewWrapper() {
const wrapper = super.createNewWrapper();
wrapper.classList.add( 'ppcp-button-apm', 'ppcp-button-googlepay' );
return wrapper;
}
createButton( buttonConfig ) { createButton( buttonConfig ) {
const button = new GooglepayButton( const button = new GooglepayButton(
'preview', 'preview',

1
modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButtonManager.js
View file

@ -51,6 +51,7 @@ export default class GooglePayPreviewButtonManager extends PreviewButtonManager
return new GooglePayPreviewButton( { return new GooglePayPreviewButton( {
selector: wrapperId, selector: wrapperId,
apiConfig: this.apiConfig, apiConfig: this.apiConfig,
methodName: this.methodName,
} ); } );
} }
} }