From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 18 Aug 2015 13:55:03 +0000 (+0000)
Subject: Edge support for 3D transition
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=ea71b82dccb94ed954f4fceae67c428c4a301ab8;p=fluidbook-html5.git

Edge support for 3D transition
---

diff --git a/js/libs/modernizr/tests.js b/js/libs/modernizr/tests.js
index 1f0e6f57..d3a7bb2d 100644
--- a/js/libs/modernizr/tests.js
+++ b/js/libs/modernizr/tests.js
@@ -1,60 +1,76 @@
 Modernizr.addTest('csstransformspreserve3d', function () {
-	var prop,
-			val,
-			cssText,
-			ret;
-
-	prop = 'transform-style';
-	if ('webkitTransformStyle' in document.documentElement.style) {
-		prop = '-webkit-' + prop;
-	}
-	val = 'preserve-3d';
-	cssText = '#modernizr { ' + prop + ': ' + val + '; }';
-	Modernizr.testStyles(cssText, function (el, rule) {
-		ret = window.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : '';
-	});
-	return (ret === val);
+    var prop,
+        val,
+        cssText,
+        ret;
+
+    prop = 'transform-style';
+    if ('webkitTransformStyle' in document.documentElement.style) {
+        prop = '-webkit-' + prop;
+    }
+    val = 'preserve-3d';
+    cssText = '#modernizr { ' + prop + ': ' + val + '; }';
+    Modernizr.testStyles(cssText, function (el, rule) {
+        ret = window.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : '';
+    });
+    return (ret === val);
 });
 
 Modernizr.addTest('ftouch', function () {
-	var bool;
+    var bool;
 
-	if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch || ('onmsgesturechange' in window)) {
-		bool = true;
-	} else {
-		var query = ['@media (', Modernizr._prefixes.join('touch-enabled),('), 'heartz', ')', '{#modernizr{top:9px;position:absolute}}'].join('');
-		Modernizr.testStyles(query, function (node) {
-			bool = node.offsetTop === 9;
-		});
-	}
+    if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch || ('onmsgesturechange' in window)) {
+        bool = true;
+    } else {
+        var query = ['@media (', Modernizr._prefixes.join('touch-enabled),('), 'heartz', ')', '{#modernizr{top:9px;position:absolute}}'].join('');
+        Modernizr.testStyles(query, function (node) {
+            bool = node.offsetTop === 9;
+        });
+    }
 
-	return bool;
+    return bool;
 });
 
 Modernizr.addTest('fullscreen', function () {
-	for (var i = 0; i < Modernizr._domPrefixes.length; i++) {
-		if (document[Modernizr._domPrefixes[i].toLowerCase() + 'CancelFullScreen'] || document[Modernizr._domPrefixes[i].toLowerCase() + 'ExitFullscreen'])
-			return true;
-	}
-	return !!document['cancelFullScreen'] || false;
+    for (var i = 0; i < Modernizr._domPrefixes.length; i++) {
+        if (document[Modernizr._domPrefixes[i].toLowerCase() + 'CancelFullScreen'] || document[Modernizr._domPrefixes[i].toLowerCase() + 'ExitFullscreen'])
+            return true;
+    }
+    return !!document['cancelFullScreen'] || false;
 });
 
 Modernizr.addTest('ipad', function () {
-	return !!navigator.userAgent.match(/iPad/i);
+    return !!navigator.userAgent.match(/iPad/i);
 });
 
 Modernizr.addTest('iphone', function () {
-	return !!navigator.userAgent.match(/iPhone/i);
+    return !!navigator.userAgent.match(/iPhone/i);
 });
 
 Modernizr.addTest('ipod', function () {
-	return !!navigator.userAgent.match(/iPod/i);
+    return !!navigator.userAgent.match(/iPod/i);
 });
 
 Modernizr.addTest('ios', function () {
-	return (Modernizr.ipad || Modernizr.ipod || Modernizr.iphone);
+    return (Modernizr.ipad || Modernizr.ipod || Modernizr.iphone);
 });
 
 Modernizr.addTest('ios7', function () {
-	return Modernizr.ios && navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i);
+    return Modernizr.ios && navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i);
+});
+
+Modernizr.addTest('firefox', function () {
+    return !!navigator.userAgent.match(/firefox/i);
+});
+
+Modernizr.addTest('edge', function () {
+    return !!navigator.userAgent.match(/edge/i);
+});
+
+Modernizr.addTest('msie', function () {
+    return !!navigator.userAgent.match(/trident/i);
+});
+
+Modernizr.addTest('mozrotation', function () {
+    return Modernizr.firefox || Modernizr.edge || Modernizr.msie;
 });
\ No newline at end of file
diff --git a/style/fluidbook.css b/style/fluidbook.css
index 05e58c13..1c0f8622 100644
--- a/style/fluidbook.css
+++ b/style/fluidbook.css
@@ -1431,7 +1431,6 @@ ul.chapters a > nav {
 	-moz-transform-style: preserve-3d;
 	-webkit-transform-style: preserve-3d;
 	-o-transform-style: preserve-3d;
-	-ms-transform-style: preserve-3d;
 	transform-style: preserve-3d;
 }
 
@@ -1453,6 +1452,11 @@ ul.chapters a > nav {
 	-moz-transform: rotateY(0deg) translate3d(0, 0, 0);
 }
 
+.mozrotation .doublePage._3d .right {
+	-moz-transform: rotateY(0deg) translate3d(0, 0, 0);
+	transform: rotateY(0deg) translate3d(0, 0, 0);
+}
+
 .doublePage._3d .left {
 	-webkit-transform: rotate3d(0, 1, 0, 180deg);
 	-o-transform: rotate3d(0, 1, 0, 180deg);
@@ -1461,6 +1465,11 @@ ul.chapters a > nav {
 	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
 }
 
+.mozrotation .doublePage._3d .left {
+	transform: rotateY(180deg) translate3d(0, 0, 0);
+	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+}
+
 .doublePage._3d.nextstart {
 	-webkit-transform: rotate3d(0, 1, 0, 360deg);
 	-o-transform: rotate3d(0, 1, 0, 360deg);
@@ -1475,6 +1484,11 @@ ul.chapters a > nav {
 	transform-origin: 0 0;
 }
 
+.mozrotation .doublePage._3d.nextstart {
+	-moz-transform: rotateY(360deg) translate3d(0, 0, 0);
+	transform: rotateY(360deg) translate3d(0, 0, 0);
+}
+
 .doublePage._3d.nextend {
 
 	-webkit-transform: rotate3d(0, 1, 0, 180deg);
@@ -1484,8 +1498,12 @@ ul.chapters a > nav {
 	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
 }
 
-.doublePage._3d.prevstart {
+.mozrotation .doublePage._3d.nextend {
+	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+	transform: rotateY(180deg) translate3d(0, 0, 0);
+}
 
+.doublePage._3d.prevstart {
 	-webkit-transform: rotate3d(0, 1, 0, 180deg);
 	-o-transform: rotate3d(0, 1, 0, 180deg);
 	-ms-transform: rotate3d(0, 1, 0, 180deg);
@@ -1499,6 +1517,11 @@ ul.chapters a > nav {
 	transform-origin: 0 0;
 }
 
+.mozrotation .doublePage._3d.prevstart {
+	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+	transform: rotateY(180deg) translate3d(0, 0, 0);
+}
+
 .doublePage._3d.prevend {
 
 	-webkit-transform: rotate3d(0, 1, 0, 360deg);
@@ -1508,6 +1531,11 @@ ul.chapters a > nav {
 	-moz-transform: rotateY(360deg) translate3d(0, 0, 0);
 }
 
+.mozrotation .doublePage._3d.prevend {
+	-moz-transform: rotateY(360deg) translate3d(0, 0, 0);
+	transform: rotateY(360deg) translate3d(0, 0, 0);
+}
+
 a.button {
 	display: inline-block;
 	padding: 8px 32px 8px 16px;