From 7045fe96bc33fe92ba54a837e637145fe9bbbd23 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 5 Nov 2015 20:09:28 -0500
Subject: plotting hub

---
 StoneIsland/www/index.html              |  2 +-
 StoneIsland/www/js/lib/blogs/HubView.js | 44 +++++++++++++++++++++++++++++++--
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 7bb4f8e4..705ceca2 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -99,7 +99,7 @@
       <div class="content">
         <script type="text/html" class="template">
           <div>
-            <img src="{{image}}">
+            <div class="gallery gallery-{{id}}"></div>
             <span class="title">{{title}}</span>
             <span class="subtitle">{{subtitle}}</span>
             <div class="body">{{body}}</div>
diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js
index d44ce7c8..2f04c5cb 100644
--- a/StoneIsland/www/js/lib/blogs/HubView.js
+++ b/StoneIsland/www/js/lib/blogs/HubView.js
@@ -1,4 +1,4 @@
-var HubView = View.extend({
+var HubView = ScrollableView.extend({
   
   el: "#hub",
   template: $("#hub .template").html(),
@@ -23,14 +23,54 @@ var HubView = View.extend({
     // id date subtitle body link image[uri caption]
     this.data.forEach(function(row){
       console.log(row)
-      var t = this.template.replace(/{{image}}/, row.image[0].uri)
+      var t = this.template.replace(/{{id}}/, row.id)
                            .replace(/{{date}}/, row.date)
                            .replace(/{{title}}/, row.title)
                            .replace(/{{subtitle}}/, row.subtitle)
                            .replace(/{{link}}/, row.link)
                            .replace(/{{body}}/, row.body.replace(/\n/g, "<br>"))
       this.$content.append(t)
+      
+      if (row.image.length > 1) {
+        // image gallery
+        var $gallery = $(".gallery-" + row.id)
+        row.image.forEach(function(img){
+          var el = document.createElement("div")
+          el.style.backgroundImage = "url(" + img.uri + ")"
+          el.className = "item"
+          $gallery.append(el)
+        })
+        new Flickity( ".gallery-" + row.id, {
+          selector: '.item',
+          cellAlign: 'center',
+          autoPlay: false,
+          freeScroll: false,
+          wrapAround: true,
+          imagesLoaded: true,
+          prevNextButtons: false,
+          pageDots: false,
+          contain: true,
+          draggable: true,
+        })
+      }
+      else {
+        // single image
+        var el = document.createElement("div")
+        el.style.backgroundImage = "url(" + img.uri + ")"
+        el.className = "item"
+        $(".gallery-" + row.id).append(el)
+        
+        // video, append play button
+        if (row.link.match(/youtube|youtu.be|vimeo/)) {
+          var play = document.createElement("div")
+          play.className = "play"
+          $(".gallery-" + row.id).append(play)
+        }
+      }
+      
     }.bind(this))
+    
+    this.deferScrollToTop()
   },
 
 })
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2