add flip

Author: tieniber

src/MobileNativeFeatures/MobileTransitions.xml

@@ -6,16 +6,25 @@
     <icon>iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAd0lEQVR42q1TQQ7AIAjjEfz/Oe4Ah/mizSWYEFM3cDbpsRVKJZqDG9XIlMQjqI2X8cyaqBN3SsagmMCLCy2gG4R2VvAKMjhsIkaBScBAxmBRYFHKFgO2caIrKOoGT06FDMoY4pYzfhVJs0WSv1X2wS59Jh/sa2A3/2BcyNllo4UAAAAASUVORK5CYII=</icon>
 
     <properties>
-        <property key="direction" type="enumeration" required="true" defaultValue="up">
+		<property key="transitionType" type="enumeration" required="true" defaultValue="slide">
+			<caption>Type</caption>
+			<category>Settings</category>
+			<description>The type of transition.</description>
+			<enumerationValues>
+				<enumerationValue key="slide">Slide</enumerationValue>
+				<enumerationValue key="flip">Flip</enumerationValue>
+				<enumerationValue key="fade">Fade</enumerationValue>
+			</enumerationValues>
+		</property>
+        <property key="direction" type="enumeration" required="true" defaultValue="left">
             <caption>Direction</caption>
             <category>Settings</category>
             <description>The direction to transition the next page</description>
             <enumerationValues>
-                <enumerationValue key="up">Slide Up</enumerationValue>
-                <enumerationValue key="down">Slide Down</enumerationValue>
-                <enumerationValue key="left">Slide Left</enumerationValue>
-                <enumerationValue key="right">Slide Right</enumerationValue>
-				<enumerationValue key="fade">Fade</enumerationValue>
+                <enumerationValue key="up">Up</enumerationValue>
+                <enumerationValue key="down">Down</enumerationValue>
+                <enumerationValue key="left">Left</enumerationValue>
+                <enumerationValue key="right">Right</enumerationValue>
             </enumerationValues>
         </property>
         <property key="clsName" type="string" required="true">
@@ -37,6 +46,6 @@
             <caption>Fixed Pixels Bottom</caption>
             <category>Settings</category>
             <description>Any footer pixels that you don't want to slide.</description>
-        </property>        
+        </property>
     </properties>
 </widget>

src/MobileNativeFeatures/widget/MobileTransitions.js

@@ -30,6 +30,7 @@ define([
         // Parameters configured in the Modeler.
         clsName: null,
         direction: null,
+		transitionType: null,
 		fixedPixelsTop: 0,
 		fixedPixelsBottom: 0,
 
@@ -89,19 +90,19 @@ define([
             if (typeof window.plugins !== "undefined") {
 
                 if (typeof window.plugins.nativepagetransitions !== "undefined") {
-					if (this.direction === "fade") {
+					if (this.transitionType === "fade") {
 						this._listenerHandle = query("."+this.clsName).on("click", lang.hitch(this, function () {
-							window.plugins.nativepagetransitions.nextTransition = this.direction;
+							window.plugins.nativepagetransitions.nextTransition = this.transitionType;
 							window.plugins.nativepagetransitions.nextOptions = {
 								"duration"       :  this.duration, // in milliseconds (ms), default 400
 								"iosdelay"       :   -1, // ms to wait for the iOS webview to update before animation kicks in, default 60
 								"androiddelay"   :   -1
 							};
 						}));
-					} else {
+					} else if (this.transitionType === "slide") {
 
 						this._listenerHandle = query("."+this.clsName).on("click", lang.hitch(this, function () {
-							window.plugins.nativepagetransitions.nextTransition = this.direction;
+							window.plugins.nativepagetransitions.nextTransition = this.transitionType;
 							window.plugins.nativepagetransitions.nextOptions = {
 								"direction": this.direction, // "left|right|up|down", default "left" (which is like "next")
 								"duration": this.duration, // in milliseconds (ms), default 400
@@ -113,6 +114,18 @@ define([
 								"fixedPixelsBottom": this.fixedPixelsBottom // the number of pixels of your fixed footer (f.i. a tab bar), default 0 (iOS and Android)
 							};
 						}));
+					} else if (this.transitionType === "flip") {
+
+						this._listenerHandle = query("."+this.clsName).on("click", lang.hitch(this, function () {
+							window.plugins.nativepagetransitions.nextTransition = this.transitionType;
+							window.plugins.nativepagetransitions.nextOptions = {
+								"direction": this.direction, // "left|right|up|down", default "left" (which is like "next")
+								"duration": this.duration, // in milliseconds (ms), default 400
+								"iosdelay": -1, //defer transitions until they"re called later ////60, // ms to wait for the iOS webview to update before animation kicks in, default 60
+								"androiddelay": -1, //defer transitions until they"re called later ////70 // same as above but for Android, default 70
+								"winphonedelay": 200, // same as above but for Windows Phone, default 200,
+							};
+						}));
 					}
                 }
             } else {
@@ -140,7 +153,7 @@ define([
 							alert("error: " + msg);
 						} // called in case you pass in weird values
 					);
-				} else {
+				} else if(window.plugins.nativepagetransitions.nextTransition === "slide"){
 					window.plugins.nativepagetransitions.slide(
 						window.plugins.nativepagetransitions.nextOptions,
 						function (msg) {
@@ -150,11 +163,21 @@ define([
 							alert("error: " + msg);
 						} // called in case you pass in weird values
 					);
+				} else if (window.plugins.nativepagetransitions.nextTransition === "flip") {
+					window.plugins.nativepagetransitions.flip(
+						window.plugins.nativepagetransitions.nextOptions,
+						function (msg) {
+							//console.log("success: " + msg);
+						}, // called when the animation has finished
+						function (msg) {
+							alert("error: " + msg);
+						} // called in case you pass in weird values
+					);
 				}
 				window.plugins.nativepagetransitions.nextTransition = null;
 				window.plugins.nativepagetransitions.nextOptions = null;
 				//set a limit on how long we're going to keep the transition waiting, in case something breaks
-				setTimeout(this._cancelTransition, 5000);
+				setTimeout(this._cancelTransition, 10000);
 			}
 
 			return deferred;