From 8f57b1a8433b2b6f00e40c3dd4fce75a84aef10c Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 2 Dec 2015 22:49:57 -0500
Subject: archive swiping

---
 StoneIsland/www/js/lib/blogs/ArchiveView.js | 105 +++++++++++++++++++++++-----
 StoneIsland/www/js/vendor/oktween.js        |   1 +
 2 files changed, 90 insertions(+), 16 deletions(-)

diff --git a/StoneIsland/www/js/lib/blogs/ArchiveView.js b/StoneIsland/www/js/lib/blogs/ArchiveView.js
index c156aed0..8bce7e4a 100644
--- a/StoneIsland/www/js/lib/blogs/ArchiveView.js
+++ b/StoneIsland/www/js/lib/blogs/ArchiveView.js
@@ -70,17 +70,20 @@ var ArchiveView = ScrollableView.extend({
 
     var row = this.data[index]
     
+    count = count || row.images.length
+    
     row.images.forEach(function(cell, i){
       if (i > count) return
       var $t = $("<div>")
-      $t.addClass("row").addClass("loading")
+      $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)
-
+      
       loader.preloadImage(cell.uri, function(){
         $t.removeClass('loading')
       }.bind(this))
@@ -91,36 +94,106 @@ var ArchiveView = ScrollableView.extend({
 // .image, .text
 
   touchstart: function(e){
-    this.$row = e.currentTarget
-    this.mousedown(e.touches[0])
+    app.archive.row = e.currentTarget
+    aa.mousedown(e.touches[0])
   },
   touchmove: function(e){
-    this.mousemove(e.touches[0])
+    aa.mousemove(e.touches[0])
   },
   touchend: function(e){
-    this.mouseup()
+    aa.mouseup()
   },
-  mouse: { x: 0, y: 0 },
-  $row: null,
+
+  row: null,
+  image: null,
+  text: null,
+  flipped: false,
+  q: 0,
   
   mousedown: function(e){
-    this.$row = this.$row || e.currentTarget
-    this.mouse.x = e.pageX
-    this.mouse.y = e.pageY
+    app.archive.item = aa = {}
+    
+    aa.row = app.archive.row || e.currentTarget
+    aa.flipped = $(aa.row).data('flipped')
+    aa.image = $(aa.row).find(".image")[0]
+    aa.text = $(aa.row).find(".text")[0]
+    aa.mouse_x = e.pageX
+    aa.mouse_y = e.pageY
+    aa.q = 0
   },
+  
   mousemove: function(e){
-    var dx = ( this.mouse.x - e.pageX ) / window.innerWidth
-    var dy = ( this.mouse.y - e.pageY ) / window.innerWidth
-    this.$row.style['transformProp'] = [
+    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.3, 1)
+//       console.log("<", gray, opacity)
+    }
+    else {
+      gray = Math.round( q * 100 )
+      opacity = lerp(q, 1, 0.3)
+//       console.log(">", gray, opacity)
+    }
+    aa.image.style.WebkitFilter = "grayscale(" + gray + "%)"
+    aa.image.style.opacity = opacity
   },
+  
+  margin: 0.3,
+  
   mouseup: function(e){
-    this.mouse.x = this.mouse.y = 0
-    this.$row = null
+    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)
+  console.log( 200 * Math.abs(aa.q-dest) )
+    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)
+      },
+    })
+    
+    var q = aa.q
+    if ( aa.flipped ) {
+      z = q > 0.5 ? 2 : 1
+      zz = q > 0.5 ? 1 : 2
+    }
+    else {
+      z = q > app.archive.margin ? 1 : 2
+      zz = q > app.archive.margin ? 2 : 1
+    }
+    aa.image.style.zIndex = z
+    aa.text.style.zIndex = zz
+
   },
 
 })
\ No newline at end of file
diff --git a/StoneIsland/www/js/vendor/oktween.js b/StoneIsland/www/js/vendor/oktween.js
index d0d2b7cb..7e820b04 100644
--- a/StoneIsland/www/js/vendor/oktween.js
+++ b/StoneIsland/www/js/vendor/oktween.js
@@ -40,6 +40,7 @@ var oktween = (function(){
       tween.keys = Object.keys(tween.from)
     }
     tween.delay = tween.delay || 0
+    tween.duration = tween.duration || 200
     tween.start = last_t + tween.delay
     tween.done = false
     tween.then = function(fn){ tween.after = [fn] }
-- 
cgit v1.2.3-70-g09d2