Boilerplate code for popup added

components/ionPopup/ionPopup.html

@@ -1,22 +1,28 @@
 <template name="ionPopup">
-  <div class="popup-container">
-    <div class="popup">
-      <div class="popup-head">
-        <h3 class="popup-title">{{title}}</h3>
-        {{#if subTitle}}
-          <h5 class="popup-sub-title">{{subTitle}}</h5>
+  <div class="backdrop">
+    <div class="popup-container">
+      <div class="popup">
+        <div class="popup-head">
+          <h3 class="popup-title">{{title}}</h3>
+          {{#if subTitle}}
+            <h5 class="popup-sub-title">{{subTitle}}</h5>
+          {{/if}}
+        </div>
+        <div class="popup-body">
+          {{> UI.contentBlock}}
+        </div>
+        {{#if buttons.length}}
+          <div class="popup-buttons">
+            {{#each buttons}}
+              <button data-action="buttonTapped" data-index="{{index}}"
+              class="button {{#if type}}button-{{type}}{{/if}}">
+                {{{text}}}
+              </button>
+            {{/each}}
+          </div>
         {{/if}}
       </div>
-      <div class="popup-body">
-        {{> UI.contentBlock}}
-      </div>
-      {{#if buttons.count}}
-        <div class="popup-buttons">
-          {{#each buttons}}
-            <button data-action="buttonTapped" class="button {{type}}">{{text}}</button>
-          {{/each}}
-        </div>
-      {{/if}}
     </div>
   </div>
+
 </template>

components/ionPopup/ionPopup.js

@@ -1,21 +1,82 @@
 IonPopup = {
-  show: function () {
+  show: function (options) {
 
+    this.template = Template[options.templateName];
+
+    var buttons = [];
+    for (var i = 0; i < options.buttons.length; i++) {
+      var button = options.buttons[i];
+      buttons.push({
+        text: button.text,
+        type: button.type,
+        index: i
+      });
+    }
+
+    var data = {
+      title: options.title,
+      subTitle: options.subTitle,
+      buttons: buttons
+    };
+
+    console.log(data);
+
+    this.callbacks = {
+      cancel: options.cancel,
+      destructiveButtonClicked: options.destructiveButtonClicked,
+      buttonClicked: options.buttonClicked
+    };
+
+    this.view = Blaze.renderWithData(this.template, data, $('.ionic-body').get(0));
+    $('body').addClass('popup-open');
+
+    var $backdrop = $(this.view.firstNode());
+    $backdrop.addClass('visible active');
+    var $popup = $backdrop.find('.popup-container');
+    $popup.addClass('popup-showing active');
   },
 
   hide: function () {
+    var $backdrop = $(this.view.firstNode());
 
-  },
-
-  alert: function () {
-
-  },
-
-  confirm: function () {
-
-  },
-
-  prompt: function () {
-
+    $popup.removeClass('popup-showing active');
+    $backdrop.removeClass('active visible');
+    Blaze.remove(this.view);
   }
 };
+
+Template.ionPopup.rendered = function () {
+  $(window).on('keyup.ionPopup', function(event) {
+    if (event.which == 27) {
+      IonPopup.hide();
+    }
+  });
+};
+
+Template.ionPopup.destroyed = function () {
+  $(window).off('keyup.ionPopup');
+};
+
+Template.ionPopup.events({
+  // Handle clicking the backdrop
+  'click': function (event, template) {
+    console.log('test');
+    if ($(event.target).hasClass('popup-container')) {
+      IonActionSheet.hide();
+    }
+  },
+
+  'click [data-index]': function (event, template) {
+    var index = $(event.target).data('index');
+    IonPopup.buttonClicked(index);
+  },
+
+  'click [data-destructive]': function (event, template) {
+    IonPopup.destructiveButtonClicked();
+  },
+
+  'click [data-cancel]': function (event, template) {
+    IonPopup.cancel();
+  }
+
+});