Merge pull request #52 from jwcooper/language-select-fixes

Language dropdown not working, also fixes multiple file selection

Author: tannewt

_layouts/download.html

@@ -36,7 +36,7 @@ <h3>CircuitPython {{ version.version }}</h3>
             <label class="language-select">
               <select>
                 {% for file in version.files %}
-                <option value="{{ file[1][0] }}" data-files={{ file[1] }} data-locale={{ file[0] | replace: '_', '-' }} {% if file[0] == "en_US" %}selected{% endif %}>
+                <option value="{{ file[1] | join: ',' }}" data-files={{ file[1] | join: ',' }} data-locale={{ file[0] | replace: '_', '-' }} {% if file[0] == "en_US" %}selected{% endif %}>
                   {% case file[0] %}
                     {% when 'en_US' %}
                       ENGLISH
@@ -65,7 +65,7 @@ <h3>CircuitPython {{ version.version }}</h3>
             </label>
             <div class="download-buttons">
             {% for file in version.files['en_US'] %}
-              <a class="download-button-{{stable}}" href="{{ file }}">DOWNLOAD {{ file | slice: -4, 4 | upcase }} NOW <i class="fas fa-download"></i></a>
+              <a class="download-button {% if version.stable %}stable{% else %}unstable{% endif %} {{ file | slice: -3, 3 }}" href="{{ file }}">DOWNLOAD {{ file | slice: -4, 4 | upcase }} NOW <i class="fas fa-download"></i></a>
             {% endfor %}
             </div>
           </div>
@@ -91,7 +91,7 @@ <h3>Past Releases</h3>
         the latest stable otherwise.
       </p>
       <div>
-          <a class="download-button" href="https://github.com/adafruit/circuitpython/releases">BROWSE GITHUB<i class="fab fa-github"></i></a>
+          <a class="download-button-unrecommended" href="https://github.com/adafruit/circuitpython/releases">BROWSE GITHUB<i class="fab fa-github"></i></a>
         <div class="clear"></div>
       </div>
     </div>

assets/javascript/download.js

@@ -1,28 +1,46 @@
-var languageSelect;
-
 document.addEventListener('DOMContentLoaded',function() {
-  languageSelect = document.querySelector(".language-select select");
-  languageSelect.onchange = languageSelectHandler;
+  var languageSelect = document.querySelectorAll(".language-select select");
+  languageSelect.forEach(function(select) {
+    select.onchange = languageSelectHandler;
+  });
 
   var script = document.createElement('script');
-  script.src = '//accounts.adafruit.com/users/locale?callback=setLocale';
-  document.head.appendChild(script);
-
+  script.setAttribute('src', '//accounts.adafruit.com/users/locale?callback=setLocale');
+  document.body.appendChild(script);
 },false);
 
 function languageSelectHandler(event) {
-  document.querySelector(".download-button").href = languageSelect.value;
+  // find download-details, two levels up from select
+  // event may either be an event from selection, or passed from setLocale
+  // as a select element.
+  if (event.target) {
+    var selectedOption = event.target;
+    var parentNode = event.target.parentNode.parentNode;
+  } else {
+    var selectedOption = event.selectedOptions[0];
+    var parentNode = event.parentNode.parentNode;
+  }
+
+  var files = selectedOption.value.split(',');
+
+  files.forEach(function(file) {
+    var extension = file.substr(file.lastIndexOf('.') + 1);
+    parentNode.querySelector(".download-button." + extension).href = file;
+  });
 }
 
 function setLocale(response) {
-  var languages = response.languages.join(' ')
-  var options = languageSelect.options;
+  var languages = response.languages;
+  var languageSelect = document.querySelectorAll(".language-select select");
+
+  languageSelect.forEach(function(select) {
+    var options = select.options;
 
-  for (var i = 0; i < options.length; i++) {
-    if (languages.includes(options[i].dataset.locale)) {
-      console.log(options[i].dataset.locale);
-      options[i].selected = true;
-      languageSelect.onchange();
+    for (var i = 0; i < options.length; i++) {
+      if (languages.includes(options[i].dataset.locale)) {
+        options[i].selected = true;
+        select.onchange(select);
+      }
     }
-  }
+  });
 }