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

Add hide/show/enable/disable triggers to button helpers

Browse source
This commit is contained in:
Pedro Silva 2023-09-07 16:56:10 +01:00
parent bf92f8942d
commit 4c4e4f14ff
No known key found for this signature in database
GPG key ID: E2EE20C0669D24B3
2 changed files with 51 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

29
modules/ppcp-button/resources/js/modules/Helper/ButtonDisabler.js
View file

@ -9,6 +9,24 @@ const getElement = (selectorOrElement) => {
return selectorOrElement; return selectorOrElement;
} }
const triggerEnabled = (selectorOrElement, element) => {
jQuery(document).trigger('ppcp-enabled', {
'handler': 'ButtonsDisabler.setEnabled',
'action': 'enable',
'selector': selectorOrElement,
'element': element
});
}
const triggerDisabled = (selectorOrElement, element) => {
jQuery(document).trigger('ppcp-disabled', {
'handler': 'ButtonsDisabler.setEnabled',
'action': 'disable',
'selector': selectorOrElement,
'element': element
});
}
export const setEnabled = (selectorOrElement, enable, form = null) => { export const setEnabled = (selectorOrElement, enable, form = null) => {
const element = getElement(selectorOrElement); const element = getElement(selectorOrElement);
@ -17,7 +35,8 @@ export const setEnabled = (selectorOrElement, enable, form = null) => {
} }
if (enable) { if (enable) {
jQuery(element).css({ jQuery(element).removeClass('ppcp-disabled')
.css({
'cursor': '', 'cursor': '',
'-webkit-filter': '', '-webkit-filter': '',
'filter': '', 'filter': '',
@ -25,8 +44,12 @@ export const setEnabled = (selectorOrElement, enable, form = null) => {
.off('mouseup') .off('mouseup')
.find('> *') .find('> *')
.css('pointer-events', ''); .css('pointer-events', '');
triggerEnabled(selectorOrElement, element);
} else { } else {
jQuery(element).css({ jQuery(element).addClass('ppcp-disabled')
.css({
'cursor': 'not-allowed', 'cursor': 'not-allowed',
'-webkit-filter': 'grayscale(100%)', '-webkit-filter': 'grayscale(100%)',
'filter': 'grayscale(100%)', 'filter': 'grayscale(100%)',
@ -44,6 +67,8 @@ export const setEnabled = (selectorOrElement, enable, form = null) => {
}) })
.find('> *') .find('> *')
.css('pointer-events', 'none'); .css('pointer-events', 'none');
triggerDisabled(selectorOrElement, element);
} }
}; };

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

@ -9,6 +9,24 @@ const getElement = (selectorOrElement) => {
return selectorOrElement; return selectorOrElement;
} }
const triggerHidden = (handler, selectorOrElement, element) => {
jQuery(document).trigger('ppcp-hidden', {
'handler': handler,
'action': 'hide',
'selector': selectorOrElement,
'element': element
});
}
const triggerShown = (handler, selectorOrElement, element) => {
jQuery(document).trigger('ppcp-shown', {
'handler': handler,
'action': 'show',
'selector': selectorOrElement,
'element': element
});
}
export const isVisible = (element) => { export const isVisible = (element) => {
return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length); return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
} }
@ -27,14 +45,18 @@ export const setVisible = (selectorOrElement, show, important = false) => {
} }
element.style.setProperty('display', 'none', important ? 'important' : ''); element.style.setProperty('display', 'none', important ? 'important' : '');
triggerHidden('Hiding.setVisible', selectorOrElement, element);
} else { } else {
if (currentValue === 'none') { if (currentValue === 'none') {
element.style.removeProperty('display'); element.style.removeProperty('display');
triggerShown('Hiding.setVisible', selectorOrElement, element);
} }
// still not visible (if something else added display: none in CSS) // still not visible (if something else added display: none in CSS)
if (!isVisible(element)) { if (!isVisible(element)) {
element.style.setProperty('display', 'block'); element.style.setProperty('display', 'block');
triggerShown('Hiding.setVisible', selectorOrElement, element);
} }
} }
}; };
@ -47,8 +69,10 @@ export const setVisibleByClass = (selectorOrElement, show, hiddenClass) => {
if (show) { if (show) {
element.classList.remove(hiddenClass); element.classList.remove(hiddenClass);
triggerShown('Hiding.setVisibleByClass', selectorOrElement, element);
} else { } else {
element.classList.add(hiddenClass); element.classList.add(hiddenClass);
triggerHidden('Hiding.setVisibleByClass', selectorOrElement, element);
} }
}; };