Add 'random article' lookup link

itkach · Oct 13, 2014 · 180a632 · 180a632
1 parent 1c9afa9
commit 180a632
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 11 deletions.
diff --git a/src/index.html b/src/index.html
@@ -13,13 +13,18 @@
     <div class="horizontal">
 
       <div id="lookup-container" class="vertical">
-        <a id="dict-link" href="#">Dictionaries</a>
-        <input id="word"
-               name="word"
-               placeholder="Lookup..."
-               type="search"
-               autocomplete="off"
-               autofocus>
+        <div id="top-link-container" align="center">
+          <a id="dict-link" href="#">Dictionaries</a>
+        </div>
+        <div id="word-container" class="horizontal">
+          <input id="word"
+                 name="word"
+                 placeholder="Lookup..."
+                 type="search"
+                 autocomplete="off"
+                 autofocus>
+          <a id="random-link" href="#">&#x2685;</a>
+        </div>
         <div id="lookup-result"></div>
       </div>
 

diff --git a/src/script.js b/src/script.js
@@ -84,11 +84,13 @@ $(
       $styleSwitcher.setStyle(styleTitle, $content.contents()[0]);
     });
 
-    var doLookup = function() {
+    var doLookup = function(dontClearContent) {
       var word = $word.val();
       console.log(word);
       $lookupResult.empty();
-      $content.attr('src', '');
+      if (!dontClearContent) {
+        $content.attr('src', '');
+      }
 
       if (!word) {
         return;
@@ -170,7 +172,18 @@ $(
         });
       });
 
+    });
 
+    $('#random-link').on('click', function() {
+      console.log('getting random article');
+      $content.attr('src', '');
+      $content.empty();
+      $.getJSON('/random', function(data) {
+        $content.attr('src', data.url);
+        $word.val(data.label);
+        doLookup(true);
+      });
     });
+
   }
 );
diff --git a/src/style.css b/src/style.css
@@ -17,11 +17,33 @@ body {
     flex-direction: column;
 }
 
+#top-link-container {
+    flex-shrink: 0;
+    flex-grow: 0;
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    color: #6a6a6a;
+}
+
+#word-container {
+    flex-shrink: 0;
+    flex-grow: 0;
+}
+
 #dict-link {
     font-size: small;
     color: #6a6a6a;
-    text-align: center;
-    flex-shrink: 0;
+    line-height: 1rem;
+}
+
+#random-link {
+    font-size: x-large;
+    color: #6a6a6a;
+    text-decoration: none;
+    line-height: 3rem;
+    flex-grow: 0;
+    margin-right: 0.4rem;
 }
 
 #lookup-container {
@@ -36,6 +58,7 @@ body {
 
 #word {
     flex-shrink: 0;
+    flex-grow: 1;
     padding: 0.4rem;
     font-size: large;
     margin: 0.4rem;