Add variant switcher (hidden, not activated) (AdoptOpenJDK#164)

* Add variant switching logic and UI

* Improve URL query persisting

* Update Config

* Remove blue border on variant switcher on focus

* Colour tweak

* Eslint fixes

* Tweak to TODOs

* Add arm32

* Add hash to Latest page URL for each platform

.eslintrc.yml

@@ -28,5 +28,6 @@ globals:
   orderPlatforms: true
   setTickLink: true
   loadPlatformsThenData: true
+  variant: true
 
 extends: eslint:recommended

src/handlebars/archive.handlebars

@@ -17,9 +17,13 @@
       </div>
     </a>
 
+    <div id="error-container"></div>
+
     <div id="loading"><img src="dist/assets/loading_dots.gif" width="40" height="40"></div>
 
     <div id="archive-list" class="hide">
+      <select id="variant-selector"></select>
+
       <div id="pagination-container"></div>
       <table class='archive-container'>
         <tbody id='archive-table-body'>
@@ -60,7 +64,6 @@
 
   </div>
 
-  <div id="error-container"></div>
 </main>
 
 {{> footer script='<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.js"></script>' script2='<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.0.8/pagination.min.js"></script>' script3='<script>onArchiveLoad();</script>' }}

src/handlebars/index.handlebars

@@ -10,7 +10,11 @@
 
   <div class="dl-container">
     <h2 id="dl-text" class="animated fadeIn">Downloads</h2>
+
+    <div id="error-container"></div>
     <div id='loading'><img src='dist/assets/loading_dots.gif' height='40' width='40'></div>
+
+    <select id="variant-selector"></select>
 
     <a href="./releases.html" class="dl-button a-button fadeIn invisible" id="dl-latest">
       <div id="dl-version">
@@ -24,8 +28,6 @@
       </div>
     </a>
 
-    <div id="error-container"></div>
-
     <a href="./releases.html" class="dl-button dl-thin-button a-button fadeIn invisible" id="dl-other">
       <div>
         <span>Other platforms</span>

src/handlebars/nightly.handlebars

@@ -1,8 +1,6 @@
 {{> header title='Nightly builds | ' }}
 
 <main class="grey-bg">
-  <div id="error-container"></div>
-
   <h1 class="large-title">Nightly builds</h1>
 
   <a href="./releases.html" id="latest-button" class="blue-button a-button">
@@ -19,6 +17,10 @@
     </div>
   </a>
 
+  <div id="error-container"></div>
+
+  <select id="variant-selector"></select>
+
   <div style="margin-top: 1rem;">
     <span>View</span>
     <select id="numberpicker">

src/handlebars/partials/footer.handlebars

@@ -38,6 +38,8 @@
 {{{script3}}}
 {{{script4}}}
 
+<script>persistUrlQuery();</script>
+
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

src/handlebars/releases.handlebars

@@ -20,9 +20,11 @@
       </a>
 
       <div id="loading"><img src="dist/assets/loading_dots.gif" width="40" height="40"></div>
+      <div id="error-container"></div>
     </div>
 
     <div id="latest-container" class="invisible">
+      <select id="variant-selector"></select>
 
       <h2 style="margin-bottom: 0.6rem;">Build <strong><a href="" id="latest-build-name" target="_blank"></a></strong></h2>
 
@@ -100,8 +102,6 @@
 
   </div>
 
-  <div id="error-container"></div>
-
 </main>
 
 {{> footer script='<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.js"></script>' script2='<script>onLatestLoad();</script>' }}

src/js/0-global.js

@@ -1,7 +1,10 @@
 /* eslint-disable no-unused-vars */
 var platforms = [];
+var variants = [];
 var lookup = {};
 var i = 0;
+var variant = getQueryByName('variant');
+var variantSelector = document.getElementById('variant-selector');
 
 function setLookup() {
   // FUNCTIONS FOR GETTING PLATFORM DATA
@@ -110,7 +113,7 @@ function detectOS() {
 
 // when using this function, pass in the name of the repo (options: releases, nightly)
 function loadJSON(repo, filename, callback) {
-  var url = ('https://raw.githubusercontent.com/AdoptOpenJDK/openjdk-' + repo + '/master/' + filename + '.json'); // the URL of the JSON built in the website back-end
+  var url = ('https://raw.githubusercontent.com/AdoptOpenJDK/' + repo + '/master/' + filename + '.json'); // the URL of the JSON built in the website back-end
 
   if(repo === 'adoptopenjdk.net') {
     url = (filename);
@@ -133,10 +136,12 @@ function loadJSON(repo, filename, callback) {
 
 function loadPlatformsThenData(callback) {
   loadJSON('adoptopenjdk.net', './dist/json/config.json', function(response) {
-    var platformsJson = JSON.parse(response);
+    var configJson = JSON.parse(response);
 
-    if (typeof platformsJson !== 'undefined') { // if there are releases...
-      platforms = platformsJson.platforms;
+    if (typeof configJson !== 'undefined') { // if there are releases...
+      platforms = configJson.platforms;
+      variants = configJson.variants;
+      setVariantSelector();
       setLookup();
       callback();
     }
@@ -179,3 +184,62 @@ function setTickLink() {
     });
   }
 }
+
+function setUrlQuery(name, newValue) {
+  if(window.location.search.indexOf(name) >= 0) {
+    var currentValue = getQueryByName(name);
+    window.location.search = window.location.search.replace(currentValue, newValue);
+  }
+  else {
+    window.location.search += (name + '=' + newValue);
+  }
+}
+
+function getQueryByName(name) {
+  var url = window.location.href;
+  name = name.replace(/[\[\]]/g, '\\$&');
+  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
+  var results = regex.exec(url);
+  if (!results) return null;
+  if (!results[2]) return '';
+  return decodeURIComponent(results[2].replace(/\+/g, ' '));
+}
+
+function persistUrlQuery() {
+  var links = Array.apply(null, document.getElementsByTagName('a'));
+  links.forEach(function(eachLink) {
+    if(eachLink.href.indexOf(window.location.hostname) >= 0) {
+      eachLink.href = (eachLink.href + window.location.search);
+    }
+  });
+}
+
+function setVariantSelector() {
+  if(variantSelector.options.length === 0) {
+    variants.forEach(function(eachVariant) {
+      var op = new Option();
+      op.value = eachVariant.searchableName;
+      op.text = eachVariant.officialName;
+      variantSelector.options.add(op);
+    });
+  }
+
+  if(!variant) {
+    variant = variants[0].searchableName;
+  }
+
+  variantSelector.value = variant;
+
+  if(variantSelector.value === '') {
+    var op = new Option();
+    op.value = 'unknown';
+    op.text = 'Select a variant';
+    variantSelector.options.add(op);
+    variantSelector.value = 'unknown';
+    errorContainer.innerHTML = '<p>Error: no such variant. Please select a valid variant from the drop-down list.</p>';
+  }
+
+  variantSelector.onchange = function() {
+    setUrlQuery('variant', variantSelector.value);
+  };
+}

src/js/archive.js

@@ -11,10 +11,14 @@ function onArchiveLoad() {
 // ARCHIVE PAGE FUNCTIONS
 
 function populateArchive() {
-
   loadPlatformsThenData(function() {
-    // call the XmlHttpRequest function in global.js, passing in 'releases' as the repo, and a long function as the callback.
-    loadJSON('releases', 'releases', function(response) {
+
+    // TODO - the commented-out repoName variable below should be passed into loadJSON below as the first argument, replacing openjdk-releases.
+    // This can only be done after the repository name is updated from 'openjdk-releases' to 'openjdk8-releases'.
+
+    // var repoName = (variant + '-releases');
+
+    loadJSON('openjdk-releases', 'releases', function(response) {
       function checkIfProduction(x) { // used by the array filter method below.
         return x.prerelease === false && x.assets[0];
       }
@@ -97,6 +101,7 @@ function buildArchiveHTML(releasesJson) {
 
   setPagination();
   setTickLink();
+
   loading.innerHTML = ''; // remove the loading dots
 
   // show the archive list and filter box, with fade-in animation

src/js/index.js

@@ -17,10 +17,14 @@ function onIndexLoad() {
 // INDEX PAGE FUNCTIONS
 
 function setDownloadSection() {
-
   loadPlatformsThenData(function() {
-    // call the XmlHttpRequest function in global.js, passing in 'releases' as the repo, and a long function as the callback.
-    loadJSON('releases', 'latest_release', function(response) {
+
+    // TODO - the commented-out repoName variable below should be passed into loadJSON below as the first argument, replacing openjdk-releases.
+    // This can only be done after the repository name is updated from 'openjdk-releases' to 'openjdk8-releases'.
+
+    // var repoName = (variant + '-releases');
+
+    loadJSON('openjdk-releases', 'latest_release', function(response) {
       var releasesJson = JSON.parse(response);
 
       if (typeof releasesJson !== 'undefined') { // if there are releases...

src/js/nightly.js

@@ -34,10 +34,14 @@ function setDatePicker() {
 }
 
 function populateNightly() {
-
   loadPlatformsThenData(function() {
-    // call the XmlHttpRequest function in global.js, passing in 'nightly' as the repo, and a long function as the callback.
-    loadJSON('nightly', 'nightly', function(response) {
+
+    // TODO - the commented-out repoName variable below should be passed into loadJSON below as the first argument, replacing openjdk-nightly.
+    // This can only be done after the repository name is updated from 'openjdk-nightly' to 'openjdk8-nightly'.
+
+    // var repoName = (variant + '-nightly');
+
+    loadJSON('openjdk-nightly', 'nightly', function(response) {
       function checkIfProduction(x) { // used by the array filter method below.
         return x.prerelease === false && x.assets[0];
       }
@@ -56,7 +60,7 @@ function populateNightly() {
       }
     });
   });
-  
+
 }
 
 function buildNightlyHTML(releasesJson) {
@@ -110,6 +114,7 @@ function buildNightlyHTML(releasesJson) {
   nightlyList.innerHTML = template(NIGHTLYDATA);
 
   setSearchLogic();
+
   loading.innerHTML = ''; // remove the loading dots
 
   // show the table, with animated fade-in

src/js/releases.js

@@ -4,6 +4,7 @@ var RELEASEDATA;
 /* eslint-disable no-unused-vars */
 function onLatestLoad() {
   /* eslint-enable no-unused-vars */
+
   RELEASEDATA = new Object();
   populateLatest(); // populate the Latest page
 }
@@ -12,8 +13,13 @@ function onLatestLoad() {
 
 function populateLatest() {
   loadPlatformsThenData(function() {
-    // call the XmlHttpRequest function in global.js, passing in 'releases' as the repo, and a long function as the callback.
-    loadJSON('releases', 'latest_release', function(response) {
+
+    // TODO - the commented-out repoName variable below should be passed into loadJSON below as the first argument, replacing openjdk-releases.
+    // This can only be done after the repository name is updated from 'openjdk-releases' to 'openjdk8-releases'.
+
+    // var repoName = (variant + '-releases');
+
+    loadJSON('openjdk-releases', 'latest_release', function(response) {
       var releasesJson = JSON.parse(response);
       if (typeof releasesJson !== 'undefined') { // if there are releases...
         buildLatestHTML(releasesJson);
@@ -99,20 +105,31 @@ function buildLatestHTML(releasesJson) {
 
   const latestContainer = document.getElementById('latest-container');
   latestContainer.className = latestContainer.className.replace( /(?:^|\s)invisible(?!\S)/g , ' animated fadeIn ' ); // make this section visible (invisible by default), with animated fade-in
+
+  displayLatestPlatform();
+  window.onhashchange = displayLatestPlatform;
 }
 
 /* eslint-disable no-unused-vars */
 function selectLatestPlatform(thisPlatform) {
 /* eslint-enable no-unused-vars */
-  var thisPlatformInfo = document.getElementById('latest-info-' + thisPlatform);
-
-  unselectLatestPlatform();
+  window.location.hash = thisPlatform.toLowerCase();
+}
 
-  document.getElementById('latest-selector').classList.add('hide');
-  thisPlatformInfo.classList.remove('hide');
+function displayLatestPlatform() {
+  var platformHash = window.location.hash.substr(1).toUpperCase();
+  var thisPlatformInfo = document.getElementById('latest-info-' + platformHash);
+  if(thisPlatformInfo) {
+    unselectLatestPlatform('keep the hash');
+    document.getElementById('latest-selector').classList.add('hide');
+    thisPlatformInfo.classList.remove('hide');
+  }
 }
 
-function unselectLatestPlatform() {
+function unselectLatestPlatform(keephash) {
+  if(!keephash){
+    history.pushState('', document.title, window.location.pathname + window.location.search);
+  }
   var platformButtons = document.getElementById('latest-selector').getElementsByClassName('latest-asset');
   var platformInfoBoxes = document.getElementById('latest-info').getElementsByClassName('latest-info-container');