From dd15e8a6bec69707b07de5c28cb21ea0abf26914 Mon Sep 17 00:00:00 2001 From: Jono Hall Date: Sat, 3 Feb 2024 12:37:24 +1300 Subject: [PATCH] Update source.js --- source.js | 77 +++++++++++++++++++++++++++---------------------------- 1 file changed, 38 insertions(+), 39 deletions(-) diff --git a/source.js b/source.js index ec1f597..61a0840 100644 --- a/source.js +++ b/source.js @@ -1,9 +1,8 @@ -const pickerType = (document.querySelector('variant-radios')) ? 'radios' : 'selects'; -const variantSelects = (pickerType == 'radios') ? document.querySelector('variant-radios') : document.querySelector('variant-selects'); +const variantSelects = (document.querySelector('variant-selects')) ? document.querySelector('variant-selects') : document.querySelector('variant-radios'); +const pickerType = (variantSelects.querySelectorAll('fieldset').length > 0) ? 'radios' : 'selects'; const fieldsets = (pickerType == 'radios') ? Array.from(variantSelects.querySelectorAll('fieldset')) : Array.from(variantSelects.querySelectorAll('.product-form__input--dropdown')); const productJson = JSON.parse(variantSelects.querySelector('[type="application/json"]').textContent); let selectedOptions = []; - variantSelects.addEventListener('change', rebuildOptions); this.rebuildOptions(); @@ -11,50 +10,50 @@ this.rebuildOptions(); function validCombo(inputValue, optionLevel) { for(let i = 0; i < productJson.length; i++) { if(optionLevel == 1){ - if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == inputValue) { return true; } + if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == inputValue) { return true; } } else { - if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == selectedOptions[1] && productJson[i].option3 == inputValue) { return true; } + if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == selectedOptions[1] && productJson[i].option3 == inputValue) { return true; } } } - return false; } function rebuildOptions() { - selectedOptions = fieldsets.map((fieldset) => { - return (pickerType == 'radios') ? Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value : Array.from(fieldset.querySelectorAll('select'), (select) => select.value); - }); - //loop through the option sets starting from the 2nd set and disable any invalid options - for(let optionLevel = 1, n = fieldsets.length; optionLevel < n; optionLevel++) { - const inputs = (pickerType == 'radios') ? fieldsets[optionLevel].querySelectorAll('input') : fieldsets[optionLevel].querySelectorAll('option'); + selectedOptions = fieldsets.map((fieldset) => { + return (pickerType == 'radios') ? Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value : Array.from(fieldset.querySelectorAll('select'), (select) => select.value); + }); + + //loop through the option sets starting from the 2nd set and disable any invalid options + for(let optionLevel = 1, n = fieldsets.length; optionLevel < n; optionLevel++) { + const inputs = (pickerType == 'radios') ? fieldsets[optionLevel].querySelectorAll('input') : fieldsets[optionLevel].querySelectorAll('option'); - inputs.forEach(input => { - input.disabled = (validCombo(input.value,optionLevel)) ? false : true; - if(pickerType == 'radios'){ - //get the label for the current input (this is what the user clicks, the "pill") - const label = fieldsets[optionLevel].querySelector(`label[for="${input.id}"]`); + inputs.forEach(input => { + input.disabled = (validCombo(input.value,optionLevel)) ? false : true; + if(pickerType == 'radios'){ + //get the label for the current input (this is what the user clicks, the "pill") + const label = fieldsets[optionLevel].querySelector(`label[for="${input.id}"]`); - label.style.display = (input.disabled) ? "none" : ""; //Hide the option, or comment this line out and use the following lines to style it.. - //label.style.opacity = (input.disabled) ? 0.5 : 1; - //label.style.borderStyle = (input.disabled) ? "dashed" : "solid"; - //label.style.textDecoration = (input.disabled) ? "none" : ""; - } else { - input.hidden = (validCombo(input.value,optionLevel)) ? false : true; - } - }); - } + label.style.display = (input.disabled) ? "none" : ""; //Hide the option, or comment this line out and use the following lines to style it.. + //label.style.opacity = (input.disabled) ? 0.5 : 1; + //label.style.borderStyle = (input.disabled) ? "dashed" : "solid"; + //label.style.textDecoration = (input.disabled) ? "none" : ""; + } else { + input.hidden = (validCombo(input.value,optionLevel)) ? false : true; + } + }); + } - //if the default selected option is disabled with the function above, select the first available option instead - for (let optionLevel = 1, fieldsetsLength = fieldsets.length, change = false; optionLevel < fieldsetsLength && !change; optionLevel++) { - if(pickerType == 'radios'){ - if(fieldsets[optionLevel].querySelector('input:checked').disabled === true) { - change = (fieldsets[optionLevel].querySelector('input:not(:disabled)').checked = true); - } - } else { - if(fieldsets[optionLevel].querySelector('option:checked').disabled === true) { - change = (fieldsets[optionLevel].querySelector('option:not(:disabled)').selected = "selected"); - } + //if the default selected option is disabled with the function above, select the first available option instead + for (let optionLevel = 1, fieldsetsLength = fieldsets.length, change = false; optionLevel < fieldsetsLength && !change; optionLevel++) { + if(pickerType == 'radios'){ + if(fieldsets[optionLevel].querySelector('input:checked').disabled === true) { + change = (fieldsets[optionLevel].querySelector('input:not(:disabled)').checked = true); + } + } else { + if(fieldsets[optionLevel].querySelector('option:checked').disabled === true) { + change = (fieldsets[optionLevel].querySelector('option:not(:disabled)').selected = "selected"); + } + } + //if a new option has been selected, restart the whole process + if(change) variantSelects.dispatchEvent(new Event('change', { bubbles: true })); } - //if a new option has been selected, restart the whole process - if(change) variantSelects.dispatchEvent(new Event('change', { bubbles: true })); - } }