mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-30 19:40:12 +00:00
cleanup and refactoring...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
2762c87366
commit
ade8832372
148
index2.html
148
index2.html
@ -113,161 +113,29 @@ $(document).ready(function(){
|
|||||||
function(k){console.log(k)}))
|
function(k){console.log(k)}))
|
||||||
|
|
||||||
|
|
||||||
window.SNAP_TO_PAGES_IN_RIBBON = false
|
|
||||||
window.INITIAL_TIME = 200
|
|
||||||
window.INNERTIA_SCALE = 0.25
|
|
||||||
|
|
||||||
// XXX make this a default setup in the lib...
|
// XXX make this a default setup in the lib...
|
||||||
window.MagazineScroller = makeScrollHandler($('.viewer'), {
|
window.MagazineScroller = makeScrollHandler($('.viewer'), {
|
||||||
hScroll: true,
|
hScroll: true,
|
||||||
vScroll: false,
|
vScroll: false,
|
||||||
|
|
||||||
//enableMultiClicks: true,
|
//enableMultiClicks: true,
|
||||||
}).start()
|
}).start()
|
||||||
|
|
||||||
|
|
||||||
$('.viewer')
|
$('.viewer')
|
||||||
.on('scrollCancelled', function(){
|
.on('scrollCancelled', function(){ setCurrentPage() })
|
||||||
setCurrentPage()
|
.on('shortClick', handleClick)
|
||||||
})
|
.on('swipeLeft', handleSwipeLeft)
|
||||||
.on('shortClick', function(evt, data){
|
.on('swipeRight', handleSwipeRight)
|
||||||
// get page target and select it if it's within a page...
|
.on('screenReleased', handleScrollRelease)
|
||||||
var target = $(data.orig_event.target)
|
|
||||||
target = getPageNumber(
|
|
||||||
target.hasClass('page') ? target
|
|
||||||
: target.parents('.page'))
|
|
||||||
if(target != -1){
|
|
||||||
var mag = $('.magazine')
|
|
||||||
setTransitionDuration(mag, INITIAL_TIME)
|
|
||||||
setTransitionEasing(mag, 'ease')
|
|
||||||
|
|
||||||
togglePageView()
|
|
||||||
setCurrentPage(target)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
/* XXX to use these set the enableMultiClicks to true in makeScrollHandler
|
|
||||||
.on('multiClick', function(evt, data){
|
|
||||||
alert('multiple clicks... ('+data.clicks+')')
|
|
||||||
})
|
|
||||||
.on('doubleClick', function(evt, data){
|
|
||||||
alert('double click...')
|
|
||||||
})
|
|
||||||
.on('longClick', function(evt, data){
|
|
||||||
alert('long click...')
|
|
||||||
})
|
|
||||||
*/
|
|
||||||
.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)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// full page view...
|
|
||||||
var mag = $('.magazine')
|
|
||||||
setTransitionDuration(mag, INITIAL_TIME)
|
|
||||||
setTransitionEasing(mag, 'ease-out')
|
|
||||||
|
|
||||||
prevPage($('.current.page'))
|
|
||||||
})
|
|
||||||
.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)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// full page view...
|
|
||||||
var mag = $('.magazine')
|
|
||||||
setTransitionDuration(mag, INITIAL_TIME)
|
|
||||||
setTransitionEasing(mag, 'ease-out')
|
|
||||||
|
|
||||||
nextPage($('.current.page'))
|
|
||||||
})
|
|
||||||
|
|
||||||
// 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 || !isNavigationViewRelative()){
|
|
||||||
setCurrentPage()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
var speed = data.speed.x
|
|
||||||
var pages = $('.page')
|
|
||||||
var mag = $('.magazine')
|
|
||||||
// innertial scroll...
|
|
||||||
// XXX make this generic...
|
|
||||||
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*INNERTIA_SCALE))
|
|
||||||
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...
|
|
||||||
// NOTE: need to cut the distance and time if we are going the
|
|
||||||
// hit the bounds...
|
|
||||||
if(to > first){
|
|
||||||
// trim the time proportionally...
|
|
||||||
var _t = t
|
|
||||||
t = Math.abs(t * ((at-first)/(at-to)))
|
|
||||||
to = first
|
|
||||||
setTransitionEasing(mag, 'linear')
|
|
||||||
} else if(to < last){
|
|
||||||
// trim the time proportionally...
|
|
||||||
var _t = t
|
|
||||||
t = Math.abs(t * ((at-last)/(at-to)))
|
|
||||||
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)
|
|
||||||
|
|
||||||
// check scroll bounds...
|
|
||||||
// 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)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
// XXX stub...
|
// XXX stub...
|
||||||
setTransitionEasing($('.magazine'), 'ease-out')
|
setTransitionEasing($('.magazine'), 'ease-out')
|
||||||
|
|
||||||
// expand the templates...
|
|
||||||
runMagazineTemplates()
|
runMagazineTemplates()
|
||||||
|
|
||||||
setCurrentPage(0)
|
setCurrentPage(0)
|
||||||
|
|
||||||
|
// XXX for some reason this does not work correctly on android the
|
||||||
|
// first time...
|
||||||
togglePageView('on')
|
togglePageView('on')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
107
layout.js
107
layout.js
@ -6,6 +6,10 @@
|
|||||||
|
|
||||||
var PAGES_IN_RIBBON = 4
|
var PAGES_IN_RIBBON = 4
|
||||||
|
|
||||||
|
var SNAP_TO_PAGES_IN_RIBBON = false
|
||||||
|
var DEFAULT_TRANSITION_DURATION = 200
|
||||||
|
var INNERTIA_SCALE = 0.25
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/********************************************************** layout ***/
|
/********************************************************** layout ***/
|
||||||
@ -72,7 +76,110 @@ var togglePageView = createCSSClassToggler(
|
|||||||
|
|
||||||
/************************************************** event handlers ***/
|
/************************************************** event handlers ***/
|
||||||
|
|
||||||
|
function handleClick(evt, data){
|
||||||
|
// get page target and select it if it's within a page...
|
||||||
|
var target = $(data.orig_event.target)
|
||||||
|
target = getPageNumber(
|
||||||
|
target.hasClass('page') ? target
|
||||||
|
: target.parents('.page'))
|
||||||
|
if(target != -1){
|
||||||
|
var mag = $('.magazine')
|
||||||
|
setTransitionDuration(mag, DEFAULT_TRANSITION_DURATION)
|
||||||
|
setTransitionEasing(mag, 'ease')
|
||||||
|
|
||||||
|
togglePageView()
|
||||||
|
setCurrentPage(target)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function makeSwipeHandler(action){
|
||||||
|
return function(evt, data){
|
||||||
|
// ribbon mode...
|
||||||
|
if(isNavigationViewRelative()){
|
||||||
|
return handleScrollRelease(evt, data)
|
||||||
|
}
|
||||||
|
// full page view...
|
||||||
|
var mag = $('.magazine')
|
||||||
|
setTransitionDuration(mag, DEFAULT_TRANSITION_DURATION)
|
||||||
|
setTransitionEasing(mag, 'ease-out')
|
||||||
|
|
||||||
|
action($('.current.page'))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var handleSwipeLeft = makeSwipeHandler(prevPage)
|
||||||
|
var handleSwipeRight = makeSwipeHandler(nextPage)
|
||||||
|
|
||||||
|
// do snap and innertia...
|
||||||
|
// NOTE: this will also handle swipeUp/swopeDown as we do not
|
||||||
|
// explicitly bind them...
|
||||||
|
// XXX restore all the changed values...
|
||||||
|
function handleScrollRelease(evt, data){
|
||||||
|
// this makes things snap...
|
||||||
|
if(SNAP_TO_PAGES_IN_RIBBON || !isNavigationViewRelative()){
|
||||||
|
setCurrentPage()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
var speed = data.speed.x
|
||||||
|
var pages = $('.page')
|
||||||
|
var mag = $('.magazine')
|
||||||
|
// innertial scroll...
|
||||||
|
// XXX make this generic...
|
||||||
|
var t = DEFAULT_TRANSITION_DURATION * (1+Math.abs(speed))
|
||||||
|
// XXX this is only horisontal at this point...
|
||||||
|
var at = getElementShift(mag).left
|
||||||
|
var to = (at + (t*speed*INNERTIA_SCALE))
|
||||||
|
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...
|
||||||
|
// NOTE: need to cut the distance and time if we are going the
|
||||||
|
// hit the bounds...
|
||||||
|
if(to > first){
|
||||||
|
// trim the time proportionally...
|
||||||
|
var _t = t
|
||||||
|
t = Math.abs(t * ((at-first)/(at-to)))
|
||||||
|
to = first
|
||||||
|
setTransitionEasing(mag, 'linear')
|
||||||
|
} else if(to < last){
|
||||||
|
// trim the time proportionally...
|
||||||
|
var _t = t
|
||||||
|
t = Math.abs(t * ((at-last)/(at-to)))
|
||||||
|
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, DEFAULT_TRANSITION_DURATION)
|
||||||
|
}, t+10)
|
||||||
|
|
||||||
|
// check scroll bounds...
|
||||||
|
// do not let the user scroll out of view...
|
||||||
|
} else {
|
||||||
|
if(at > first){
|
||||||
|
setTransitionEasing(mag, 'ease-in')
|
||||||
|
setTransitionDuration(mag, DEFAULT_TRANSITION_DURATION)
|
||||||
|
setElementTransform(mag, first)
|
||||||
|
|
||||||
|
} else if(at < last){
|
||||||
|
setTransitionEasing(mag, 'ease-in')
|
||||||
|
setTransitionDuration(mag, DEFAULT_TRANSITION_DURATION)
|
||||||
|
setElementTransform(mag, last)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -656,7 +656,6 @@ function makeScrollHandler(root, config){
|
|||||||
|
|
||||||
// XXX get real transition duration...
|
// XXX get real transition duration...
|
||||||
scroller.resetTransitions()
|
scroller.resetTransitions()
|
||||||
//setTransitionDuration(scrolled, options.transitionDuration)
|
|
||||||
|
|
||||||
x = touch ? event.changedTouches[0].pageX : evt.clientX
|
x = touch ? event.changedTouches[0].pageX : evt.clientX
|
||||||
y = touch ? event.changedTouches[0].pageY : evt.clientY
|
y = touch ? event.changedTouches[0].pageY : evt.clientY
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user