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

Hide button with !important to override !important from some themes

Browse source
This commit is contained in:
Alex P 2021-11-11 18:00:20 +02:00
parent c97dc9530b
commit 3dc9b48e1b
2 changed files with 49 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

9
modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js
View file

@ -1,5 +1,6 @@
import ErrorHandler from '../ErrorHandler';
import CheckoutActionHandler from '../ActionHandler/CheckoutActionHandler';
import { setVisible } from '../Helper/Hiding';
class CheckoutBootstap {
constructor(gateway, renderer, messages, spinner) {
@ -72,10 +73,10 @@ class CheckoutBootstap {
const isSavedCard = isCard && this.isSavedCardSelected();
const isNotOurGateway = !isPaypal && !isCard;
jQuery(this.standardOrderButtonSelector).toggle(isNotOurGateway || isSavedCard);
jQuery(this.gateway.button.wrapper).toggle(isPaypal);
jQuery(this.gateway.messages.wrapper).toggle(isPaypal);
jQuery(this.gateway.hosted_fields.wrapper).toggle(isCard && !isSavedCard);
setVisible(this.standardOrderButtonSelector, isNotOurGateway || isSavedCard, true);
setVisible(this.gateway.button.wrapper, isPaypal);
setVisible(this.gateway.messages.wrapper, isPaypal);
setVisible(this.gateway.hosted_fields.wrapper, isCard && !isSavedCard);
if (isPaypal) {
this.messages.render();

44
modules/ppcp-button/resources/js/modules/Helper/Hiding.js Normal file
View file

@ -0,0 +1,44 @@
const getElement = (selectorOrElement) => {
if (typeof selectorOrElement === 'string') {
return document.querySelector(selectorOrElement);
}
return selectorOrElement;
}
export const isVisible = (element) => {
return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
}
export const setVisible = (selectorOrElement, show, important = false) => {
const element = getElement(selectorOrElement);
if (!element) {
return;
}
const currentValue = element.style.getPropertyValue('display');
if (!show) {
if (currentValue === 'none') {
return;
}
element.style.setProperty('display', 'none', important ? 'important' : '');
} else {
if (currentValue === 'none') {
element.style.removeProperty('display');
}
// still not visible (if something else added display: none in CSS)
if (!isVisible(element)) {
element.style.setProperty('display', 'block');
}
}
};
export const hide = (selectorOrElement, important = false) => {
setVisible(selectorOrElement, false, important);
};
export const show = (selectorOrElement) => {
setVisible(selectorOrElement, true);
};