diff --git a/app/app.config.js b/app/app.config.js index 4bd07d5..ca0eb4b 100644 --- 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,10 +31,13 @@ $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' }) @@ -41,6 +45,9 @@ .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 index 09f47a2..50ad48d 100644 --- 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 index 84fad0a..9cb7c1a 100644 --- 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 index aef57de..0e0fdf4 100644 --- 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 index 83540c1..6e1cc38 100644 --- 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 index 9e3d182..254059d 100644 --- 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 index d539ea2..0e0f0ca 100644 --- a/config.xml +++ b/config.xml @@ -28,6 +28,7 @@ + diff --git a/grunt/script.js b/grunt/script.js index b97ca35..b9b36e8 100644 --- 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 index 50047d3..459c559 100644 --- 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 index ff8a90b..fed0815 100644 --- 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',