Tweaked ionBody, ionHeaderBar, ionPopup and ionPopover

components/ionActionSheet/ionActionSheet.js

@@ -76,17 +76,17 @@ IonActionSheet = {
   }
 };
 
-Template.ionActionSheet.rendered = function () {
+Template.ionActionSheet.onRendered(function () {
   $(window).on('keyup.ionActionSheet', function(event) {
     if (event.which == 27) {
       IonActionSheet.cancel();
     }
   });
-};
+});
 
-Template.ionActionSheet.destroyed = function () {
+Template.ionActionSheet.onDestroyed(function () {
   $(window).off('keyup.ionActionSheet');
-};
+});
 
 Template.ionActionSheet.events({
   // Handle clicking the backdrop

components/ionBody/ionBody.js

@@ -3,10 +3,32 @@ Platform = {
     return (!!navigator.userAgent.match(/iPad/i) || !!navigator.userAgent.match(/iPhone/i) || !!navigator.userAgent.match(/iPod/i))
            || Session.get('platformOverride') === 'iOS';
   },
-
   isAndroid: function () {
     return navigator.userAgent.indexOf('Android') > 0
            || Session.get('platformOverride') === 'Android';
+  },
+  isWeb: function () {
+    return !Platform.isIOS() && !Platform.isAndroid();
+  },
+  set: function(platform) {
+    if (!_.contains(['android', 'ios', 'web'], platform)) return;
+    var $ionicBody = $('.ionic-body');
+    $ionicBody.removeClass('platform-web platform-cordova platform-ios platform-android');
+    if (platform === 'android') {
+      $ionicBody.addClass('platform-cordova platform-android');
+    }
+    if (platform === 'ios') {
+      $ionicBody.addClass('platform-cordova platform-ios');
+    }
+    if (platform === 'web') {
+      $ionicBody.addClass('platform-web');
+    }
+  },
+  get: function() {
+    var $ionicBody = $('.ionic-body');
+    if ($ionicBody.hasClass('platform-ios')) return 'ios';
+    if ($ionicBody.hasClass('platform-android')) return 'android';
+    return 'web';
   }
 };
 
@@ -18,6 +40,10 @@ Template.registerHelper('isAndroid', function () {
   return Platform.isAndroid();
 });
 
+Template.registerHelper('isWeb', function () {
+  return Platform.isWeb();
+});
+
 Template.ionBody.helpers({
   platformClasses: function () {
     var classes = ['grade-a'];
@@ -39,13 +65,13 @@ Template.ionBody.helpers({
   }
 });
 
-Template.ionBody.rendered = function () {
+Template.ionBody.onRendered(function () {
   window.addEventListener('statusTap', function() {
     $('.content.overflow-scroll').animate({
       scrollTop: 0
     }, 500);
   });
-};
+});
 
 Template.ionBody.events({
   'click [data-ion-modal]': function (event, template) {
@@ -59,8 +85,15 @@ Template.ionBody.events({
   },
 
   'click [data-nav-direction]': function (event, template) {
-    $('[data-nav-container]').addClass('nav-view-direction-' + $(event.target).data('nav-direction'));
-    $('[data-navbar-container]').addClass('nav-bar-direction-' + $(event.target).data('nav-direction'));
+    var direction = $(event.currentTarget).data('nav-direction');
+    $('[data-nav-container]').addClass('nav-view-direction-' + direction);
+    $('[data-navbar-container]').addClass('nav-bar-direction-' + direction);
+    if (!_.contains(['back', 'forward'], direction)) {
+      setTimeout(function() {
+        $('[data-nav-container]').removeClass('nav-view-direction-' + direction);
+        $('[data-navbar-container]').removeClass('nav-bar-direction-' + direction);
+      }, 500);
+    }
   },
 
   'click [data-ion-menu-toggle]': function (event, template) {

components/ionFooterBar/ionFooterBar.js

@@ -1,10 +1,10 @@
-Template.ionFooterBar.rendered = function () {
+Template.ionFooterBar.onRendered(function () {
   Session.set('hasFooter', true);
-};
+});
 
-Template.ionFooterBar.destroyed = function () {
+Template.ionFooterBar.onDestroyed(function () {
   Session.set('hasFooter', false);
-};
+});
 
 Template.ionFooterBar.helpers({
   classes: function () {

components/ionHeaderBar/ionHeaderBar.js

@@ -1,26 +1,23 @@
 IonHeaderBar = {
   alignTitle: function () {
-    var align = this.alignTitle || 'center';
-    var $title = this.$('.title');
 
-    if (Platform.isAndroid() && !this.alignTitle) {
-      $title.addClass('title-left');
-      return;
-    }
+    var platform = Platform.get();
+    var platformAligns = {
+      android: 'left',
+      ios: 'center'
+    };
+    var align = this.data.alignTitle || platformAligns[platform] || 'center';
+    var titleClass = 'title-' + align;
+
+    var $title = this.$('.title');
+    $title.removeClass('title-left title-center title-right').addClass(titleClass);
 
-    if (align === 'center') {
-      $title.addClass('title-center');
-    } else if (align === 'left') {
-      $title.addClass('title-left');
-    } else if (align === 'right') {
-      $title.addClass('title-right');
-    }
   },
 
   positionTitle: function () {
     var $title = this.$('.title');
-    var $leftButton = $('.button.pull-left');
-    var $rightButton = $('.button.pull-right');
+    var $leftButton = this.$('.button.pull-left');
+    var $rightButton = this.$('.button.pull-right');
 
     // Find out which button is wider,
     // use that to offset the title on both sides
@@ -45,30 +42,28 @@ IonHeaderBar = {
   }
 };
 
-Template.ionHeaderBar.created = function () {
+Template.ionHeaderBar.onCreated(function () {
   this.data = this.data || {};
-};
+});
 
-Template.ionHeaderBar.rendered = function () {
+Template.ionHeaderBar.onRendered(function () {
   Session.set('hasHeader', true);
   IonHeaderBar.alignTitle.call(this);
   IonHeaderBar.positionTitle.call(this);
-};
+});
 
-Template.ionHeaderBar.destroyed = function () {
+Template.ionHeaderBar.onDestroyed(function () {
   Session.set('hasHeader', false);
-};
+});
 
 Template.ionHeaderBar.helpers({
   classes: function () {
     var classes = ['bar', 'bar-header'];
-
     if (this.class) {
       classes.push(this.class);
     } else {
       classes.push('bar-stable');
     }
-
     return classes.join(' ');
   }
 });

components/ionModal/ionModal.js

@@ -42,54 +42,79 @@ IonModal = {
       delete this.templateClosed;
 
       var view = (this.view[templateName] || []).slice(-1)[0];
-      if (!view) return;
 
-      var $modalBackdrop = $(view.firstNode());
-      var $modal = $('.modal', $modalBackdrop);
+      if (view) {
+        var $modalBackdrop = $(view.firstNode());
+        var $modal = $('.modal', $modalBackdrop);
+      } else {
+        var $modal = $('.modal');
+        var $modalBackdrop = $modal.parents('.modal-backdrop').get(0);
+      }
 
-      $modal.addClass(this.leaveClasses.join(' '));
-      Meteor.setTimeout(function () {
-        $modal.addClass(this.leaveActiveClass);
-      }.bind(this), 50);
+      if ($modal) {
+        $modal.addClass(this.leaveClasses.join(' '));
+        Meteor.setTimeout(function () {
+          $modal.addClass(this.leaveActiveClass);
+        }.bind(this), 50);
+      }
 
-      $modalBackdrop.fadeOut(500, function() {
-        $('body').removeClass('modal-open');
-      });
+      if ($modalBackdrop) {
+        $modalBackdrop.fadeOut(500, function() {
+          if ($('.modal-backdrop').length) return;
+          $('body').removeClass('modal-open');
+        });
+      }
 
     }.bind(this), 0);
 
   }
 };
 
+var isOpening = function($modal) {
+  return $modal.hasClass(IonModal.enterClasses.join(' ')) || $modal.hasClass(IonModal.enterActiveClasse);
+};
+
+var afterOpen = function($modal) {
+  $modal.removeClass(IonModal.enterClasses.join(' ')).removeClass(IonModal.enterActiveClass);
+  $('body').addClass('modal-open');
+};
+
+var isClosing = function($modal) {
+  return $modal.hasClass(IonModal.leaveClasses.join(' ')) || $modal.hasClass(IonModal.leaveActiveClasse);
+};
+
+var afterClose = function($modal, e) {
+  var firstChild = $modal.children().first();
+  var templateName = getElementModalTemplateName(firstChild);
+  IonModal.views = _.without(IonModal.views, templateName);
+  var view = IonModal.view[templateName].pop();
+  var $modalBackdrop = $(view.firstNode());
+  $modalBackdrop.removeClass('active');
+  $modal.removeClass(IonModal.leaveClasses.join(' ')).removeClass(IonModal.leaveActiveClass).off(IonModal.transitionEndEvent);
+  $('body').removeClass('modal-open');
+  $(e.target).parents('.modal-backdrop').remove();
+  Blaze.remove(view);
+};
+
 $(document).delegate('.modal', IonModal.transitionEndEvent, function(e) {
   var $modal = $(e.currentTarget);
-  if ($modal.hasClass(IonModal.enterClasses.join(' ')) || $modal.hasClass(IonModal.enterActiveClasse)) {
-    $modal.removeClass(IonModal.enterClasses.join(' ')).removeClass(IonModal.enterActiveClass);
-    $('body').addClass('modal-open');
-  } else if ($modal.hasClass(IonModal.leaveClasses.join(' ')) || $modal.hasClass(IonModal.leaveActiveClasse)) {
-    var firstChild = $modal.children().first();
-    var templateName = getElementModalTemplateName(firstChild);
-    IonModal.views = _.without(IonModal.views, templateName);
-    var view = IonModal.view[templateName].pop();
-    var $modalBackdrop = $(view.firstNode());
-    $modalBackdrop.removeClass('active');
-    $modal.removeClass(IonModal.leaveClasses.join(' ')).removeClass(IonModal.leaveActiveClass).off(IonModal.transitionEndEvent);
-    $('body').removeClass('modal-open');
-    $(e.target).parents('.modal-backdrop').remove();
-    Blaze.remove(view);
+  if (isOpening($modal)) {
+    afterOpen($modal);
+  } else if (isClosing($modal)) {
+    afterClose($modal, e);
   }
 });
 
-Template.ionModal.created = function () {
+Template.ionModal.onCreated(function () {
   this.data = this.data || {};
   this.customTemplate = this.data.customTemplate || false;
   this.title = this.data.title;
   this.title = this.data.closeText;
   this.focusFirstInput = _.isUndefined(this.data.focusFirstInput) ? true : this.data.focusFirstInput;
   this.animation = this.data.animation || 'slide-in-up';
-};
+});
 
-Template.ionModal.rendered = function () {
+Template.ionModal.onRendered(function () {
   if (this.focusFirstInput) {
     Meteor.setTimeout(function () {
       if (!this._domrange) return;
@@ -102,13 +127,13 @@ Template.ionModal.rendered = function () {
       IonModal.close();
     }
   });
-};
+});
 
-Template.ionModal.destroyed = function () {
+Template.ionModal.onDestroyed(function () {
   if (!IonModal.views.length) {
     $(window).off('keyup.ionModal');
   }
-};
+});
 
 Template.ionModal.helpers({
   barClass: function () {

components/ionNavBackButton/ionNavBackButton.js

@@ -17,11 +17,11 @@ Template.ionNavBackButton.events({
   }
 });
 
-Template.ionNavBackButton.created = function () {
+Template.ionNavBackButton.onCreated(function () {
   this.data = this.data || {};
-};
+});
 
-Template.ionNavBackButton.rendered = function () {
+Template.ionNavBackButton.onRendered(function () {
   this.backUrl = null;
 
   this.data = this.data || {};
@@ -39,7 +39,7 @@ Template.ionNavBackButton.rendered = function () {
     this.backUrl = backRoute.path(Template.parentData(1));
   }
 
-};
+});
 
 Template.ionNavBackButton.helpers({
   classes: function () {

components/ionNavBar/ionNavBar.js

@@ -1,4 +1,4 @@
-Template.ionNavBar.created = function () {
+Template.ionNavBar.onCreated(function () {
   this.data = this.data || {};
 
   if (Platform.isAndroid()) {
@@ -17,9 +17,9 @@ Template.ionNavBar.created = function () {
   } else {
     this.transitionDuration = 200;
   }
-};
+});
 
-Template.ionNavBar.rendered = function () {
+Template.ionNavBar.onRendered(function () {
   Session.set('hasHeader', true);
 
   IonHeaderBar.alignTitle.call(this);
@@ -89,11 +89,11 @@ Template.ionNavBar.rendered = function () {
       }
     }
   };
-};
+});
 
-Template.ionNavBar.destroyed = function () {
+Template.ionNavBar.onDestroyed(function () {
   Session.set('hasHeader', false);
-};
+});
 
 Template.ionNavBar.helpers({
   classes: function () {