From 0ad0a12e54c20712de18b872173c86289b6bd598 Mon Sep 17 00:00:00 2001 From: Kirill Braslavsky Date: Wed, 31 Mar 2021 12:45:27 +0300 Subject: [PATCH 1/6] run settings script after DOM content loaded --- modules/ppcp-onboarding/assets/js/settings.js | 507 +++++++++--------- 1 file changed, 256 insertions(+), 251 deletions(-) diff --git a/modules/ppcp-onboarding/assets/js/settings.js b/modules/ppcp-onboarding/assets/js/settings.js index 186098431..e89c35f63 100644 --- a/modules/ppcp-onboarding/assets/js/settings.js +++ b/modules/ppcp-onboarding/assets/js/settings.js @@ -1,262 +1,267 @@ -const groupToggle = (selector, group) => { - const toggleElement = document.querySelector(selector); - if (! toggleElement) { - return; - } - if (! toggleElement.checked) { - group.forEach( (elementToHide) => { - document.querySelector(elementToHide).style.display = 'none'; - }) - } - toggleElement.addEventListener( - 'change', - (event) => { - - if (! event.target.checked) { - group.forEach( (elementToHide) => { - document.querySelector(elementToHide).style.display = 'none'; - }); +document.addEventListener( + 'DOMContentLoaded', + () => { + const groupToggle = (selector, group) => { + const toggleElement = document.querySelector(selector); + if (! toggleElement) { return; } + if (! toggleElement.checked) { + group.forEach( (elementToHide) => { + document.querySelector(elementToHide).style.display = 'none'; + }) + } + toggleElement.addEventListener( + 'change', + (event) => { - group.forEach( (elementToShow) => { - document.querySelector(elementToShow).style.display = 'table-row'; - }) - } - ); -}; + if (! event.target.checked) { + group.forEach( (elementToHide) => { + document.querySelector(elementToHide).style.display = 'none'; + }); + return; + } -const groupToggleSelect = (selector, group) => { - const toggleElement = document.querySelector(selector); - if (! toggleElement) { - return; - } - const value = toggleElement.value; - group.forEach( (elementToToggle) => { - const domElement = document.querySelector(elementToToggle.selector); - if (! domElement) { - return; - } - if (value === elementToToggle.value && domElement.style.display !== 'none') { - domElement.style.display = 'table-row'; - return; - } - domElement.style.display = 'none'; - }); + group.forEach( (elementToShow) => { + document.querySelector(elementToShow).style.display = 'table-row'; + }) + } + ); + }; - // We need to use jQuery here as the select might be a select2 element, which doesn't use native events. - jQuery(toggleElement).on( - 'change', - (event) => { - const value = event.target.value; + const groupToggleSelect = (selector, group) => { + const toggleElement = document.querySelector(selector); + if (! toggleElement) { + return; + } + const value = toggleElement.value; group.forEach( (elementToToggle) => { - if (value === elementToToggle.value) { - document.querySelector(elementToToggle.selector).style.display = 'table-row'; + const domElement = document.querySelector(elementToToggle.selector); + if (! domElement) { return; } - document.querySelector(elementToToggle.selector).style.display = 'none'; - }) - } - ); -}; + if (value === elementToToggle.value && domElement.style.display !== 'none') { + domElement.style.display = 'table-row'; + return; + } + domElement.style.display = 'none'; + }); -const disableOptions = (sourceSelector, targetSelector) => { + // We need to use jQuery here as the select might be a select2 element, which doesn't use native events. + jQuery(toggleElement).on( + 'change', + (event) => { + const value = event.target.value; + group.forEach( (elementToToggle) => { + if (value === elementToToggle.value) { + document.querySelector(elementToToggle.selector).style.display = 'table-row'; + return; + } + document.querySelector(elementToToggle.selector).style.display = 'none'; + }) + } + ); + }; - const source = jQuery(sourceSelector); - const target = document.querySelector(targetSelector); - if (! target) { - return; + const disableOptions = (sourceSelector, targetSelector) => { + + const source = jQuery(sourceSelector); + const target = document.querySelector(targetSelector); + if (! target) { + return; + } + const allOptions = Array.from(document.querySelectorAll('select[name="ppcp[disable_cards][]"] option')); + const replace = () => { + const validOptions = allOptions.filter( + (option) => { + + return ! option.selected + } + ); + const selectedValidOptions = validOptions.map( + (option) => { + option = option.cloneNode(true); + option.selected = target.querySelector('option[value="' + option.value + '"]') && target.querySelector('option[value="' + option.value + '"]').selected; + return option; + } + ); + target.innerHTML = ''; + selectedValidOptions.forEach( + (option) => { + target.append(option); + } + ); + }; + + source.on('change',replace); + replace(); + }; + + (() => { + disableOptions('select[name="ppcp[disable_cards][]"]', 'select[name="ppcp[card_icons][]"]'); + groupToggle( + '#ppcp-button_enabled', + [ + '#field-button_layout', + '#field-button_tagline', + '#field-button_label', + '#field-button_color', + '#field-button_shape', + ] + ); + + groupToggle( + '#ppcp-message_enabled', + [ + '#field-message_layout', + '#field-message_logo', + '#field-message_position', + '#field-message_color', + '#field-message_flex_color', + '#field-message_flex_ratio', + ] + ); + + groupToggle( + '#ppcp-button_product_enabled', + [ + '#field-button_product_layout', + '#field-button_product_tagline', + '#field-button_product_label', + '#field-button_product_color', + '#field-button_product_shape', + ] + ); + + 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', + [ + '#field-button_mini-cart_layout', + '#field-button_mini-cart_tagline', + '#field-button_mini-cart_label', + '#field-button_mini-cart_color', + '#field-button_mini-cart_shape', + ] + ); + + groupToggle( + '#ppcp-button_cart_enabled', + [ + '#field-button_cart_layout', + '#field-button_cart_tagline', + '#field-button_cart_label', + '#field-button_cart_color', + '#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', + ] + ); + + 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' + } + ] + ); + groupToggleSelect( + '#ppcp-intent', + [ + { + value:'authorize', + selector:'#field-capture_for_virtual_only' + } + ] + ); + 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' + } + ] + ); + groupToggleSelect( + '#ppcp-message_layout', + [ + { + value:'text', + selector:'#field-message_logo' + }, + { + value:'text', + selector:'#field-message_position' + }, + { + value:'text', + selector:'#field-message_color' + }, + { + value:'flex', + selector:'#field-message_flex_ratio' + }, + { + value:'flex', + selector:'#field-message_flex_color' + } + ] + ); + })(); } - const allOptions = Array.from(document.querySelectorAll('select[name="ppcp[disable_cards][]"] option')); - const replace = () => { - const validOptions = allOptions.filter( - (option) => { - - return ! option.selected - } - ); - const selectedValidOptions = validOptions.map( - (option) => { - option = option.cloneNode(true); - option.selected = target.querySelector('option[value="' + option.value + '"]') && target.querySelector('option[value="' + option.value + '"]').selected; - return option; - } - ); - target.innerHTML = ''; - selectedValidOptions.forEach( - (option) => { - target.append(option); - } - ); - }; - - source.on('change',replace); - replace(); -}; - -(() => { - disableOptions('select[name="ppcp[disable_cards][]"]', 'select[name="ppcp[card_icons][]"]'); - groupToggle( - '#ppcp-button_enabled', - [ - '#field-button_layout', - '#field-button_tagline', - '#field-button_label', - '#field-button_color', - '#field-button_shape', - ] - ); - - groupToggle( - '#ppcp-message_enabled', - [ - '#field-message_layout', - '#field-message_logo', - '#field-message_position', - '#field-message_color', - '#field-message_flex_color', - '#field-message_flex_ratio', - ] - ); - - groupToggle( - '#ppcp-button_product_enabled', - [ - '#field-button_product_layout', - '#field-button_product_tagline', - '#field-button_product_label', - '#field-button_product_color', - '#field-button_product_shape', - ] - ); - - 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', - [ - '#field-button_mini-cart_layout', - '#field-button_mini-cart_tagline', - '#field-button_mini-cart_label', - '#field-button_mini-cart_color', - '#field-button_mini-cart_shape', - ] - ); - - groupToggle( - '#ppcp-button_cart_enabled', - [ - '#field-button_cart_layout', - '#field-button_cart_tagline', - '#field-button_cart_label', - '#field-button_cart_color', - '#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', - ] - ); - - 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' - } - ] - ); - groupToggleSelect( - '#ppcp-intent', - [ - { - value:'authorize', - selector:'#field-capture_for_virtual_only' - } - ] - ); - 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' - } - ] - ); - groupToggleSelect( - '#ppcp-message_layout', - [ - { - value:'text', - selector:'#field-message_logo' - }, - { - value:'text', - selector:'#field-message_position' - }, - { - value:'text', - selector:'#field-message_color' - }, - { - value:'flex', - selector:'#field-message_flex_ratio' - }, - { - value:'flex', - selector:'#field-message_flex_color' - } - ] - ); -})(); +) From 485428c46acabfc22a39b2514ac656dc4b8dc63c Mon Sep 17 00:00:00 2001 From: Kirill Braslavsky Date: Wed, 31 Mar 2021 15:38:09 +0300 Subject: [PATCH 2/6] update fields on toggle checkout message --- modules/ppcp-onboarding/assets/js/settings.js | 59 +++++++++++-------- 1 file changed, 34 insertions(+), 25 deletions(-) diff --git a/modules/ppcp-onboarding/assets/js/settings.js b/modules/ppcp-onboarding/assets/js/settings.js index e89c35f63..458cdb49e 100644 --- a/modules/ppcp-onboarding/assets/js/settings.js +++ b/modules/ppcp-onboarding/assets/js/settings.js @@ -25,6 +25,11 @@ document.addEventListener( group.forEach( (elementToShow) => { document.querySelector(elementToShow).style.display = 'table-row'; }) + + if('ppcp-message_enabled' === event.target.getAttribute('id')){ + updateCheckoutMessageFields(); + } + } ); }; @@ -63,6 +68,34 @@ document.addEventListener( ); }; + const updateCheckoutMessageFields = () => { + groupToggleSelect( + '#ppcp-message_layout', + [ + { + value:'text', + selector:'#field-message_logo' + }, + { + value:'text', + selector:'#field-message_position' + }, + { + value:'text', + selector:'#field-message_color' + }, + { + value:'flex', + selector:'#field-message_flex_ratio' + }, + { + value:'flex', + selector:'#field-message_flex_color' + } + ] + ); + } + const disableOptions = (sourceSelector, targetSelector) => { const source = jQuery(sourceSelector); @@ -237,31 +270,7 @@ document.addEventListener( } ] ); - groupToggleSelect( - '#ppcp-message_layout', - [ - { - value:'text', - selector:'#field-message_logo' - }, - { - value:'text', - selector:'#field-message_position' - }, - { - value:'text', - selector:'#field-message_color' - }, - { - value:'flex', - selector:'#field-message_flex_ratio' - }, - { - value:'flex', - selector:'#field-message_flex_color' - } - ] - ); + updateCheckoutMessageFields(); })(); } ) From 9c787d5682a2a6266d9a290eb27ba84f143a261a Mon Sep 17 00:00:00 2001 From: Kirill Braslavsky Date: Wed, 31 Mar 2021 15:56:32 +0300 Subject: [PATCH 3/6] update fields on toggle product message --- modules/ppcp-onboarding/assets/js/settings.js | 58 +++++++++++-------- 1 file changed, 33 insertions(+), 25 deletions(-) diff --git a/modules/ppcp-onboarding/assets/js/settings.js b/modules/ppcp-onboarding/assets/js/settings.js index 458cdb49e..8cda51463 100644 --- a/modules/ppcp-onboarding/assets/js/settings.js +++ b/modules/ppcp-onboarding/assets/js/settings.js @@ -30,6 +30,10 @@ document.addEventListener( updateCheckoutMessageFields(); } + if('ppcp-message_product_enabled' === event.target.getAttribute('id')){ + updateProductMessageFields(); + } + } ); }; @@ -96,6 +100,34 @@ document.addEventListener( ); } + 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 disableOptions = (sourceSelector, targetSelector) => { const source = jQuery(sourceSelector); @@ -211,31 +243,7 @@ document.addEventListener( ] ); - 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' - } - ] - ); + groupToggleSelect( '#ppcp-intent', [ From 60db1606cb7139436ff3eef7957d8ad7826f5c1c Mon Sep 17 00:00:00 2001 From: Kirill Braslavsky Date: Wed, 31 Mar 2021 15:57:12 +0300 Subject: [PATCH 4/6] add early return --- modules/ppcp-onboarding/assets/js/settings.js | 1 + 1 file changed, 1 insertion(+) diff --git a/modules/ppcp-onboarding/assets/js/settings.js b/modules/ppcp-onboarding/assets/js/settings.js index 8cda51463..8e20124c8 100644 --- a/modules/ppcp-onboarding/assets/js/settings.js +++ b/modules/ppcp-onboarding/assets/js/settings.js @@ -28,6 +28,7 @@ document.addEventListener( if('ppcp-message_enabled' === event.target.getAttribute('id')){ updateCheckoutMessageFields(); + return; } if('ppcp-message_product_enabled' === event.target.getAttribute('id')){ From 51ab69ed3f51f454acc8e4f61dc2211071d26a91 Mon Sep 17 00:00:00 2001 From: Kirill Braslavsky Date: Wed, 31 Mar 2021 16:15:56 +0300 Subject: [PATCH 5/6] update product message fields initially --- modules/ppcp-onboarding/assets/js/settings.js | 1 + 1 file changed, 1 insertion(+) diff --git a/modules/ppcp-onboarding/assets/js/settings.js b/modules/ppcp-onboarding/assets/js/settings.js index 8e20124c8..a5b96666d 100644 --- a/modules/ppcp-onboarding/assets/js/settings.js +++ b/modules/ppcp-onboarding/assets/js/settings.js @@ -280,6 +280,7 @@ document.addEventListener( ] ); updateCheckoutMessageFields(); + updateProductMessageFields(); })(); } ) From af2e3543cc13b94737bff6d7622368b65f32ee4f Mon Sep 17 00:00:00 2001 From: Kirill Braslavsky Date: Wed, 31 Mar 2021 16:33:55 +0300 Subject: [PATCH 6/6] update fields on toggle cart message --- modules/ppcp-onboarding/assets/js/settings.js | 61 +++++++++++-------- 1 file changed, 36 insertions(+), 25 deletions(-) diff --git a/modules/ppcp-onboarding/assets/js/settings.js b/modules/ppcp-onboarding/assets/js/settings.js index a5b96666d..605dbdff6 100644 --- a/modules/ppcp-onboarding/assets/js/settings.js +++ b/modules/ppcp-onboarding/assets/js/settings.js @@ -33,6 +33,11 @@ document.addEventListener( if('ppcp-message_product_enabled' === event.target.getAttribute('id')){ updateProductMessageFields(); + return; + } + + if('ppcp-message_cart_enabled' === event.target.getAttribute('id')){ + updateCartMessageFields(); } } @@ -129,6 +134,35 @@ document.addEventListener( ); } + 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' + } + ] + ); + } + const disableOptions = (sourceSelector, targetSelector) => { const source = jQuery(sourceSelector); @@ -254,33 +288,10 @@ document.addEventListener( } ] ); - 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' - } - ] - ); + updateCheckoutMessageFields(); updateProductMessageFields(); + updateCartMessageFields(); })(); } )