history popstate

1 files changed, 26 insertions, 13 deletions

diff --git a/public/assets/js/nav.js b/public/assets/js/nav.js
index 91d5948..bc525cf 100644
--- a/public/assets/js/nav.js
+++ b/public/assets/js/nav.js
@@ -17,10 +17,22 @@ var NavView = View.extend({
     $(document).ajaxError(function(){
       this.fetching = false
     }.bind(this))
-    this.latest()
+    
+    window.onpopstate = function(event) {
+      this.display(event.state)
+    }.bind(this)
+
+    if (window.location.pathname.indexOf("/p/") !== -1) {
+      var id = window.location.pathname.split("/")[2]
+      this.fetch(id)
+    }
+    else {
+      this.latest()
+    }
   },
   
   keydown: function(e){
+    if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) { return }
     switch (e.keyCode) {
       case 37: // left
         this.prev()
@@ -39,44 +51,45 @@ var NavView = View.extend({
   
   latest: function(){
     if (this.fetching) return
-    this.fetching = true
+    this.fetch("latest")
     this.onLatest = true
-    $.get("/get/latest", this.display.bind(this))
   },
   
   prev: function(){
     if (this.fetching) return
     if (this.id - 1 < 1) { return }
-    this.fetching = true
-    this.onLatest = false
-    $.get("/get/" + (this.id-1), this.display.bind(this))
+    this.fetch(this.id-1)
   },
   
   next: function(){
     if (this.fetching) return
     if (this.onLatest || this.id < 1) { return }
-    this.fetching = true
-    this.onLatest = false
-    $.get("/get/" + (this.id+1), this.display.bind(this))
+    this.fetch(this.id+1)
   },
   
   random: function(){
     if (this.fetching) return
+    this.fetch("random")
+  },
+  
+  fetch: function(id){
     this.fetching = true
     this.onLatest = false
-    $.get("/get/random", this.display.bind(this))
+    $.get("/get/" + id, function(data){
+      this.fetching = false
+      this.display(data)
+      history.pushState(data, document.title, "/p/" + data.id)
+    }.bind(this))
   },
   
   display: function(data){
-    this.fetching = false
-    if (! data.id) {
+    if (! data || ! data.id) {
       this.onLatest = true
       return
     }
     this.id = data.id
     this.$pip.attr("src", data.url)
     this.$image.css("background-image", "url(" + data.url + ")")
-    history.pushState(data, document.title, "/p/" + data.id)
   },
 
 })