feat(platforms): Android and iOS Specific Styles and Transitions

ionic-team · Jun 11, 2014 · c30be67 · adamdbradley · Jun 16, 2014 · c30be67
1 parent 8476f0c
commit c30be67
Show file tree

Hide file tree

Showing 19 changed files with 828 additions and 112 deletions.
diff --git a/config/lib/testutil.js b/config/lib/testutil.js
@@ -38,5 +38,20 @@ var TestUtil = {
       }
     };
     return timeout;
+  },
+
+  setPlatform: function(platformName) {
+    switch(platformName) {
+      case 'ios':
+        ionic.Platform.ua = 'Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25';
+        ionic.Platform.setPlatform('ios');
+        ionic.Platform.setVersion(null);
+        break;
+      case 'android':
+        ionic.Platform.ua = 'Mozilla/5.0 (Linux; U; Android 2.2.1; fr-ch; A43 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1';
+        ionic.Platform.setPlatform('android');
+        ionic.Platform.setVersion(undefined);
+        break;
+    }
   }
 };
diff --git a/js/angular/directive/navBackButton.js b/js/angular/directive/navBackButton.js
@@ -64,7 +64,11 @@ IonicModule
 .directive('ionNavBackButton', [
   '$animate',
   '$rootScope',
-function($animate, $rootScope) {
+  '$sanitize',
+
+  '$ionicNavBarConfig',
+
+function($animate, $rootScope, $sanitize, $ionicNavBarConfig) {
   var backIsShown = false;
   //If the current viewstate does not allow a back button,
   //always hide it.
@@ -76,7 +80,15 @@ function($animate, $rootScope) {
     require: '^ionNavBar',
     compile: function(tElement, tAttrs) {
       tElement.addClass('button back-button ng-hide');
+
       return function($scope, $element, $attr, navBarCtrl) {
+        console.log($attr.textFromTitle);
+
+        // Add a default back button icon based on the nav config, unless one is set
+        if($element[0].className.indexOf('ion-') < 0) {
+          $element.addClass($ionicNavBarConfig.backButtonIcon);
+        }
+
         if (!$attr.ngClick) {
           $scope.$navBack = navBarCtrl.back;
           $element.on('click', function(event){
@@ -85,10 +97,12 @@ function($animate, $rootScope) {
             });
           });
         }
-
         //Make sure both that a backButton is allowed in the first place,
         //and that it is shown by the current view.
         $scope.$watch(function() {
+          if(isDefined($attr.fromTitle)) {
+            $element[0].innerHTML = '<span class="back-button-title">' + $sanitize($scope.oldTitle) + '</span>';
+          }
           return !!(backIsShown && $scope.backButtonShown);
         }, ionic.animationFrameThrottle(function(show) {
           if (show) $animate.removeClass($element, 'ng-hide');

diff --git a/js/angular/directive/navBar.js b/js/angular/directive/navBar.js
@@ -1,4 +1,10 @@
 
+IonicModule.constant('$ionicNavBarConfig', {
+  transition: 'nav-title-slide-ios7',
+  alignTitle: 'center',
+  backButtonIcon: 'ion-ios7-arrow-back'
+});
+
 /**
  * @ngdoc directive
  * @name ionNavBar
@@ -78,7 +84,8 @@ IonicModule
   '$rootScope',
   '$animate',
   '$compile',
-function($ionicViewService, $rootScope, $animate, $compile) {
+  '$ionicNavBarConfig',
+function($ionicViewService, $rootScope, $animate, $compile, $ionicNavBarConfig) {
 
   return {
     restrict: 'E',
@@ -87,7 +94,7 @@ function($ionicViewService, $rootScope, $animate, $compile) {
     compile: function(tElement, tAttrs) {
       //We cannot transclude here because it breaks element.data() inheritance on compile
       tElement
-        .addClass('bar bar-header nav-bar')
+        .addClass('bar bar-header nav-bar ' + $ionicNavBarConfig.transition)
         .append(
           '<div class="buttons left-buttons"> ' +
           '</div>' +
@@ -100,7 +107,7 @@ function($ionicViewService, $rootScope, $animate, $compile) {
       function prelink($scope, $element, $attr, navBarCtrl) {
         navBarCtrl._headerBarView = new ionic.views.HeaderBar({
           el: $element[0],
-          alignTitle: $attr.alignTitle || 'center'
+          alignTitle: $attr.alignTitle || $ionicNavBarConfig.alignTitle || 'center'
         });
 
         //defaults

diff --git a/js/angular/directive/navView.js b/js/angular/directive/navView.js
@@ -1,3 +1,7 @@
+IonicModule.constant('$ionicNavViewConfig', {
+  transition: 'slide-left-right-ios7'
+});
+
 /**
  * @ngdoc directive
  * @name ionNavView

diff --git a/js/angular/directive/tab.js b/js/angular/directive/tab.js
@@ -1,3 +1,7 @@
+IonicModule.constant('$ionicTabConfig', {
+  type: ''
+});
+
 /**
  * @ngdoc directive
  * @name ionTab

diff --git a/js/angular/directive/tabs.js b/js/angular/directive/tabs.js
@@ -1,3 +1,7 @@
+IonicModule.constant('$ionicTabsConfig', {
+  position: '',
+  type: ''
+});
 
 /**
  * @ngdoc directive
@@ -46,9 +50,10 @@
 
 IonicModule
 .directive('ionTabs', [
-  '$ionicViewService',
-  '$ionicTabsDelegate',
-function($ionicViewService, $ionicTabsDelegate) {
+  '$ionicViewService', 
+  '$ionicTabsDelegate', 
+  '$ionicTabsConfig', 
+function($ionicViewService, $ionicTabsDelegate, $ionicTabsConfig) {
   return {
     restrict: 'E',
     scope: true,
@@ -60,6 +65,8 @@ function($ionicViewService, $ionicTabsDelegate) {
       var innerElement = jqLite('<div class="tabs"></div>');
       innerElement.append(element.contents());
       element.append(innerElement);
+      element.addClass($ionicTabsConfig.position);
+      element.addClass($ionicTabsConfig.type);
 
       return { pre: prelink };
       function prelink($scope, $element, $attr, tabsCtrl) {

diff --git a/js/angular/service/platform.js b/js/angular/service/platform.js
@@ -4,6 +4,69 @@ var PLATFORM_BACK_BUTTON_PRIORITY_MODAL = 200;
 var PLATFORM_BACK_BUTTON_PRIORITY_ACTION_SHEET = 300;
 var PLATFORM_BACK_BUTTON_PRIORITY_POPUP = 400;
 var PLATFORM_BACK_BUTTON_PRIORITY_LOADING = 500;
+
+function componentConfig(defaults) {
+  defaults.$get = function() { return defaults; }
+  return defaults;
+}
+
+IonicModule
+.constant('$ionicPlatformDefaults', {
+  'ios': {
+    '$ionicNavBarConfig': {
+      transition: 'nav-title-slide-ios7',
+      alignTitle: 'center',
+      backButtonIcon: 'ion-ios7-arrow-back'
+    },
+    '$ionicNavViewConfig': {
+      transition: 'slide-left-right-ios7'
+    },
+    '$ionicTabsConfig': {
+      type: '',
+      position: ''
+    }
+  },
+  'android': {
+    '$ionicNavBarConfig': {
+      transition: 'no-animation',
+      alignTitle: 'left',
+      backButtonIcon: 'ion-android-arrow-back'
+    },
+    '$ionicNavViewConfig': {
+      transition: 'fade-implode'
+    },
+    '$ionicTabsConfig': {
+      type: 'tabs-striped',
+      position: ''
+    }
+  }
+})
+
+
+IonicModule.config([
+  '$ionicPlatformDefaults',
+
+  '$injector',
+
+function($ionicPlatformDefaults, $injector) {
+  var platform = ionic.Platform.platform();
+
+  var applyConfig = function(platformDefaults) {
+    forEach(platformDefaults, function(defaults, constantName) {
+      extend($injector.get(constantName), defaults);
+    });
+  };
+
+  switch(platform) {
+    case 'ios':
+      applyConfig($ionicPlatformDefaults.ios);
+      break;
+    case 'android':
+      applyConfig($ionicPlatformDefaults.android);
+      break;
+  }
+}]);
+
 /**
  * @ngdoc service
  * @name $ionicPlatform
@@ -16,10 +79,10 @@ var PLATFORM_BACK_BUTTON_PRIORITY_LOADING = 500;
  */
 IonicModule
 .provider('$ionicPlatform', function() {
-
   return {
     $get: ['$q', '$rootScope', function($q, $rootScope) {
       var self = {
+
         /**
          * @ngdoc method
          * @name $ionicPlatform#onHardwareBackButton
@@ -138,3 +201,4 @@ IonicModule
   };
 
 });
+
diff --git a/js/angular/service/viewService.js b/js/angular/service/viewService.js
@@ -93,7 +93,8 @@ function($rootScope, $state, $location, $document, $animate, $ionicPlatform, $io
   '$window',
   '$injector',
   '$animate',
-function($rootScope, $state, $location, $window, $injector, $animate) {
+  '$ionicNavViewConfig',
+function($rootScope, $state, $location, $window, $injector, $animate, $ionicNavViewConfig) {
 
   var View = function(){};
   View.prototype.initialize = function(data) {
@@ -440,6 +441,12 @@ function($rootScope, $state, $location, $window, $injector, $animate) {
           className = el.getAttribute('animation');
           el = el.parentElement;
         }
+
+        // If they don't have an animation set explicitly, use the value in the config
+        if(!className) {
+          return $ionicNavViewConfig.transition;
+        }
+
         return className;
       }