WIP: Installation widget

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:

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 }}

layouts/partials/css.html

@@ -26,3 +26,4 @@
 <link rel="stylesheet" type="text/css" href="{{ "css/content.css" | relURL }}" />
 <link rel="stylesheet" type="text/css" href="{{ "css/section2.css" | relURL }}" />
 <link rel="stylesheet" type="text/css" href="{{ "css/section3.css" | relURL }}" />
+<link rel="stylesheet" type="text/css" href="{{ "css/installationWidget.css" | relURL }}" />

layouts/partials/installationWidget.html

@@ -0,0 +1,65 @@
+{{- $installationWidget := .Site.Params.installationWidget }}
+<section class="installationWidget">
+    <div class="container">
+        <div><h1 class="main-heading">Quick Start Locally</h1>
+            <p class="description"><br>Select your preferences and run the install command. More text here as needed.</p>
+        </div>
+        <div class="row flex">
+            <div class="col-md-3 headings">
+                <div class="col-md-12 title-block">
+                    <div class="option-text os-text">Your OS</div>
+                </div>
+                <div class="col-md-12 title-block">
+                    <div class="option-text">Package</div>
+                </div>
+                <div class="col-md-12 title-block">
+                    <div class="option-text">Python version</div>
+                </div>
+                <div class="col-md-12 title-block">
+                    <div class="option-text command-text">Run this Command:</div>
+                </div>
+            </div>
+
+            <div class="col-md-9">
+                <div id="os" class="row justify-content-around">
+                    <div id="linux" class="col-md-3 option">
+                        <div class="option-text">Linux</div>
+                    </div>
+                    <div id="macos" class="col-md-3 option">
+                        <div class="option-text">MacOS</div>
+                    </div>
+                    <div id="windows" class="col-md-3 option selected">
+                        <div class="option-text">Windows</div>
+                    </div>
+                </div>
+                <div id="package" class="row justify-content-around">
+                    <div id="conda" class="col-md-3 option selected">
+                        <div class="option-text">Conda</div>
+                    </div>
+                    <div id="pip" class="col-md-3 option">
+                        <div class="option-text">Pip</div>
+                    </div>
+                    <div id="source" class="col-md-3 option">
+                        <div class="option-text">Source</div>
+                    </div>
+                </div>
+                <div id="version" class="row justify-content-around">
+                    <div id="3.6" class="col-md-3 option version">
+                        <div class="option-text">3.6</div>
+                    </div>
+                    <div id="3.7" class="col-md-3 option version selected">
+                        <div class="option-text">3.7</div>
+                    </div>
+                    <div id="3.8" class="col-md-3 option version">
+                        <div class="option-text">3.8</div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="command-container">
+                      <div class="col-md-11 command-to-run"><pre id="command">conda install windows 3.7</pre></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

layouts/partials/javascript.html

@@ -19,4 +19,5 @@
 </script>
 <script src="https://unpkg.com/thebelab@0.4.0/lib/index.js"></script>
 <!-- app.js -->
-<script src="{{ "js/app.js" | relURL }}"></script>
+<script src="{{ "js/app.js" | relURL }}"></script>
+<script src="{{ "js/installationWidget.js" | relURL }}"></script>

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;
+}

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()
+  });
+}