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

✨ Provide means to update styling of a button

Browse source 
Before this, we needed to create a new button instance to display changes in button style. This allows updating an existing button instance
This commit is contained in:
Philipp Stracker 2024-08-08 17:53:59 +02:00
parent 3538a69402
commit 722289a545
No known key found for this signature in database
4 changed files with 69 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

63
modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js
View file

@ -132,6 +132,15 @@ export default class PaymentButton {
*/
#styles;
/**
* Keeps track of CSS classes that were added to the wrapper element.
* We use this list to remove CSS classes that we've added, e.g. to change shape from
* pill to rect in the preview.
*
* @type {string[]}
*/
#appliedClasses = [];
/**
* APM relevant configuration; e.g., configuration of the GooglePay button.
*/
@ -245,11 +254,11 @@ export default class PaymentButton {
* to avoid multiple button instances handling the same context.
*
* @private
* @param {string} context - Button context name.
* @param {string} context - Button context name.
* @param {Object} externalHandler - Handler object.
* @param {Object} buttonConfig - Payment button specific configuration.
* @param {Object} ppcpConfig - Plugin wide configuration object.
* @param {Object} contextHandler - Handler object.
* @param {Object} buttonConfig - Payment button specific configuration.
* @param {Object} ppcpConfig - Plugin wide configuration object.
* @param {Object} contextHandler - Handler object.
*/
constructor(
context,
@ -275,15 +284,6 @@ export default class PaymentButton {
this.#externalHandler = externalHandler;
this.#contextHandler = contextHandler;
this.#wrappers = this.constructor.getWrappers(
this.#buttonConfig,
this.#ppcpConfig
);
this.#styles = this.constructor.getStyles(
this.#buttonConfig,
this.#ppcpConfig
);
this.#logger = new ConsoleLogger( methodName, context );
if ( isDebugging ) {
@ -291,6 +291,12 @@ export default class PaymentButton {
addToDebuggingCollection( methodName, this );
}
this.#wrappers = this.constructor.getWrappers(
this.#buttonConfig,
this.#ppcpConfig
);
this.applyButtonStyles( this.#buttonConfig );
apmButtonsInit( this.#ppcpConfig );
this.initEventListeners();
}
@ -634,6 +640,18 @@ export default class PaymentButton {
this.#logger.error( ...args );
}
applyButtonStyles( buttonConfig, ppcpConfig = null ) {
if ( ! ppcpConfig ) {
ppcpConfig = this.ppcpConfig;
}
this.#styles = this.constructor.getStyles( buttonConfig, ppcpConfig );
if ( this.isInitialized ) {
this.triggerRedraw();
}
}
/**
* Configures the button instance. Must be called before the initial `init()`.
*
@ -662,7 +680,7 @@ export default class PaymentButton {
}
triggerRedraw() {
this.showPaymentGateway();
this.showPaymentGateway();
dispatchButtonEvent( {
event: ButtonEvents.REDRAW,
@ -711,7 +729,7 @@ export default class PaymentButton {
if ( this.isEligible && this.isPresent && this.isVisible ) {
if ( ! this.isButtonAttached ) {
this.log( 'refresh.addButton' );
this.addButton();
this.addButton();
}
}
}
@ -748,11 +766,20 @@ export default class PaymentButton {
const wrapper = this.wrapperElement;
const { shape, height } = this.style;
wrapper.classList.add(
for ( const classItem of this.#appliedClasses ) {
wrapper.classList.remove( classItem );
}
this.#appliedClasses = [];
const newClasses = [
`ppcp-button-${ shape }`,
'ppcp-button-apm',
this.cssClass
);
this.cssClass,
];
wrapper.classList.add( ...newClasses );
this.#appliedClasses.push( ...newClasses );
if ( height ) {
wrapper.style.height = `${ height }px`;

2
modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js
View file

@ -38,7 +38,7 @@ class PreviewButtonManager {
this.apiConfig = null;
this.apiError = '';
this.#logger = new ConsoleLogger( this.methodName, 'preview' );
this.#logger = new ConsoleLogger( this.methodName, 'preview-manager' );
this.#logger.enabled = true; // Manually set this to true for development.
this.#onInit = new Promise( ( resolve ) => {