initial actionsheet implementation, need to implement callbacks

components/ionActionSheet/ionActionSheet.html

@@ -0,0 +1,28 @@
+<template name="ionActionSheet">
+  <div class="action-sheet-backdrop">
+    <div class="action-sheet-wrapper">
+      <div class="action-sheet">
+        <div class="action-sheet-group">
+          {{#if titleText}}
+            <div class="action-sheet-title">
+              {{titleText}}
+            </div>
+          {{/if}}
+          {{#each buttons}}
+            <button class="button" data-index="{{index}}">{{{text}}}</button>
+          {{/each}}
+        </div>
+        {{#if destructiveText}}
+          <div class="action-sheet-group">
+            <button class="button destructive" data-destructive>{{{destructiveText}}}</button>
+          </div>
+        {{/if}}
+        {{#if cancelText}}
+          <div class="action-sheet-group">
+            <button class="button" data-cancel>{{{cancelText}}}</button>
+          </div>
+        {{/if}}
+      </div>
+    </div>
+  </div>
+</template>

components/ionActionSheet/ionActionSheet.js

@@ -0,0 +1,71 @@
+IonActionSheet = {
+  transitionEndEvent: 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd',
+
+  show: function (options) {
+    this.template = Template.ionActionSheet;
+
+    var buttons = [];
+    for (var i = 0; i < options.buttons.length; i++) {
+      var button = options.buttons[i];
+      buttons.push({
+        text: button.text,
+        index: i
+      });
+    }
+
+    var data = {
+      titleText: options.titleText,
+      destructiveText: options.destructiveText,
+      cancelText: options.cancelText,
+      buttons: buttons
+    };
+
+    this.view = Blaze.renderWithData(this.template, data, $('.ionic-body').get(0));
+    $('body').addClass('action-sheet-open');
+
+    var $backdrop = $(this.view.firstNode());
+    $backdrop.addClass('active');
+
+    var $wrapper = $backdrop.find('.action-sheet-wrapper');
+    Meteor.setTimeout(function () {
+      $wrapper.addClass('action-sheet-up');
+    }, 20);
+  },
+
+  close: function () {
+    var $backdrop = $(this.view.firstNode());
+    $backdrop.removeClass('active');
+
+    var $wrapper = $backdrop.find('.action-sheet-wrapper');
+    Meteor.setTimeout(function() {
+      $wrapper.removeClass('action-sheet-up');
+    }.bind(this), 10);
+
+    $wrapper.on(this.transitionEndEvent, function () {
+      $('body').removeClass('action-sheet-open');
+      Blaze.remove(this.view);
+    }.bind(this));
+  }
+};
+
+Template.ionActionSheet.events({
+  // Handle clicking the backdrop
+  'click': function (event, template) {
+    // if (event.target === ?) {
+    //   IonActionSheet.close();
+    // }
+  },
+
+  'click [data-index]': function (event, template) {
+    IonActionSheet.close();
+  },
+
+  'click [data-destructive]': function (event, template) {
+    IonActionSheet.close();
+  },
+
+  'click [data-cancel]': function (event, template) {
+    IonActionSheet.close();
+  }
+
+});

package.js

@@ -15,6 +15,9 @@ Package.onUse(function(api) {
   ], "client");
 
   api.addFiles([
+    "components/ionActionSheet/ionActionSheet.html",
+    "components/ionActionSheet/ionActionSheet.js",
+
     "components/ionBody/ionBody.html",
     "components/ionBody/ionBody.js",
 
@@ -70,6 +73,7 @@ Package.onUse(function(api) {
     "components/ionView/ionView.js"
   ], "client");
 
+  api.export("IonActionSheet");
   api.export("IonModal");
   api.export("IonNavView");
 });

showcase/client/templates/actionSheet/actionSheet.html

@@ -8,7 +8,9 @@
 
   {{#ionContent}}
     <div class="padding">
-      Content goes here
+      <button class="button button-large button-stable" data-action="showActionSheet">
+        Show Action Sheet
+      </button>
     </div>
   {{/ionContent}}
 </template>

showcase/client/templates/actionSheet/actionSheet.js

@@ -0,0 +1,28 @@
+Template.actionSheet.created = function () {
+  // this.actionText = new ReactiveVar();
+};
+
+Template.actionSheet.events({
+  'click [data-action=showActionSheet]': function (event, template) {
+    IonActionSheet.show({
+      titleText: 'ActionSheet Example',
+      buttons: [
+        { text: 'Share <i class="icon ion-share"></i>' },
+        { text: 'Move <i class="icon ion-arrow-move"></i>' },
+      ],
+      destructiveText: 'Delete',
+      cancelText: 'Cancel',
+      cancel: function() {
+        alert('CANCELLED');
+      },
+      buttonClicked: function(index) {
+        alert('BUTTON CLICKED', index);
+        return true;
+      },
+      destructiveButtonClicked: function() {
+        alert('DESTRUCT');
+        return true;
+      }
+    });
+  }
+});