reworked css-vendor acces attr, transition timing and lots of other minor stuff...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

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)
 })
 
 

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){
+	if(elem.next_frame){
-		delete elem.animating
+		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)
 }
 

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(){

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