diff --git a/config.yaml b/config.yaml index ffe0e2a659..51aa938f6a 100644 --- a/config.yaml +++ b/config.yaml @@ -67,6 +67,11 @@ params: tabs: title: ECOSYSTEM section5: false + installationWidget: + title: INSTALLATION WIDGET + features: + - title: Quality 1 + text: Text on Quality 1 languages: en: diff --git a/layouts/index.html b/layouts/index.html index f31546d627..f2eba6f380 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -11,6 +11,10 @@ {{ partial "section2.html" . }} {{ end }} + {{ if .Site.Params.installationWidget }} + {{ partial "installationWidget.html" . }} + {{ end }} + {{ if .Site.Params.tabs }} {{ partial "tabs.html" . }} {{ end }} diff --git a/layouts/partials/css.html b/layouts/partials/css.html index 745cd8b7f1..c302ea4453 100644 --- a/layouts/partials/css.html +++ b/layouts/partials/css.html @@ -26,3 +26,4 @@ + diff --git a/layouts/partials/installationWidget.html b/layouts/partials/installationWidget.html new file mode 100644 index 0000000000..8d620d1298 --- /dev/null +++ b/layouts/partials/installationWidget.html @@ -0,0 +1,65 @@ +{{- $installationWidget := .Site.Params.installationWidget }} +
+
+

Quick Start Locally

+


Select your preferences and run the install command. More text here as needed.

+
+
+
+
+
Your OS
+
+
+
Package
+
+
+
Python version
+
+
+
Run this Command:
+
+
+ +
+
+
+
Linux
+
+
+
MacOS
+
+
+
Windows
+
+
+
+
+
Conda
+
+
+
Pip
+
+
+
Source
+
+
+
+
+
3.6
+
+
+
3.7
+
+
+
3.8
+
+
+
+
+ 
conda install windows 3.7
+
+
+
+
+
+
diff --git a/layouts/partials/javascript.html b/layouts/partials/javascript.html index a141944eb1..606614c3fa 100644 --- a/layouts/partials/javascript.html +++ b/layouts/partials/javascript.html @@ -19,4 +19,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/static/css/installationWidget.css b/static/css/installationWidget.css new file mode 100644 index 0000000000..52d14ffe04 --- /dev/null +++ b/static/css/installationWidget.css @@ -0,0 +1,98 @@ + .installationWidget { + margin: 20px; +} + +.installationWidget .container { + display: flex; + flex-direction: column; + padding: 30px 15px 10px 15px; +} + +.row { + margin-right: -15px; + margin-left: -15px +} + +.justify-content-around { + display: flex; + justify-content: space-around; +} + +.container-width { + width: 80% +} + +.flex { + display: flex; +} + +.main-heading { + display: flex; + flex-direction: column; + width: 100%; + align-items: center; + letter-spacing: 1.5px; + font-size: 27px; + text-transform: uppercase; +} + +.description { + text-align: center; +} + +.title-block { + padding: 31px 16px 29px 16px; + margin: 0px 20px; + text-transform: uppercase; + letter-spacing: 1.5px; + font-weight: 500; +} + +.command-block { + margin: 24px 21px 21px 21px; + text-transform: uppercase; + letter-spacing: 1.5px; + font-weight: 500; +} + +.command-to-run { + margin: 20px 50px 20px 48px; +} + +.option { + border: none; + outline: none; + padding: 10px 16px; + background-color: #ffffff; + cursor: pointer; + box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); + border: none; + border-radius: 3px; + margin: 20px 50px; + width: 200px; +} + +.option-text { + text-align: center; + text-transform: uppercase; + letter-spacing: 1.5px; + font-weight: 500; +} + +#command { + margin-bottom: 0px; +} + +.selected { + background-color: #4d77cf; + color: white; +} + +.option:hover { + background-color: #e4edff; +} + +.selected:hover { + background-color: #4d77cf; + color: white; +} \ No newline at end of file diff --git a/static/js/installationWidget.js b/static/js/installationWidget.js new file mode 100644 index 0000000000..21dc0704b9 --- /dev/null +++ b/static/js/installationWidget.js @@ -0,0 +1,179 @@ +var osContainer = document.getElementById("os"); // Gets the container Element +var osOptions = osContainer.getElementsByClassName("option"); // Get all buttons with class="option" inside the container, as an HTMLCollection + +var packageContainer = document.getElementById("package"); // Repeat for other rows +var packageOptions = packageContainer.getElementsByClassName("option"); + +var versionContainer = document.getElementById("version"); +var versionOptions = versionContainer.getElementsByClassName("option"); + +updateCommand = () => { + var selectedOptions = document.getElementsByClassName("selected") // Live HTMLCollection + var osId = selectedOptions[0].id // selectedOptions[0] is a Node from above live HTMLCollection, Node is similar to Element. selectedOptions[0].id returns the id value of the Node. Syntax is 'Element.id' + var packageId = selectedOptions[1].id // returns string data type + var versionId = selectedOptions[2].id + + console.log(`OS is `, osId, `and package is `, packageId, `and version is `, versionId) + + // Method 3) Using switch instead of if statement + switch(packageId) { + case 'source': + // Note: the per-platform docs at + // http://scipy.github.io/devdocs/building/index.html#building are + // out of date and also need to be made NumPy-specific + switch(osId) { + case 'linux': + document.getElementByTagName("pre").innerHTML = "Go to https://numpy.org/devdocs/user/building.html for instructions on downloading from source."; + break; + case 'macos': + document.getElementById("command").innerHTML = "Go to https://numpy.org/devdocs/user/building.html for instructions on downloading from source."; + break; + case 'windows': + document.getElementById("command").innerHTML = "Go to https://numpy.org/devdocs/user/building.html for instructions on downloading from source."; + break; + default: + document.getElementById("command").innerHTML = "Invalid set-up."; + } + break; + + case 'pip': + switch(osId) { + case 'linux': + switch(versionId) { + case '3.6': + document.getElementById("command").innerHTML = "pip install numpy"; + break; + case '3.7': + document.getElementById("command").innerHTML = "pip install numpy"; + break; + case '3.8': + document.getElementById("command").innerHTML = "pip install numpy"; + break; + default: + document.getElementById("command").innerHTML = "Invalid set-up."; + } + break; + + case 'macos': + switch(versionId) { + case '3.6': + document.getElementById("command").innerHTML = "pip install numpy"; + break; + case '3.7': + document.getElementById("command").innerHTML = "pip install numpy"; + break; + case '3.8': + document.getElementById("command").innerHTML = "pip install numpy"; + break; + default: + document.getElementById("command").innerHTML = "Invalid set-up."; + } + break; + + case 'windows': + switch(versionId) { + case '3.6': + document.getElementById("command").innerHTML = "pip install numpy"; + break; + case '3.7': + document.getElementById("command").innerHTML = "pip install numpy"; + break; + case '3.8': + document.getElementById("command").innerHTML = "pip install numpy"; + break; + default: + document.getElementById("command").innerHTML = "Invalid set-up."; + } + break; + } + break; + + case 'conda': + switch(osId) { + case 'linux': + switch(versionId) { + case '3.6': + document.getElementById("command").innerHTML = "conda install numpy"; + break; + case '3.7': + document.getElementById("command").innerHTML = "conda install numpy"; + break; + case '3.8': + document.getElementById("command").innerHTML = "conda install numpy"; + break; + default: + document.getElementById("command").innerHTML = "Invalid set-up."; + } + break; + + case 'macos': + switch(versionId) { + case '3.6': + document.getElementById("command").innerHTML = "conda install numpy"; + break; + case '3.7': + document.getElementById("command").innerHTML = "conda install numpy"; + break; + case '3.8': + document.getElementById("command").innerHTML = "conda install numpy"; + break; + default: + document.getElementById("command").innerHTML = "Invalid set-up."; + } + break; + + case 'windows': + switch(versionId) { + case '3.6': + document.getElementById("command").innerHTML = "conda install numpy"; + break; + case '3.7': + document.getElementById("command").innerHTML = "conda install numpy"; + break; + case '3.8': + document.getElementById("command").innerHTML = "conda install numpy"; + break; + default: + document.getElementById("command").innerHTML = "Invalid set-up."; + } + break; + } + } +} + +// Loop through the buttons. Add and remove the active class to the clicked button +for (var i = 0; i < osOptions.length; i++) { + osOptions[i].addEventListener("click", function() { + var current = document.getElementsByClassName("selected"); // returns an HTMLCollection, an interface that represents a generic collection (array-like object similar to arguments) of elements. An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed. + console.log(`this is current`, current) + current[0].className = current[0].className.replace(" selected", ""); + this.className += " selected"; + console.log(`osContainer`, osContainer) + console.log(`osOptions`, osOptions) + updateCommand() + }); +} + +for (var i = 0; i < packageOptions.length; i++) { + packageOptions[i].addEventListener("click", function() { + var current = packageContainer.getElementsByClassName("selected"); + console.log(`this is current`, current) + current[0].className = current[0].className.replace(" selected", ""); + this.className += " selected"; + console.log(`packageContainer `,packageContainer) + console.log(`packageOptions `,packageOptions) + updateCommand() + }); +} + +for (var i = 0; i < versionOptions.length; i++) { + versionOptions[i].addEventListener("click", function() { + var current = versionContainer.getElementsByClassName("selected"); + console.log(`this is current`, current) + current[0].className = current[0].className.replace(" selected", ""); + this.className += " selected"; + console.log(`versionContainer `,versionContainer) + console.log(`versionOptions `,versionOptions) + updateCommand() + }); +}