From d20637f3737b63b4ece060ef7c371b9d0b034880 Mon Sep 17 00:00:00 2001 From: Joe Brady Date: Mon, 10 Jul 2017 11:25:55 +0100 Subject: [PATCH] WIP: Add dynamic installation page (#166) * Fix white bar at bottom of Nightly page * Add dynamic installation page * eslint fixes * Add copy to clipboard buttons * Fix highlighting issue --- .eslintrc.yml | 8 +- src/handlebars/installation.handlebars | 125 +++++++------------ src/js/0-global.js | 71 +++++++---- src/js/installation.js | 158 +++++++++++++++++++++++++ src/js/nightly.js | 1 + src/js/releases.js | 6 +- src/json/config.json | 24 ++++ src/scss/styles-1-large-main.scss | 45 +++++-- src/scss/styles-3-nightly.scss | 5 +- 9 files changed, 325 insertions(+), 118 deletions(-) create mode 100644 src/js/installation.js diff --git a/.eslintrc.yml b/.eslintrc.yml index 9edb9487..d9abbed0 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -12,9 +12,6 @@ globals: detectOS: true loadJSON: true errorContainer: true - onIndexLoad: true - onNightlyLoad: true - onReleasesLoad: true getSearchableName: true getOfficialName: true getBinaryExt: true @@ -29,5 +26,10 @@ globals: setTickLink: true loadPlatformsThenData: true variant: true + platformSelector: true + hljs: true + getInstallCommand: true + getChecksumCommand: true + getPathCommand: true extends: eslint:recommended diff --git a/src/handlebars/installation.handlebars b/src/handlebars/installation.handlebars index 66583d74..e84ee733 100644 --- a/src/handlebars/installation.handlebars +++ b/src/handlebars/installation.handlebars @@ -1,90 +1,57 @@ -{{> header title='Installation | ' style1='' style2='' }} +{{> header title='Installation | ' style1='' }}
-

Installation

+

Installation

- +
+
-
-
-

Linux, AIX and macOS installation

-
    -
  1. Download the latest tar.gz from the Latest build page to a directory that will not move or be deleted.
    2. -
  2. - Using Terminal, navigate to the location of this tar.gz: - 
    cd <path/to/your/directory>
    -
    3. -
  3. - Optional: use the checksum instructions below to ensure the authenticity of your binary. -
    4. -
  4. - Extract the tar.gz. You can use the following command: - 
    tar -xf <filename>.tar.gz
    - Note: for AIX, use the following command: - 
    gunzip -c <filename>.tar.gz | tar xf -
    -
    5. -
  5. - Add this version of Java to your PATH: - 
    export PATH=$PWD/j2sdk-image/bin:$PATH
    -
    6. -
  6. - Check that Java has installed correctly: - 
    java -version
    -
    7. -
+
+
+ +

Platform:

- -
-

Windows installation

-
    -
  1. Download the latest .zip from the Latest build page to a directory that will not move or be deleted.
    2. -
  2. - Using the command prompt, navigate to the location of this .zip: - 
    cd <path\to\your\directory>
    -
    3. -
  3. - Optional: use the checksum instructions below to ensure the authenticity of your binary. -
    4. -
  4. - Extract the .zip. You can use the following command: - 
    unzip <filename>.zip
    -
    5. -
  5. - Add this version of Java to your PATH: - 
    set PATH=%cd%\j2sdk-image\bin;%PATH%
    -
    6. -
  6. - Check that Java has installed correctly: - 
    java -version
    -
    7. -
-
- -
-

Checking the SHA-256 checksum

-

Optionally, you can compare the SHA-256 checksum of your downloaded binary against the checksums that are provided for every release and nightly build.

-

Follow the instructions for your platform to generate a SHA-256 checksum of your downloaded binary, then open the corresponding .txt checksum file and ensure that it contains the same number.

-
    -
  • - Linux: - 
    sha256sum path/to/file.tar.gz
    -
    • -
  • - macOS & AIX: - 
    shasum -a 256 path/to/file.tar.gz
    -
    • -
  • - Windows: - 
    certutil -hashfile path/to/file.zip SHA256
    -
    • -
+
+
-
-{{> footer script=''}} +{{> footer script='' script2='' script3='' script4='' }} diff --git a/src/js/0-global.js b/src/js/0-global.js index 2862695d..5fba4349 100644 --- a/src/js/0-global.js +++ b/src/js/0-global.js @@ -5,6 +5,7 @@ var lookup = {}; var i = 0; var variant = getQueryByName('variant'); var variantSelector = document.getElementById('variant-selector'); +var platformSelector = document.getElementById('platform-selector'); function setLookup() { // FUNCTIONS FOR GETTING PLATFORM DATA @@ -73,6 +74,21 @@ function getLogo(searchableName) { return (logoPath + (lookup[searchableName].logo)); } +// gets the INSTALLATION COMMAND when you pass in 'searchableName' +function getInstallCommand(searchableName) { + return (lookup[searchableName].installCommand); +} + +// gets the CHECKSUM COMMAND when you pass in 'searchableName' +function getChecksumCommand(searchableName) { + return (lookup[searchableName].checksumCommand); +} + +// gets the PATH COMMAND when you pass in 'searchableName' +function getPathCommand(searchableName) { + return (lookup[searchableName].pathCommand); +} + // set value for loading dots on every page var loading = document.getElementById('loading'); @@ -215,31 +231,42 @@ function persistUrlQuery() { } 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(variantSelector) { + 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; - } + if(!variant) { + variant = variants[0].searchableName; + } - variantSelector.value = variant; + 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 = '

Error: no such variant. Please select a valid variant from the drop-down list.

'; + if(variantSelector.value === '') { + var op = new Option(); + op.value = 'unknown'; + op.text = 'Select a variant'; + variantSelector.options.add(op); + variantSelector.value = 'unknown'; + errorContainer.innerHTML = '

Error: no such variant. Please select a valid variant from the drop-down list.

'; + } + + variantSelector.onchange = function() { + setUrlQuery('variant', variantSelector.value); + }; } +} - variantSelector.onchange = function() { - setUrlQuery('variant', variantSelector.value); - }; +function copyClipboard(element) { + var $temp = $(''); + $('body').append($temp); + $temp.val($(element).text()).select(); + document.execCommand('copy'); + $temp.remove(); + alert('Copied to clipboard'); } diff --git a/src/js/installation.js b/src/js/installation.js new file mode 100644 index 00000000..f045877e --- /dev/null +++ b/src/js/installation.js @@ -0,0 +1,158 @@ +var INSTALLDATA; + +/* eslint-disable no-unused-vars */ +function onInstallationLoad() { + /* eslint-enable no-unused-vars */ + + INSTALLDATA = new Object(); + populateInstallation(); // populate the Latest page + + $( document ).ready(function() { + hljs.initHighlightingOnLoad(); + }); +} + +function populateInstallation() { + loadPlatformsThenData(function() { + + // 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... + buildInstallationHTML(releasesJson); + } + else { + // report an error + errorContainer.innerHTML = '

Error... no installation information has been found!

'; + loading.innerHTML = ''; // remove the loading dots + } + }); + }); +} + +function buildInstallationHTML(releasesJson) { + + // create an array of the details for each asset that is attached to a release + var assetArray = []; + releasesJson.assets.forEach(function(each) { + assetArray.push(each); + }); + + var ASSETARRAY = []; + + // for each asset attached to this release, check if it's a valid binary, then add a download block for it... + assetArray.forEach(function(eachAsset) { + var ASSETOBJECT = new Object(); + var nameOfFile = (eachAsset.name); + var uppercaseFilename = nameOfFile.toUpperCase(); // make the name of the asset uppercase + ASSETOBJECT.thisPlatform = getSearchableName(uppercaseFilename); // get the searchableName, e.g. MAC or X64_LINUX. + + // check if the platform name is recognised... + if(ASSETOBJECT.thisPlatform) { + + ASSETOBJECT.thisPlatformOrder = getPlatformOrder(ASSETOBJECT.thisPlatform); + ASSETOBJECT.thisOfficialName = getOfficialName(ASSETOBJECT.thisPlatform); + + // if the filename contains both the platform name and the matching BINARY extension, add the relevant info to the asset object + ASSETOBJECT.thisBinaryExtension = getBinaryExt(ASSETOBJECT.thisPlatform); + if(uppercaseFilename.indexOf(ASSETOBJECT.thisBinaryExtension.toUpperCase()) >= 0) { + ASSETOBJECT.thisPlatformExists = true; + ASSETOBJECT.thisBinaryLink = (eachAsset.browser_download_url); + ASSETOBJECT.thisBinaryFilename = (eachAsset.name); + ASSETOBJECT.thisChecksumLink = (eachAsset.browser_download_url).replace(ASSETOBJECT.thisBinaryExtension, '.sha256.txt'); + ASSETOBJECT.thisChecksumFilename = (eachAsset.name).replace(ASSETOBJECT.thisBinaryExtension, '.sha256.txt'); + ASSETOBJECT.thisUnzipCommand = getInstallCommand(ASSETOBJECT.thisPlatform).replace('FILENAME', ASSETOBJECT.thisBinaryFilename); + ASSETOBJECT.thisChecksumCommand = getChecksumCommand(ASSETOBJECT.thisPlatform).replace('FILENAME', ASSETOBJECT.thisBinaryFilename); + ASSETOBJECT.thisPathCommand = getPathCommand(ASSETOBJECT.thisPlatform).replace('DIRNAME', releasesJson.name); + } + + if(ASSETOBJECT.thisPlatformExists === true){ + ASSETARRAY.push(ASSETOBJECT); + } + + } + }); + + ASSETARRAY = orderPlatforms(ASSETARRAY); + + INSTALLDATA.htmlTemplate = ASSETARRAY; + + var template = Handlebars.compile(document.getElementById('template').innerHTML); + document.getElementById('installation-template').innerHTML = template(INSTALLDATA); + + setInstallationPlatformSelector(ASSETARRAY); + window.onhashchange = displayInstallPlatform; + + loading.innerHTML = ''; // remove the loading dots + var installationContainer = document.getElementById('installation-container'); + installationContainer.className = installationContainer.className.replace( /(?:^|\s)hide(?!\S)/g , ' animated fadeIn ' ); +} + + +function displayInstallPlatform() { + var platformHash = window.location.hash.substr(1).toUpperCase(); + var thisPlatformInstallation = document.getElementById('installation-container-' + platformHash); + unselectInstallPlatform(); + + if(thisPlatformInstallation) { + platformSelector.value = platformHash; + thisPlatformInstallation.classList.remove('hide'); + } + + else { + var currentValues = []; + var platformSelectorOptions = Array.apply(null, platformSelector.options); + platformSelectorOptions.forEach(function(eachOption) { + currentValues.push(eachOption.value); + }); + if(currentValues.indexOf('unknown') === -1) { + var op = new Option(); + op.value = 'unknown'; + op.text = 'Select a platform'; + platformSelector.options.add(op, 0); + } + platformSelector.value = 'unknown'; + } +} + +function unselectInstallPlatform() { + var platformInstallationDivs = document.getElementById('installation-container').getElementsByClassName('installation-single-platform'); + + for (i = 0; i < platformInstallationDivs.length; i++) { + platformInstallationDivs[i].classList.add('hide'); + } +} + +function setInstallationPlatformSelector(thisReleasePlatforms) { + + if(platformSelector) { + if(platformSelector.options.length === 0) { + thisReleasePlatforms.forEach(function(eachPlatform) { + var op = new Option(); + op.value = eachPlatform.thisPlatform; + op.text = eachPlatform.thisOfficialName; + platformSelector.options.add(op); + }); + } + + var OS = detectOS(); + if(OS && window.location.hash.length < 1) { + platformSelector.value = OS.searchableName; + window.location.hash = platformSelector.value.toLowerCase(); + displayInstallPlatform(); + } + else { + displayInstallPlatform(); + } + + platformSelector.onchange = function() { + window.location.hash = platformSelector.value.toLowerCase(); + displayInstallPlatform(); + }; + + } +} diff --git a/src/js/nightly.js b/src/js/nightly.js index 1e8c0783..9fad1f5f 100644 --- a/src/js/nightly.js +++ b/src/js/nightly.js @@ -13,6 +13,7 @@ var datepicker = document.getElementById('datepicker'); function onNightlyLoad() { /* eslint-enable no-unused-vars */ NIGHTLYDATA = new Object(); + setDatePicker(); populateNightly(); // run the function to populate the table on the Nightly page. diff --git a/src/js/releases.js b/src/js/releases.js index 219bc12d..23964e3f 100644 --- a/src/js/releases.js +++ b/src/js/releases.js @@ -101,13 +101,13 @@ function buildLatestHTML(releasesJson) { setTickLink(); + displayLatestPlatform(); + window.onhashchange = displayLatestPlatform; + loading.innerHTML = ''; // remove the loading dots 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 */ diff --git a/src/json/config.json b/src/json/config.json index 7b75e346..528284ad 100644 --- a/src/json/config.json +++ b/src/json/config.json @@ -15,6 +15,9 @@ "binaryExtension": ".tar.gz", "installerExtension": "no-installer-available", "architecture": "64", + "installCommand": "tar -xf FILENAME", + "pathCommand": "export PATH=$PWD/DIRNAME/bin:$PATH", + "checksumCommand": "sha256sum FILENAME", "osDetectionString": "Linux Mint Debian Fedora FreeBSD Gentoo Haiku Kubuntu OpenBSD Red Hat RHEL SuSE Ubuntu Xubuntu hpwOS webOS Tizen" }, { @@ -24,6 +27,9 @@ "binaryExtension": ".zip", "installerExtension": ".msi", "architecture": "64", + "installCommand": "unzip FILENAME", + "pathCommand": "set PATH=%cd%\\DIRNAME\\bin;%PATH%", + "checksumCommand": "certutil -hashfile FILENAME SHA256", "osDetectionString": "Windows Win Cygwin Windows Server 2008 R2 / 7 Windows Server 2008 / Vista Windows XP" }, { @@ -33,6 +39,9 @@ "binaryExtension": ".tar.gz", "installerExtension": ".dmg", "architecture": "64", + "installCommand": "tar -xf FILENAME", + "pathCommand": "export PATH=$PWD/DIRNAME/bin:$PATH", + "checksumCommand": "shasum -a 256 FILENAME", "osDetectionString": "Mac OS X OSX macOS Macintosh" }, { @@ -42,6 +51,9 @@ "binaryExtension": ".tar.gz", "installerExtension": "no-installer-available", "architecture": "64", + "installCommand": "tar -xf FILENAME", + "pathCommand": "export PATH=$PWD/DIRNAME/bin:$PATH", + "checksumCommand": "sha256sum FILENAME", "osDetectionString": "not-to-be-detected" }, { @@ -51,6 +63,9 @@ "binaryExtension": ".tar.gz", "installerExtension": "no-installer-available", "architecture": "64", + "installCommand": "tar -xf FILENAME", + "pathCommand": "export PATH=$PWD/DIRNAME/bin:$PATH", + "checksumCommand": "sha256sum FILENAME", "osDetectionString": "not-to-be-detected" }, { @@ -60,6 +75,9 @@ "binaryExtension": ".tar.gz", "installerExtension": "no-installer-available", "architecture": "64", + "installCommand": "tar -xf FILENAME", + "pathCommand": "export PATH=$PWD/DIRNAME/bin:$PATH", + "checksumCommand": "sha256sum FILENAME", "osDetectionString": "not-to-be-detected" }, { @@ -69,6 +87,9 @@ "binaryExtension": ".tar.gz", "installerExtension": "no-installer-available", "architecture": "32", + "installCommand": "tar -xf FILENAME", + "pathCommand": "export PATH=$PWD/DIRNAME/bin:$PATH", + "checksumCommand": "sha256sum FILENAME", "osDetectionString": "not-to-be-detected" }, { @@ -78,6 +99,9 @@ "binaryExtension": ".tar.gz", "installerExtension": "no-installer-available", "architecture": "64", + "installCommand": "gunzip -c FILENAME | tar xf -", + "pathCommand": "export PATH=$PWD/DIRNAME/bin:$PATH", + "checksumCommand": "shasum -a 256 FILENAME", "osDetectionString": "not-to-be-detected" } ] diff --git a/src/scss/styles-1-large-main.scss b/src/scss/styles-1-large-main.scss index 4d81fafb..e7fe1829 100644 --- a/src/scss/styles-1-large-main.scss +++ b/src/scss/styles-1-large-main.scss @@ -384,9 +384,12 @@ main { .info-page-container li { margin-top: 2rem; + line-height: 1.8rem; } pre { + display: flex; + justify-content: space-between; background-color: $mainblue; border-radius: 0.2rem; box-sizing: border-box; @@ -394,12 +397,12 @@ pre { font-family: Consolas, monospace; overflow: auto; padding: 0.6rem; - padding-left: 1rem; + padding-left: 0; white-space: pre-wrap; + line-height: 1rem; } code { - box-sizing: border-box; overflow: auto; white-space: pre; } @@ -407,6 +410,28 @@ code { code.hljs { padding: 0; background: inherit; + display: inline; +} + +.copy-code-button, code.hljs { + padding: 0.2rem 1rem; +} + +.copy-code-button { + display: inline-flex; + cursor: pointer; + background-color: rgba(255, 255, 255, 0.3); + font-size: 0.8rem; + border-radius: 0.2rem; + margin-left: 0.2rem; +} + +.copy-code-button:hover { + background-color: rgba(255, 255, 255, 0.5); +} + +span.hljs-keyword, span.hljs-selector-tag, span.hljs-literal, span.hljs-doctag, span.hljs-title, span.hljs-section, span.hljs-type, span.hljs-name, span.hljs-strong { + font-weight: normal; } .callout { @@ -416,9 +441,8 @@ code.hljs { } // SELECT ELEMENT - REMOVING DEFAULT STYLING -select#variant-selector { +select#variant-selector, select#platform-selector { // CHANGE FROM DISPLAY NONE TO DISPLAY BLOCK TO ACTIVATE VARIANT SELECTOR - display: none; margin: auto; margin-top: 2rem; -webkit-appearance: none; @@ -432,21 +456,26 @@ select#variant-selector { cursor: pointer; } -select#variant-selector:hover { +select#variant-selector { + // CHANGE FROM DISPLAY NONE TO DISPLAY BLOCK TO ACTIVATE VARIANT SELECTOR + display: none; +} + +select#variant-selector:hover, select#platform-selector:hover { background-color: #eaebec; } -select#variant-selector:focus { +select#variant-selector:focus, select#platform-selector:focus { outline:0; } -select#variant-selector::-ms-expand { +select#variant-selector::-ms-expand, select#platform-selector::-ms-expand { display: none; } @media screen and (min-width:0\0) { - select#variant-selector { + select#variant-selector, select#platform-selector { background:none\9; padding: 5px\9; } diff --git a/src/scss/styles-3-nightly.scss b/src/scss/styles-3-nightly.scss index b1c348f9..39eceeab 100644 --- a/src/scss/styles-3-nightly.scss +++ b/src/scss/styles-3-nightly.scss @@ -105,7 +105,6 @@ table.ui-datepicker-calendar td { display: inline-block !important; } -// HIDES THE WINDOWS COLUMN IN THE NIGHTLY TABLE -#nightly-table tr td:nth-child(3), #nightly-table th:nth-child(3) { - /*display: none;*/ +#ui-datepicker-div { + display: none; }