Merge pull request #371 from zuzak/imgur-history

Imgur history

public/imgurr.css

@@ -5,11 +5,13 @@
 #container,#image {
     margin:0;
     max-height:100%;
+    max-width:100%;
     padding:0;
 }
 
 #details {
     display:none;
+    font-family:sans-serif;
     font-weight:700;
     left:25px;
     min-width:280px;
@@ -18,37 +20,81 @@
     top:25px;
 }
 
-#link {
+#history {
     left:25px;
-    text-align:center;
-    width:168px;
-    font-family:monospace
+    margin:0;
+    max-height:210px;
+    overflow:hidden;
+    padding:0;
+    top:95px;
 }
 
-#link,#loading {
+#history li {
+    font-family:monospace;
+    left:25px;
+    margin-bottom:10px;
+    opacity:0.1;
+    text-align:center;
+    width:168px;
+}
+
+#history li,#loading {
+    display:block;
     font-family:monospace;
     font-size:10px;
     padding:10px;
-    top:95px;
+}
+
+#history li:hover,#history li:nth-of-type(1) {
+    opacity:1!important;
+}
+
+#history li:nth-of-type(2) {
+    opacity:0.8;
+}
+
+#history li:nth-of-type(3) {
+    opacity:0.6;
+}
+
+#history li:nth-of-type(4) {
+    opacity:0.4;
+}
+
+#history li:nth-of-type(5) {
+    opacity:0.2;
+}
+
+#history,#loading,#details {
+    position:absolute;
 }
 
 #loading {
     font-weight:500;
     left:220px;
     min-width:95px;
+    top:95px;
 }
 
-#loading,#details,#link {
+#loading,#details,#history li {
     background:rgba(43,43,43,0.8);
     border-radius:5px;
     color:#85bf25;
-    font-family:sans-serif;
-    position:absolute;
+}
+
+a {
+    color:inherit;
+}
+
+body.crop {
+    overflow:hidden;
 }
 
 html,body {
     background-color:#121211;
+    border:0;
     height:100%;
     margin:0;
+    overflow:auto;
     padding:0;
 }

views/imgur/imgurr.jade

@@ -7,9 +7,12 @@ html(lang='en')
     title random imgur
     script
       var count = 0;
+      function giveMessage(msg) {
+        $('<li>'+msg+'</li>').prependTo('#history').hide().slideDown();
+      }
       function getNewImage() {
         count += 1;
-        $('#loading').show();
+        $('#loading').fadeIn();
         $('#loading').text('Loading image ' + count + '...');
         document.title = 'random imgur (' + count + ')';
         $('#loading').fadeIn();
@@ -17,24 +20,34 @@ html(lang='en')
         $.get("/api/imgur/getRandomImage", function(d) {
           $('#image').attr('src', d.data[0]);
           $('#details').text("Fetching info...");
-          $('#link').text(d.data[0]);
-          $('#link').attr('href',d.data[0]);
+          giveMessage('<a href="' + d.data[0] + '">' + d.data[0] + '</a>');
           $.get("/api/imgur/getImageInfoString", { 'slug': d.data[1] }, function(info) {
-              if(info.data[0].indexOf('undefined') == -1) {
-                $("#details").text(count + ': ' + info.data[0]);
-                $('#details').show();
-              } else {
-                $("#details").hide();
-              }
-              $('#loading').fadeOut();
+            if(info.data[0].indexOf('undefined') == -1) {
+              $("#details").text(count + ': ' + info.data[0]);
+              $('#details').show();
+            } else {
+              $("#details").hide();
+            }
+            $('#loading').fadeOut();
           }, "json");
         }, "json");
       }
       $(getNewImage());
-      $(document).on('keydown', function(e){(e.which==32)&&(getNewImage()) });
+      $(document).on('keydown', function(e){
+        switch(e.which){
+          case 13: // enter
+          case 32: // space
+            getNewImage();
+            break;
+          case 83: // s
+            $('body').toggleClass('crop');
+            giveMessage("Toggled scrollbars.")
+        };
+      });
   body
     div#loading Loading image 1...
     div#details Press [SPACE] to load a new image
-    a#link [SPACE] for next 
+    ul#history
+      li Press [SPACE] for next 
     div#container
       img#image