fix side menu event handlers, fix modal backdrops on ipad

components/ionBody/ionBody.js

@@ -10,6 +10,10 @@ isWindowsPhone = function () {
   return navigator.userAgent.indexOf('Windows Phone') > -1;
 }
 
+Template.ionBody.rendered = function () {
+  // this.snapper = null;
+};
+
 Template.ionBody.helpers({
   platformClasses: function () {
     var classes = ['grade-a'];
@@ -47,5 +51,34 @@ Template.ionBody.events({
 
   'click [data-nav-direction]': function (event, template) {
     $('[data-nav-container]').addClass($(event.target).data('nav-direction'));
+  },
+
+  'click [data-ion-menu-toggle]': function (event, template) {
+    console.log('template', template);
+    if (!IonSideMenu.snapper) {
+      return;
+    }
+
+    var direction;
+    var $el = $(event.target);
+
+    if ($el.data('ion-menu-toggle') !== '') {
+      direction = $el.data('ion-menu-toggle');
+    } else {
+      direction = 'left';
+    }
+
+    if(IonSideMenu.snapper.state().state === direction){
+      IonSideMenu.snapper.close();
+    } else {
+      IonSideMenu.snapper.open(direction);
+    }
+  },
+
+  'click [data-ion-menu-close]': function (event, template) {
+    if (!IonSideMenu.snapper) {
+      return;
+    }
+    IonSideMenu.snapper.close();
   }
 });

components/ionModal/ionModal.js

@@ -10,7 +10,10 @@ IonModal = {
     this.template = Template[templateName];
     this.view = Blaze.renderWithData(this.template, data, $('.ionic-body').get(0));
 
-    var $modalEl = $(this.view.firstNode());
+    var $modalBackdrop = $(this.view.firstNode());
+    $modalBackdrop.addClass('active');
+
+    var $modalEl = $modalBackdrop.find('.modal');
     $modalEl.addClass(this.enterClasses.join(' '));
 
     $modalEl.on(this.transitionEndEvent, function () {
@@ -24,7 +27,10 @@ IonModal = {
   },
 
   close: function () {
-    var $modalEl = $(this.view.firstNode());
+    var $modalBackdrop = $(this.view.firstNode());
+    $modalBackdrop.removeClass('active');
+
+    var $modalEl = $modalBackdrop.find('.modal');
     $modalEl.addClass(this.leaveClasses.join(' '));
 
     Meteor.setTimeout(function() {
@@ -77,6 +83,13 @@ Template.ionModal.helpers({
 });
 
 Template.ionModal.events({
+  // Handle clicking the backdrop
+  'click': function (event, template) {
+    if ($(event.target).hasClass('modal-backdrop')) {
+      IonModal.close();
+    }
+  },
+
   'click [data-dismiss=modal]': function (event, template) {
     IonModal.close();
   }

components/ionSideMenuContainer/ionSideMenuContainer.js

@@ -1,40 +1,18 @@
+IonSideMenu = {
+  snapper: null
+};
+
 Template.ionSideMenuContainer.rendered = function () {
   $snapperEl = this.$('.snap-content');
   if (!$snapperEl) {
     return;
   }
 
-  this.snapper = new Snap({
+  IonSideMenu.snapper = new Snap({
     element: $snapperEl.get(0)
   });
 };
 
-Template.ionSideMenuContainer.events({
-  'click [data-ion-menu-toggle]': function (event, template) {
-    if (!template.snapper) {
-      return;
-    }
-
-    var direction;
-    var $el = $(event.target);
-
-    if ($el.data('ion-menu-toggle') !== '') {
-      direction = $el.data('ion-menu-toggle');
-    } else {
-      direction = 'left';
-    }
-
-    if(template.snapper.state().state === direction){
-      template.snapper.close();
-    } else {
-      template.snapper.open(direction);
-    }
-  },
-
-  'click [data-ion-menu-close]': function (event, template) {
-    if (!template.snapper) {
-      return;
-    }
-    template.snapper.close();
-  }
-});
+Template.ionSideMenuContainer.destroyed = function () {
+  IonSideMenu.snapper = null;
+};

package.js

@@ -91,4 +91,5 @@ Package.onUse(function(api) {
   api.export("IonModal");
   api.export("IonPopover");
   api.export("IonPopup");
+  api.export("IonSideMenu");
 });