index.js

   1
   2 function loadFile(url, callback) {
   3   var xmlhttp = new XMLHttpRequest();
   4   xmlhttp.onreadystatechange = function() {
   5     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
   6       callback(xmlhttp.responseText, url);
   7     }
   8   };
   9   xmlhttp.open('GET', url, true);
  10   xmlhttp.send();
  11 }
  12
  13 function setupImageList(select, items, onselection) {
  14
  15 }
  16
  17 function setupSelectList(select, items, onselection) {
  18   for (var i = 0; i < items.length; i += 1) {
  19     var option = document.createElement("OPTION");
  20     option.innerHTML = items[i];
  21     select.appendChild(option);
  22   }
  23
  24   select.addEventListener("change", function(e) {
  25     onselection(items[select.selectedIndex]);
  26   });
  27
  28   if (select.selectedIndex >= 0) {
  29     onselection(items[select.selectedIndex]);
  30   }
  31 }
  32 /*
  33 <div id="currentLanguages">
  34     <span onclick="firmwarewizard.changeLanguage('en')">en</span> |
  35     <span onclick="firmwarewizard.changeLanguage('de')">de</span> |
  36     <span onclick="firmwarewizard.changeLanguage('pl')">pl</span>
  37   </div>
  38   */
  39
  40 // Change the translation of the entire document
  41 function updateI18n() {
  42   var mapping = translations[config.language];
  43   for (var id in mapping) {
  44     var elements = document.getElementsByClassName(id);
  45     for (var i in elements) {
  46       if (elements.hasOwnProperty(i)) {
  47         elements[i].innerHTML = mapping[id];
  48       }
  49     }
  50   }
  51 }
  52
  53 function setupAutocompleteList(input, items, onselection) {
  54   // the setupAutocompleteList function takes two arguments,
  55   // the text field element and an array of possible autocompleted values:
  56   var currentFocus = -1;
  57
  58   // execute a function when someone writes in the text field:
  59   input.addEventListener("input", function(e) {
  60     // clear images
  61     updateImages();
  62
  63     var value = this.value;
  64     // close any already open lists of autocompleted values
  65     closeAllLists();
  66     if (!value) { return false; }
  67
  68     // create a DIV element that will contain the items (values):
  69     var list = document.createElement("DIV");
  70     list.setAttribute("id", this.id + "-autocomplete-list");
  71     list.setAttribute("class", "autocomplete-items");
  72     // append the DIV element as a child of the autocomplete container:
  73     this.parentNode.appendChild(list);
  74
  75     // for each item in the array...
  76     var c = 0;
  77     for (var i = 0; i < items.length; i += 1) {
  78       var item = items[i];
  79       // match
  80       var j = item.toUpperCase().indexOf(value.toUpperCase());
  81       if (j < 0) {
  82         continue;
  83       }
  84
  85       c += 1;
  86       if (c >= 10) {
  87         var div = document.createElement("DIV");
  88         div.innerHTML = "...";
  89         list.appendChild(div);
  90         break;
  91       } else {
  92         var div = document.createElement("DIV");
  93         // make the matching letters bold:
  94         div.innerHTML = item.substr(0, j)
  95           + "<strong>" + item.substr(j, value.length) + "</strong>"
  96           + item.substr(j + value.length)
  97           + "<input type='hidden' value='" + item + "'>";
  98
  99         div.addEventListener("click", function(e) {
 100           // set text field to selected value
 101           input.value = this.getElementsByTagName("input")[0].value;
 102           // close the list of autocompleted values,
 103           // (or any other open lists of autocompleted values:
 104           closeAllLists();
 105           // callback
 106           onselection(input.value);
 107         });
 108
 109         list.appendChild(div);
 110       }
 111     }
 112   });
 113
 114   // execute a function presses a key on the keyboard:
 115   input.addEventListener("keydown", function(e) {
 116       var x = document.getElementById(this.id + "-autocomplete-list");
 117       if (x) x = x.getElementsByTagName("div");
 118       if (e.keyCode == 40) {
 119         // key down
 120         currentFocus += 1;
 121         // and and make the current item more visible:
 122         setActive(x);
 123       } else if (e.keyCode == 38) {
 124         // key up
 125         currentFocus -= 1;
 126         // and and make the current item more visible:
 127         setActive(x);
 128       } else if (e.keyCode == 13) {
 129         // If the ENTER key is pressed, prevent the form from being submitted,
 130         e.preventDefault();
 131         if (currentFocus > -1) {
 132           // and simulate a click on the "active" item:
 133           if (x) x[currentFocus].click();
 134         }
 135       }
 136   });
 137
 138   function setActive(x) {
 139     // a function to classify an item as "active":
 140     if (!x) return false;
 141     // start by removing the "active" class on all items:
 142     for (var i = 0; i < x.length; i++) {
 143       x[i].classList.remove("autocomplete-active");
 144     }
 145     if (currentFocus >= x.length) currentFocus = 0;
 146     if (currentFocus < 0) currentFocus = (x.length - 1);
 147     // add class "autocomplete-active":
 148     x[currentFocus].classList.add("autocomplete-active");
 149   }
 150
 151   function closeAllLists(elmnt) {
 152     // close all autocomplete lists in the document,
 153     // except the one passed as an argument:
 154     var x = document.getElementsByClassName("autocomplete-items");
 155     for (var i = 0; i < x.length; i++) {
 156       if (elmnt != x[i] && elmnt != input) {
 157         x[i].parentNode.removeChild(x[i]);
 158       }
 159     }
 160   }
 161
 162   // execute a function when someone clicks in the document:
 163   document.addEventListener("click", function (e) {
 164       closeAllLists(e.target);
 165   });
 166 }
 167
 168 function $(id) {
 169   return document.getElementById(id);
 170 }
 171
 172 function updateImages(target, images) {
 173   if (target && images) {
 174     for(var i in images) {
 175       var image = images[i];
 176       if (image.type == "sysupgrade") {
 177         $("sysupgrade-image").href = "https://" + target + "/" + image.name;
 178         $("sysupgrade-image").style.display = "inline";
 179       }
 180       if (image.type == "factory") {
 181         $("factory-image").href = "https://" + target + "/" + image.name;
 182         $("factory-image").style.display = "inline";
 183       }
 184     }
 185   } else {
 186     $("sysupgrade-image").style.display = "none";
 187     $("factory-image").style.display = "none";
 188   }
 189 }
 190
 191 //hide fields
 192 updateImages();
 193 updateI18n();
 194
 195 loadFile(config.data, function(data) {
 196     var obj = JSON.parse(data);
 197     setupSelectList($("releases"), Object.keys(obj), function(release) {
 198       setupAutocompleteList($("models"), Object.keys(obj[release]), function(model) {
 199         console.log("clicked " + model);
 200         var target = obj[release][model].target;
 201         var images = obj[release][model].images
 202         updateImages(target, images);
 203       });
 204     });
 205 })