1 files changed, 191 insertions, 0 deletions
diff --git a/StoneIsland/platforms/android/assets/www/js/lib/blogs/HubView.js b/StoneIsland/platforms/android/assets/www/js/lib/blogs/HubView.js
new file mode 100755
index 00000000..5e2ff67e
--- /dev/null
+++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/HubView.js
@@ -0,0 +1,191 @@
+var HubView = ScrollableView.extend({
+  
+  el: "#hub",
+  template: $("#hub .template").html(),
+
+  events: {
+    "click .content-share": "share",
+    "click .store": "store_link",
+    "click .gallery-left": "gallery_left",
+    "click .gallery-right": "gallery_right",
+    "click .play": "play_video",
+  },
+  
+  initialize: function(){
+    this.$content = this.$(".content")
+    this.$loader = this.$(".loader")
+    this.scroller = new IScroll('#hub', app.iscroll_options)
+    HubLoader.init(this)
+  },
+
+  show: function(){
+    this.deferScrollToTop()
+    app.footer.hide()
+    document.body.className = "hub"
+    HubLoader.isNeeded()
+    if (! this.populated) {
+      this.populate( BACKUP_DB.hub )
+    }
+  },
+
+  galleries: {},
+  populated: false,
+  populate: function(data){
+    // sort posts by date, reversed
+    this.populated = true
+    this.data = data.map(function(s){
+      return [ +moment(s.date), s ]
+    }).sort(function(a,b){
+      return a[0] > b[0] ? -1 : a[0] == b[0] ? 0 : 1
+    }).map(function(pair){
+      // console.log(pair[1])
+      return pair[1]
+    })
+    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]
+    // 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)
+      })
+      var gallery = 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,
+      })
+      gallery.on('staticClick', function(e){
+        var url = gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
+        app.fullscreenViewer.show(url, url)
+      })
+    }
+    else {
+      // single image
+      var el = document.createElement("div")
+      if (row.image && row.image.length) {
+        el.style.backgroundImage = "url(" + row.image[0].uri + ")"
+      }
+      el.className = "item"
+      $(".gallery-" + row.id).append(el)
+      $(".gallery-" + row.id).data("row", row)
+      
+      // 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];
+          e.style.backgroundImage = "url(https://i.ytimg.com/vi/" + ytid + "/maxresdefault.jpg"
+        }
+      } else {
+        $(el).click(function(){
+          app.fullscreenViewer.show(row.image[0].uri)
+        })
+      }
+      $t.find(".gallery-left").remove()
+      $t.find(".gallery-right").remove()
+    }
+  },
+  
+  store_link: function(){
+    app.router.go("store")
+  },
+  play_video: function(e){
+    var row = $(e.currentTarget).closest('.gallery-video-post').data("row")
+    window.open(row.link, '_system')
+  },
+  
+  gallery_left: function(e){
+    var id = $(e.currentTarget).closest(".hub_item").data('id')
+    this.galleries[id].previous()
+  },
+  gallery_right: function(e){
+    var id = $(e.currentTarget).closest(".hub_item").data('id')
+    this.galleries[id].next()
+  },
+
+  share: function(e){
+    var title = $(e.currentTarget).parent().find(".title").text()
+    console.log("share", title)
+    window.plugins.socialsharing.share(title, null, null, "http://deeplink.me/www.stoneisland.com/hub" )
+  },
+
+})
+
+var HubLoader = (function(){
+  var queue, view, item, loader
+  var count = 0
+  var HubLoader = {}
+  var loader
+  var needed = false
+  HubLoader.init = function(v){
+    view = v
+  }
+  HubLoader.add = function(items){
+    queue = items
+    HubLoader.load()
+  }
+  HubLoader.load = function(){
+    item = queue.shift()
+    count++
+    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, true)
+    }
+    else {
+      HubLoader.build()
+    }
+  }
+  HubLoader.isNeeded = function(){
+    needed = true
+  }
+  HubLoader.build = function(){
+    view.append(item)
+    view.scroller.refresh()
+    if (count < 2 && ! needed) return
+    // if (count === 10) return
+    setTimeout(HubLoader.load, count < 10 ? 1000 : 5000)
+  }
+  return HubLoader
+})()