Experimentation with native transitions. Too bad, there is glitches w…

…hen inputs gain focus and the keyboard is shown/hidden.
jeandat · Feb 14, 2016 · 2bcf352 · 2bcf352
1 parent ca12453
commit 2bcf352
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 9 deletions.
diff --git a/app/app.config.js b/app/app.config.js
@@ -7,6 +7,7 @@
         .config(routeConfig)
         .config(localStorageConfig)
         .config(ionicConfig)
+        .config(ionicNativeTransitions)
         .config(httpInterceptors)
         .config(imgCache);
 
@@ -30,17 +31,23 @@
 
         $stateProvider
 
-            // setup an abstract state for the tabs directive
+        // setup an abstract state for the tabs directive
             .state('tab', {
                 url: '/tab',
                 abstract: true,
+                nativeTransitions: {
+                    'type': 'fade'
+                },
                 templateUrl: 'common/layout/layout.jade'
             })
 
             // Each tab has its own nav history stack:
 
             .state('tab.characters', {
                 url: '/characters',
+                nativeTransitions: {
+                    'type': 'fade'
+                },
                 views: {
                     'tab-characters': {
                         templateUrl: 'characters/tab-characters.jade',
@@ -50,7 +57,11 @@
             })
             .state('tab.character-detail', {
                 url: '/characters',
-                params:{
+                nativeTransitions: {
+                    'type': 'slide',
+                    'direction': 'up'
+                },
+                params: {
                     character: {}
                 },
                 views: {
@@ -63,6 +74,9 @@
 
             .state('tab.comics', {
                 url: '/comics',
+                nativeTransitions: {
+                    'type': 'fade'
+                },
                 views: {
                     'tab-comics': {
                         templateUrl: 'comics/tab-comics.jade',
@@ -72,6 +86,10 @@
             })
             .state('tab.comic-detail', {
                 url: '/comics/:comicId',
+                nativeTransitions: {
+                    'type': 'slide',
+                    'direction': 'up'
+                },
                 views: {
                     'tab-comics': {
                         templateUrl: 'comics/comic-detail.jade',
@@ -82,6 +100,9 @@
 
             .state('tab.favourites', {
                 url: '/favourites',
+                nativeTransitions: {
+                    'type': 'fade'
+                },
                 views: {
                     'tab-favourites': {
                         templateUrl: 'favourites/tab-favourites.jade',
@@ -92,6 +113,9 @@
 
             .state('tab.settings', {
                 url: '/settings',
+                nativeTransitions: {
+                    'type': 'fade'
+                },
                 views: {
                     'tab-settings': {
                         templateUrl: 'settings/tab-settings.jade',
@@ -115,12 +139,18 @@
         //$ionicConfigProvider.views.transition('none');
     }
 
+    function ionicNativeTransitions($ionicNativeTransitionsProvider){
+        $ionicNativeTransitionsProvider.setDefaultOptions({
+            backInOppositeDirection: true
+        });
+    }
+
     // ! NOT USED FOR THE MOMENT !
     function httpInterceptors($httpProvider) {
         $httpProvider.interceptors.push('httpInterceptor');
     }
 
-    function imgCache(ImgCacheProvider){
+    function imgCache(ImgCacheProvider) {
         ImgCacheProvider.setOptions({
             debug: true,
             chromeQuota: 50 * 1024 * 1024,

diff --git a/app/app.jade b/app/app.jade
@@ -39,6 +39,7 @@ html
         script(src='js/imgcache.js')
         script(src='js/angular-imgcache.js')
         script(src='@@ngCordovaScript')
+        script(src='js/ionic-native-transitions.js')
 
 
         script(src='js/templates.js')

diff --git a/app/app.module.js b/app/app.module.js
@@ -7,6 +7,7 @@
         'LocalStorageModule',
         'angular-cache',
         'restangular',
-        'ImgCache'
+        'ImgCache',
+        'ionic-native-transitions'
     ]);
 })();
diff --git a/app/characters/character-detail.controller.js b/app/characters/character-detail.controller.js
@@ -5,7 +5,7 @@
         .module('app')
         .controller('CharacterDetailController', CharacterDetailController);
 
-    function CharacterDetailController($log, $stateParams) {
+    function CharacterDetailController($log, $stateParams, $scope, $ionicTabsDelegate) {
 
         var vm = this;
         vm.title = 'CharacterDetailController';
@@ -18,6 +18,16 @@
 
         function activate() {
             $log.debug(vm.title + ' instantiated');
+            $scope.$on('$ionicView.beforeEnter', hideTabs);
+            $scope.$on('$ionicView.beforeLeave', showTabs);
+        }
+
+        function showTabs() {
+            $ionicTabsDelegate.showBar(true);
+        }
+
+        function hideTabs() {
+            $ionicTabsDelegate.showBar(false);
         }
 
         function openDetailPage(){

diff --git a/app/comics/comic-detail.controller.js b/app/comics/comic-detail.controller.js
@@ -5,7 +5,7 @@
         .module('app')
         .controller('ComicDetailController', ComicDetailController);
 
-    function ComicDetailController($log, $stateParams) {
+    function ComicDetailController($log, $stateParams, $scope, $ionicTabsDelegate) {
 
         var vm = this;
         vm.title = 'ComicDetailController';
@@ -17,6 +17,16 @@
 
         function activate() {
             $log.debug(vm.title + ' instantiated');
+            $scope.$on('$ionicView.beforeEnter', hideTabs);
+            $scope.$on('$ionicView.beforeLeave', showTabs);
+        }
+
+        function showTabs() {
+            $ionicTabsDelegate.showBar(true);
+        }
+
+        function hideTabs() {
+            $ionicTabsDelegate.showBar(false);
         }
 
     }

diff --git a/bower.json b/bower.json
@@ -12,7 +12,8 @@
     "karma-read-json": "^1.1.0",
     "restangular": "^1.5.1",
     "angular-imgcache": "angular-imgcache.js#^0.1.0",
-    "imgcache.js": "^1.0.0"
+    "imgcache.js": "^1.0.0",
+    "ionic-native-transitions": "shprink/ionic-native-transitions#^1.0.0-rc9"
   },
   "resolutions": {
     "angular": "~1.5.0"

diff --git a/config.xml b/config.xml
@@ -28,6 +28,7 @@
   <platform name="android">
     <preference name="SplashShowOnlyFirstTime" value="false"/>
     <preference name="SplashScreenDelay" value="500000"/>
+    <preference name="CrosswalkAnimatable" value="true"/>
     <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
     <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
     <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>

diff --git a/grunt/script.js b/grunt/script.js
@@ -25,7 +25,8 @@ module.exports = function () {
                             'angular-cache/dist/angular-cache.js',
                             'restangular/dist/restangular.js',
                             'imgcache.js/js/imgcache.js',
-                            'angular-imgcache/angular-imgcache.js'
+                            'angular-imgcache/angular-imgcache.js',
+                            'ionic-native-transitions/dist/ionic-native-transitions.js'
                         ],
                         expand: true,
                         cwd: 'vendor',

diff --git a/package.json b/package.json
@@ -60,7 +60,11 @@
     },
     "cordova-plugin-file-transfer",
     "cordova-plugin-file",
-    "cordova-plugin-inappbrowser"
+    "cordova-plugin-inappbrowser",
+    {
+      "locator": "https://github.com/Telerik-Verified-Plugins/NativePageTransitions",
+      "id": "com.telerik.plugins.nativepagetransitions"
+    }
   ],
   "cordovaPlatforms": [
     "android",

diff --git a/test/karma.conf.js b/test/karma.conf.js
@@ -23,6 +23,7 @@ module.exports = function (config) {
             'www/js/restangular.js',
             'www/js/imgcache.js',
             'www/js/angular-imgcache.js',
+            'www/js/ionic-native-transitions.js',
             // app
             'www/js/templates.js',
             '.tmp/**/*.module.js',