mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-30 19:40:12 +00:00
refined the touch handler, still needs work on multitouch...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
0601f07bc5
commit
448dd014fc
30
TODO.otl
30
TODO.otl
@ -13,37 +13,37 @@
|
||||
groups (depends on style)
|
||||
page background images
|
||||
[_] disable snapping in ribbon mode
|
||||
[_] 0% build a custom scroll lib...
|
||||
[_] 0% features:
|
||||
[_] drag/scroll
|
||||
[_] 36% build a custom scroll lib...
|
||||
[_] 66% features:
|
||||
[X] drag/scroll
|
||||
[_] inertial
|
||||
[_] snap
|
||||
[X] snap
|
||||
| if enabled, on release, detect nearest snap-point and scroll to it.
|
||||
[_] 0% tragets
|
||||
[_] smooth scroll on devices (iscroll)
|
||||
[_] 65% tragets
|
||||
[X] smooth scroll on devices (iscroll)
|
||||
| adaptive transitions, etc.
|
||||
[_] snap scroll to markers (a-la iscroll)
|
||||
[_] snap align
|
||||
[_] left (iscroll)
|
||||
[_] center
|
||||
[_] right
|
||||
[X] snap scroll to markers (a-la iscroll)
|
||||
[X] snap align
|
||||
[X] left (iscroll)
|
||||
[X] center
|
||||
[X] right
|
||||
[_] flexible event system
|
||||
[_] pre/post events
|
||||
[X] pre/post events
|
||||
[_] ability to modify action data before it runs
|
||||
[_] ability to cancel current action
|
||||
| like stop scrolling at a given point.
|
||||
[_] ability to take over and do something manually
|
||||
[_] all actions callable
|
||||
[_] both x and y axis support (x is a priority)
|
||||
[X] both x and y axis support (x is a priority)
|
||||
[_] scroll phases
|
||||
[_] user scroll phase
|
||||
[X] user scroll phase
|
||||
| from mousedown/touchstart and to mouseup/touchend
|
||||
[_] auto scroll phase
|
||||
| from mouseup/touchend and untill scrollend
|
||||
|
|
||||
| must account for speed...
|
||||
[_] momentum
|
||||
[_] snap
|
||||
[X] snap
|
||||
[_] 0% actions
|
||||
[_] 0% .scrollTo(target)
|
||||
| must accept:
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<style>
|
||||
|
||||
.viewer {
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.magazine {
|
||||
left: 150px;
|
||||
@ -113,70 +113,55 @@ $(document).ready(function(){
|
||||
function(k){console.log(k)}))
|
||||
|
||||
|
||||
window.THRESHOLD = 10
|
||||
window.CLICK_THRESHOLD = 10
|
||||
window.SNAP_TO_PAGES_IN_RIBBON = false
|
||||
|
||||
// XXX make this a default setup in the lib...
|
||||
window.MagazineScroller = makeScrollHandler($('.viewer'), {
|
||||
hScroll: true,
|
||||
vScroll: false,
|
||||
callback: function(speed, distance, touches){
|
||||
callback: function(evt, speed, distance, touches){
|
||||
// ignore situations when the user is still touching...
|
||||
if(touches > 0){
|
||||
return true
|
||||
return
|
||||
}
|
||||
// XXX this is not too correct...
|
||||
// ...make this mode specific...
|
||||
if(getMagazineScale() >= 1){
|
||||
|
||||
// click/tap...
|
||||
if(Math.abs(distance) < CLICK_THRESHOLD){
|
||||
// click...
|
||||
var target = $(evt.target)
|
||||
target = getPageNumber(target.hasClass('page') ? target
|
||||
: target.parents('.page'))
|
||||
if(target != -1){
|
||||
togglePageView()
|
||||
setCurrentPage(target)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// swipe left/right...
|
||||
// XXX add swipe up/down...
|
||||
if(!isNavigationViewRelative()){
|
||||
var cur = $('.current.page')
|
||||
if(distance > THRESHOLD){
|
||||
if(distance >= CLICK_THRESHOLD){
|
||||
return nextPage(cur)
|
||||
} else if(distance < -THRESHOLD){
|
||||
} else if(distance <= -CLICK_THRESHOLD){
|
||||
return prevPage(cur)
|
||||
}
|
||||
}
|
||||
setCurrentPage()
|
||||
|
||||
// this makes things snap...
|
||||
SNAP_TO_PAGES_IN_RIBBON && setCurrentPage()
|
||||
},
|
||||
}).start()
|
||||
|
||||
//setMagazineScale(0.5)
|
||||
|
||||
// XXX need to setup style for android to work...
|
||||
$('.viewer').css({overflow: 'hidden'})
|
||||
|
||||
// expand the templates...
|
||||
runMagazineTemplates()
|
||||
|
||||
setCurrentPage(0)
|
||||
//limit_scroll()
|
||||
})
|
||||
|
||||
|
||||
var SCROLL_LIMIT = 800 * 1.5
|
||||
|
||||
function setup_scroll_limiter(){
|
||||
$('.magazine').wrapAll($('<div class="scroller">'))
|
||||
limit_scroll()
|
||||
}
|
||||
|
||||
// XXX set the limit to next/prev page alignment...
|
||||
function limit_scroll(){
|
||||
var W = $('.viewer').width()
|
||||
var ml = parseFloat($('.scroller').css('margin-left')) || 0
|
||||
var pos = $('.viewer').scrollLeft()
|
||||
var c = -ml + pos + W/2
|
||||
$('.scroller').css({
|
||||
'margin-left': -(c-SCROLL_LIMIT),
|
||||
'width': c+SCROLL_LIMIT
|
||||
})
|
||||
$('.viewer').scrollLeft(pos-ml-(c-SCROLL_LIMIT))
|
||||
}
|
||||
function clear_limits(){
|
||||
var pos = $('.viewer').scrollLeft()
|
||||
var l = parseFloat($('.scroller').css('margin-left'))
|
||||
$('.scroller').css({
|
||||
'margin-left': '',
|
||||
'width': ''
|
||||
})
|
||||
$('.viewer').scrollLeft(pos - l)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
19
lib/jli.js
19
lib/jli.js
@ -488,11 +488,14 @@ function makeKeyboardHandler(keybindings, unhandled){
|
||||
|
||||
|
||||
|
||||
// XXX pass the actual event target to the callback...
|
||||
// XXX handle multiple touches...
|
||||
// - timeout on lift to count fingers...
|
||||
// XXX setup basic styles for the contained element...
|
||||
// XXX revise...
|
||||
// XXX test on other devices...
|
||||
// XXX BUG: on landing a second finger while scrolling the things goes
|
||||
// haywhire...
|
||||
function makeScrollHandler(root, config){
|
||||
root = $(root)
|
||||
|
||||
@ -517,11 +520,15 @@ function makeScrollHandler(root, config){
|
||||
var dt
|
||||
|
||||
function startMoveHandler(evt, callback){
|
||||
// if we are already touching then just skip on this...
|
||||
if(touches > 0){
|
||||
return false
|
||||
if(event.touches != null){
|
||||
touch = true
|
||||
}
|
||||
touches = touch ? event.touches.length : 1
|
||||
// if we are already touching then just skip on this...
|
||||
// XXX test this...
|
||||
if(touches > 1){
|
||||
return false
|
||||
}
|
||||
prev_t = event.timeStamp || Date.now();
|
||||
if(scroller.options.autoCancelEvents){
|
||||
bounds = {
|
||||
@ -533,9 +540,6 @@ function makeScrollHandler(root, config){
|
||||
}
|
||||
scrolled = $(root.children()[0])
|
||||
setTransitionDuration(scrolled, 0)
|
||||
if(event.touches != null){
|
||||
touch = true
|
||||
}
|
||||
scrolling = true
|
||||
scroller.state = 'scrolling'
|
||||
scroller.options.enabelStartEvent && root.trigger('userScrollStart')
|
||||
@ -606,7 +610,8 @@ function makeScrollHandler(root, config){
|
||||
scroller.options.enableEndEvent && root.trigger('userScrollEnd', dx, dy, dt, start_x, start_y)
|
||||
if(scroller.options.callback
|
||||
// XXX revise this....
|
||||
&& scroller.options.callback(dx/dt, start_x-x, touches) === false
|
||||
// call the callback...
|
||||
&& scroller.options.callback(evt, dx/dt, start_x-x, touches) === false
|
||||
|| touches == 0){
|
||||
// cleanup and stop...
|
||||
touch = false
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user