scroll to advance

4 files changed, 134 insertions, 0 deletions

diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 3476d44..28db3f6 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -48,6 +48,11 @@ var app = (function() {
       app.lookup[ view.project_id ] = view
       return view
     })
+    
+    Scroller.init({
+      previous: app.nav.previous.bind(app.nav),
+      next: app.nav.next.bind(app.nav),
+    })
   }
 
   app.ready = function() {
diff --git a/public/assets/js/lib/Scroller.js b/public/assets/js/lib/Scroller.js
new file mode 100644
index 0000000..483a103
--- /dev/null
+++ b/public/assets/js/lib/Scroller.js
@@ -0,0 +1,125 @@
+var Scroller = (function(){
+  var Scroller = {}
+  
+  var prev, next
+  var webkitRatio = 1
+  
+  Scroller.init = function(opt){
+    previous = opt.previous
+    next = opt.next
+    if (is_mobile) {
+//       document.body.addEventListener("touchstart", touchstart)
+//       document.body.addEventListener("touchmove", touchmove)
+//       document.body.addEventListener("touchend", touchend)
+    }
+    else {
+      document.body.addEventListener("wheel", wheelDelta)
+      document.body.addEventListener("keydown", keydown)
+    }
+  }
+  
+  var touching = false, touchStartTime, touchStartY, touchEndY, touchDist, touchScrollTop
+  function touchstart (e) {
+    touching = true
+    touchStartTime = +(new Date)
+    touchStartY = touchEndY = e.touches ? e.touches[0].pageY : e.pageY
+  }
+  function touchmove (e) {
+    if (! touching) return
+    e.preventDefault()
+    var timestamp = +(new Date)
+    var duration = timestamp - touchStartTime
+    touchEndY = e.touches ? e.touches[0].pageY : e.pageY
+    touchDist = touchStartY - touchEndY
+  }
+  function touchend (e) {
+    if (! touching) return
+    e.preventDefault()
+    touching = false
+    var timestamp = +(new Date)
+    var duration = timestamp - touchStartTime
+    touchDist = touchStartY - touchEndY
+		if (Math.abs(touchDist) < 10 || duration < 100) {
+			step(1)
+		}
+		else {
+			touchDist > 0 ? step(1) : step(-1)
+		}
+  }
+  
+  function wheelDelta (e){
+    e.preventDefault()
+		var deltaY = 0
+		// WebKit
+		if ( e.deltaY ) {
+			deltaY += e.deltaY * webkitRatio
+		}
+		else if ( e.wheelDeltaY ) {
+			deltaY += e.wheelDeltaY * webkitRatio
+		}
+		// Opera / Explorer 9
+		else if ( e.wheelDelta ) {
+			deltaY += e.wheelDelta * webkitRatio
+		}
+		// Firefox
+		else if ( e.detail ) {
+			deltaY -= e.detail * 2
+		}
+    wheel(deltaY)
+  }
+  
+  var lastScrollEvent = +new Date(), lastDY = 0, lastSign = 0
+  function wheel (dy) {
+    if (isNaN(dy)) return
+    var now = +new Date(), newSign = sign(dy)
+
+    if ((now > lastScrollEvent + 300) ||
+        (lastSign !== newSign && Math.abs(dy) > Math.abs(lastDY*2)) ||
+        (lastSign === newSign && Math.log(Math.abs(dy)) > 1+Math.log(Math.abs(lastDY)))) {
+      step(sign(dy))
+    }
+    lastDY = dy
+    lastSign = newSign
+    lastScrollEvent = now
+  }
+  function step (n) {
+    var now = +new Date()
+    if (now < lastScrollEvent + 300) {
+      return
+    }
+    lastScrollEvent = now
+    if (n < 0) {
+      previous()
+    }
+    else {
+      next()
+    }
+  }
+  function keydown (e) {
+    // console.log(e.keyCode)
+    switch (e.keyCode) {
+      case 32: // space
+        e.preventDefault()
+        step(1)
+        break
+      case 36: // home
+        e.preventDefault()
+        break
+      case 35: // end
+        e.preventDefault()
+        break
+      case 33: // page up
+      case 38: // up
+        e.preventDefault()
+        step(-1)
+        break
+      case 34: // page down
+      case 40: // down
+        e.preventDefault()
+        step(1)
+        break
+    }
+  }
+  
+  return Scroller
+})()
\ No newline at end of file
diff --git a/public/assets/js/vendor/util.js b/public/assets/js/vendor/util.js
index e0e2c0b..e8ad0af 100644
--- a/public/assets/js/vendor/util.js
+++ b/public/assets/js/vendor/util.js
@@ -1,3 +1,6 @@
+function clamp (n,a,b) { return n < a ? a : n < b ? n : b }
+function sign (n) { return n < 0 ? -1 : 1 }
+
 function addClassForPeriod(el, className, delay, callback){
   delay = delay || 1000
   el.classList.add(className)
diff --git a/templates/index.liquid b/templates/index.liquid
index 788c34b..81d62b4 100644
--- a/templates/index.liquid
+++ b/templates/index.liquid
@@ -193,6 +193,7 @@
 <script src="/assets/js/lib/HeaderView.js"></script>
 <script src="/assets/js/lib/NavView.js"></script>
 <script src="/assets/js/lib/ProjectView.js"></script>
+<script src="/assets/js/lib/Scroller.js"></script>
 <script src="/assets/js/app.js"></script>
 {% endif %}