story view

3 files changed, 54 insertions, 10 deletions

diff --git a/StoneIsland/www/css/blogs.css b/StoneIsland/www/css/blogs.css
index ec945f65..58c45468 100644
--- a/StoneIsland/www/css/blogs.css
+++ b/StoneIsland/www/css/blogs.css
@@ -1,17 +1,38 @@
 .story #story { display: block }
-#content.story { overflow: scroll }
 #story {
   display: none;
 }
+#story .links {
+  margin: 0;
+  text-align: center;
+}
+#story .links li {
+  padding: 10px;
+  list-style-type: none;
+  display: inline-block;
+}
+#story .links li:before {
+  content: ' | ',
+}
+#story .links li:first-child:before {
+  content: '',
+}
+#story .links li.active {
+  font-weight: bold;
+}
+#story .content > div {
+  display: none;
+}
+#story .content div.active {
+  display: block;
+}
 
 .hub #hub { display: block }
-#content.hub { overflow: scroll }
 #hub {
   display: none;
 }
 
 .archive #archive { display: block }
-#content.archive { overflow: scroll }
 #archive {
   display: none;
 }
\ No newline at end of file
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index e0183655..8ea9c626 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -78,11 +78,11 @@
   <div id="story">
     <div class="scroll">
       <h1>STORY</h1>
+      <img>
+      <ul class="links"></ul>
       <div class="content">
         <script type="text/html" class="template">
-          <div>
-            <img src="{{image}}">
-            <span class="date">{{date}}</span>
+          <div data-id="{{id}}">
             <span class="title">{{title}}</span>
             <div class="body">{{body}}</div>
           </div>
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