mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-07 19:54:15 +08:00
Handle the JS logic
This commit is contained in:
Narek Zakarian
parent
9efc65cc93
commit
c68eac814f
2 changed files with 180 additions and 193 deletions
|
|
@ -1,11 +1,18 @@
|
|||
document.addEventListener(
|
||||
'DOMContentLoaded',
|
||||
() => {
|
||||
const payLaterMessagingSelectableLocations = ['product', 'cart', 'checkout'];
|
||||
const payLaterMessagingAllLocations = payLaterMessagingSelectableLocations.concat('general');
|
||||
const payLaterMessagingLocationsSelector = '#field-pay_later_messaging_locations';
|
||||
const payLaterMessagingLocationsSelect = payLaterMessagingLocationsSelector + ' select';
|
||||
const payLaterMessagingEnabledSelector = '#ppcp-pay_later_messaging_enabled';
|
||||
|
||||
const groupToggle = (selector, group) => {
|
||||
const toggleElement = document.querySelector(selector);
|
||||
if (! toggleElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (! toggleElement.checked) {
|
||||
group.forEach( (elementToHide) => {
|
||||
document.querySelector(elementToHide).style.display = 'none';
|
||||
|
|
@ -14,11 +21,11 @@ document.addEventListener(
|
|||
toggleElement.addEventListener(
|
||||
'change',
|
||||
(event) => {
|
||||
|
||||
if (! event.target.checked) {
|
||||
group.forEach( (elementToHide) => {
|
||||
document.querySelector(elementToHide).style.display = 'none';
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -26,20 +33,7 @@ document.addEventListener(
|
|||
document.querySelector(elementToShow).style.display = '';
|
||||
})
|
||||
|
||||
if('ppcp-message_enabled' === event.target.getAttribute('id')){
|
||||
updateCheckoutMessageFields();
|
||||
return;
|
||||
}
|
||||
|
||||
if('ppcp-message_product_enabled' === event.target.getAttribute('id')){
|
||||
updateProductMessageFields();
|
||||
return;
|
||||
}
|
||||
|
||||
if('ppcp-message_cart_enabled' === event.target.getAttribute('id')){
|
||||
updateCartMessageFields();
|
||||
}
|
||||
|
||||
togglePayLaterMessageFields();
|
||||
}
|
||||
);
|
||||
};
|
||||
|
|
@ -78,89 +72,34 @@ document.addEventListener(
|
|||
);
|
||||
};
|
||||
|
||||
const updateCheckoutMessageFields = () => {
|
||||
const togglePayLaterMessageFields = () => {
|
||||
payLaterMessagingAllLocations.forEach( (location) => {
|
||||
groupToggleSelect(
|
||||
'#ppcp-message_layout',
|
||||
'#ppcp-pay_later_' + location + '_message_layout',
|
||||
[
|
||||
{
|
||||
value:'text',
|
||||
selector:'#field-message_logo'
|
||||
selector:'#field-pay_later_' + location + '_message_logo'
|
||||
},
|
||||
{
|
||||
value:'text',
|
||||
selector:'#field-message_position'
|
||||
selector:'#field-pay_later_' + location + '_message_position'
|
||||
},
|
||||
{
|
||||
value:'text',
|
||||
selector:'#field-message_color'
|
||||
selector:'#field-pay_later_' + location + '_message_color'
|
||||
},
|
||||
{
|
||||
value:'flex',
|
||||
selector:'#field-message_flex_ratio'
|
||||
selector:'#field-pay_later_' + location + '_message_flex_ratio'
|
||||
},
|
||||
{
|
||||
value:'flex',
|
||||
selector:'#field-message_flex_color'
|
||||
}
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
const updateProductMessageFields = () => {
|
||||
groupToggleSelect(
|
||||
'#ppcp-message_product_layout',
|
||||
[
|
||||
{
|
||||
value:'text',
|
||||
selector:'#field-message_product_logo'
|
||||
},
|
||||
{
|
||||
value:'text',
|
||||
selector:'#field-message_product_position'
|
||||
},
|
||||
{
|
||||
value:'text',
|
||||
selector:'#field-message_product_color'
|
||||
},
|
||||
{
|
||||
value:'flex',
|
||||
selector:'#field-message_product_flex_ratio'
|
||||
},
|
||||
{
|
||||
value:'flex',
|
||||
selector:'#field-message_product_flex_color'
|
||||
}
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
const updateCartMessageFields = () =>
|
||||
{
|
||||
groupToggleSelect(
|
||||
'#ppcp-message_cart_layout',
|
||||
[
|
||||
{
|
||||
value:'text',
|
||||
selector:'#field-message_cart_logo'
|
||||
},
|
||||
{
|
||||
value:'text',
|
||||
selector:'#field-message_cart_position'
|
||||
},
|
||||
{
|
||||
value:'text',
|
||||
selector:'#field-message_cart_color'
|
||||
},
|
||||
{
|
||||
value:'flex',
|
||||
selector:'#field-message_cart_flex_ratio'
|
||||
},
|
||||
{
|
||||
value:'flex',
|
||||
selector:'#field-message_cart_flex_color'
|
||||
selector:'#field-pay_later_' + location + '_message_flex_color'
|
||||
}
|
||||
]
|
||||
);
|
||||
})
|
||||
}
|
||||
|
||||
const removeDisabledCardIcons = (disabledCardsSelectSelector, iconsSelectSelector) => {
|
||||
|
|
@ -223,6 +162,133 @@ document.addEventListener(
|
|||
replace();
|
||||
};
|
||||
|
||||
const togglePayLaterMessagingInputsBySelectedLocations = (
|
||||
stylingPerMessagingSelector,
|
||||
messagingLocationsSelector,
|
||||
groupToShowOnChecked,
|
||||
groupToHideOnChecked
|
||||
) => {
|
||||
|
||||
const payLaterMessagingEnabled = document.querySelector(payLaterMessagingEnabledSelector);
|
||||
const stylingPerMessagingElement = document.querySelector(stylingPerMessagingSelector);
|
||||
const messagingLocationsElement = document.querySelector(messagingLocationsSelector);
|
||||
|
||||
if (! stylingPerMessagingElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
const toggleElementsBySelectedLocations = () => {
|
||||
if (! stylingPerMessagingElement.checked || ! payLaterMessagingEnabled.checked) {
|
||||
return;
|
||||
}
|
||||
|
||||
let checkedLocations = document.querySelectorAll(messagingLocationsSelector + ' :checked');
|
||||
let selectedLocations = [...checkedLocations].map(option => option.value);
|
||||
|
||||
const messagingInputSelectors = payLaterMessagingInputSelectorsByLocations(selectedLocations);
|
||||
|
||||
groupToShowOnChecked.forEach( (element) => {
|
||||
if ( messagingInputSelectors.includes(element) ) {
|
||||
document.querySelector(element).style.display = '';
|
||||
return;
|
||||
}
|
||||
document.querySelector(element).style.display = 'none';
|
||||
})
|
||||
|
||||
togglePayLaterMessageFields();
|
||||
}
|
||||
|
||||
const hideElements = (selectroGroup) => {
|
||||
selectroGroup.forEach( (elementToHide) => {
|
||||
document.querySelector(elementToHide).style.display = 'none';
|
||||
})
|
||||
}
|
||||
|
||||
const showElements = (selectroGroup) => {
|
||||
selectroGroup.forEach( (elementToShow) => {
|
||||
document.querySelector(elementToShow).style.display = '';
|
||||
})
|
||||
}
|
||||
|
||||
groupToggle(stylingPerMessagingSelector, groupToShowOnChecked);
|
||||
toggleElementsBySelectedLocations();
|
||||
|
||||
if (stylingPerMessagingElement.checked) {
|
||||
hideElements(groupToHideOnChecked);
|
||||
}
|
||||
|
||||
stylingPerMessagingElement.addEventListener(
|
||||
'change',
|
||||
(event) => {
|
||||
toggleElementsBySelectedLocations();
|
||||
|
||||
if (event.target.checked) {
|
||||
hideElements(groupToHideOnChecked);
|
||||
return;
|
||||
}
|
||||
|
||||
showElements(groupToHideOnChecked);
|
||||
togglePayLaterMessageFields();
|
||||
}
|
||||
);
|
||||
|
||||
// We need to use jQuery here as the select might be a select2 element, which doesn't use native events.
|
||||
jQuery(messagingLocationsElement).on('change', toggleElementsBySelectedLocations);
|
||||
}
|
||||
|
||||
const payLaterMessagingInputSelectorsByLocations = (locations) => {
|
||||
let inputSelectros = [];
|
||||
|
||||
locations.forEach( (location) => {
|
||||
inputSelectros = inputSelectros.concat(payLaterMessagingInputSelectorByLocation(location))
|
||||
})
|
||||
|
||||
return inputSelectros
|
||||
}
|
||||
|
||||
const payLaterMessagingInputSelectorByLocation = (location) => {
|
||||
const inputSelectors = [
|
||||
'#field-pay_later_' + location + '_message_layout',
|
||||
'#field-pay_later_' + location + '_message_logo',
|
||||
'#field-pay_later_' + location + '_message_position',
|
||||
'#field-pay_later_' + location + '_message_color',
|
||||
'#field-pay_later_' + location + '_message_flex_color',
|
||||
'#field-pay_later_' + location + '_message_flex_ratio',
|
||||
]
|
||||
|
||||
if (location !== 'general') {
|
||||
inputSelectors.push('#field-pay_later_' + location + '_messaging_heading');
|
||||
}
|
||||
|
||||
return inputSelectors
|
||||
}
|
||||
|
||||
const allPayLaterMessaginginputSelectors = () => {
|
||||
let stylingInputSelectors = payLaterMessagingInputSelectorsByLocations(payLaterMessagingAllLocations);
|
||||
|
||||
return stylingInputSelectors.concat(payLaterMessagingLocationsSelector, '#field-pay_later_enable_styling_per_messaging_location');
|
||||
}
|
||||
|
||||
const toggleMessagingEnabled = () => {
|
||||
const payLaterMessagingEnabled = document.querySelector(payLaterMessagingEnabledSelector);
|
||||
const stylingPerMessagingElement = document.querySelector('#ppcp-pay_later_enable_styling_per_messaging_location');
|
||||
|
||||
groupToggle(
|
||||
payLaterMessagingEnabledSelector,
|
||||
allPayLaterMessaginginputSelectors()
|
||||
);
|
||||
|
||||
payLaterMessagingEnabled.addEventListener(
|
||||
'change',
|
||||
(event) => {
|
||||
if (! event.target.checked) {
|
||||
return;
|
||||
}
|
||||
stylingPerMessagingElement.dispatchEvent(new Event('change'))
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
(() => {
|
||||
removeDisabledCardIcons('select[name="ppcp[disable_cards][]"]', 'select[name="ppcp[card_icons][]"]');
|
||||
groupToggle(
|
||||
|
|
@ -237,15 +303,17 @@ document.addEventListener(
|
|||
);
|
||||
|
||||
groupToggle(
|
||||
'#ppcp-message_enabled',
|
||||
[
|
||||
'#field-message_layout',
|
||||
'#field-message_logo',
|
||||
'#field-message_position',
|
||||
'#field-message_color',
|
||||
'#field-message_flex_color',
|
||||
'#field-message_flex_ratio',
|
||||
]
|
||||
'#ppcp-pay_later_button_enabled',
|
||||
['#field-pay_later_button_locations']
|
||||
);
|
||||
|
||||
toggleMessagingEnabled();
|
||||
|
||||
togglePayLaterMessagingInputsBySelectedLocations(
|
||||
'#ppcp-pay_later_enable_styling_per_messaging_location',
|
||||
payLaterMessagingLocationsSelect,
|
||||
payLaterMessagingInputSelectorsByLocations(payLaterMessagingSelectableLocations),
|
||||
payLaterMessagingInputSelectorsByLocations(['general']),
|
||||
);
|
||||
|
||||
groupToggle(
|
||||
|
|
@ -259,18 +327,6 @@ document.addEventListener(
|
|||
]
|
||||
);
|
||||
|
||||
groupToggle(
|
||||
'#ppcp-message_product_enabled',
|
||||
[
|
||||
'#field-message_product_layout',
|
||||
'#field-message_product_logo',
|
||||
'#field-message_product_position',
|
||||
'#field-message_product_color',
|
||||
'#field-message_product_flex_color',
|
||||
'#field-message_product_flex_ratio',
|
||||
]
|
||||
);
|
||||
|
||||
groupToggle(
|
||||
'#ppcp-button_mini-cart_enabled',
|
||||
[
|
||||
|
|
@ -293,17 +349,6 @@ document.addEventListener(
|
|||
'#field-button_cart_shape',
|
||||
]
|
||||
);
|
||||
groupToggle(
|
||||
'#ppcp-message_cart_enabled',
|
||||
[
|
||||
'#field-message_cart_layout',
|
||||
'#field-message_cart_logo',
|
||||
'#field-message_cart_position',
|
||||
'#field-message_cart_color',
|
||||
'#field-message_cart_flex_color',
|
||||
'#field-message_cart_flex_ratio',
|
||||
]
|
||||
);
|
||||
|
||||
groupToggle(
|
||||
'#ppcp-vault_enabled',
|
||||
|
|
@ -323,9 +368,7 @@ document.addEventListener(
|
|||
]
|
||||
);
|
||||
|
||||
updateCheckoutMessageFields();
|
||||
updateProductMessageFields();
|
||||
updateCartMessageFields();
|
||||
togglePayLaterMessageFields();
|
||||
})();
|
||||
}
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,77 +1,21 @@
|
|||
;document.addEventListener(
|
||||
'DOMContentLoaded',
|
||||
() => {
|
||||
const payLaterMessagingCheckboxes = document.querySelectorAll(
|
||||
"#ppcp-message_enabled, #ppcp-message_cart_enabled, #ppcp-message_product_enabled"
|
||||
)
|
||||
|
||||
const vaultingCheckboxes = document.querySelectorAll(
|
||||
"#ppcp-vault_enabled"
|
||||
)
|
||||
|
||||
const payLaterEnabledLabels = document.querySelectorAll(
|
||||
".ppcp-pay-later-enabled-label"
|
||||
)
|
||||
|
||||
const payLaterDisabledLabels = document.querySelectorAll(
|
||||
".ppcp-pay-later-disabled-label"
|
||||
)
|
||||
|
||||
const disabledCheckboxes = document.querySelectorAll(
|
||||
'.ppcp-disabled-checkbox'
|
||||
)
|
||||
|
||||
function atLeastOneChecked(checkboxesNodeList) {
|
||||
return Array.prototype.slice.call(checkboxesNodeList).filter(node => !node.disabled && node.checked).length > 0
|
||||
}
|
||||
|
||||
function disableAll(nodeList){
|
||||
nodeList.forEach(node => node.setAttribute('disabled', 'true'))
|
||||
}
|
||||
|
||||
function enableAll(nodeList){
|
||||
nodeList.forEach(node => node.removeAttribute('disabled'))
|
||||
}
|
||||
|
||||
function hideAll(nodeList) {
|
||||
nodeList.forEach(node => node.style.display = 'none')
|
||||
}
|
||||
|
||||
function displayAll(nodeList) {
|
||||
nodeList.forEach(node => node.style.display = '')
|
||||
}
|
||||
|
||||
function uncheckAll(nodeList){
|
||||
nodeList.forEach(node => {
|
||||
node.checked = false
|
||||
node.dispatchEvent(new Event('change'))
|
||||
})
|
||||
}
|
||||
|
||||
function disablePayLater() {
|
||||
uncheckAll(payLaterMessagingCheckboxes)
|
||||
disableAll(payLaterMessagingCheckboxes)
|
||||
hideAll(payLaterEnabledLabels)
|
||||
displayAll(payLaterDisabledLabels)
|
||||
}
|
||||
|
||||
function enablePayLater() {
|
||||
enableAll(payLaterMessagingCheckboxes)
|
||||
displayAll(payLaterEnabledLabels)
|
||||
hideAll(payLaterDisabledLabels)
|
||||
}
|
||||
|
||||
function togglePayLater() {
|
||||
atLeastOneChecked(vaultingCheckboxes) ? disablePayLater() : enablePayLater()
|
||||
}
|
||||
|
||||
disableAll( disabledCheckboxes )
|
||||
togglePayLater()
|
||||
|
||||
vaultingCheckboxes.forEach(node => node.addEventListener('change', togglePayLater));
|
||||
|
||||
if(PayPalCommerceGatewaySettings.is_subscriptions_plugin_active !== '1') {
|
||||
document.getElementById('field-subscription_behavior_when_vault_fails').style.display = 'none';
|
||||
const subscriptionBehaviorWhenVaultFails = document.getElementById('field-subscription_behavior_when_vault_fails');
|
||||
if (subscriptionBehaviorWhenVaultFails) {
|
||||
subscriptionBehaviorWhenVaultFails.style.display = 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
