diff --git a/index2.html b/index2.html index ea89e49..3ab6fde 100755 --- a/index2.html +++ b/index2.html @@ -158,6 +158,7 @@ $(document).ready(function(){ */ .on('swipeLeft', function(evt, data){ // ribbon mode... + // XXX make this in a better, more event-oriented way... if(isNavigationViewRelative()){ setTimeout(function(){ data.scroller.root.trigger('screenReleased', data)}, 2) @@ -172,6 +173,7 @@ $(document).ready(function(){ }) .on('swipeRight', function(evt, data){ // ribbon mode... + // XXX make this in a better, more event-oriented way... if(isNavigationViewRelative()){ setTimeout(function(){ data.scroller.root.trigger('screenReleased', data)}, 2) @@ -186,14 +188,16 @@ $(document).ready(function(){ }) // do snap and innertia... + // NOTE: this will also handle swipeUp/swopeDown as we do not + // explicitly bind them... .on('screenReleased', function(evt, data){ // this makes things snap... - if(SNAP_TO_PAGES_IN_RIBBON){ + if(SNAP_TO_PAGES_IN_RIBBON || !isNavigationViewRelative()){ setCurrentPage() return } - var speed = data.speed + var speed = data.speed.x var pages = $('.page') var mag = $('.magazine') // innertial scroll... diff --git a/lib/jli.js b/lib/jli.js index 0b7b17d..6d12ae1 100755 --- a/lib/jli.js +++ b/lib/jli.js @@ -509,7 +509,7 @@ var MULTITOUCH_RELEASE_THRESHOLD = 100 // XXX test on other devices... // XXX BUG: on landing a second finger while scrolling the things goes // haywhire... -// XXX BUG: after long click the mouse is tracked and the view is scrolled... +// ...check if this is gone... // XXX split this into a seporate lib... function makeScrollHandler(root, config){ root = $(root) @@ -541,9 +541,10 @@ function makeScrollHandler(root, config){ var max_dy = 0 function startMoveHandler(evt, callback){ + var options = scroller.options // ignore... - if(scroller.options.ignoreElements - && $(evt.target).closest(scroller.options.ignoreElements).length > 0){ + if(options.ignoreElements + && $(evt.target).closest(options.ignoreElements).length > 0){ ignoring = true return } else { @@ -552,7 +553,7 @@ function makeScrollHandler(root, config){ if(event.touches != null){ touch = true } - cancelThreshold = scroller.options.scrollCancelThreshold + cancelThreshold = options.scrollCancelThreshold touches = touch ? event.touches.length : 1 // if we are already touching then just skip on this... // XXX test this... @@ -561,12 +562,12 @@ function makeScrollHandler(root, config){ } prev_t = event.timeStamp || Date.now(); start_t = prev_t - if(scroller.options.autoCancelEvents){ + if(options.autoCancelEvents){ bounds = { - left: scroller.options.eventBounds, - right: root.width() - scroller.options.eventBounds, - top: scroller.options.eventBounds, - bottom: root.height() - scroller.options.eventBounds + left: options.eventBounds, + right: root.width() - options.eventBounds, + top: options.eventBounds, + bottom: root.height() - options.eventBounds } } //togglePageDragging('on') @@ -575,7 +576,7 @@ function makeScrollHandler(root, config){ // XXX these two are redundant... scrolling = true scroller.state = 'scrolling' - scroller.options.enabelStartEvent && root.trigger('userScrollStart') + options.enabelStartEvent && root.trigger('userScrollStart') shift = getElementShift(scrolled) scale = getElementScale(scrolled) @@ -597,6 +598,7 @@ function makeScrollHandler(root, config){ if(ignoring){ return } + var options = scroller.options evt.preventDefault() t = event.timeStamp || Date.now(); // get the user coords... @@ -605,21 +607,22 @@ function makeScrollHandler(root, config){ touches = touch ? event.touches.length : 1 // XXX needs testing... + // XXX do we need to account for scrollDisabled here??? // check scroll bounds... if(bounds != null){ - if(scroller.options.hScroll && (x <= bounds.left || x >= bounds.right) - || scroller.options.vScroll && (y <= bounds.top || y >= bounds.bottom)){ + if(options.hScroll && (x <= bounds.left || x >= bounds.right) + || options.vScroll && (y <= bounds.top || y >= bounds.bottom)){ // XXX cancel the touch event and trigger the end handler... return endMoveHandler(evt) } } // do the actual scroll... - if(scrolling){ - if(scroller.options.hScroll){ + if(!options.scrollDisabled && scrolling){ + if(options.hScroll){ shift.left += x - prev_x } - if(scroller.options.vScroll){ + if(options.vScroll){ shift.top += y - prev_y } setElementTransform(scrolled, shift, scale) @@ -635,7 +638,7 @@ function makeScrollHandler(root, config){ prev_y = y prev_t = t - scroller.options.enableUserScrollEvent && root.trigger('userScroll') + options.enableUserScrollEvent && root.trigger('userScroll') } return false } @@ -649,10 +652,11 @@ function makeScrollHandler(root, config){ } return } + var options = scroller.options // XXX get real transition duration... scroller.resetTransitions() - //setTransitionDuration(scrolled, scroller.options.transitionDuration) + //setTransitionDuration(scrolled, options.transitionDuration) x = touch ? event.changedTouches[0].pageX : evt.clientX y = touch ? event.changedTouches[0].pageY : evt.clientY @@ -665,22 +669,29 @@ function makeScrollHandler(root, config){ scroller.state = 'canceling' } + var data = { + orig_event: evt, + scroller: scroller, + speed: { + x: dx/dt, + y: dy/dt + }, + distance: { + x: start_x-x, + y: start_y-y + }, + duration: t-start_t, + // current touches... + touches: touches, + clicks: null, + } // XXX stop only if no fingers are touching or let the callback decide... //togglePageDragging('off') - scroller.options.enableEndEvent && root.trigger('userScrollEnd', dx, dy, dt, start_x, start_y) - if(scroller.options.callback + // XXX update this with the new data model!!! (see below) + options.enableEndEvent && root.trigger('userScrollEnd', data) + if(options.callback // XXX revise this.... - // call the callback... - && scroller.options.callback({ - orig_event: evt, - scroller: scroller, - speed: dx/dt, - distance: start_x-x, - duration: t-start_t, - // current touches... - touches: touches, - clicks: null, - }) === false + && options.callback(data) === false || touches == 0){ // cleanup and stop... touch = false @@ -705,6 +716,13 @@ function makeScrollHandler(root, config){ hScroll: true, vScroll: true, + // this will disable scroll. + // NOTE: this is the same as setting both vScroll and hScroll + // to false, but can be set and reset without affecting + // the actual settings individually... + // NOTE: this takes priority over hScroll/vScroll. + scrollDisabled: false, + // sets the default transition settings while not scrolling... transitionDuration: 200, transitionEasing: 'ease', @@ -730,8 +748,11 @@ function makeScrollHandler(root, config){ // NOTE: if this returns false explicitly, this will stop scrolling. callback: postScrollCallback, + // These are used by the default callback... enableMultiClicks: false, + // NOTE: if these are null, respective values from the env will + // be used. clickThreshold: null, longClickThreshold: null, multiClickTimeout: null, @@ -792,6 +813,8 @@ function makeScrollHandler(root, config){ return scroller } + + // default callback... // This will provide support for the folowing events on the scroll root // element: @@ -803,26 +826,25 @@ function makeScrollHandler(root, config){ // - longClick // - swipeLeft // - swipeRight +// - swipeUp +// - swipeDown // - screenReleased // // NOTE: data.touches passed to the event is the number of touches // released within the multitouchTimeout. // this differs from what postScrollCallback actually gets in the // same field when it recieves the object. -// -// XXX add up/down swipes -// XXX add double clicks // XXX add generic snap // XXX add generic innertial scroll function postScrollCallback(data){ var scroller = data.scroller + var options = scroller.options var root = scroller.root - var clickThreshold = scroller.options.clickThreshold || CLICK_THRESHOLD - var longClickThreshold = scroller.options.longClickThreshold || LONG_CLICK_THRESHOLD - var multitouchTimeout = scroller.options.multitouchTimeout || MULTITOUCH_RELEASE_THRESHOLD - - var enableMultiClicks = scroller.options.enableMultiClicks - var multiClickTimeout = scroller.options.multiClickTimeout || MULTI_CLICK_TIMEOUT + var clickThreshold = options.clickThreshold || CLICK_THRESHOLD + var longClickThreshold = options.longClickThreshold || LONG_CLICK_THRESHOLD + var multitouchTimeout = options.multitouchTimeout || MULTITOUCH_RELEASE_THRESHOLD + var enableMultiClicks = options.enableMultiClicks + var multiClickTimeout = options.multiClickTimeout || MULTI_CLICK_TIMEOUT var now = Date.now(); @@ -831,8 +853,7 @@ function postScrollCallback(data){ return root.trigger('scrollCancelled', data) } - // ignore situations when the user is still touching... - // ...like when he/she lifted one finger of several... + // handle multiple touches... // XXX needs testing... if(data.touches > 0){ var then = scroller._last_touch_release @@ -848,15 +869,18 @@ function postScrollCallback(data){ // wait for the next touch release... scroller._last_touch_release = now return + // calculate how many touches did participate... } else { - data.touches = scroller._touches + 1 + data.touches = scroller._touches ? scroller._touches + 1 : 1 scroller._last_touch_release = null scroller._touches = null } - // clicks, double clicks and long clicks... - if(Math.abs(data.distance) < clickThreshold){ + // clicks, double-clicks, multi-clicks and long-clicks... + if(Math.max( + Math.abs(data.distance.x), + Math.abs(data.distance.y)) < clickThreshold){ if(data.duration > longClickThreshold){ return root.trigger('longClick', data) } @@ -890,23 +914,30 @@ function postScrollCallback(data){ scroller._clicks = null scroller._click_timeout_id = null }, multiClickTimeout) + + return } } - // left/right swipes... - // XXX add up/down support... - // XXX check if these are bound... - if(data.distance <= -clickThreshold){ - return root.trigger('swipeLeft', data) - } - if(data.distance >= clickThreshold){ - return root.trigger('swipeRight', data) + // swipes... + // XXX make these less brain dead... + // ...when all is OK also call screenReleased (chain events) + // also would be nice to add a generic swipe event... + if(Math.abs(data.distance.x) > Math.abs(data.distance.y)){ + if(data.distance.x <= -clickThreshold && root.data('events').swipeLeft){ + return root.trigger('swipeLeft', data) + } else if(data.distance.x >= clickThreshold && root.data('events').swipeRight){ + return root.trigger('swipeRight', data) + } + } else { + if(data.distance.y <= -clickThreshold && root.data('events').swipeUp){ + return root.trigger('swipeUp', data) + } else if(data.distance.y >= clickThreshold && root.data('events').swipeDown){ + return root.trigger('swipeDown', data) + } } - // XXX snap... - // XXX innertial scroll... - - // XXX this may never get called directly.... + // this is triggered of no swipes were handled... return root.trigger('screenReleased', data) }