Added gesture support for

dist/css/ionic.css

@@ -4,7 +4,7 @@
  * --------------------------------------------------
  * Useful utilities and mixins for SCSS files.
  */
-/*!
+/*
   Ionicons, v1.3.3
   Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
   https://twitter.com/helloimben  https://twitter.com/ionicframework
@@ -2046,7 +2046,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -2480,9 +2480,87 @@ a.subdued‎ {
  * Action Sheets
  * --------------------------------------------------
  */
+@-webkit-keyframes fadeInHalf {
+  from {
+    background-color: rgba(0, 0, 0, 0); }
+
+  to {
+    background-color: rgba(0, 0, 0, 0.5); } }
+
+@keyframes fadeInHalf {
+  from {
+    background-color: rgba(0, 0, 0, 0); }
+
+  to {
+    background-color: rgba(0, 0, 0, 0.5); } }
+
+@-webkit-keyframes fadeOutHalf {
+  from {
+    background-color: rgba(0, 0, 0, 0.5); }
+
+  to {
+    background-color: rgba(0, 0, 0, 0); } }
+
+@keyframes fadeOutHalf {
+  from {
+    background-color: rgba(0, 0, 0, 0.5); }
+
+  to {
+    background-color: rgba(0, 0, 0, 0); } }
+
+.action-sheet-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0); }
+  .action-sheet-backdrop.active {
+    -webkit-animation: fadeInHalf 0.3s;
+    animation: fadeInHalf 0.3s;
+    -webkit-animation-fill-mode: forwards; }
+  .action-sheet-backdrop.active-remove {
+    -webkit-animation: fadeOutHalf 0.3s;
+    animation: fadeOutHalf 0.3s;
+    -webkit-animation-fill-mode: forwards; }
+
+@-webkit-keyframes actionSheetUp {
+  0% {
+    -webkit-transform: translate3d(0, 100%, 0);
+    opacity: 0; }
+
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@-webkit-keyframes actionSheetOut {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    opacity: 1; }
+
+  100% {
+    -webkit-transform: translate3d(0, 100%, 0);
+    opacity: 0; } }
+
+.action-sheet-up {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0%, 0); }
+  .action-sheet-up.ng-enter, .action-sheet-up .ng-enter {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    -webkit-animation-duration: 400ms;
+    -webkit-animation-fill-mode: both;
+    -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
+  .action-sheet-up.ng-enter-active, .action-sheet-up .ng-enter-active {
+    -webkit-animation-name: actionSheetUp; }
+  .action-sheet-up.ng-leave, .action-sheet-up .ng-leave {
+    -webkit-animation-duration: 400ms;
+    -webkit-animation-fill-mode: both;
+    -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
+  .action-sheet-up.ng-leave-active, .action-sheet-up .ng-leave {
+    -webkit-animation-name: actionSheetOut; }
+
 .action-sheet {
-  -webkit-transform: translate3d(0, 100%, 0);
-  transform: translate3d(0, 100%, 0);
   position: fixed;
   bottom: 0;
   left: 15px;
@@ -2491,9 +2569,9 @@ a.subdued‎ {
   width: calc(100% - 30px); }
   .action-sheet .button {
     display: block;
-    padding: 10px;
+    padding: 1px;
     width: 100%;
-    border-radius: none;
+    border-radius: 0;
     background-color: transparent;
     color: #4a87ee;
     font-size: 18px; }
@@ -2503,12 +2581,21 @@ a.subdued‎ {
 .action-sheet-title {
   padding: 10px;
   text-align: center;
-  font-size: 12px; }
+  font-size: 12px;
+  color: #666666; }
 
 .action-sheet-group {
-  margin-bottom: 10px;
+  background-color: #fff;
-  border-radius: 3px;
+  margin-bottom: 5px;
-  background-color: rgba(255, 255, 255, 0.95); }
+  border-radius: 3px 3px 3px 3px; }
+  .action-sheet-group .button {
+    border-radius: 0;
+    border-width: 1px 0px 0px 0px; }
+    .action-sheet-group .button.active, .action-sheet-group .button:active {
+      background-color: transparent;
+      color: inherit; }
+  .action-sheet-group .button:first-child:last-child {
+    border-width: 0; }
 
 /**
  * Bar (Headers and Footers)
@@ -2626,8 +2713,11 @@ a.subdued‎ {
     text-align: center;
     text-overflow: ellipsis;
     white-space: nowrap;
+    overflow: hidden;
     font-size: 18px;
     line-height: 44px; }
+    .bar .title.title-left {
+      text-align: left; }
   .bar .title a {
     color: inherit; }
   .bar .button {
@@ -3962,7 +4052,7 @@ input[type="tel"],
 input[type="color"] {
   display: inline-block;
   height: 34px;
-  color: #f8f8f8;
+  color: #dfdfdf;
   vertical-align: middle;
   font-size: 14px;
   line-height: 20px; }
@@ -4010,7 +4100,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   background-color: white; }
 
 select[multiple],
@@ -4019,13 +4109,13 @@ select[size] {
 
 input:-moz-placeholder,
 textarea:-moz-placeholder {
-  color: #f8f8f8; }
+  color: #dfdfdf; }
 input:-ms-input-placeholder,
 textarea:-ms-input-placeholder {
-  color: #f8f8f8; }
+  color: #dfdfdf; }
 input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
-  color: #f8f8f8; }
+  color: #dfdfdf; }
 
 input[disabled],
 select[disabled],
@@ -4069,7 +4159,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color .1s ease-in-out; }
+    transition: background-color 0.1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -4084,7 +4174,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity .05s ease-in-out;
+  transition: opacity 0.05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -4557,7 +4647,7 @@ input[type="range"] {
   .button-icon:active, .button-icon.active {
     background: none;
     box-shadow: none;
-    text-shadow: 0px 0px 10px #fff; }
+    text-shadow: 0px 0px 10px white; }
 
 .padding > .button.block:first-child {
   margin-top: 0; }

dist/css/themes/ionic-ios7.css

@@ -1,141 +0,0 @@
-/**
- * Mixins
- * --------------------------------------------------
- * Useful utilities and mixins for SCSS files.
- */
-/** 
- * Nav controllers and header bar animations
- */
-/*
-.content-slide-in {
-  &.ng-enter, > .ng-enter {
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform:translate3d(100%,0,0) ;
-    box-shadow: -1px 0px 10px rgba(0,0,0,0.6);
-  }
-  &.ng-enter-active, > .ng-enter-active {
-    -webkit-transform:translate3d(0,0,0) ;
-  }
-  &.ng-leave, > .ng-leave {
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform:translate3d(0%,0,0);
-  }
-  &.ng-leave-active, > .ng-leave-active {
-    -webkit-transform:translate3d(-10%,0,0);
-    opacity: 0.8;
-  }
-}
-*/
-.content-slide-out.ng-enter, .content-slide-out > .ng-enter {
-  z-index: 1;
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(-100%, 0, 0);
-  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
-.content-slide-out.ng-enter-active, .content-slide-out > .ng-enter-active {
-  -webkit-transform: translate3d(0, 0, 0); }
-.content-slide-out.ng-leave, .content-slide-out > .ng-leave {
-  z-index: 0;
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(0%, 0, 0); }
-.content-slide-out.ng-leave-active, .content-slide-out > .ng-leave-active {
-  -webkit-transform: translate3d(10%, 0, 0);
-  opacity: 0.8; }
-
-.bar-title-in-add {
-  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-  -webkit-transform: translate3d(100%, 0, 0);
-  opacity: 0; }
-
-.bar-title-in-add-active {
-  -webkit-transform: translate3d(0px, 0, 0);
-  opacity: 1; }
-
-.bar-title-out-add {
-  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
-
-.bar-title-out-add-active {
-  -webkit-transform: translate3d(-100%, 0, 0);
-  opacity: 0; }
-
-.bar-button-in {
-  opacity: 0; }
-
-.bar-button-in-add {
-  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-  -webkit-transform: translate3d(50%, 0, 0);
-  opacity: 0; }
-
-.bar-button-in-active {
-  -webkit-transform: translate3d(0px, 0, 0);
-  opacity: 1; }
-
-/**
- * Tab controller animations
- */
-.fade-in-out.ng-enter, .fade-in-out > .ng-enter {
-  opacity: 0;
-  -webkit-transition: opacity 0.3s ease-in-out; }
-.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active {
-  opacity: 1; }
-.fade-in-out.ng-leave, .fade-in-out > .ng-leave {
-  opacity: 1;
-  -webkit-transition: opacity 0.3s ease-in-out; }
-.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active {
-  opacity: 0; }
-
-/* the overall container of the toggle */
-.toggle {
-  display: inline-block; }
-
-/* hide the actual checkbox */
-.toggle input {
-  display: none; }
-
-.toggle .track {
-  /* the background of the toggle's track area */
-  /* also the track appearance when the toggle is "off" */
-  position: relative;
-  display: inline-block;
-  box-sizing: border-box;
-  width: 54px;
-  height: 32px;
-  border: solid 2px #dddddd;
-  border-radius: 20px;
-  background-color: white;
-  cursor: pointer;
-  transition: 0.4s ease; }
-
-.toggle .handle {
-  /* the handle (circle) thats inside the toggle's track area */
-  /* also the appearance when the handle is "off" */
-  position: absolute;
-  display: block;
-  width: auto;
-  /* override defaults */
-  height: auto;
-  /* override defaults */
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 4px 5px rgba(0, 0, 0, 0.25);
-  border-radius: 20px;
-  background-color: white;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 20px;
-  transition: 0.2s ease;
-  transition-property: left, right;
-  transition-delay: 0s, .05s; }
-
-.toggle :checked + .track {
-  /* When the toggle is "on" */
-  /* the track when the toggle is "on" */
-  border-color: #4bd863;
-  background-color: #ccc;
-  box-shadow: inset 0 0 0 20px #4bd863;
-  transition: 0.2s ease;
-  /* the handle when the toggle is "on" */ }
-  .toggle :checked + .track .handle {
-    background-color: white;
-    right: 0;
-    left: 20px;
-    -webkit-transform: none;
-    transition-delay: .05s, 0s; }

dist/js/ionic-angular.js

@@ -16,6 +16,7 @@ angular.module('ionic.ui', [
                             'ionic.ui.content',
                             'ionic.ui.tabs',
                             'ionic.ui.nav',
+                            'ionic.ui.header',
                             'ionic.ui.sideMenu',
                             'ionic.ui.list',
                             'ionic.ui.checkbox',
@@ -28,9 +29,11 @@ angular.module('ionic', [
     'ionic.ui',
 ]);
 ;
-angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet'])
+angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet', 'ngAnimate'])
+
+.factory('ActionSheet', ['$rootScope', '$document', '$compile', '$animate', '$timeout', 'TemplateLoader',
+    function($rootScope, $document, $compile, $animate, $timeout, TemplateLoader) {
 
-.factory('ActionSheet', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
   return {
     /**
      * Load an action sheet with the given template string.
@@ -40,23 +43,41 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
      *
      * @param {object} opts the options for this ActionSheet (see docs)
      */
-    show: function(opts, $scope) {
+    show: function(opts) {
-      var scope = $scope && $scope.$new() || $rootScope.$new(true);
+      var scope = $rootScope.$new(true);
 
       angular.extend(scope, opts);
 
+
+      // Compile the template
+      var element = $compile('<action-sheet buttons="buttons"></action-sheet>')(scope);
+
+      // Grab the sheet element for animation
+      var sheetEl = angular.element(element[0].querySelector('.action-sheet'));
+
+      var hideSheet = function(didCancel) {
+        $animate.leave(sheetEl, function() {
+          if(didCancel) {
+            opts.cancel();
+          }
+        });
+        
+        $timeout(function() {
+          $animate.removeClass(element, 'active', function() {
+            scope.$destroy();
+          });
+        });
+      };
+
       scope.cancel = function() {
-        scope.sheet.hide();
+        hideSheet(true);
-        //scope.$destroy();
-        opts.cancel();
       };
 
       scope.buttonClicked = function(index) {
         // Check if the button click event returned true, which means
         // we can close the action sheet
         if((opts.buttonClicked && opts.buttonClicked(index)) === true) {
-          scope.sheet.hide();
+          hideSheet(false);
-          //scope.$destroy();
         }
       };
 
@@ -64,34 +85,31 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
         // Check if the destructive button click event returned true, which means
         // we can close the action sheet
         if((opts.destructiveButtonClicked && opts.destructiveButtonClicked()) === true) {
-          scope.sheet.hide();
+          hideSheet(false);
-          //scope.$destroy();
         }
       };
 
-      // Compile the template
-      var element = $compile('<action-sheet buttons="buttons"></action-sheet>')(scope);
-
-      var s = element.scope();
-
       $document[0].body.appendChild(element[0]);
 
       var sheet = new ionic.views.ActionSheet({el: element[0] });
-      s.sheet = sheet;
+      scope.sheet = sheet;
 
-      sheet.show();
+      $animate.addClass(element, 'active');
+      $animate.enter(sheetEl, element, function() {
+      });
 
       return sheet;
     }
   };
+
 }]);
 ;
 angular.module('ionic.service.gesture', [])
 
 .factory('Gesture', [function() {
   return {
-    on: function(eventType, cb, element) {
+    on: function(eventType, cb, $element) {
-      return window.ionic.onGesture(eventType, cb, element);
+      return window.ionic.onGesture(eventType, cb, $element[0]);
     }
   };
 }]);
@@ -584,6 +602,41 @@ angular.module('ionic.ui.content', [])
 
 })();
 ;
+(function(ionic) {
+'use strict';
+
+angular.module('ionic.ui.header', ['ngAnimate'])
+
+
+.directive('headerBar', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    template: '<header class="bar bar-header" ng-transclude></header>',
+    scope: {
+      type: '@',
+      alignTitle: '@',
+    },
+    link: function($scope, $element, $attr) {
+      var hb = new ionic.views.HeaderBar({
+        el: $element[0],
+        alignTitle: $scope.alignTitle || 'center'
+      });
+
+      $element.addClass($scope.type);
+
+      $scope.headerBarView = hb;
+
+      $scope.$on('$destroy', function() {
+        //
+      });
+    }
+  };
+});
+
+})(ionic);
+;
 (function() {
 'use strict';
 
@@ -696,11 +749,11 @@ angular.module('ionic.ui.list', ['ngAnimate'])
           hasPullToRefresh: ($scope.hasPullToRefresh !== 'false'),
           onRefresh: function() {
             $scope.onRefresh();
-            $scope.$parent.$broadcast('onRefresh');
+            $scope.$parent.$broadcast('scroll.onRefresh');
           },
           onRefreshOpening: function(amt) {
             $scope.onRefreshOpening({amount: amt});
-            $scope.$parent.$broadcast('onRefreshOpening', amt);
+            $scope.$parent.$broadcast('scroll.onRefreshOpening', amt);
           }
         });
 
@@ -773,6 +826,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
   // Pop function, throttled
   this.popController = ionic.throttle(function() {
     _this.pop();
+    $scope.$broadcast('navs.pop');
   }, 300, {
     trailing: false
   });
@@ -820,6 +874,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
    */
   $scope.pushController = function(scope, element) {
     _this.push(scope);
+    $scope.$broadcast('navs.push', scope);
   };
 
   $scope.navController = this;
@@ -846,22 +901,46 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
     restrict: 'E',
     require: '^navs',
     replace: true,
-    scope: true,
+    scope: {
+      type: '@',
+      backButtonType: '@',
+      alignTitle: '@'
+    },
     template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
-        '<a href="#" ng-click="goBack()" class="button" ng-if="navController.controllers.length > 1">Back</a>' +
+        '<button ng-click="goBack()" class="button" ng-if="navController.controllers.length > 1" ng-class="backButtonType">Back</button>' +
         '<h1 class="title">{{navController.getTopController().title}}</h1>' + 
       '</header>',
-    link: function(scope, element, attrs, navCtrl) {
+    link: function($scope, $element, $attr, navCtrl) {
-      scope.navController = navCtrl;
+      var backButton;
 
-      scope.barType = attrs.barType || 'bar-dark';
+      $scope.navController = navCtrl;
-      element.addClass(scope.barType);
 
-      scope.$watch('navController.controllers.length', function(value) {
+      $scope.goBack = function() {
-      });
-      scope.goBack = function() {
         navCtrl.popController();
       };
+
+
+      var hb = new ionic.views.HeaderBar({
+        el: $element[0],
+        alignTitle: $scope.alignTitle || 'center'
+      });
+
+      $element.addClass($scope.type);
+
+      $scope.headerBarView = hb;
+
+      $scope.$parent.$on('navs.push', function() {
+        backButton = angular.element($element[0].querySelector('.button'));
+        backButton.addClass($scope.backButtonType);
+        hb.align();
+      });
+      $scope.$parent.$on('navs.pop', function() {
+        hb.align();
+      });
+
+      $scope.$on('$destroy', function() {
+        //
+      });
     }
   };
 })
@@ -1128,7 +1207,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
           sideMenuCtrl._handleDrag(e);
         };
 
-        Gesture.on('drag', dragFn, $element[0]);
+        Gesture.on('drag', dragFn, $element);
 
         var dragReleaseFn = function(e) {
           if(!defaultPrevented) {
@@ -1137,7 +1216,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
           defaultPrevented = false;
         };
 
-        Gesture.on('release', dragReleaseFn, $element[0]);
+        Gesture.on('release', dragReleaseFn, $element);
 
         sideMenuCtrl.setContent({
           onDrag: function(e) {},

dist/js/ionic.js

@@ -135,6 +135,29 @@ window.ionic = {
 ;
 (function(ionic) {
   ionic.DomUtil = {
+    getTextBounds: function(textNode) {
+      if(document.createRange) {
+        var range = document.createRange();
+        range.selectNodeContents(textNode);
+        if(range.getBoundingClientRect) {
+          var rect = range.getBoundingClientRect();
+
+          var sx = window.scrollX;
+          var sy = window.scrollY;
+
+          return {
+            top: rect.top + sy,
+            left: rect.left + sx,
+            right: rect.left + sx + rect.width,
+            bottom: rect.top + sy + rect.height,
+            width: rect.width,
+            height: rect.height
+          };
+        }
+      }
+      return null
+    },
+
     getChildIndex: function(element) {
       return Array.prototype.slice.call(element.parentNode.children).indexOf(element);
     },
@@ -2043,7 +2066,7 @@ window.ionic = {
 
         // Whether to disable overflow rubber banding when content is small
         // enough to fit in the viewport (i.e. doesn't need scrolling)
-        disableNonOverflowRubberBand: false,
+        disableNonOverflowRubberBand: true,
 
         // Called as the refresher is opened, an amount is passed
         onRefreshOpening: function() {},
@@ -2501,7 +2524,9 @@ window.ionic = {
         startTime: Date.now()
       };
 
-      if(this.disableNonOverflowRubberBand === true) {
+      // If the viewport is too small and we aren't using pull to refresh,
+      // don't rubber band the drag
+      if(this.disableNonOverflowRubberBand === true && !this._refresher) {
         var maxX = Math.min(0, (-totalWidth + parentWidth));
         var maxY = Math.min(0, (-totalHeight + parentHeight));
 
@@ -2844,22 +2869,95 @@ window.ionic = {
     initialize: function(opts) {
       this.el = opts.el;
 
-      this._titleEl = this.el.querySelector('.title');
+      ionic.extend(this, {
+        alignTitle: 'center'
+      }, opts);
+
+      this.align();
     },
-    resizeTitle: function() {
-      var e, j, i,
-      title,
-      titleWidth,
-      children = this.el.children;
 
-      for(i = 0, j = children.length; i < j; i++) {
+    /**
-        e = children[i];
+     * Align the title text given the buttons in the header
-        if(/h\d/.test(e.nodeName.toLowerCase())) {
+     * so that the header text size is maximized and aligned
-          title = e;
+     * correctly as long as possible.
+     */
+    align: function() {
+      var _this = this;
+
+      window.rAF(ionic.proxy(function() {
+        var i, c, childSize, childStyle;
+        var children = this.el.children;
+        var childNodes = this.el.childNodes;
+        var styles = window.getComputedStyle(this.el, null);
+
+        // Get the padding of the header for calculations
+        var paddingLeft = parseFloat(styles['paddingLeft']);
+        var paddingRight = parseFloat(styles['paddingRight']);
+
+        // Get the full width of the header
+        var headerWidth = this.el.offsetWidth;
+
+        // Find the title element
+        var title = this.el.querySelector('.title');
+        if(!title) {
+          return;
         }
-      }
       
-      titleWidth = title.offsetWidth;
+        var leftWidth = 0;
+        var rightWidth = 0;
+        var titlePos = Array.prototype.indexOf.call(this.el.childNodes, title);
+
+        // Compute how wide the left children are
+        for(i = 0; i < titlePos; i++) {
+          childSize = null;
+          c = childNodes[i];
+          if(c.nodeType == 3) {
+            childSize = ionic.DomUtil.getTextBounds(c);
+          } else if(c.nodeType == 1) {
+            childSize = c.getBoundingClientRect();
+          }
+          if(childSize) {
+            leftWidth += childSize.width;
+          }
+        }
+
+        // Compute how wide the right children are
+        for(i = titlePos + 1; i < childNodes.length; i++) {
+          childSize = null;
+          c = childNodes[i];
+          if(c.nodeType == 3) {
+            childSize = ionic.DomUtil.getTextBounds(c);
+          } else if(c.nodeType == 1) {
+            childSize = c.getBoundingClientRect();
+          }
+          if(childSize) {
+            rightWidth += childSize.width;
+          }
+        }
+
+        var margin = Math.max(leftWidth, rightWidth) + 10;
+
+        // Size and align the header title based on the sizes of the left and
+        // right children, and the desired alignment mode
+        if(this.alignTitle == 'center') {
+          title.style.left = margin + 'px';
+          title.style.right = margin + 'px';
+
+          console.log(title.offsetWidth, title.scrollWidth);
+          if(title.offsetWidth < title.scrollWidth) {
+            title.style.textAlign = 'left';
+            title.style.right = (rightWidth + 5) + 'px';
+          } else {
+            title.style.textAlign = 'center';
+          }
+        } else if(this.alignTitle == 'left') {
+          title.style.textAlign = 'left';
+          title.style.left = (leftWidth + 15) + 'px';
+        } else if(this.alignTitle == 'right') {
+          title.style.textAlign = 'right';
+          title.style.right = (rightWidth + 15) + 'px';
+        }
+      }, this));
     }
   });
 

js/ext/angular/src/directive/ionicSideMenu.js

@@ -70,7 +70,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
           sideMenuCtrl._handleDrag(e);
         };
 
-        Gesture.on('drag', dragFn, $element[0]);
+        Gesture.on('drag', dragFn, $element);
 
         var dragReleaseFn = function(e) {
           if(!defaultPrevented) {
@@ -79,7 +79,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
           defaultPrevented = false;
         };
 
-        Gesture.on('release', dragReleaseFn, $element[0]);
+        Gesture.on('release', dragReleaseFn, $element);
 
         sideMenuCtrl.setContent({
           onDrag: function(e) {},

js/ext/angular/src/service/ionicGesture.js

@@ -2,8 +2,8 @@ angular.module('ionic.service.gesture', [])
 
 .factory('Gesture', [function() {
   return {
-    on: function(eventType, cb, element) {
+    on: function(eventType, cb, $element) {
-      return window.ionic.onGesture(eventType, cb, element);
+      return window.ionic.onGesture(eventType, cb, $element[0]);
     }
   };
 }]);