added yet another transition drag implementation...

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

index.html

@@ -758,6 +758,7 @@ $(document).ready(function(){
 						<input type="file" id="upload" name="files[]"/>
 						<a href="./layout.html">alternative layout (native scroll)</a>
 						<a href="./layout-iscroll.html">alternative layout (iscroll)</a>
+						<a href="./layout-iscroll2.html">alternative layout (drag)</a>
 					</p>
 
 					<hr noshade color="silver">

layout-iscroll.html

@@ -148,9 +148,6 @@ $(document).ready(function(){
 		*/
 	})
 	
-	// XXX gets overwritten by iscroll...
-	setElementScale($('.page .content'), 0.5)
-
 
 	/*
 	var touching = false

lib/jli.js

@@ -197,6 +197,7 @@ function unanimated(obj, func, time){
 // 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')

magazine.css

@@ -205,6 +205,14 @@ body {
 	-ms-transition: none;	
 	transition: none;
 }
+.dragging * {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
 /* user hints, visible when user draggs past the cover or the last page
  * of the mag... */
 .magazine:before, .magazine:after {

magazine.js

@@ -248,6 +248,36 @@ function shiftMagazineTo(offset){
 		})
 	}
 }
+// XXX this is almost the same as getElementScale...
+function getElementShift(elem){
+	elem = $(elem)
+	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}
+	}
+	//return parseFloat(/translate\(([-.0-9]*),/.exec(transform)[1])
+	return {
+		left: parseFloat(/(translate\(|matrix\([^,]*,[^,]*,[^,]*,[^,]*,)([^,]*),/.exec(transform)[2]),
+		top: null
+	}
+}
+
+function getMagazineShift(){
+	return getElementShift($('.magazine')).left
+}