story view

1 files changed, 27 insertions, 4 deletions

diff --git a/StoneIsland/www/js/lib/blogs/StoryView.js b/StoneIsland/www/js/lib/blogs/StoryView.js
index efdd65a7..b0221de3 100644
--- a/StoneIsland/www/js/lib/blogs/StoryView.js
+++ b/StoneIsland/www/js/lib/blogs/StoryView.js
@@ -4,11 +4,14 @@ var StoryView = View.extend({
   template: $("#story .template").html(),
 
   events: {
-    "load img": "image_loaded"
+    "click .links li": "pick",
   },
   
   initialize: function(){
+    this.sections = {}
+    this.$img = this.$("img")
     this.$content = this.$(".content")
+    this.$links = this.$(".links")
     this.$loader = this.$(".loader")
     this.scroller = new IScroll('#story', app.iscroll_options)
   },
@@ -23,15 +26,35 @@ var StoryView = View.extend({
     this.$content.empty()
     // id title image[uri caption] body
     this.data.forEach(function(row){
-      var t = this.template.replace(/{{image}}/, row.image.uri)
-                           .replace(/{{date}}/, row.date)
+      var t = this.template.replace(/{{id}}/, row.id)
                            .replace(/{{title}}/, row.title)
                            .replace(/{{body}}/, row.body.replace(/\n/g, "<br>"))
+      var li = document.createElement("li")
+      li.dataset.id = row.id
+      li.innerHTML = row.title
+      this.sections[row.id] = row
+
+      this.$links.append(li)
       this.$content.append(t)
     }.bind(this))
+    
+    this.set_active( this.data[0].id )
+  },
+  
+  pick: function(e){
+    var id = e.currentTarget.dataset.id
+    this.set_active(id)
   },
   
-  image_loaded: function(){
+  set_active: function(id){
+    this.$links.find(".active").removeClass("active")
+    this.$links.find("[data-id=" + id + "]").addClass("active")
+
+    this.$content.find(".active").removeClass("active")
+    this.$content.find("[data-id=" + id + "]").addClass("active")
+    
+    var section = this.sections[id]
+    this.$img.attr("src", section.image.uri)
   },
 
 })
\ No newline at end of file