mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-29 11:10:08 +00:00
reworked css-vendor acces attr, transition timing and lots of other minor stuff...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
c9f964c9cc
commit
9b926cfdc8
29
index.html
29
index.html
@ -17,24 +17,8 @@
|
||||
.magazine {
|
||||
left: 150px;
|
||||
margin-left: 0px;
|
||||
|
||||
/* magic */
|
||||
}
|
||||
|
||||
.current.page {
|
||||
/*
|
||||
z-index: 9000;
|
||||
box-shadow: 10px 10px 150px -50px black;
|
||||
border-bottom: solid yellow 10px;
|
||||
*/
|
||||
}
|
||||
/*
|
||||
.page:hover {
|
||||
z-index: 9000;
|
||||
box-shadow: 10px 10px 150px 0px black;
|
||||
}
|
||||
*/
|
||||
|
||||
.page {
|
||||
|
||||
vertical-align:top;
|
||||
@ -130,13 +114,13 @@ $(document).ready(function(){
|
||||
hScroll: true,
|
||||
vScroll: false,
|
||||
// XXX still a bit flacky...
|
||||
//preCallback: function(){stopAnimation($('.magazine'))},
|
||||
preCallback: function(){stopAnimation($('.magazine'))},
|
||||
//enableMultiClicks: true,
|
||||
transitionEasing: 'cubic-bezier(0.33,0.66,0.66,1)',
|
||||
}).start()
|
||||
|
||||
$('.viewer')
|
||||
.on('scrollCancelled', function(){ setCurrentPage() })
|
||||
.on('scrollCancelled swipeUp swipeDown', function(){ setCurrentPage() })
|
||||
.on('shortClick', handleClick)
|
||||
.on('swipeLeft', handleSwipeLeft)
|
||||
.on('swipeRight', handleSwipeRight)
|
||||
@ -145,18 +129,11 @@ $(document).ready(function(){
|
||||
.on('screenReleased swipeRight swipeLeft', handleScrollRelease)
|
||||
*/
|
||||
|
||||
// XXX stub...
|
||||
//setTransitionEasing($('.magazine'), 'ease-out')
|
||||
//setTransitionEasing($('.magazine'), 'cubic-bezier(0.33,0.66,0.66,1)')
|
||||
prepareTransitions($('.magazine'))
|
||||
$('.viewer').css('overflow', 'hidden')
|
||||
|
||||
runMagazineTemplates()
|
||||
setCurrentPage(0)
|
||||
|
||||
// XXX for some reason this does not work correctly on android the
|
||||
// first time...
|
||||
togglePageView('on')
|
||||
setCurrentPage(0)
|
||||
})
|
||||
|
||||
|
||||
|
||||
44
layout.js
44
layout.js
@ -72,7 +72,6 @@ function handleClick(evt, data){
|
||||
togglePageView()
|
||||
setCurrentPage(target)
|
||||
|
||||
setTransitionDuration(mag, DEFAULT_TRANSITION_DURATION)
|
||||
//setTransitionEasing(mag, 'ease')
|
||||
setTransitionEasing(mag, 'cubic-bezier(0.33,0.66,0.66,1)')
|
||||
}
|
||||
@ -93,7 +92,6 @@ function makeSwipeHandler(action){
|
||||
}
|
||||
// full page view...
|
||||
var mag = $('.magazine')
|
||||
setTransitionDuration(mag, DEFAULT_TRANSITION_DURATION)
|
||||
//setTransitionEasing(mag, 'ease-out')
|
||||
setTransitionEasing(mag, 'cubic-bezier(0.33,0.66,0.66,1)')
|
||||
|
||||
@ -157,6 +155,7 @@ function handleScrollRelease(evt, data){
|
||||
|
||||
animateElementTo(mag, to, t, easing, speed)
|
||||
|
||||
/*
|
||||
// restore defaults...
|
||||
// XXX this is a bit dumb at this point...
|
||||
// XXX run this as a transition end handler...
|
||||
@ -165,6 +164,7 @@ function handleScrollRelease(evt, data){
|
||||
setTransitionEasing(mag, 'cubic-bezier(0.33,0.66,0.66,1)')
|
||||
setTransitionDuration(mag, DEFAULT_TRANSITION_DURATION)
|
||||
}, t+10)
|
||||
*/
|
||||
|
||||
// check scroll bounds...
|
||||
// do not let the user scroll out of view...
|
||||
@ -186,23 +186,13 @@ var USE_TRANSITIONS_FOR_ANIMATION = false
|
||||
//var MIN_STEP = 24
|
||||
var MIN_STEP = 0
|
||||
|
||||
var animationFrame = (window.requestAnimationFrame
|
||||
|| window.webkitRequestAnimationFrame
|
||||
|| window.mozRequestAnimationFrame
|
||||
|| window.oRequestAnimationFrame
|
||||
|| window.msRequestAnimationFrame
|
||||
|| function(callback){
|
||||
window.setTimeout(callback, 1000 / 60)
|
||||
})
|
||||
|
||||
|
||||
// XXX make this a drop-in replacement for setElementTransform...
|
||||
// XXX cleanup, still flacky...
|
||||
function animateElementTo(elem, to, duration, easing, speed){
|
||||
// use transition for animation...
|
||||
if(USE_TRANSITIONS_FOR_ANIMATION){
|
||||
setTransitionEasing(elem, easing)
|
||||
setTransitionDuration(elem, duration)
|
||||
duration == null && setTransitionDuration(elem, duration)
|
||||
setElementTransform(elem, to)
|
||||
|
||||
// manually animate...
|
||||
@ -219,6 +209,10 @@ function animateElementTo(elem, to, duration, easing, speed){
|
||||
y: 0,
|
||||
}
|
||||
}
|
||||
if(duration == null){
|
||||
duration = getElementTransitionDuration(elem)
|
||||
}
|
||||
|
||||
setTransitionDuration(elem, 0)
|
||||
|
||||
var start = Date.now()
|
||||
@ -292,7 +286,7 @@ function animateElementTo(elem, to, duration, easing, speed){
|
||||
}
|
||||
setElementTransform(elem, cur)
|
||||
// sched next frame...
|
||||
animationFrame(animate)
|
||||
elem.next_frame = getAnimationFrame(animate)
|
||||
}
|
||||
|
||||
animate()
|
||||
@ -300,8 +294,8 @@ function animateElementTo(elem, to, duration, easing, speed){
|
||||
}
|
||||
|
||||
function stopAnimation(elem){
|
||||
if(elem.animating){
|
||||
delete elem.animating
|
||||
if(elem.next_frame){
|
||||
cancelAnimationFrame(elem.next_frame)
|
||||
}
|
||||
}
|
||||
|
||||
@ -322,6 +316,10 @@ function isNavigationViewRelative(){
|
||||
function getMagazineOffset(page, scale, align){
|
||||
if(page == null){
|
||||
page = $('.current.page')
|
||||
// if no current page get the first...
|
||||
if(page.length == 0){
|
||||
page = $('.page').first()
|
||||
}
|
||||
}
|
||||
if(scale == null){
|
||||
scale = getMagazineScale()
|
||||
@ -391,6 +389,9 @@ function getMagazineScale(){
|
||||
function setMagazineScale(scale){
|
||||
var mag = $('.magazine')
|
||||
var cur = $('.current.page')
|
||||
if(cur.length == 0){
|
||||
cur = $('.page').first()
|
||||
}
|
||||
|
||||
// center-align ribbon view pages...
|
||||
var align = isNavigationViewRelative() ? 'center' : null
|
||||
@ -425,11 +426,10 @@ function setCurrentPage(n){
|
||||
var left = getMagazineOffset(cur, null, align)
|
||||
|
||||
if(USE_TRANSITIONS_FOR_ANIMATION){
|
||||
setTransitionDuration($('.magazine'), DEFAULT_TRANSITION_DURATION)
|
||||
setElementTransform($('.magazine'), left)
|
||||
|
||||
} else {
|
||||
animateElementTo($('.magazine'), left, DEFAULT_TRANSITION_DURATION)
|
||||
animateElementTo($('.magazine'), left)
|
||||
}
|
||||
|
||||
return cur
|
||||
@ -437,9 +437,13 @@ function setCurrentPage(n){
|
||||
|
||||
|
||||
function nextPage(page){
|
||||
// XXX is this the right place for this?
|
||||
setTransitionDuration($('.magazine'), DEFAULT_TRANSITION_DURATION)
|
||||
setCurrentPage(getPageNumber(page)+1)
|
||||
}
|
||||
function prevPage(page){
|
||||
// XXX is this the right place for this?
|
||||
setTransitionDuration($('.magazine'), DEFAULT_TRANSITION_DURATION)
|
||||
var n = getPageNumber(page)-1
|
||||
n = n < 0 ? 0 : n
|
||||
setCurrentPage(n)
|
||||
@ -447,9 +451,13 @@ function prevPage(page){
|
||||
|
||||
|
||||
function firstPage(){
|
||||
// XXX is this the right place for this?
|
||||
setTransitionDuration($('.magazine'), DEFAULT_TRANSITION_DURATION)
|
||||
setCurrentPage(0)
|
||||
}
|
||||
function lastPage(){
|
||||
// XXX is this the right place for this?
|
||||
setTransitionDuration($('.magazine'), DEFAULT_TRANSITION_DURATION)
|
||||
setCurrentPage(-1)
|
||||
}
|
||||
|
||||
|
||||
148
lib/jli.js
148
lib/jli.js
@ -194,6 +194,64 @@ function unanimated(obj, func, time){
|
||||
}
|
||||
|
||||
|
||||
// NOTE: this will only use the first element in a set.
|
||||
// NOTE: if no element is given this will return null.
|
||||
function makeCSSVendorAttrGetter(attr, dfl, callback){
|
||||
return function(elem){
|
||||
elem = $(elem)
|
||||
if(elem.length == 0){
|
||||
return null
|
||||
}
|
||||
// using the attr...
|
||||
var vendors = ['O', 'Moz', 'ms', 'webkit']
|
||||
var data = elem[0].style[attr]
|
||||
|
||||
// go through vendor prefixes... (hate this!)
|
||||
if(!data || data == 'none'){
|
||||
for(var i in vendors){
|
||||
data = elem[0].style[vendors[i] + attr.capitalize()]
|
||||
if(data && data != 'none'){
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
// no data is set...
|
||||
if(!data || data == 'none'){
|
||||
return dfl
|
||||
}
|
||||
return callback(data)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Return a scale value for the given element(s).
|
||||
// NOTE: this will only return a single scale value...
|
||||
var getElementScale = makeCSSVendorAttrGetter(
|
||||
'transform',
|
||||
1,
|
||||
function(data){
|
||||
return parseFloat((/(scale|matrix)\(([^),]*)\)/).exec(data)[2])
|
||||
})
|
||||
|
||||
var getElementShift = makeCSSVendorAttrGetter(
|
||||
'transform',
|
||||
{left: 0, top: 0},
|
||||
function(data){
|
||||
res = /(translate\(|matrix\([^,]*,[^,]*,[^,]*,[^,]*,)([^,]*),([^\)]*)\)/.exec(data)
|
||||
return {
|
||||
left: parseFloat(res[2]),
|
||||
top: parseFloat(res[3])
|
||||
}
|
||||
})
|
||||
|
||||
var DEFAULT_TRANSITION_DURATION = 200
|
||||
|
||||
var getElementTransitionDuration = makeCSSVendorAttrGetter(
|
||||
'transitionDuration',
|
||||
DEFAULT_TRANSITION_DURATION,
|
||||
parseInt)
|
||||
|
||||
|
||||
|
||||
var USE_3D_TRANSFORM = true
|
||||
|
||||
@ -253,73 +311,11 @@ function setElementTransform(elem, offset, scale, duration){
|
||||
return elem
|
||||
}
|
||||
|
||||
// Return a scale value for the given element(s).
|
||||
// NOTE: this will only return a single scale value...
|
||||
function getElementScale(elem){
|
||||
elem = $(elem)
|
||||
//var transform = elem.css('transform')
|
||||
var vendors = ['o', 'moz', 'ms', 'webkit']
|
||||
var transform = elem.css('transform')
|
||||
var res
|
||||
|
||||
// go through vendor prefixes... (hate this!)
|
||||
if(!transform || transform == 'none'){
|
||||
for(var i in vendors){
|
||||
transform = elem.css('-' + vendors[i] + '-transform')
|
||||
if(transform && transform != 'none'){
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
// no transform is set...
|
||||
if(!transform || transform == 'none'){
|
||||
return 1
|
||||
}
|
||||
// get the scale value -- first argument of scale/matrix...
|
||||
return parseFloat((/(scale|matrix)\(([^,]*),.*\)/).exec(transform)[2])
|
||||
}
|
||||
|
||||
// XXX account for other transitions...
|
||||
function setElementScale(elem, scale){
|
||||
return setElementTransform(elem, null, scale)
|
||||
}
|
||||
|
||||
function getElementShift(elem){
|
||||
elem = $(elem)
|
||||
// using transform...
|
||||
if(USE_TRANSFORM){
|
||||
var vendors = ['o', 'moz', 'ms', 'webkit']
|
||||
var transform = elem.css('transform')
|
||||
var res
|
||||
|
||||
// go through vendor prefixes... (hate this!)
|
||||
if(!transform || transform == 'none'){
|
||||
for(var i in vendors){
|
||||
transform = elem.css('-' + vendors[i] + '-transform')
|
||||
if(transform && transform != 'none'){
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
// no transform is set...
|
||||
if(!transform || transform == 'none'){
|
||||
return {left: 0, top: 0}
|
||||
}
|
||||
res = /(translate\(|matrix\([^,]*,[^,]*,[^,]*,[^,]*,)([^,]*),([^\)]*)\)/.exec(transform)
|
||||
return {
|
||||
left: parseFloat(res[2]),
|
||||
top: parseFloat(res[3])
|
||||
}
|
||||
// using left...
|
||||
} else {
|
||||
return {
|
||||
left: elem.position().left,
|
||||
top: elem.position().top
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function setTransitionEasing(elem, ease){
|
||||
if(typeof(ms) == typeof(0)){
|
||||
ms = ms + 'ms'
|
||||
@ -1002,6 +998,34 @@ jQuery.fn.sortChildren = function(func){
|
||||
|
||||
|
||||
|
||||
/**************************************************** JS utilities ***/
|
||||
|
||||
String.prototype.capitalize = function(){
|
||||
return this[0].toUpperCase() + this.slice(1)
|
||||
}
|
||||
|
||||
|
||||
var getAnimationFrame = (window.requestAnimationFrame
|
||||
|| window.webkitRequestAnimationFrame
|
||||
|| window.mozRequestAnimationFrame
|
||||
|| window.oRequestAnimationFrame
|
||||
|| window.msRequestAnimationFrame
|
||||
|| function(callback){
|
||||
window.setTimeout(callback, 1000 / 60)
|
||||
})
|
||||
|
||||
var cancelAnimationFrame = (window.cancelRequestAnimationFrame
|
||||
|| window.webkitCancelAnimationFrame
|
||||
|| window.webkitCancelRequestAnimationFrame
|
||||
|| window.mozCancelRequestAnimationFrame
|
||||
|| window.oCancelRequestAnimationFrame
|
||||
|| window.msCancelRequestAnimationFrame
|
||||
|| clearTimeout)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/********************************************************** logger ***/
|
||||
|
||||
function Logger(){
|
||||
|
||||
10
magazine.js
10
magazine.js
@ -189,7 +189,7 @@ function getMagazineTitle(){
|
||||
}
|
||||
|
||||
|
||||
function getPageScale(){
|
||||
function getMagazineScale(){
|
||||
return getElementScale($('.scaler'))
|
||||
}
|
||||
function setPageScale(scale){
|
||||
@ -236,7 +236,7 @@ function getPageTargetScale(n, fit_to_content){
|
||||
var cH = content.height()
|
||||
|
||||
var scale = {
|
||||
value: getPageScale(),
|
||||
value: getMagazineScale(),
|
||||
width: null,
|
||||
height: null,
|
||||
result_width: cW,
|
||||
@ -380,7 +380,7 @@ function makeSwipeHandler(){
|
||||
pages = $('.page')
|
||||
cur = $('.current.page')
|
||||
n = pages.index(cur)
|
||||
scale = getPageScale()
|
||||
scale = getMagazineScale()
|
||||
mag = $('.magazine')
|
||||
pos = $('.navigator .bar .indicator')
|
||||
|
||||
@ -619,7 +619,7 @@ function setCurrentPage(n, offset, width){
|
||||
width = cur.width()
|
||||
if(USE_REAL_PAGE_SIZES && togglePageView('?') == 'on'){
|
||||
var align = getPageAlign(cur)
|
||||
var scale = getPageScale()
|
||||
var scale = getMagazineScale()
|
||||
if(align == 'center'){
|
||||
width = cur.width()
|
||||
|
||||
@ -638,7 +638,7 @@ function setCurrentPage(n, offset, width){
|
||||
|
||||
// NOTE: this will be wrong during a transition, that's why we
|
||||
// can pass the pre-calculated offset as an argument...
|
||||
shiftMagazineTo(-(offset == null ? cur.position()['left']/getPageScale() : offset))
|
||||
shiftMagazineTo(-(offset == null ? cur.position()['left']/getMagazineScale() : offset))
|
||||
|
||||
// center the pages correctly...
|
||||
// NOTE: this is the main reason we need width, and we can get it
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user