merge

1 files changed, 98 insertions, 80 deletions

diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js
index cef2d07a..1657d295 100755
--- a/StoneIsland/www/js/lib/blogs/HubView.js
+++ b/StoneIsland/www/js/lib/blogs/HubView.js
@@ -15,6 +15,7 @@ var HubView = ScrollableView.extend({
     this.$content = this.$(".content")
     this.$loader = this.$(".loader")
     this.scroller = new IScroll('#hub', app.iscroll_options)
+    HubLoader.init(this)
   },
 
   show: function(){
@@ -42,91 +43,74 @@ var HubView = ScrollableView.extend({
     this.$loader.hide()
     this.$content.empty()
     this.galleries = {}
+    HubLoader.add(this.data)
+    
+    this.deferScrollToTop()
+  },
+  
+  append: function(row){
     // id date subtitle body link store image[uri caption]
-    this.data.forEach(function(row){
-      // console.log(row)
-      // console.log(moment(row.date))
-      var t = this.template.replace(/{{id}}/g, row.id)
-                           .replace(/{{date}}/, moment(row.date).format("MM.DD.YYYY"))
-                           .replace(/{{title}}/, row.title)
-                           .replace(/{{subtitle}}/, row.subtitle)
-                           .replace(/{{link}}/, row.link)
-                           .replace(/{{body}}/, row.body.replace(/\n/g, "<br>"))
-      var $t = $(t)
-      if (row.store != "true") {
-        $t.find(".store").remove()
+    // console.log(row)
+    // console.log(moment(row.date))
+    var t = this.template.replace(/{{id}}/g, row.id)
+                         .replace(/{{date}}/, moment(row.date).format("MM.DD.YYYY"))
+                         .replace(/{{title}}/, row.title)
+                         .replace(/{{subtitle}}/, row.subtitle)
+                         .replace(/{{link}}/, row.link)
+                         .replace(/{{body}}/, row.body.replace(/\n/g, "<br>"))
+    var $t = $(t)
+    if (row.store != "true") {
+      $t.find(".store").remove()
+    }
+    this.$content.append($t)
+    
+    if (row.image && 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)
+      })
+      this.galleries[row.id] = 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")
+      if (row.image && row.image.length) {
+        el.style.backgroundImage = "url(" + row.image[0].uri + ")"
       }
-      this.$content.append($t)
+      el.className = "item"
+      $(".gallery-" + row.id).append(el)
+      $(".gallery-" + row.id).data("row", row)
       
-      if (row.image && 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)
-        })
-        this.galleries[row.id] = 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 url = row.link
-        var is_video = url.match(/youtube|youtu.be|vimeo/)
-        var image_url
-        if (row.image && row.image.length) {
-          image_url = row.image[0].uri
-        }
-        else if (is_video && url.match(/youtube|youtu.be/)) {
+      // 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)
+        $(".gallery-" + row.id).addClass("gallery-video-post")
+        if (! row.image) {
+          var url = row.link
           var ytid = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0];
-          image_url = "http://i.ytimg.com/vi/" + ytid + "/hqdefault.jpg"
-        }
-        else {
-          image_url = ""
+          e.style.backgroundImage = "url(https://i.ytimg.com/vi/" + ytid + "/maxresdefault.jpg"
         }
-        
-        var el = document.createElement("div")
-
-        if (is_video) {
-          var ytid = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0];
-          var tag = '<iframe src="https://www.youtube.com/embed/' + ytid + '?showinfo=0&rel=0&modestbranding=1&iv_load_policy=3&controls=0" frameborder="0"></iframe>'
-          el.innerHTML = tag
-          
-          // webkit-playsinline (html attribute)
-          // &playsinline=1  (yt iframe api param)
-        }
-        else {
-          el.style.backgroundImage = "url(" + image_url + ")"
-        }
-        el.className = "item"
-        $(".gallery-" + row.id).append(el)
-        $(".gallery-" + row.id).data("row", row)
-        
-        // video, append play button
-//         if (is_video) {
-//           var play = document.createElement("div")
-//           play.className = "play"
-//           $(".gallery-" + row.id).append(play)
-//           $(".gallery-" + row.id).addClass("gallery-video-post")
-//         }
-        $t.find(".gallery-left").remove()
-        $t.find(".gallery-right").remove()
       }
-      
-    }.bind(this))
-    
-    this.deferScrollToTop()
+      $t.find(".gallery-left").remove()
+      $t.find(".gallery-right").remove()
+    }
   },
   
   store_link: function(){
@@ -152,4 +136,38 @@ var HubView = ScrollableView.extend({
     window.plugins.socialsharing.share(title, null, null, "http://deeplink.me/www.stoneisland.com/hub" )
   },
 
-})
\ No newline at end of file
+})
+
+var HubLoader = (function(){
+  var queue, view, item, loader
+  var HubLoader = {}
+  var loader
+  HubLoader.init = function(v){
+    view = v
+  }
+  HubLoader.add = function(items){
+    queue = items
+    this.load()
+  }
+  HubLoader.load = function(){
+    item = queue.shift()
+    if (! item) return
+    if (item.image && item.image.length) {
+      loader = new Loader (HubLoader.build)
+      images = item.image.map(function(img){
+        return img.uri.replace("http:","https:")
+      }).filter(function(img){
+        return img.uri
+      })
+      loader.preloadImages(images)
+    }
+    else {
+      HubLoader.build()
+    }
+  }
+  HubLoader.build = function(){
+    view.append(item)
+    setTimeout(HubLoader.load, 20)
+  }
+  return HubLoader
+})()