nodejs · JoeDoyle23 · Sep 17, 2016 · Sep 4, 2016 · Sep 4, 2016 · Sep 4, 2016
diff --git a/browser.js b/browser.js
@@ -0,0 +1,105 @@
+'use strict'
+/* globals alert, Prism */
+
+const semver = require('semver')
+
+const getInstalledVersion = require('./lib/check-node')
+const loadVersions = require('./lib/load.js')
+const installNode = require('./lib/install')
+const getExample = require('./lib/examples')
+
+// utility
+const errIcon = '<i class="fa fa-exclamation-triangle"></i>'
+const domElement = e => document.querySelector(e)
+const writeHTML = (e, h) => { domElement(e).innerHTML = h }
+const compare = (a, l) => semver.lt(a, l)
+const major = v => v.split('.')[0]
+
+const installing = {
+  run: false,
+  start: function () {
+    domElement('#installing').style.display = 'block'
+    this.run = true
+  },
+  done: function () {
+    domElement('#installing').style.display = 'none'
+    this.run = false
+  }
+}
+
+// Sets the text of the 'installed version' label
+getInstalledVersion((err, version) => {
+  writeHTML('#installed-version span', err ? errIcon : `v${version}`)
+})
+
+// Sets the text of the 'install version' buttons
+loadVersions((err, versions) => {
+  // get versions
+  const stable = versions.latestLTS().version
+  const latest = versions.latest().version
+
+  // write versions into buttons
+  writeHTML('#install-stable span', err ? errIcon : stable)
+  writeHTML('#install-latest span', err ? errIcon : latest)
+
+  if (err) return
+
+  // checks if needs to update nodejs
+  getInstalledVersion((err2, actual) => {
+    if (err2) return
+    const updateButton = domElement('#update-to')
+    // checks if stable is up to date
+    if (major(actual) === major(stable) && compare(actual, stable)) {
+      updateButton.style.display = 'inline-block'
+      updateButton.children[1].innerHTML = stable
+    // checks if latest is up to date
+    } else if (major(actual) <= major(latest) && compare(actual, latest)) {
+      updateButton.style.display = 'inline-block'
+      updateButton.children[1].innerHTML = latest
+    }
+    // event listeners are attached after that the loadVersions retrieves the node versions
+    domElement('#install-stable').addEventListener('click', installEvent)
+    domElement('#install-latest').addEventListener('click', installEvent)
+    domElement('#update-to').addEventListener('click', installEvent)
+  })
+})
+
+// Install events listener for 'install version' buttons
+function installEvent (e) {
+  if (!installing.run) {
+    installing.start()
+    // gets version number from button text
+    const version = this.children[1].innerHTML.slice(1)
+    installNode(version, () => {}, (err, v) => {
+      if (err) {
+        console.log(err)
+        domElement('#installing .error-message').style.display = 'block'
+        domElement('.sk-folding-cube').style.display = 'none'
+        writeHTML('#error-text', err.message)
+        return
+      }
+      console.log('Done!', v)
+      writeHTML('#installed-version span', `v${version}`)
+      domElement('#update-to').style.display = 'none'
+      installing.done()
+    })
+  } else {
+    alert('Already performing an installation!')
+  }
+}
+
+function installErrorEvent (e) {
+  domElement('#installing .error-message').style.display = 'none'
+  domElement('.sk-folding-cube').style.display = 'block'
+  writeHTML('#error-text', '')
+  installing.done()
+}
+
+// Adds a random code example and refreshes Prism lib
+getExample((title, code) => {
+  writeHTML('#code-title', title)
+  writeHTML('#code-example', code)
+  Prism.highlightElement(domElement('#code-example'))
+})
+
+domElement('#error-button').addEventListener('click', installErrorEvent)
diff --git a/images/lgoonodejswhite.png b/images/lgoonodejswhite.png
diff --git a/images/nodejs-new-white-bw.png b/images/nodejs-new-white-bw.png
diff --git a/index.html b/index.html
@@ -3,169 +3,80 @@
   <head>
     <meta charset="UTF-8">
     <title>Node.js Installer</title>
+    <link rel="stylesheet" href="./node_modules/flexboxgrid/dist/flexboxgrid.min.css" type="text/css">
+    <link rel="stylesheet" href="./node_modules/font-awesome/css/font-awesome.min.css" type="text/css">
+    <link rel="stylesheet" href="./node_modules/prismjs/themes/prism.css" type="text/css">
     <link rel="stylesheet" type="text/css" href="style.css"/>
   </head>
   <body>
-    <div id="main">
-      <div id="load">
-        <div>Acquiring Latest Version Information</div>
-        <div class="loader">Loading...</div>
+    <div id="main" class="row">
+      <div class="col-xs-4 left-panel background-green">
+        <div class="row">
+          <div class="col-xs-12 node-image-container">
+            <img id="node-logo" src="./images/nodejs-new-white-bw.png" alt="node logo" onclick="require('electron').shell.openExternal('https://nodejs.org/en/')"/>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-xs-12">
+            <p id="installed-version">Installed version: <span><i class="fa fa-spinner fa-pulse fa-fw"></i></span></p>
+          </div>
+          <div class="col-xs-12">
+            <a href="#" id="update-to" class="version-button"><img src="./images/lgoonodejswhite.png" alt="" /> Update to: <span></span></a>
+          </div>
+        </div>
+        <div class="row bottom">
+          <div class="col-xs-12">
+            <p>Latest versions:</p>
+          </div>
+          <div class="col-xs-12">
+            <a href="#" id="install-stable" class="version-button"><img src="./images/lgoonodejswhite.png" alt="" /> Install stable: <span><i class="fa fa-spinner fa-pulse fa-fw"></i></span></a>
+          </div>
+          <div class="col-xs-12">
+            <a href="#" id="install-latest" class="version-button"><img src="./images/lgoonodejswhite.png" alt="" /> Install current: <span><i class="fa fa-spinner fa-pulse fa-fw"></i></span></a>
+          </div>
+        </div>
+      </div>
+      <div class="col-xs-8 right-panel">
+        <div class="row">
+          <div class="col-xs-12 school-image-container">
+            <img src="./images/schoolhouse.svg" alt="" />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-xs-12">
+            <h3 class="title color-green">Educational resources:</h3>
+            <p class="text">Open source workshops that teach web software skills.<br />Do them on your own or at a workshop nearby.<br /><a href="#" onclick="require('electron').shell.openExternal('http://nodeschool.io/')">http://nodeschool.io/</a></p>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-xs-12">
+              <h4 id="code-title" class="title color-green">A simple http file server:</h4>
+            <pre id="code-container">
+              <code id="code-example" class="language-javascript">
+              </code>
+            </pre>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="installing" class="row">
+      <div class="col-xs-12">
+        <h1 class="color-green">Installing Node.js</h1>
+      </div>
+      <div class="col-xs-12">
+        <div class="sk-folding-cube">
+          <div class="sk-cube1 sk-cube"></div>
+          <div class="sk-cube2 sk-cube"></div>
+          <div class="sk-cube4 sk-cube"></div>
+          <div class="sk-cube3 sk-cube"></div>
+        </div>
+      </div>
+      <div class="col-xs-offset-3 col-xs-6 error-message">
+          <p id="error-text" class="color-red"></p>
+          <a id="error-button" href="#" class="color-red">Return to installer</a>
       </div>
     </div>
-
-    <!-- All of the Node.js APIs are available in this renderer process. -->
-    <!--We are using node <script>document.write(process.versions.node)</script>,
-    Chromium <script>document.write(process.versions.chrome)</script>,
-    and Electron <script>document.write(process.versions.electron)</script>.-->
+    <script src="./node_modules/prismjs/prism.js"></script>
+    <script src="./browser.js"></script>
   </body>
-
-  <script>
-    // You can also require other files to run in this process
-    const yo = require('yo-yo')
-    const semver = require('semver')
-
-    const check = require('./lib/check-node')
-    const load = require('./lib/load.js')
-    const install = require('./lib/install')
-    const opn = require('opn')
-    const mainElement = document.getElementById('main')
-
-    function clear () {
-      mainElement.innerHTML = ''
-    }
-    load((err, versions) => {
-      if (err) throw err
-
-      function installPage (button) {
-        clear()
-
-        var version = button.getAttribute('nodejs-version')
-
-        var el = yo`
-          <div class="card">
-            <div class="downloading">Downloading ${version}...<div class="loader">Loading...</div></div>
-          </div>`
-        mainElement.appendChild(el)
-
-        function up () {
-          var update = yo`
-          <div class="card">
-            <div class="installing">Installing ${version}...<div class="loader">Loading...</div></div>
-          </div>`
-          yo.update(el, update)
-        }
-
-        install(version, up, (err, v) => {
-          if (err) {
-            alert(err)
-            allVersionsPage()
-            throw err
-          }
-          // TODO: Check to make sure that versions match.
-          allVersionsPage(v)
-        })
-      }
-
-      function allVersionsPage (installedVersion) { // true if we just installed a version
-        clear()
-        check((err, version) => {
-          let el = yo`
-          <div class="item">
-              <div id="node-logo">
-                <a href="http://nodejs.org"><img src="images/nodejs-new-white-pantone.png" width="100"/></a>
-                </div>
-              </div>
-          </div>`
-          mainElement.appendChild(el)
-          if (installedVersion) {
-            let el = yo`
-            <div class="item">
-              <div class="card">
-                <div id="installed-version">
-                  <div class="installed-message">You just installed Node.js ${installedVersion}</div>
-                </div>
-              </div>
-            </div>`
-            mainElement.appendChild(el)
-            el = yo`
-            <div class="item">
-              <div class="card">
-                <div id="nodeschool">
-                  <center>
-                    <a href="http://nodeschool.io">
-                      <img src="images/schoolhouse.svg" width="200" title="Open source workshops that teach web software skills. Do them on your own or at a workshop nearby."/></a>
-                  </center>
-                  <div class="nodeschool-desc">To start learning Node.js, visit <a href="http://nodeschool.io" class="nodeschool-link">NodeSchool.io</a> where you'll find open-source automated workshops and in-person events all over the world.</div>
-                </div>
-              </div>
-            </div>`
-            mainElement.appendChild(el)
-          }
-          if (version) {
-            var latest = versions.latest(version)
-            let el
-            if (semver.eq(latest.version, version)) {
-              el = yo`
-              <div class="item">
-                <div class="card">
-                  <div id="current-version">
-                    <div class="big-version">Installed: ${latest.version}</div>
-                    <div class="version-desc">This is the latest version of v${semver.major(version)}.</div>
-                  </div>
-                </div>
-              </div>`
-            } else {
-              el = yo`
-              <div class="item">
-                <div class="card">
-                  <div id="current-version">
-                    <div class="big-version">Installed: v${version}</div>
-                    <div class="version-desc">There is an updated version of v${semver.major(latest.version)}.</div>
-                    <button class="install" style="margin-top:10px;" nodejs-version="${latest.version}">Update to ${latest.version}</button>
-                  </div>
-                </div>
-              </div>`
-            }
-            mainElement.appendChild(el)
-          }
-
-          var stable = versions.latestLTS()
-          console.log(stable)
-          el = yo`
-          <div class="item">
-            <div class="card">
-              <div id="current-version">
-                <div class="big-version">Latest Stable: <button class="install" nodejs-version="${stable.version}">${stable.version}</button>
-                </div>
-              </div>
-            </div>
-          </div>`
-          mainElement.appendChild(el)
-
-          var current = versions.latest()
-          el = yo`
-          <div class="item">
-            <div class="card">
-              <div id="current-version">
-                <div class="big-version">Latest Current: <button class="install" nodejs-version="${current.version}">${current.version}</button>
-                </div>
-              </div>
-            </div>
-          </div>`
-          mainElement.appendChild(el)
-
-          document.body.addEventListener('click', function (event) {
-            let target = event.target
-            if (target.tagName === 'A' && target.className == 'nodeschool-link') {
-              event.preventDefault()
-              opn('http://nodeschool.io')
-            }
-            if (target.tagName !== 'BUTTON') return // Only listen for buttons
-            installPage(target)
-          })
-        })
-      }
-      allVersionsPage()
-    })
-  </script>
 </html>
diff --git a/lib/examples.js b/lib/examples.js
@@ -0,0 +1,47 @@
+'use strict'
+
+const examples = [{
+  title: 'A simple http file server',
+  code: `
+const http = require('http')
+const fs = require('fs')
+
+const server = http.createServer(function (req, res) {
+  res.writeHead(200, { 'content-type': 'text/plain' })
+  fs.createReadStream('./file.txt').pipe(res)
+})
+
+server.listen(3000)`
+}, {
+  title: 'A simple http server',
+  code: `
+const http = require('http')
+
+const server = http.createServer(function (req, res) {
+  res.writeHead(200, {'Content-Type': 'text/plain'})
+  res.end('Hello World')
+})
+
+server.listen(8000, function (error) {
+  if (error) console.log(error)
+  console.log('Server running at http://127.0.0.1:8000/')
+})`
+}, {
+  title: 'Line count of a file',
+  code: `
+const fs = require('fs')
+// Reads the first argoment in your CLI,
+// eg: '$ node index.js filename.txt'
+const file = process.argv[2]
+
+fs.readFile(file, function (err, contents) {
+  if (err) console.log(err)
+  const lines = contents.toString().split('\\n').length - 1
+  console.log(lines)
+})
+`}]
+
+module.exports = function (callback) {
+  const { title, code } = examples[Math.floor(Math.random() * examples.length)]
+  callback(title, code)
+}