swipe

5 files changed, 39 insertions, 10 deletions

diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 91ccdaf..5ae0c99 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -1,7 +1,7 @@
 var app = (function() {
   var app = {}
   
-  app.navigation_delay = 200
+  app.navigation_delay = 150
 
   app.iscroll_options = {
     mouseWheel: true,
@@ -100,7 +100,7 @@ var app = (function() {
     var windowHeight = window.innerHeight
 
     if (is_iphone) {
-      windowHeight -= 44 // account for lower bar
+      windowHeight -= 22 // account for lower bar
       window.scrollTo(0,0)
     }
 
diff --git a/public/assets/js/lib/HeaderView.js b/public/assets/js/lib/HeaderView.js
index 374f84c..59ca255 100644
--- a/public/assets/js/lib/HeaderView.js
+++ b/public/assets/js/lib/HeaderView.js
@@ -26,7 +26,6 @@ var HeaderView = View.extend({
   },
 
   updateSlideCount: function(n){
-    console.log(n)
     if (n > 1) {
       if (n < 10) n = "0" + n
       this.$figText.show()
diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js
index 7e38d2a..4b1c994 100644
--- a/public/assets/js/lib/ProjectView.js
+++ b/public/assets/js/lib/ProjectView.js
@@ -123,11 +123,13 @@ var ProjectView = View.extend({
   },
   
   previous: function(e){
+    if (is_mobile) return;
     e.stopPropagation()
     app.nav.previous()
   },
 
   next: function(e){
+    if (is_mobile) return;
     e.stopPropagation()
     app.nav.next()
   },
diff --git a/public/assets/js/lib/Scroller.js b/public/assets/js/lib/Scroller.js
index 3bebce7..4b4c95b 100644
--- a/public/assets/js/lib/Scroller.js
+++ b/public/assets/js/lib/Scroller.js
@@ -11,9 +11,9 @@ var Scroller = (function(){
     left = opt.left
     right = opt.right
     if (is_mobile) {
-//       document.body.addEventListener("touchstart", touchstart)
-//       document.body.addEventListener("touchmove", touchmove)
-//       document.body.addEventListener("touchend", touchend)
+      document.body.addEventListener("touchstart", touchstart)
+      document.body.addEventListener("touchmove", touchmove)
+      document.body.addEventListener("touchend", touchend)
     }
     else {
       document.body.addEventListener("wheel", wheelDelta)
@@ -22,10 +22,14 @@ var Scroller = (function(){
   }
   
   var touching = false, touchStartTime, touchStartY, touchEndY, touchDist, touchScrollTop
+  var touchAdvanceDistance = 60
+  var touchFadeDistance = 60
+  var $items = $("#items")[0]
   function touchstart (e) {
     touching = true
     touchStartTime = +(new Date)
     touchStartY = touchEndY = e.touches ? e.touches[0].pageY : e.pageY
+//     $items.className = "no-tween"
   }
   function touchmove (e) {
     if (! touching) return
@@ -34,6 +38,15 @@ var Scroller = (function(){
     var duration = timestamp - touchStartTime
     touchEndY = e.touches ? e.touches[0].pageY : e.pageY
     touchDist = touchStartY - touchEndY
+    var touchAbs = Math.abs(touchDist)
+    if (touchAbs > touchAdvanceDistance) {
+//      touchend(e)
+      // touchAbs -= 9
+      // $items.style.opacity = clamp(1-touchAbs / (touchFadeDistance * 2), 0, 1)
+      // touchAbs *= -sign(touchDist)
+      // touchAbs /= 2
+      // $items.style[transformProp] = "translateZ(0) translateY(" + touchAbs + "px)"
+    }
   }
   function touchend (e) {
     if (! touching) return
@@ -42,12 +55,24 @@ var Scroller = (function(){
     var timestamp = +(new Date)
     var duration = timestamp - touchStartTime
     touchDist = touchStartY - touchEndY
-		if (Math.abs(touchDist) < 10 || duration < 100) {
-			step(1)
-		}
-		else {
+    console.log("DURATION >>", duration, touchDist)
+		if ( (duration < 120 && Math.abs(touchDist) < 10) || Math.abs(touchDist) >= touchAdvanceDistance) {
 			touchDist > 0 ? step(1) : step(-1)
 		}
+		
+//     $items.className = ""
+//     setTimeout(function(){
+//       $items.style[transformProp] = "translateZ(0) translateY(0)"
+//       if (Math.abs(touchDist) >= touchAdvanceDistance) {
+//         $items.style.opacity = 0
+//         setTimeout(function(){
+//           $items.style.opacity = 1
+//         }, 200)
+//       }
+//       else {
+//         $items.style.opacity = 1
+//       }
+//     }, 0)
   }
   
   function wheelDelta (e){
diff --git a/public/assets/ok.css b/public/assets/ok.css
index b8e0ff6..25392e5 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -278,6 +278,9 @@ span {
     display: block;
     float: none;
 }
+#items.notween {
+    transition: opacity 0, transform 0;
+}
 
 .item {
     height: 100vh;