From a1f84884882eba09b788b39a8a56ccb9c12f140b Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Wed, 20 Feb 2013 18:04:56 +0400 Subject: [PATCH] added inertial scroll and scroll limiting in ribbon mode... Signed-off-by: Alex A. Naanou --- TODO.otl | 30 +++++++------------ layout-iscroll2.html | 71 ++++++++++++++++++++++++++++++++++++++++++-- lib/jli.js | 15 +++++++++- 3 files changed, 93 insertions(+), 23 deletions(-) diff --git a/TODO.otl b/TODO.otl index 5b4cf69..715a600 100755 --- a/TODO.otl +++ b/TODO.otl @@ -5,21 +5,14 @@ | touchdown point. [_] BUG: no drag threshold on excludedElements (TouchSwipe) | stalled... - [_] 64% general todo - [_] 0% STUB: build a UI around current iscroll to allow time for internal scroll devel - [_] manually resize pages to screen on load - [_] scale .content ot fit in page - | this will temporarily disable these features: - groups (depends on style) - page background images - [_] disable snapping in ribbon mode - [_] 36% build a custom scroll lib... - [_] 66% features: + [_] 65% general todo + [_] 60% build a custom scroll lib... + [X] 100% features: [X] drag/scroll - [_] inertial + [X] inertial [X] snap | if enabled, on release, detect nearest snap-point and scroll to it. - [_] 65% tragets + [X] 100% tragets [X] smooth scroll on devices (iscroll) | adaptive transitions, etc. [X] snap scroll to markers (a-la iscroll) @@ -27,22 +20,19 @@ [X] left (iscroll) [X] center [X] right - [_] flexible event system + [X] flexible event system [X] pre/post events - [_] ability to modify action data before it runs - [_] ability to cancel current action + [X] ability to cancel current action | like stop scrolling at a given point. - [_] ability to take over and do something manually - [_] all actions callable [X] both x and y axis support (x is a priority) - [_] scroll phases + [X] scroll phases [X] user scroll phase | from mousedown/touchstart and to mouseup/touchend - [_] auto scroll phase + [X] auto scroll phase | from mouseup/touchend and untill scrollend | | must account for speed... - [_] momentum + [X] momentum [X] snap [_] 0% actions [_] 0% .scrollTo(target) diff --git a/layout-iscroll2.html b/layout-iscroll2.html index 29925d5..9f34ef5 100755 --- a/layout-iscroll2.html +++ b/layout-iscroll2.html @@ -115,6 +115,7 @@ $(document).ready(function(){ window.CLICK_THRESHOLD = 10 window.SNAP_TO_PAGES_IN_RIBBON = false + window.INITIAL_TIME = 200 // XXX make this a default setup in the lib... window.MagazineScroller = makeScrollHandler($('.viewer'), { @@ -149,23 +150,89 @@ $(document).ready(function(){ return } + var pages = $('.page') + var mag = $('.magazine') + // swipe left/right... // XXX add swipe up/down... if(!isNavigationViewRelative()){ var cur = $('.current.page') if(distance >= CLICK_THRESHOLD){ + setTransitionDuration(mag, INITIAL_TIME) return nextPage(cur) } else if(distance <= -CLICK_THRESHOLD){ + setTransitionDuration(mag, INITIAL_TIME) return prevPage(cur) } } // this makes things snap... - // XXX add innertia if we are not snapping... - SNAP_TO_PAGES_IN_RIBBON && setCurrentPage() + if(SNAP_TO_PAGES_IN_RIBBON){ + return setCurrentPage() + } + + // innertial scroll... + var t = INITIAL_TIME * (1+Math.abs(speed)) + // XXX this is only horisontal at this point... + var at = getElementShift(mag).left + var to = at + (t*speed) + var first = getMagazineOffset(pages.first(), null, 'center') + var last = getMagazineOffset(pages.last(), null, 'center') + + // filter out really small speeds... + if(Math.abs(speed) > 0.5){ + // check bounds... + if(to > first){ + // trim the time proportionally... + var _t = t + t = Math.abs(t * ((at-first)/(at-to))) + console.log(_t, t) + to = first + setTransitionEasing(mag, 'linear') + } else if(to < last){ + // trim the time proportionally... + var _t = t + t = Math.abs(t * ((at-last)/(at-to))) + console.log(_t, t) + to = last + setTransitionEasing(mag, 'linear') + + } else { + setTransitionEasing(mag, 'ease-out') + } + + setTransitionDuration(mag, t) + setElementTransform(mag, to) + + // restore defaults... + // XXX this is a bit dumb at this point... + // XXX run this as a transition end handler... + setTimeout(function(){ + setTransitionEasing(mag, 'ease-out') + setTransitionDuration(mag, INITIAL_TIME) + }, t+10) + + // do not let the user scroll out of view... + } else { + if(at > first){ + setTransitionEasing(mag, 'ease-in') + setTransitionDuration(mag, INITIAL_TIME) + //setCurrentPage(0) + setElementTransform(mag, first) + + } else if(at < last){ + setTransitionEasing(mag, 'ease-in') + setTransitionDuration(mag, INITIAL_TIME) + //setCurrentPage(-1) + setElementTransform(mag, last) + } + } }, }).start() + // XXX stub... + setTransitionEasing($('.magazine'), 'ease-out') + // expand the templates... runMagazineTemplates() diff --git a/lib/jli.js b/lib/jli.js index 50a4af3..c965e28 100755 --- a/lib/jli.js +++ b/lib/jli.js @@ -315,6 +315,19 @@ function getElementShift(elem){ } +function setTransitionEasing(elem, ease){ + if(typeof(ms) == typeof(0)){ + ms = ms + 'ms' + } + return elem.css({ + 'transition-timing-function': ease, + '-moz-transition-timing-function': ease, + '-o-transition-timing-function': ease, + '-ms-transition-timing-function': ease, + '-webkit-transition-timing-function': ease + }) +} + function setTransitionDuration(elem, ms){ if(typeof(ms) == typeof(0)){ ms = ms + 'ms' @@ -611,7 +624,7 @@ function makeScrollHandler(root, config){ return } // XXX get real transition duration... - setTransitionDuration($('.magazine'), 200) + setTransitionDuration(scrolled, 200) x = touch ? event.changedTouches[0].pageX : evt.clientX y = touch ? event.changedTouches[0].pageY : evt.clientY