refactor / make help prettier

index.html

@@ -5,28 +5,56 @@
 <meta charset="utf-8">
 <meta name="robots" content="noindex">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<meta http-equiv="x-ua-compatible" content="ie=edge">
 
-<script type="text/javascript">WebFontConfig={google:{families:['Lato:300:latin']}};</script>
+<script>WebFontConfig={google:{families:['Lato:300:latin']}};</script>
-<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js" type="text/javascript" async></script>
+<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js" async></script>
 
 <style type="text/css">
-  body,
+  * {
-  input {
+    box-sizing: border-box;
-    font-family: 'Lato', sans-serif;
   }
 
   body {
     position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
-    background: #fff;
+    background-color: #fff;
     color: #111;
+    font-family: 'Lato', sans-serif;
+  }
+
+  main {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    transform: translateY(-98px);
     text-align: center;
   }
 
+  time {
+    font-size: 5rem;
+    letter-spacing: 6px;
+  }
+
+  form {
+    margin-top: 2rem;
+  }
+
+  input {
+    width: 90%;
+    max-width: 310px;
+    padding: 10px 15px;
+    background-color: #222;
+    border-radius: 2px;
+    color: #fff;
+    font-family: 'Lato', sans-serif;
+    font-size: 1.1rem;
+  }
+
   input,
   input:focus {
     border: 0;
@@ -34,148 +62,152 @@
     -webkit-appearance: none;
   }
 
-  .wrapper {
+  aside {
-    position: relative;
+    position: fixed;
-    top: 30%;
+    left: -180px;
-    padding: 1rem;
-  }
-
-  .time {
-    font-size: 5rem;
-    letter-spacing: 6px;
-  }
-
-  .search {
-    margin-top: 2rem;
-  }
-
-  .search__text,
-  .help {
-    position: relative;
-    box-sizing: border-box;
     width: 100%;
-    max-width: 300px;
+    max-width: 180px;
+    height: 100%;
+    padding: 15px 25px;
+    background-color: #fff;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
+    transition: transform 700ms;
+    overflow: auto;
+    z-index: 1;
   }
 
-  .search__text {
+  aside[data-toggled='true'] {
-    padding: 0.75rem;
+    transform: translateX(180px);
-    background-color: #222;
-    border-radius: 2px;
-    color: #fff;
-    font-size: 1.1rem;
   }
 
-  .help {
+  h1 {
-    height: 0;
+    margin: 0 0 15px;
-    margin: 1rem auto 0;
-    border-right: dashed 1px #ddd;
-    transition: height 0.2s linear;
-    text-align: left;
     line-height: 1rem;
-    column-count: 2;
+  }
-    -moz-column-count: 2;
+
-    -webkit-column-count: 2;
+  ul {
-    overflow: hidden;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    list-style: none;
+    line-height: 1.5em;
+  }
+
+  span {
+    font-family: 'Courier New', monospace;
+  }
+
+  a {
+    color: #000;
+    font-size: 0.8rem;
   }
 </style>
 
-<div class="wrapper">
+<main>
-  <time class="time" id="js-time"></time>
+  <time id="js-clock"></time>
-  <form class="search" id="js-search" autocomplete="off">
+  <form id="js-search-form" autocomplete="off">
-    <input class="search__text" id="js-search-text" type="text" autofocus>
+    <input id="js-search-input" type="text" autofocus>
   </form>
-  <pre class="help" id="js-help"></pre>
+</main>
-</div>
 
-<script type="text/javascript">
+<aside id="js-sidebar">
-  ;(function() {
+  <h1>~</h1>
-    var Clock = {
+  <ul id="js-help"></ul>
-      el: document.getElementById('js-time'),
+</aside>
 
-      init: function() {
+<script>
-        Clock.setTime();
+  'use strict';
-        setInterval(Clock.setTime, 1000);
-      },
 
-      zeros: function(num) {
+  (function() {
-        return ('0' + num.toString()).slice(-2);
+    var clock = document.getElementById('js-clock');
-      },
 
-      setTime: function() {
+    function leftpad(num) {
-        var date = new Date();
+      return ('0' + num.toString()).slice(-2);
-        var hours = Clock.zeros(date.getHours());
+    }
-        var minutes = Clock.zeros(date.getMinutes());
-        var time = hours + ' ' + minutes;
 
-        Clock.el.innerHTML = time;
+    function setTime() {
-      }
+      var date = new Date();
-    };
+      var hours = leftpad(date.getHours());
+      var minutes = leftpad(date.getMinutes());
+      clock.innerHTML = hours + ' ' + minutes;
+    }
 
-    var Cmdr = {
+    setTime();
-      searchForm: document.getElementById('js-search'),
+    setInterval(setTime, 1000);
-      searchText: document.getElementById('js-search-text'),
+  })();
-      searchHelp: document.getElementById('js-help'),
 
-      init: function(opts) {
+  (function(opts) {
-        Cmdr.default = opts.default;
+    var sidebar = document.getElementById('js-sidebar');
-        Cmdr.commands = opts.commands;
+    var searchForm = document.getElementById('js-search-form');
-        Cmdr.searchForm.addEventListener('submit', Cmdr.search, false);
+    var searchInput = document.getElementById('js-search-input');
-      },
+    var searchHelp = document.getElementById('js-help');
 
-      search: function(e) {
+    opts.commands.forEach(function(command) {
-        var q = Cmdr.searchText.value;
+      var li = document.createElement('li');
+      var key = document.createElement('span');
+      var link = document.createElement('a');
 
-        if (q === '?') {
+      key.innerHTML = command.key + ': ';
-          Cmdr.commands.forEach(function(command) {
-            Cmdr.searchHelp.innerHTML += command.key + ': ' + command.name + '\n';
-          });
 
-          Cmdr.searchHelp.style.height = Math.ceil(Cmdr.commands.length / 2) + 'rem';
+      link.href = command.url;
-          Cmdr.searchText.value = '';
+      link.innerHTML = command.name;
-        } else {
-          Cmdr.location = Cmdr.default + encodeURIComponent(q);
-          q = q.split(':');
 
-          Cmdr.commands.forEach(function(command) {
+      li.appendChild(key);
-            if (q[0] === command.key) {
+      li.appendChild(link);
-              Cmdr.location = command.url;
 
-              if (q[1] && command.search) {
+      searchHelp.appendChild(li);
-                q.shift();
-                var searchText = encodeURIComponent(q.join(':').trim());
-                Cmdr.location = command.url + command.search + searchText;
-              }
-            }
-          });
-
-          window.location.href = Cmdr.location;
-        }
-
-        e.preventDefault();
-      }
-    };
-
-    Clock.init();
-    Cmdr.init({
-      default: 'https://www.google.com/search?q=',
-      commands: [
-        { key: 'a', name: 'Amazon', url: 'https://www.amazon.com', search: '/s/?field-keywords=' },
-        { key: 'c', name: 'Coinbase', url: 'https://www.coinbase.com' },
-        { key: 'd', name: 'Drive', url: 'https://drive.google.com', search: '/drive/search?q=' },
-        { key: 'f', name: 'Facebook', url: 'https://www.facebook.com', search: '/search/top/?q=' },
-        { key: 'g', name: 'GitHub', url: 'https://github.com', search: '/search?q=' },
-        { key: 'h', name: 'Hacker News', url: 'https://hn.algolia.com', search: '/?query=' },
-        { key: 'i', name: 'Inbox', url: 'https://inbox.google.com', search: '/search/' },
-        { key: 'k', name: 'Keep', url: 'https://keep.google.com', search: '/#search/text=' },
-        { key: 'p', name: 'Product Hunt', url: 'https://www.producthunt.com', search: '/search?q=' },
-        { key: 'r', name: 'Reddit', url: 'https://www.reddit.com', search: '/search?q=' },
-        { key: 's', name: 'SoundCloud', url: 'https://soundcloud.com', search: '/search?q=' },
-        { key: 't', name: 'Twitter', url: 'https://twitter.com', search: '/search?q=' },
-        { key: 'y', name: 'YouTube', url: 'https://www.youtube.com', search: '/results?search_query=' },
-        { key: 'Y', name: 'YTS', url: 'https://yts.ag'},
-        { key: '3', name: 'localhost:3000', url: 'http://localhost:3000'},
-        { key: '9', name: 'localhost:9000', url: 'http://localhost:9000'},
-      ]
     });
-  }());
+
+    searchForm.addEventListener('keyup', function() {
+      var q = searchInput.value;
+
+      if (q === '?') {
+        sidebar.setAttribute('data-toggled', true);
+        searchInput.value = '';
+      }
+    });
+
+    searchForm.addEventListener('submit', function(event) {
+      var redirect = opts.defaultCommand + encodeURIComponent(q);
+      var q = searchInput.value.split(opts.delimiter);
+
+      opts.commands.forEach(function(command) {
+        if (q[0] === command.key) {
+          if (q[1] && command.search) {
+            q.shift();
+            var search = encodeURIComponent(q.join(opts.delimiter).trim());
+            redirect = command.url + command.search + search;
+          } else {
+            redirect = command.url;
+          }
+        }
+      });
+
+      window.location.href = redirect;
+      event.preventDefault();
+    }, false);
+  })({
+    delimiter: ' ',
+    defaultCommand: 'https://www.google.com/search?q=',
+    commands: [
+      { key: 'a', name: 'Amazon', url: 'https://www.amazon.com', search: '/s/?field-keywords=' },
+      { key: 'd', name: 'Drive', url: 'https://drive.google.com/drive', search: '/search?q=' },
+      { key: 'e', name: 'Egghead', url: 'https://egghead.io', search: '/search?q=' },
+      { key: 'f', name: 'Facebook', url: 'https://www.facebook.com', search: '/search/top/?q=' },
+      { key: 'g', name: 'GitHub', url: 'https://github.com', search: '/search?q=' },
+      { key: 'h', name: 'Hacker News', url: 'https://hn.algolia.com', search: '/?query=' },
+      { key: 'i', name: 'Inbox', url: 'https://inbox.google.com', search: '/search/' },
+      { key: 'k', name: 'Keep', url: 'https://keep.google.com', search: '/#search/text=' },
+      { key: 'K', name: 'Khan Academy', url: 'https://www.khanacademy.org', search: '/search?page_search_query=' },
+      { key: 'p', name: 'Product Hunt', url: 'https://www.producthunt.com', search: '/search?q=' },
+      { key: 'r', name: 'Reddit', url: 'https://www.reddit.com', search: '/search?q=' },
+      { key: 's', name: 'Stack Exchange', url: 'https://stackexchange.com', search: '/search?q=' },
+      { key: 'S', name: 'SoundCloud', url: 'https://soundcloud.com', search: '/search?q=' },
+      { key: 't', name: 'Twitter', url: 'https://twitter.com', search: '/search?q=' },
+      { key: 'u', name: 'Unsplash', url: 'https://unsplash.com', search: '/search?keyword=' },
+      { key: 'y', name: 'YouTube', url: 'https://www.youtube.com', search: '/results?search_query=' }
+    ]
+  });
 </script>