#226 - kung-fu native transitions

Former-commit-id: 78e74ddfc0db6458a7dfd1af0fb5ca9acf3abacd

5 files changed, 468 insertions, 0 deletions

diff --git a/www/lib/ionic-native-transitions/test/angular-ios9-uiwebview.patch.js b/www/lib/ionic-native-transitions/test/angular-ios9-uiwebview.patch.js
new file mode 100644
index 00000000..58d8be10
--- /dev/null
+++ b/www/lib/ionic-native-transitions/test/angular-ios9-uiwebview.patch.js
@@ -0,0 +1,75 @@
+/**
+ * ==================  angular-ios9-uiwebview.patch.js v1.1.1 ==================
+ *
+ * This patch works around iOS9 UIWebView regression that causes infinite digest
+ * errors in Angular.
+ *
+ * The patch can be applied to Angular 1.2.0 – 1.4.5. Newer versions of Angular
+ * have the workaround baked in.
+ *
+ * To apply this patch load/bundle this file with your application and add a
+ * dependency on the "ngIOS9UIWebViewPatch" module to your main app module.
+ *
+ * For example:
+ *
+ * ```
+ * angular.module('myApp', ['ngRoute'])`
+ * ```
+ *
+ * becomes
+ *
+ * ```
+ * angular.module('myApp', ['ngRoute', 'ngIOS9UIWebViewPatch'])
+ * ```
+ *
+ *
+ * More info:
+ * - https://openradar.appspot.com/22186109
+ * - https://github.com/angular/angular.js/issues/12241
+ * - https://github.com/driftyco/ionic/issues/4082
+ *
+ *
+ * @license AngularJS
+ * (c) 2010-2015 Google, Inc. http://angularjs.org
+ * License: MIT
+ */
+
+angular.module('ngIOS9UIWebViewPatch', ['ng']).config(['$provide', function($provide) {
+  'use strict';
+
+  $provide.decorator('$browser', ['$delegate', '$window', function($delegate, $window) {
+
+    if (isIOS9UIWebView($window.navigator.userAgent)) {
+      return applyIOS9Shim($delegate);
+    }
+
+    return $delegate;
+
+    function isIOS9UIWebView(userAgent) {
+      return /(iPhone|iPad|iPod).* OS 9_\d/.test(userAgent) && !/Version\/9\./.test(userAgent);
+    }
+
+    function applyIOS9Shim(browser) {
+      var pendingLocationUrl = null;
+      var originalUrlFn= browser.url;
+
+      browser.url = function() {
+        if (arguments.length) {
+          pendingLocationUrl = arguments[0];
+          return originalUrlFn.apply(browser, arguments);
+        }
+
+        return pendingLocationUrl || originalUrlFn.apply(browser, arguments);
+      };
+
+      window.addEventListener('popstate', clearPendingLocationUrl, false);
+      window.addEventListener('hashchange', clearPendingLocationUrl, false);
+
+      function clearPendingLocationUrl() {
+        pendingLocationUrl = null;
+      }
+
+      return browser;
+    }
+  }]);
+}]);
diff --git a/www/lib/ionic-native-transitions/test/config.js b/www/lib/ionic-native-transitions/test/config.js
new file mode 100644
index 00000000..2aa38109
--- /dev/null
+++ b/www/lib/ionic-native-transitions/test/config.js
@@ -0,0 +1,119 @@
+export default function($ionicNativeTransitionsProvider, $stateProvider, $urlRouterProvider, $ionicConfigProvider) {
+    'ngInject';
+    $ionicNativeTransitionsProvider.setDefaultOptions({
+        duration: 500,
+        // backInOppositeDirection: true
+    });
+
+    $ionicNativeTransitionsProvider.setDefaultTransition({
+        type: 'flip',
+        direction: 'left'
+    });
+
+    $ionicNativeTransitionsProvider.setDefaultBackTransition({
+        type: 'slide',
+        direction: 'right'
+    });
+
+    $ionicNativeTransitionsProvider.enable(false);
+
+    $ionicConfigProvider.tabs.position('top');
+
+    $stateProvider
+        .state('tabs', {
+            url: "/tab",
+            abstract: true,
+            templateUrl: "templates/tabs.html"
+        })
+        .state('tabs.home', {
+            url: "/home",
+            nativeTransitions: null,
+            views: {
+                'home-tab': {
+                    templateUrl: "templates/home.html"
+                }
+            }
+        })
+        .state('one', {
+            url: "/one",
+            nativeTransitions: {
+                "type": "flip",
+                "direction": "up"
+            },
+            nativeTransitionsAndroid: {
+                "type": "flip",
+                "direction": "right"
+            },
+            nativeTransitionsBackAndroid: {
+                "type": "flip",
+                "direction": "left"
+            },
+            nativeTransitionsIOS: {
+                "type": "flip",
+                "direction": "left"
+            },
+            nativeTransitionsWindowsPhone: {
+                "type": "flip",
+                "direction": "down"
+            },
+            templateUrl: "templates/one.html"
+        })
+        .state('two', {
+            url: "/two",
+            nativeTransitions: {
+                type: "fade"
+            },
+            nativeTransitionsIOS: {
+                "type": "flip",
+                "direction": "down" // 'left|right|up|down', default 'right' (Android currently only supports left and right)
+            },
+            templateUrl: "templates/two.html"
+        })
+        .state('three', {
+            url: "/three",
+            nativeTransitions: {
+                type: "fade"
+            },
+            nativeTransitionsAndroid: {
+                "type": "slide",
+                "direction": "up" // 'left|right|up|down', default 'right' (Android currently only supports left and right)
+            },
+            nativeTransitionsBackAndroid: {
+                "type": "slide",
+                "direction": "down" // 'left|right|up|down', default 'right' (Android currently only supports left and right)
+            },
+            templateUrl: "templates/three.html"
+        })
+        .state('four', {
+            url: "/four?testParamUrl",
+            params: {
+                test: null
+            },
+            templateUrl: "templates/four.html",
+            controller: function($stateParams){
+                'ngInject';
+                console.log('$stateParams', $stateParams);
+            }
+        })
+        .state('tabs.about', {
+            url: "/about",
+            nativeTransitions: null,
+            views: {
+                'about-tab': {
+                    templateUrl: "templates/about.html"
+                }
+            }
+        })
+        .state('tabs.contact', {
+            url: "/contact",
+            nativeTransitions: null,
+            views: {
+                'contact-tab': {
+                    templateUrl: "templates/contact.html"
+                }
+            }
+        });
+
+
+    $urlRouterProvider.otherwise("/tab/home");
+}
diff --git a/www/lib/ionic-native-transitions/test/controller.js b/www/lib/ionic-native-transitions/test/controller.js
new file mode 100644
index 00000000..a994d5ff
--- /dev/null
+++ b/www/lib/ionic-native-transitions/test/controller.js
@@ -0,0 +1,96 @@
+export default function(
+    $scope,
+    $rootScope,
+    $log,
+    $ionicNativeTransitions,
+    $ionicModal,
+    $ionicPlatform,
+    $ionicHistory
+) {
+
+    'ngInject';
+
+    var vm = this;
+    vm.modal = null;
+    vm.isEnable = $ionicNativeTransitions.isEnabled();
+    vm.enable = enable;
+    vm.disable = disable;
+    vm.stateGo = stateGo;
+    vm.locationUrl = locationUrl;
+    vm.disableWithoutDisablingIonicTransitions = disableWithoutDisablingIonicTransitions;
+    vm.openModal = openModal;
+    vm.goBack = goBack;
+
+    $rootScope.$on('ionicNativeTransitions.success', function() {
+        $log.info('yeah!');
+    });
+
+    $rootScope.$on('ionicNativeTransitions.error', function() {
+        $log.info(':(');
+    });
+
+    function openModal() {
+        if (vm.modal) {
+            vm.modal.show();
+            return;
+        }
+        vm.modal = $ionicModal.fromTemplate(`
+            <ion-modal-view>
+                <ion-header-bar>
+                    <h1 class="title">Modal</h1>
+                    <button class="button button-clear button-assertive" ng-click="close()">
+                        <i class="icon ion-close"></i>
+                    </button>
+                </ion-header-bar>
+                <ion-content class="has-footer has-footer padding">
+                    modal
+                </ion-content>
+            </ion-modal-view>
+            `, {
+            scope: $rootScope.$new(),
+        });
+        vm.modal.show();
+        vm.modal.scope.close = () => {
+            console.log('modal close', JSON.stringify($ionicPlatform.$backButtonActions))
+            vm.modal.remove();
+            vm.modal = null;
+        };
+    }
+
+    function enable() {
+        $ionicNativeTransitions.enable();
+        vm.isEnable = $ionicNativeTransitions.isEnabled();
+    }
+
+    function disable() {
+        $ionicNativeTransitions.enable(false);
+        vm.isEnable = $ionicNativeTransitions.isEnabled();
+    }
+
+    function disableWithoutDisablingIonicTransitions() {
+        $ionicNativeTransitions.enable(false, true);
+        vm.isEnable = $ionicNativeTransitions.isEnabled();
+    }
+
+    function stateGo() {
+        $ionicNativeTransitions.stateGo('four', {
+            test: 'buyakacha!',
+            testParamUrl: 'hihi'
+        }, {
+            "type": "slide",
+            "direction": "up", // 'left|right|up|down', default 'left' (which is like 'next')
+            "duration": 1500, // in milliseconds (ms), default 400
+        }, {
+            reload: true
+        });
+    }
+
+    function locationUrl() {
+        $ionicNativeTransitions.locationUrl('/three');
+    }
+
+    function goBack(count) {
+        console.log('count', count, $ionicHistory.viewHistory())
+        $rootScope.$ionicGoBack(count);
+    }
+}
diff --git a/www/lib/ionic-native-transitions/test/index.html b/www/lib/ionic-native-transitions/test/index.html
new file mode 100644
index 00000000..64c84fc5
--- /dev/null
+++ b/www/lib/ionic-native-transitions/test/index.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+        <title>{%=o.htmlWebpackPlugin.options.pkg.title %}</title>
+        <!-- cordova script (this will be a 404 during development) -->
+        <script src="cordova.js"></script>
+    </head>
+
+    <body ng-app="test" ng-strict-di ng-controller="MainController as main">
+        <ion-side-menus enable-menu-with-back-views="true">
+            <ion-side-menu-content>
+                <ion-nav-bar class="bar-positive">
+                    <ion-nav-back-button class="button-icon ion-arrow-left-c">
+                    </ion-nav-back-button>
+                    <ion-nav-buttons side="left">
+                        <button menu-toggle="left" class="button button-clear">
+                            <i class="icon ion-navicon-round"></i>
+                        </button>
+                    </ion-nav-buttons>
+                    <ion-nav-buttons side="right">
+                        <button class="button button-clear" ng-click="main.openModal()">
+                            <i class="icon ion-open"></i> Modal
+                        </button>
+                    </ion-nav-buttons>
+                </ion-nav-bar>
+                <ion-nav-view></ion-nav-view>
+            </ion-side-menu-content>
+            <ion-side-menu side="left" ui-view="menu"></ion-side-menu>
+        </ion-side-menus>
+
+        <script id="templates/tabs.html" type="text/ng-template">
+            <ion-tabs class="tabs-icon-top tabs-positive">
+
+                <ion-tab title="Home" icon="ion-home" ui-sref="tabs.home" ui-sref-opts="{inherit:false}">
+                    <ion-nav-view name="home-tab"></ion-nav-view>
+                </ion-tab>
+
+                <ion-tab title="About" icon="ion-ios-football" ui-sref="tabs.about">
+                    <ion-nav-view name="about-tab"></ion-nav-view>
+                </ion-tab>
+
+                <ion-tab title="Contact" icon="ion-bag" ui-sref="tabs.contact">
+                    <ion-nav-view name="contact-tab"></ion-nav-view>
+                </ion-tab>
+
+                </ion-tab>
+
+            </ion-tabs>
+        </script>
+
+        <script id="templates/home.html" type="text/ng-template">
+            <ion-view view-title="Home">
+                <ion-content class="">
+                    <p>
+                        <a class="button button-full button-large icon icon-right ion-chevron-right" ui-sref="one">Start</a>
+                    </p>
+                    Is enabled: {{main.isEnable}}
+                    <a class="button button-full button-large icon icon-right ion-chevron-right" ng-click="main.enable()">Enable plugin</a>
+
+                    <a class="button button-full button-large icon icon-right ion-chevron-right" ng-click="main.disable()">Disable plugin</a>
+                    <a class="button button-full button-large icon icon-right ion-chevron-right" ng-click="main.disableWithoutDisablingIonicTransitions()">Disable plugin and ionic transitions</a>
+                    <a class="button button-full button-large icon icon-right ion-chevron-right" ng-click="main.stateGo()">StateGo</a>
+                    <button class="button button-full button-large icon icon-right ion-chevron-right" native-ui-sref="four({test: 'buyakacha2!', testParamUrl: 'haha'})" native-ui-sref-opts="{inherit:false}" native-options="{type: 'slide', direction:'down'}">
+                        StateGo via directive
+                    </button>
+                    <button class="button button-full button-large icon icon-right ion-chevron-right" native-ui-sref="four" native-ui-sref-opts="{inherit:false}">
+                        StateGo via directive without native-options
+                    </button>
+                    <a class="button button-full button-large icon icon-right ion-chevron-right" ng-click="main.locationUrl()">LocationUrl</a>
+                </ion-content>
+            </ion-view>
+        </script>
+
+        <script id="templates/one.html" type="text/ng-template">
+            <ion-view view-title="One">
+                <ion-nav-buttons side="left">
+                    <button class="button button-clear" native-ui-sref="tabs.home" native-ui-sref-opts="{reload: true}" native-options="{type: 'slide', direction:'down'}">
+                        <i class="icon ion-arrow-left-c"></i> Custom back
+                    </button>
+                </ion-nav-buttons>
+                <ion-content class="">
+                    <p>
+                        <a class="button button-full button-large icon icon-right ion-chevron-right" ui-sref="two">Two</a>
+                    </p>
+                </ion-content>
+            </ion-view>
+        </script>
+
+        <script id="templates/two.html" type="text/ng-template">
+            <ion-view view-title="Two">
+                <ion-content class="">
+                    <p>
+                        <a class="button button-full button-large icon icon-right ion-chevron-right" ui-sref="three">Three</a>
+                    </p>
+                </ion-content>
+            </ion-view>
+        </script>
+
+        <script id="templates/three.html" type="text/ng-template">
+            <ion-view view-title="Three">
+                <ion-content class="">
+                    <p>
+                        <a class="button button-full button-large icon icon-right ion-chevron-right" ui-sref="four">Four</a>
+                        <a class="button" ng-click="main.goBack()">Go back</a>
+                        <a class="button" ng-click="main.goBack(-1)">Go back 1 states</a>
+                        <a class="button" ng-click="main.goBack(-2)">Go back 2 states</a>
+                        <a class="button" ng-click="main.goBack(-3)">Go back 3 states</a>
+                        <a class="button" ng-click="main.goBack(-10)">Go back 10 states</a>
+                    </p>
+                </ion-content>
+            </ion-view>
+        </script>
+
+        <script id="templates/four.html" type="text/ng-template">
+            <ion-view view-title="Four">
+                <ion-content class="">
+                </ion-content>
+            </ion-view>
+        </script>
+
+        <script id="templates/about.html" type="text/ng-template">
+            <ion-view view-title="About">
+                <ion-content class="padding">
+                    <h3>Create hybrid mobile apps with the web technologies you love.</h3>
+                    <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
+                    <p>Built with Sass and optimized for AngularJS.</p>
+                </ion-content>
+            </ion-view>
+        </script>
+
+        <script id="templates/contact.html" type="text/ng-template">
+            <ion-view title="Contact">
+                <ion-content>
+                    <div class="list">
+                        <a class="item" href="https://twitter.com/julienrenaux">
+                            @julienrenaux
+                        </a>
+                        <div class="item">
+                            @IonicFramework
+                        </div>
+                        <div class="item">
+                            @DriftyTeam
+                        </div>
+                    </div>
+                </ion-content>
+            </ion-view>
+        </script>
+
+        {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %}
+        <script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script>
+        {% } %}
+    </body>
+
+</html>
diff --git a/www/lib/ionic-native-transitions/test/index.js b/www/lib/ionic-native-transitions/test/index.js
new file mode 100644
index 00000000..e7176887
--- /dev/null
+++ b/www/lib/ionic-native-transitions/test/index.js
@@ -0,0 +1,21 @@
+import 'ionic-sdk/release/js/ionic.bundle';
+import 'ionic-sdk/release/css/ionic.css';
+import '../dist/ionic-native-transitions.js';
+import './angular-ios9-uiwebview.patch.js';
+import Config from './config.js';
+import Controller from './controller.js';
+
+let mod = angular.module('test', [
+    'ionic',
+    'ui.router',
+    'ionic-native-transitions',
+    'ngIOS9UIWebViewPatch'
+]);
+
+mod.config(Config);
+mod.controller('MainController', Controller);
+mod.run(($log) => {
+    $log.info('test running');
+});
+
+export default mod = mod.name;