navigation examples migration into Core frame examples

phoenix503 · Nov 28, 2018 · a6d8236 · a6d8236
1 parent cd9858c
commit a6d8236
Show file tree

Hide file tree

Showing 5 changed files with 303 additions and 3 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -218,7 +218,7 @@
             "error",
             "never"
         ],
-        "wrap-iife": "error",
+        "wrap-iife": "off",
         "wrap-regex": "error",
         "yield-star-spacing": "error",
         "yoda": [

diff --git a/app/home/first-page.js b/app/home/first-page.js
@@ -65,4 +65,125 @@ exports.navigateWithTransition = function() {
         };
         frame.navigate(navigationEntry);
         // << frame-navigate-transitions
+
+        // >> frame-navigate-default-transition
+        // const getFrameById = require("tns-core-modules/ui/frame").getFrameById;
+        // const myFrame = getFrameById("firstFrame");
+        myFrame.transition = { name: "flip" };
+        myFrame.navigate("main-page");
+        // << frame-navigate-default-transition
+
+        // >> frame-navigate-defailt-transition-app
+        // const frameModule = require("tns-core-modules/ui/frame");
+        frameModule.Frame.defaultTransition = { name: "fade" };
+        // << frame-navigate-defailt-transition-app
+};
+
+
+exports.navigatePlatformSpecificTransitions = function() {
+    // >> frame-navigate-platform-specific-transitions
+    const navigationEntry = {
+        moduleName: "main-page",
+        animated: true,
+        // Set up platform specific transitions.
+        transitioniOS: {
+            name: "curl",
+            duration: 380,
+            curve: "easeIn"
+        },
+        transitionAndroid: {
+            name: "explode",
+            duration: 300,
+            curve: "easeOut"
+        }
+    };
+    const frame = getFrameById("my-frame");
+    frame.navigate(navigationEntry);
+    // << frame-navigate-platform-specific-transitions
+};
+
+// >> frame-navigate-custom-transitions-android-ts
+const transition = require("tns-core-modules/ui/transition");
+const floatType = java.lang.Float.class.getField("TYPE").get(null);
+const CustomTransition = (function (_super) {
+    __extends(CustomTransition, _super);
+    function CustomTransition() {
+        _super.apply(this, arguments);
+    }
+    CustomTransition.prototype.createAndroidAnimator = function(transitionType) {
+        const scaleValues = java.lang.reflect.Array.newInstance(floatType, 2);
+        switch (transitionType) {
+            case transition.AndroidTransitionType.enter:
+            case transition.AndroidTransitionType.popEnter:
+                scaleValues[0] = 0;
+                scaleValues[1] = 1;
+                break;
+            case transition.AndroidTransitionType.exit:
+            case transition.AndroidTransitionType.popExit:
+                scaleValues[0] = 1;
+                scaleValues[1] = 0;
+                break;
+            default:
+                break;
+        }
+        const objectAnimators = java.lang.reflect.Array.newInstance(android.animation.Animator.class, 2);
+        objectAnimators[0] = android.animation.ObjectAnimator.ofFloat(null, "scaleX", scaleValues);
+        objectAnimators[1] = android.animation.ObjectAnimator.ofFloat(null, "scaleY", scaleValues);
+        const animatorSet = new android.animation.AnimatorSet();
+        animatorSet.playTogether(objectAnimators);
+        const duration = this.getDuration();
+        if (duration !== undefined) {
+            animatorSet.setDuration(duration);
+        }
+        animatorSet.setInterpolator(this.getCurve());
+
+        return animatorSet;
+    };
+
+    return CustomTransition;
+})(transition.Transition);
+exports.CustomTransition = CustomTransition;
+// << frame-navigate-custom-transitions-android-ts
+
+// >> frame-navigate-custom-transitions-ios-ts
+// const transition = require("tns-core-modules/ui/transition");
+const CustomTransitionIOS = (function (_super) {
+    __extends(CustomTransition, _super);
+    function CustomTransition() {
+        _super.apply(this, arguments);
+    }
+    CustomTransition.prototype.animateIOSTransition = function(containerView, fromView, toView, operation, completion) {
+        toView.transform = CGAffineTransformMakeScale(0, 0);
+        fromView.transform = CGAffineTransformIdentity;
+        switch (operation) {
+            case UINavigationControllerOperation.UINavigationControllerOperationPush:
+                containerView.insertSubviewAboveSubview(toView, fromView);
+                break;
+            case UINavigationControllerOperation.UINavigationControllerOperationPop:
+                containerView.insertSubviewBelowSubview(toView, fromView);
+                break;
+            default:
+                break;
+        }
+        const duration = this.getDuration();
+        const curve = this.getCurve();
+        UIView.animateWithDurationAnimationsCompletion(duration, () => {
+            UIView.setAnimationCurve(curve);
+            toView.transform = CGAffineTransformIdentity;
+            fromView.transform = CGAffineTransformMakeScale(0, 0);
+        }, completion);
+    };
+
+    return CustomTransitionIOS;
+})(transition.Transition);
+exports.CustomTransitionIOS = CustomTransitionIOS;
+// << frame-navigate-custom-transitions-ios-ts
+
+
+exports.goBack = function() {
+    // >> frame-navigate-go-back
+    // const getFrameById = require("tns-core-modules/ui/frame").getFrameById;
+    const myFrame = getFrameById("my-frame");
+    myFrame.goBack();
+    // << frame-navigate-go-back
 };
diff --git a/app/home/first-ts-page.ts b/app/home/first-ts-page.ts
@@ -1,4 +1,6 @@
 import { AnimationCurve } from "tns-core-modules/ui/enums";
+import * as frameModule from "tns-core-modules/ui/frame";
+import { isAndroid, isIOS } from "tns-core-modules/platform";
 
 // >> frame-navigate-base-ts
 import { getFrameById } from "tns-core-modules/ui/frame";
@@ -74,5 +76,130 @@ export function navigateWithTransition() {
     };
     frame.navigate(navigationEntry);
     // << frame-navigate-transitions-ts
+
+
+    // >> frame-navigate-default-transition-ts
+    // const getFrameById = require("tns-core-modules/ui/frame").getFrameById;
+    // const frame = getFrameById("firstFrame");
+    frame.transition = { name: "flip" };
+    frame.navigate("main-page");
+    // << frame-navigate-default-transition-ts
+
+    // >> frame-navigate-defailt-transition-app-ts
+    // import * as frameModule from "tns-core-modules/ui/frame";
+    frameModule.Frame.defaultTransition = { name: "fade" };
+    // << frame-navigate-defailt-transition-app-ts
+}
+
+export function navigatePlatformSpecificTransitions() {
+    // >> frame-navigate-platform-specific-transitions-ts
+    const navigationEntry: NavigationEntry = {
+        moduleName: "main-page",
+        animated: true,
+        // Set up platform specific transitions.
+        transitioniOS: {
+            name: "curl",
+            duration: 380,
+            curve: AnimationCurve.easeInOut
+        },
+        transitionAndroid: {
+            name: "explode",
+            duration: 300,
+            curve: AnimationCurve.spring
+        }
+    };
+    const frame = getFrameById("my-frame");
+    frame.navigate(navigationEntry);
+    // << frame-navigate-platform-specific-transitions-ts
+}
+
+// >> frame-navigate-custom-transitions-ios-ts
+// import { Transition } from "tns-core-modules/ui/transition";
+declare let UINavigationControllerOperation: any; // or use tns-platform-declarations
+
+export class CustomTransitionIOS extends Transition {
+    public animateIOSTransition(containerView: UIView,
+                                fromView: UIView,
+                                toView: UIView,
+                                operation: UINavigationControllerOperation,
+                                completion: (finished: boolean) => void): void {
+        const originalToViewTransform = toView.transform;
+        const originalFromViewTransform = fromView.transform;
+
+        // http://stackoverflow.com/questions/216076/uiview-scale-to-0-using-cgaffinetransformmakescale
+        const scaleTransform = CGAffineTransformMakeScale(0.0001, 0.0001);
+
+        toView.transform = scaleTransform;
+        fromView.transform = CGAffineTransformIdentity;
+
+        switch (operation) {
+            case UINavigationControllerOperation.UINavigationControllerOperationPush:
+                containerView.insertSubviewAboveSubview(toView, fromView);
+                break;
+            case UINavigationControllerOperation.UINavigationControllerOperationPop:
+                containerView.insertSubviewBelowSubview(toView, fromView);
+                break;
+            default:
+                break;
+        }
+
+        const duration = this.getDuration();
+        const curve = this.getCurve();
+        UIView.animateWithDurationAnimationsCompletion(duration, () => {
+            UIView.setAnimationCurve(curve);
+            toView.transform = CGAffineTransformIdentity;
+            fromView.transform = scaleTransform;
+        }, (finished: boolean) => {
+            toView.transform = originalToViewTransform;
+            fromView.transform = originalFromViewTransform;
+            completion(finished);
+        });
+    }
+}
+// << frame-navigate-custom-transitions-ios-ts
+
+// >> frame-navigate-custom-transitions-android-ts
+import { Transition, AndroidTransitionType } from "tns-core-modules/ui/transition";
+export class CustomTransition extends Transition {
+    public createAndroidAnimator(transitionType: string): android.animation.Animator {
+        const scaleValues = (<any>Array).create("float", 2);
+        switch (transitionType) {
+            case AndroidTransitionType.enter:
+            case AndroidTransitionType.popEnter:
+                scaleValues[0] = 0;
+                scaleValues[1] = 1;
+                break;
+            case AndroidTransitionType.exit:
+            case AndroidTransitionType.popExit:
+                scaleValues[0] = 1;
+                scaleValues[1] = 0;
+                break;
+            default:
+                break;
+        }
+        const objectAnimators = (<any>Array).create(android.animation.Animator, 2);
+        objectAnimators[0] = android.animation.ObjectAnimator.ofFloat(null, "scaleX", scaleValues);
+        objectAnimators[1] = android.animation.ObjectAnimator.ofFloat(null, "scaleY", scaleValues);
+
+        const animatorSet = new android.animation.AnimatorSet();
+        animatorSet.playTogether(objectAnimators);
+
+        const duration = this.getDuration();
+        if (duration !== undefined) {
+            animatorSet.setDuration(duration);
+        }
+
+        animatorSet.setInterpolator(this.getCurve());
+        return animatorSet;
+    }
+}
+// << frame-navigate-custom-transitions-android-ts
+
+export function goBack() {
+    // >> frame-navigate-go-back-ts
+    // import { getFrameById } from "tns-core-modules/ui/frame";
+    const myFrame = getFrameById("my-frame");
+    myFrame.goBack();
+    // << frame-navigate-go-back-ts
 }
 
diff --git a/app/ns-ui-widgets-category/frame/basic-navigation/article.md b/app/ns-ui-widgets-category/frame/basic-navigation/article.md
@@ -40,7 +40,9 @@ This will prevent the user from going back to pages previously visited. This is
 
 ### Navigation transitions
 
-By default, all navigation will be animated and will use the default transition for the respective platform (`UINavigationController` transitions for iOS and Fragment transitions for Android). To change the transition type, set the `navigationTransition` property of the `NavigationEntry` to an object conforming to the [`NavigationTransition`](https://docs.nativescript.org/api-reference/interfaces/_ui_frame_.navigationtransition) interface. The `NavigationTransition` interface has four optional properties:
+####  Transition properties 
+
+By default, all navigation will be animated and will use the default transition for the respective platform (`UINavigationController` transitions for iOS and `Fragment` transitions for Android). To change the transition type, set the `navigationTransition` property of the `NavigationEntry` to an object conforming to the [`NavigationTransition`](https://docs.nativescript.org/api-reference/interfaces/_ui_frame_.navigationtransition) interface. The `NavigationTransition` interface has four optional properties:
 
 - [curve](https://docs.nativescript.org/api-reference/interfaces/_ui_frame_.navigationtransition#curve) - An optional transition animation curve. Possible values are contained in the [`AnimationCurve`](https://docs.nativescript.org/api-reference/modules/_ui_enums_.animationcurve) enumeration. Alternatively, you can pass an instance of type UIViewAnimationCurve for iOS or android.animation.TimeInterpolator for Android.
 - [duration](https://docs.nativescript.org/api-reference/interfaces/_ui_frame_.navigationtransition#duration) - The length of the transition in milliseconds. If you do not specify this, the default platform transition duration will be used.
@@ -61,4 +63,53 @@ By default, all navigation will be animated and will use the default transition
     * slideBottom
 
 <snippet id='frame-navigate-transitions'/>
-<snippet id='frame-navigate-transitions-ts'/>
+<snippet id='frame-navigate-transitions-ts'/>
+
+#### Default transition for specific Frame
+
+To specify a default transition for all frame navigations, set the transition property of the frame you are navigating with.
+
+<snippet id='frame-navigate-default-transition'/>
+<snippet id='frame-navigate-default-transition-ts'/>
+
+#### Default transition for the application
+
+To specify a default transition for all navigations across the entire app, set the static `defaultTransition` property of the `Frame` class.
+
+<snippet id='frame-navigate-defailt-transition-app'/>
+<snippet id='frame-navigate-defailt-transition-app-ts'/>
+
+#### Platform-specific transitions
+
+To specify different transitions for the different platforms use the `transitioniOS` and `transitionAndroid` properties of the `NavigationEntry`.
+
+<snippet id='frame-navigate-platform-specific-transitions'/>
+<snippet id='frame-navigate-platform-specific-transitions-ts'/>
+
+#### Custom Transitions
+
+Instead of setting the name property to one of the predefined transitions, you can set the instance property of the `NavigationTransition` to an instance of a class that inherits from `Transition`. 
+You can create your custom user-defined transition by writing platform-specific code to animate the transition. 
+To do that you need to inherit from the `Transition` class and override one method for each platform. 
+Since there will be platform-specific code, you need to separate your code into two separate files. 
+Here is an example of a custom transition that shrinks the disappearing page while expanding the appearing page by using a scale affine transform.
+
+> **NOTE:** The following example uses native APIs. When using TypeScript, you need to add a dev dependency to the [`tns-platform-declarations`](https://www.npmjs.com/package/tns-platform-declarations) package to use these native APIs without compiler errors. 
+For more information, see the Intellisense and access to native APIs via TypeScript section.
+
+_custom-transition.android.js/ts_
+<snippet id='frame-navigate-custom-transitions-android'/>
+<snippet id='frame-navigate-custom-transitions-android-ts'/>
+
+_custom-transition.ios.js/ts_
+<snippet id='frame-navigate-custom-transitions-ios'/>
+<snippet id='frame-navigate-custom-transitions-ios-ts'/>
+
+### Navigate Back
+
+Each frame tracks the pages the user has visited in a navigation stack. To go back to a previous page, 
+you need to use the [`goBack`](https://docs.nativescript.org/api-reference/classes/_ui_frame_.frame#goback) method of the current frame instance.
+To veify that back navigation is possible, you can use the [`canGoBack`](https://docs.nativescript.org/api-reference/classes/_ui_frame_.frame#cangoback) boolean property.
+
+<snippet id='frame-navigate-go-back'/>
+<snippet id='frame-navigate-go-back-ts'/>
diff --git a/scripts/build.js b/scripts/build.js
@@ -7,6 +7,7 @@ var glob = require("glob");
 var rimraf = require("rimraf");
 var pjson = require('../package.json');
 var child_process = require('child_process');
+var tar = require('tar');
 
 const CATEGORY = "-category";