Merge pull request #8 from JonoHall/Dawn-13.0.0

Dawn 13.0.0

README.md

@@ -1,3 +1,7 @@
+# Changelog
+
+* Now working on Dawn 13.
+
 # Hide Unavailable Combinations
 
 * Hide unavailable options - Hide or restyle variant buttons/drop down options for variant combinations that do not exist.
@@ -9,7 +13,7 @@ The following website is using the default Dawn theme, the password is "dynamic"
 https://dynamic-selectors.myshopify.com/products/phone-case
 
 ## Requirements
-Tested on Dawn 12.0 theme.
+Tested on Dawn 13.0 theme.
 
 ## Known Bugs
 Screen seems to jump around a bit when you click on different options.

source.js

@@ -1,60 +1,59 @@
-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();
 
 // gather a list of valid combinations of options, check to see if the input passed to it matches in a chain of valid options.
 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 }));
-  }
 }