android build

1 files changed, 228 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..254df6d1
--- /dev/null
+++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js
@@ -0,0 +1,228 @@
+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)
+  },
+  
+  show: function(){
+    this.deferScrollToTop()
+    app.footer.hide()
+    this.back()
+    document.body.className = "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.deferScrollToTop()
+
+    this.populateDecade(0, 3)
+  },
+  
+  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){
+      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))
+  },
+
+//  ['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)
+//       console.log("<", gray, opacity)
+    }
+    else {
+      gray = Math.round( q * 100 )
+      opacity = lerp(q, 1, 0.2)
+      text_opacity = lerp(q, 0.3, 1)
+//       console.log(">", gray, opacity)
+    }
+    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