androidz

5 files changed, 657 insertions, 0 deletions

diff --git a/StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js b/StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js
new file mode 100755
index 00000000..12aaf7de
--- /dev/null
+++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js
@@ -0,0 +1,235 @@
+var ArchiveView = ScrollableView.extend({
+  
+  el: "#archive",
+  menu_template: $("#archive .menu .template").html(),
+  row_template: $("#archive .scroll .template").html(),
+  
+  events: {
+    "click .item": "pick",
+    "mousedown .row": "mousedown",
+    "touchstart .row": "touchstart",
+    "mousemove .row": "mousemove",
+    "touchmove .row": "touchmove",
+    "mouseup .row": "mouseup",
+    "touchend .row": "touchend",
+  },
+  
+  initialize: function(){
+    this.$menu_items = this.$(".menu .items")
+    this.$content = this.$(".content")
+    this.$loader = this.$(".loader")
+    this.scroller = new IScroll('#archive .scroll', app.iscroll_options)
+    this.$subtitle = this.$('.subtitle')
+    this.subtitle_html = this.$subtitle.html()
+
+  },
+
+  back: function(){
+    this.$el.addClass("menu")
+    app.header.set_back(false)
+    this.$subtitle.html( this.subtitle_html )
+  },
+
+  pick: function(e){
+    this.$el.removeClass("menu")
+    app.header.set_back(true)   
+    var index = $(e.currentTarget).data("index")
+    this.$subtitle.html( $(e.currentTarget).text() )
+    this.populateDecade(index)
+    this.deferScrollToTop()
+  },
+  
+  show: function(){
+    this.deferScrollToTop()
+    app.footer.hide()
+    this.back()
+    document.body.className = "archive"
+    if (! this.populated) {
+      this.populate( BACKUP_DB.archive )
+    }
+  },
+
+  populate: function(data){
+    if (this.loaded) { return }
+    this.loaded = true
+    this.data = data
+    this.$loader.hide()
+    this.$content.empty()
+    
+    // id title images[ uri label code caption ]
+    this.data.forEach(function(row, index){
+
+      var t = this.menu_template.replace(/{{title}}/, row.title)
+      var $t = $(t)
+      $t.data("title", row.title)
+      $t.data("index", index)
+      this.$menu_items.append($t)
+    }.bind(this))
+    
+    this.back()
+    this.populateDecade(0, 3)
+    this.deferScrollToTop()
+  },
+  
+  populateDecade: function(index, count){
+    this.$content.empty()
+
+    var loader = new Loader()
+
+    var row = this.data[index]
+    
+    count = count || row.images.length
+    
+    row.images.forEach(function(cell, i){
+      if (count && i > count) { return }
+      var $t = $("<div>")
+      $t.addClass("row").addClass("loading")
+      var t = this.row_template.replace(/{{image}}/, cell.uri)
+                               .replace(/{{label}}/, cell.label)
+                               .replace(/{{code}}/, cell.code)
+                               .replace(/{{caption}}/, cell.caption)
+      $t.html(t)
+      $t.data("flipped", false)
+      this.$content.append($t)
+      
+      var item = $t[0]
+      var aa = this.build_aa_item( item )
+      aa.q = 0
+      this.render( aa, 0 )
+      aa.flipped = true
+      this.fix_z_index( aa )
+      
+      var $text = $t.find(".text")
+      if ( ($text.height() % 2) == 1) {
+        $text.css("margin-bottom", "1px")
+      }
+      
+      loader.preloadImage(cell.uri, function(){
+        aa.flipped = false
+        this.fix_z_index( aa )
+        $t.removeClass('loading')
+      }.bind(this))
+    }.bind(this))
+    
+    this.deferRefresh()
+    setTimeout(function(){
+      this.deferScrollToTop()
+    }.bind(this), 100)
+  },
+
+//  ['transformProp'] = "translateZ(0) translateX(-50%) translateY(-50%) ";
+// .image, .text
+
+  touchstart: function(e){
+    app.archive.row = e.currentTarget
+    app.archive.mousedown(e.originalEvent.touches[0])
+  },
+  touchmove: function(e){
+    app.archive.mousemove(e.originalEvent.touches[0])
+  },
+  touchend: function(e){
+    app.archive.mouseup()
+  },
+
+  row: null,
+  image: null,
+  text: null,
+  flipped: false,
+  q: 0,
+  
+  mousedown: function(e){
+    var aa = app.archive.item = app.archive.build_aa_item( app.archive.row || e.currentTarget )
+    aa.mouse_x = e.pageX
+    aa.mouse_y = e.pageY
+  },
+  
+  build_aa_item: function(el){
+    var aa = {}
+    aa.row = el
+    aa.flipped = $(aa.row).data('flipped')
+    aa.image = $(aa.row).find(".image")[0]
+    aa.text = $(aa.row).find(".text")[0]
+    aa.q = 0
+    return aa
+  },
+  
+  mousemove: function(e){
+    if (! app.archive.item) return
+    aa = app.archive.item
+    var dx = ( aa.mouse_x - e.pageX ) / window.innerWidth
+    var dy = ( aa.mouse_y - e.pageY ) / window.innerWidth
+    
+    var gray, opacity, q
+    
+    dx = Math.abs(dx)
+    dx *= 2
+    q = clamp( dx, 0, 1 )
+    
+    this.render(aa, q)
+    
+    aa.q = q 
+/*
+    aa.row.style['transformProp'] = [
+      "translateZ(0)",
+      "translateX(-50%)",
+      "translateY(-50%)",
+      "rotateY(" + dx + "deg)",
+    ].join(" ")
+*/
+  },
+
+  render: function(aa, q){
+    if ( aa.flipped ) {
+      gray = Math.round( (1-q) * 100 )
+      opacity = lerp(q, 0.2, 1)
+      text_opacity = lerp(q, 1, 0.3)
+    }
+    else {
+      gray = Math.round( q * 100 )
+      opacity = lerp(q, 1, 0.2)
+      text_opacity = lerp(q, 0.3, 1)
+    }
+    aa.image.style.WebkitFilter = "grayscale(" + gray + "%)"
+    aa.image.style.opacity = opacity
+    aa.text.style.opacity = text_opacity
+  },
+  
+  margin: 0.3,
+  
+  mouseup: function(e){
+    aa = app.archive.item
+    app.archive.row = null
+    app.archive.item = null
+    var was_flipped = aa.flipped
+    var flipped = aa.flipped ? (aa.q < app.archive.margin) : (aa.q > app.archive.margin)
+    var dest = was_flipped == flipped ? 0 : 1
+    $(aa.row).data('flipped', flipped)
+
+    oktween.add({
+      obj: {q: aa.q},
+      to: {q: dest},
+      duration: 200 * Math.abs(aa.q-dest),
+      update: function(o, dt){
+        app.archive.render(aa, o.q)
+      },
+    })
+
+    this.fix_z_index(aa)
+  },
+
+  fix_z_index: function (aa) {
+    if ( aa.flipped ) {
+    console.log(aa.q)
+      z = aa.q > app.archive.margin ? 2 : 1
+      zz = aa.q > app.archive.margin ? 1 : 2
+    }
+    else {
+      z = aa.q < app.archive.margin ? 2 : 1
+      zz = aa.q < app.archive.margin ? 1 : 2
+    }
+    aa.image.style.zIndex = z
+    aa.text.style.zIndex = zz
+
+  },
+
+})
\ No newline at end of file
diff --git a/StoneIsland/platforms/android/assets/www/js/lib/blogs/BlogView.js b/StoneIsland/platforms/android/assets/www/js/lib/blogs/BlogView.js
new file mode 100755
index 00000000..6eea977f
--- /dev/null
+++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/BlogView.js
@@ -0,0 +1,114 @@
+var BlogView = View.extend({
+
+  data: null,
+  loaded: false,
+
+  us_states: $("#us_states").html(),
+  ca_states: $("#ca_states").html(),
+
+  initialize: function(){
+    this.loader = new Loader ()
+  },
+  
+  fetch: function(fn){
+    $.ajax({
+      method: "GET",
+      url: sdk.env === 'test' ? '/db.json' : sdk.cms() + '/db.json',
+      // url: "https://stone.giraffe.life/db.json",
+      success: function(data){
+        this.success(data)
+        fn && fn()
+      }.bind(this),
+      cache: true,
+    })
+  },
+  
+  refresh: function(){
+    this.loaded = false
+    this.fetch()
+  },
+  
+  success: function(data){
+
+    if (this.loaded) return
+
+    this.loaded = true
+    this.data = data = typeof data == "string" ? JSON.parse(data) : data
+
+    // sdk.env = 'test'
+    
+    if (sdk.env === 'test') {
+      app.store = data.store[1]
+    }
+    else {
+      app.store = data.store[0]
+    }
+
+    switch (app.store.DepartmentStoreStatus) {
+      case "open":
+        app.closed.storeIsClosed = false
+        break
+      case "closed":
+        app.closed.storeIsClosed = true
+        app.closed.storeClosedMessageOne = app.store.StoreClosedMessageOne
+        app.closed.storeClosedMessageTwo = app.store.StoreClosedMessageTwo
+        break
+    }
+
+    if (app.closed.storeIsClosed && sdk.env !== 'test') {
+      app.closed.populate(app.store.ClosedStoreImages)
+    }
+    else {
+      app.departments = app.store.Departments
+      app.department_id = app.store.Departments[0].uri
+      $("#collections h1").toggleClass("single-dept", app.store.Departments.length == 1)
+      app.collection.setCollectionName( app.store.Departments[0].text )
+      //// demo department for shoes with weird SizeTypeId
+      // app.department_id = "NKDrtSC"
+      if (sdk.env === 'test') {
+        app.department_id = window.location.search.substr(1) || app.department_id
+        console.log('using test department id', app.department_id)
+        // app.department_id = 'TSTSZS'
+      }
+      app.collection.loaded = false
+      app.collection.fetch()
+    }
+
+    app.archive.populate(data.archive)
+    this.loader.preloadImage(data.hub[0].image[0].uri, function(img){
+      app.hub.populate(data.hub)
+    }.bind(this))
+    this.loader.preloadImage(data.story[0].image.uri, function(img){
+      app.story.populate(data.story)
+      setTimeout(function(){
+        this.loader.preloadImage(data.story[1].image.uri)
+        this.loader.preloadImage(data.story[2].image.uri)
+      }.bind(this), 2000)
+    }.bind(this))
+
+    data.page.forEach(function(page){
+      app[page.tag].populate(page)
+    })
+
+    console.log(app.store.StoreStatus)
+
+    app.product.fitLargeCodes = {}
+    if (app.store.FittingCodes.length) {
+      app.store.FittingCodes.split("\n").forEach(function(code){
+        app.product.fitLargeCodes[code] = true
+      })
+    }
+        
+    if (app.store.BackgroundIsGray === "true") {
+      app.collection.$el.addClass("gray")
+      app.product.gallery.$el.addClass("gray")
+    }
+
+    var states = this.us_states
+    if (! app.store.NotAvailableInCanada) {
+      states += this.ca_states
+    }
+    $('[name=Province]').html(states)
+  },
+
+})
\ No newline at end of file
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
+})()
diff --git a/StoneIsland/platforms/android/assets/www/js/lib/blogs/PageView.js b/StoneIsland/platforms/android/assets/www/js/lib/blogs/PageView.js
new file mode 100755
index 00000000..f5f8ab2e
--- /dev/null
+++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/PageView.js
@@ -0,0 +1,41 @@
+var PageView = ScrollableView.extend({
+  
+  events: {
+    "click a": "follow_link"
+  },
+
+  initialize: function(opt){
+    this.page = opt.page
+    this.setElement("#" + opt.page)
+    this.$content = this.$(".content")
+    this.$loader = this.$(".loader")
+    this.scroller = new IScroll('#' + this.page, app.iscroll_options)
+  },
+
+  show: function(){
+    this.deferScrollToTop()
+    app.footer.hide()
+    document.body.className = this.page
+  },
+  
+  populate: function(data){
+    this.$content.html(data.body.replace(/\n/g, "<br>"))
+    this.$content.find("a").each(function(){
+      var href = $(this).attr("href") // .substr(1, "fuck".length-2)
+      if (href.indexOf("“")) {
+        href = href.substr(1, href.length-2)
+        $(this).attr("href", href)
+      }
+      $(this).attr("target", "_system")
+    })
+  },
+  
+  follow_link: function(e){
+    e.stopPropagation()
+    e.preventDefault()
+    var href = $(e.currentTarget).attr("href")
+    console.log(href)
+    window.open(href, '_system')
+  },
+
+})
\ No newline at end of file
diff --git a/StoneIsland/platforms/android/assets/www/js/lib/blogs/StoryView.js b/StoneIsland/platforms/android/assets/www/js/lib/blogs/StoryView.js
new file mode 100755
index 00000000..5a7a56d1
--- /dev/null
+++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/StoryView.js
@@ -0,0 +1,76 @@
+var StoryView = ScrollableView.extend({
+  
+  loaded: false,
+  
+  el: "#story",
+  template: $("#story .template").html(),
+
+  events: {
+    "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.loader = new Loader ()
+    this.scroller = new IScroll('#story', app.iscroll_options)
+  },
+
+  show: function(){
+    this.deferScrollToTop()
+    app.footer.hide()
+    document.body.className = "story"
+    if (! this.loaded) {
+      this.populate( BACKUP_DB.story )
+    }
+  },
+  
+  populate: function(data){
+    if (this.loaded) { return }
+    this.loaded = true
+    this.data = data
+    this.$loader.hide()
+    this.$content.empty()
+    // id title image[uri caption] body
+    this.data.forEach(function(row){
+      var t = this.template.replace(/{{id}}/, row.id)
+                           .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)
+  },
+  
+  set_active: function(id){
+    this.$(".active").removeClass("active")
+
+    this.$links.find("[data-id=" + id + "]").addClass("active")
+    this.$content.find("[data-id=" + id + "]").addClass("active")
+    
+    var section = this.sections[id]
+    
+    if (navigator.onLine) {
+      var $replace = this.$img
+    
+      this.$img.stop().fadeTo(110,0.65, function() {
+        $replace.attr("src", section.image.uri)
+      }).fadeTo(130,1)
+    }
+    
+    this.deferScrollToTop()
+  },
+
+})
\ No newline at end of file