woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

♻️ 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

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

@ -5,16 +5,21 @@ import merge from 'deepmerge';
*/
class PreviewButton {
/**
* @param {string} selector - CSS ID of the wrapper, including the `#`
* @param {Object} apiConfig - PayPal configuration object; retrieved via a
* widgetBuilder API method
* @param {string} selector - CSS ID of the wrapper, including the `#`
* @param {Object} apiConfig - PayPal configuration object; retrieved via a
* 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.defaultAttributes = {};
this.buttonConfig = {};
this.ppcpConfig = {};
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.
this.selector = selector;
@ -31,7 +36,7 @@ class PreviewButton {
createNewWrapper() {
const wrapper = document.createElement( 'div' );
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( 'class', previewClass );

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

@ -21,6 +21,13 @@ class PreviewButtonManager {
*/
#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 } ) {
// Define the payment method name in the derived class.
this.methodName = methodName;
@ -97,6 +104,7 @@ class PreviewButtonManager {
return new DummyPreviewButton( {
selector: wrapperId,
label: this.apiError,
methodName: this.methodName,
} );
}