From 8f7ade50655da5b035f460864e8a7512c36d207b Mon Sep 17 00:00:00 2001 From: BastiRehm Date: Sat, 28 Feb 2015 18:31:31 +1000 Subject: [PATCH 1/8] Boilerplate code for popup added --- components/ionPopup/ionPopup.html | 38 ++++++++------ components/ionPopup/ionPopup.js | 87 ++++++++++++++++++++++++++----- 2 files changed, 96 insertions(+), 29 deletions(-) diff --git a/components/ionPopup/ionPopup.html b/components/ionPopup/ionPopup.html index 3854826..69694d3 100644 --- a/components/ionPopup/ionPopup.html +++ b/components/ionPopup/ionPopup.html @@ -1,22 +1,28 @@ diff --git a/components/ionPopup/ionPopup.js b/components/ionPopup/ionPopup.js index f729b21..e5c95ef 100644 --- a/components/ionPopup/ionPopup.js +++ b/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(); + } + +}); From e642b095e962439ebe949e96e8c144d9a0fc64de Mon Sep 17 00:00:00 2001 From: BastiRehm Date: Sat, 28 Feb 2015 20:38:53 +1000 Subject: [PATCH 2/8] Added fadeout animation and functions for buttons --- components/ionPopup/ionPopup.html | 2 +- components/ionPopup/ionPopup.js | 41 +++++++++++++++---------------- 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/components/ionPopup/ionPopup.html b/components/ionPopup/ionPopup.html index 69694d3..7e82490 100644 --- a/components/ionPopup/ionPopup.html +++ b/components/ionPopup/ionPopup.html @@ -15,7 +15,7 @@
{{#each buttons}} {{/each}} diff --git a/components/ionPopup/ionPopup.js b/components/ionPopup/ionPopup.js index e5c95ef..423b3f8 100644 --- a/components/ionPopup/ionPopup.js +++ b/components/ionPopup/ionPopup.js @@ -2,8 +2,10 @@ IonPopup = { show: function (options) { this.template = Template[options.templateName]; - + this.callbacks = {}; + this.callbacks.onTap = []; var buttons = []; + for (var i = 0; i < options.buttons.length; i++) { var button = options.buttons[i]; buttons.push({ @@ -11,6 +13,7 @@ IonPopup = { type: button.type, index: i }); + this.callbacks.onTap.push(button.onTap); } var data = { @@ -19,14 +22,6 @@ IonPopup = { 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'); @@ -38,10 +33,22 @@ IonPopup = { hide: function () { var $backdrop = $(this.view.firstNode()); + var $popup = $backdrop.find('.popup-container'); - $popup.removeClass('popup-showing active'); - $backdrop.removeClass('active visible'); - Blaze.remove(this.view); + // $popup.removeClass('popup-showing'); + $popup.addClass('popup-hidden').removeClass('active'); + + setTimeout(function(){ + $('body').removeClass('popup-open'); + Blaze.remove(this.view); + }.bind(this), 100); + }, + + buttonClicked: function (index, event) { + var callbacks = this.callbacks.onTap; + if (callbacks[index](event) === true) { + IonPopup.hide(); + } } }; @@ -68,15 +75,7 @@ Template.ionPopup.events({ '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(); + IonPopup.buttonClicked(index, event); } }); From 7e8a826f7d1195b8fbe001f7f663007e0ced0610 Mon Sep 17 00:00:00 2001 From: BastiRehm Date: Sun, 1 Mar 2015 16:44:11 +1000 Subject: [PATCH 3/8] Added possibility to pass either template or html string into popup --- components/ionPopup/ionPopup.html | 2 +- components/ionPopup/ionPopup.js | 43 +++++++++++++++++-------------- 2 files changed, 25 insertions(+), 20 deletions(-) diff --git a/components/ionPopup/ionPopup.html b/components/ionPopup/ionPopup.html index 7e82490..ff242c2 100644 --- a/components/ionPopup/ionPopup.html +++ b/components/ionPopup/ionPopup.html @@ -9,7 +9,7 @@ {{/if}}
- {{> UI.contentBlock}} + {{{template}}}
{{#if buttons.length}}
diff --git a/components/ionPopup/ionPopup.js b/components/ionPopup/ionPopup.js index 423b3f8..25d4439 100644 --- a/components/ionPopup/ionPopup.js +++ b/components/ionPopup/ionPopup.js @@ -1,25 +1,31 @@ IonPopup = { show: function (options) { - - this.template = Template[options.templateName]; - this.callbacks = {}; - this.callbacks.onTap = []; - var buttons = []; + this.template = Template.ionPopup; + this.buttons = []; + var innerTemplate; for (var i = 0; i < options.buttons.length; i++) { var button = options.buttons[i]; - buttons.push({ + this.buttons.push({ text: button.text, type: button.type, - index: i + index: i, + onTap: button.onTap }); - this.callbacks.onTap.push(button.onTap); + } + + //Figure out if a template or just a html string was passed + if (options.templateName) { + innerTemplate = Template[options.templateName].renderFunction().value; + } else { + innerTemplate = options.template; } var data = { title: options.title, subTitle: options.subTitle, - buttons: buttons + buttons: this.buttons, + template: innerTemplate }; this.view = Blaze.renderWithData(this.template, data, $('.ionic-body').get(0)); @@ -31,23 +37,23 @@ IonPopup = { $popup.addClass('popup-showing active'); }, - hide: function () { + close: function () { var $backdrop = $(this.view.firstNode()); var $popup = $backdrop.find('.popup-container'); - - // $popup.removeClass('popup-showing'); $popup.addClass('popup-hidden').removeClass('active'); - setTimeout(function(){ + setTimeout(function () { $('body').removeClass('popup-open'); Blaze.remove(this.view); }.bind(this), 100); }, buttonClicked: function (index, event) { - var callbacks = this.callbacks.onTap; - if (callbacks[index](event) === true) { - IonPopup.hide(); + var callback = this.buttons[index].onTap; + if(callback){ + if (callback(event) === true) { + IonPopup.close(); + } } } }; @@ -55,7 +61,7 @@ IonPopup = { Template.ionPopup.rendered = function () { $(window).on('keyup.ionPopup', function(event) { if (event.which == 27) { - IonPopup.hide(); + IonPopup.close(); } }); }; @@ -67,9 +73,8 @@ Template.ionPopup.destroyed = function () { Template.ionPopup.events({ // Handle clicking the backdrop 'click': function (event, template) { - console.log('test'); if ($(event.target).hasClass('popup-container')) { - IonActionSheet.hide(); + IonPopup.close(); } }, From 8dc91bc4a4ede5c91a78e894a02a8b869ed17b28 Mon Sep 17 00:00:00 2001 From: BastiRehm Date: Sun, 1 Mar 2015 16:55:13 +1000 Subject: [PATCH 4/8] Added alert functionality to IonPopup --- components/ionPopup/ionPopup.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/components/ionPopup/ionPopup.js b/components/ionPopup/ionPopup.js index 25d4439..a81ee40 100644 --- a/components/ionPopup/ionPopup.js +++ b/components/ionPopup/ionPopup.js @@ -37,6 +37,24 @@ IonPopup = { $popup.addClass('popup-showing active'); }, + alert: function (options) { + IonPopup.show({ + title: options.title, + subTitle: options.subtitle, + template: options.template, + templateName: options.templateName, + buttons: [ + { + text: options.okText ? options.okText : 'Ok', + type: options.okType ? options.okType : 'button-positive', + onTap: function() { + return true; + } + } + ] + }); + }, + close: function () { var $backdrop = $(this.view.firstNode()); var $popup = $backdrop.find('.popup-container'); From ed3d3f17bf479171a1ee72b4092b88c893145294 Mon Sep 17 00:00:00 2001 From: BastiRehm Date: Sun, 1 Mar 2015 17:05:45 +1000 Subject: [PATCH 5/8] Added confirm functionality to IonPopup --- components/ionPopup/ionPopup.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/components/ionPopup/ionPopup.js b/components/ionPopup/ionPopup.js index a81ee40..0564e0b 100644 --- a/components/ionPopup/ionPopup.js +++ b/components/ionPopup/ionPopup.js @@ -38,6 +38,25 @@ IonPopup = { }, alert: function (options) { + IonPopup.show({ + title: options.title, + subTitle: options.subtitle, + template: options.template, + templateName: options.templateName, + buttons: [ + { + text: options.okText ? options.okText : 'Ok', + type: options.okType ? options.okType : 'button-positive', + onTap: function(event) { + options.onOk(event); + return true; + } + } + ] + }); + }, + + confirm: function (options) { IonPopup.show({ title: options.title, subTitle: options.subtitle, @@ -48,6 +67,15 @@ IonPopup = { text: options.okText ? options.okText : 'Ok', type: options.okType ? options.okType : 'button-positive', onTap: function() { + if (options.onOk) options.onOk(event); + return true; + } + }, + { + text: options.cancelText ? options.cancelText : 'Cancel', + type: options.cancelType ? options.cancelType : 'button-default', + onTap: function() { + if (options.onCancel) options.onCancel(event); return true; } } From 091229282386693698b60b3d224f642445df9118 Mon Sep 17 00:00:00 2001 From: BastiRehm Date: Sun, 1 Mar 2015 17:32:34 +1000 Subject: [PATCH 6/8] Added prompt functionality to IonPopup --- components/ionPopup/ionPopup.js | 49 +++++++++++++++++++++++++++++---- 1 file changed, 43 insertions(+), 6 deletions(-) diff --git a/components/ionPopup/ionPopup.js b/components/ionPopup/ionPopup.js index 0564e0b..3f196ce 100644 --- a/components/ionPopup/ionPopup.js +++ b/components/ionPopup/ionPopup.js @@ -18,7 +18,7 @@ IonPopup = { if (options.templateName) { innerTemplate = Template[options.templateName].renderFunction().value; } else { - innerTemplate = options.template; + innerTemplate = '' + options.template + ''; } var data = { @@ -66,7 +66,7 @@ IonPopup = { { text: options.okText ? options.okText : 'Ok', type: options.okType ? options.okType : 'button-positive', - onTap: function() { + onTap: function (event) { if (options.onOk) options.onOk(event); return true; } @@ -74,7 +74,44 @@ IonPopup = { { text: options.cancelText ? options.cancelText : 'Cancel', type: options.cancelType ? options.cancelType : 'button-default', - onTap: function() { + onTap: function (event) { + if (options.onCancel) options.onCancel(event); + return true; + } + } + ] + }); + }, + + prompt: function (options) { + + if (options.templateName) { + template = Template[options.templateName].renderFunction().value; + } else { + template = '' + options.template + ''; + } + + template += ''; + + IonPopup.show({ + title: options.title, + subTitle: options.subtitle, + template: template, + buttons: [ + { + text: options.okText ? options.okText : 'Ok', + type: options.okType ? options.okType : 'button-positive', + onTap: function (event, template) { + var inputVal = $(template.firstNode).find('[name=prompt]').val(); + if (options.onOk) options.onOk(event, inputVal); + return true; + } + }, + { + text: options.cancelText ? options.cancelText : 'Cancel', + type: options.cancelType ? options.cancelType : 'button-default', + onTap: function (event) { if (options.onCancel) options.onCancel(event); return true; } @@ -94,10 +131,10 @@ IonPopup = { }.bind(this), 100); }, - buttonClicked: function (index, event) { + buttonClicked: function (index, event, template) { var callback = this.buttons[index].onTap; if(callback){ - if (callback(event) === true) { + if (callback(event, template) === true) { IonPopup.close(); } } @@ -126,7 +163,7 @@ Template.ionPopup.events({ 'click [data-index]': function (event, template) { var index = $(event.target).data('index'); - IonPopup.buttonClicked(index, event); + IonPopup.buttonClicked(index, event, template); } }); From 2fddbb14983ed0566f640cd36dfb5aa238e06054 Mon Sep 17 00:00:00 2001 From: BastiRehm Date: Sun, 1 Mar 2015 17:50:09 +1000 Subject: [PATCH 7/8] Added check for callback to alert functionality of ionPopup --- components/ionPopup/ionPopup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/ionPopup/ionPopup.js b/components/ionPopup/ionPopup.js index 3f196ce..39cb0b9 100644 --- a/components/ionPopup/ionPopup.js +++ b/components/ionPopup/ionPopup.js @@ -48,7 +48,7 @@ IonPopup = { text: options.okText ? options.okText : 'Ok', type: options.okType ? options.okType : 'button-positive', onTap: function(event) { - options.onOk(event); + if (options.onOk) options.onOk(event); return true; } } From 463a3ad1ab05cdf6e518401ae5b6ac7898029d6e Mon Sep 17 00:00:00 2001 From: BastiRehm Date: Mon, 2 Mar 2015 11:18:16 +1000 Subject: [PATCH 8/8] Added template reference to the callbacks and fixed subtitle bug --- components/ionPopup/ionPopup.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/components/ionPopup/ionPopup.js b/components/ionPopup/ionPopup.js index 39cb0b9..504a0cb 100644 --- a/components/ionPopup/ionPopup.js +++ b/components/ionPopup/ionPopup.js @@ -40,15 +40,15 @@ IonPopup = { alert: function (options) { IonPopup.show({ title: options.title, - subTitle: options.subtitle, + subTitle: options.subTitle, template: options.template, templateName: options.templateName, buttons: [ { text: options.okText ? options.okText : 'Ok', type: options.okType ? options.okType : 'button-positive', - onTap: function(event) { - if (options.onOk) options.onOk(event); + onTap: function(event, template) { + if (options.onOk) options.onOk(event, template); return true; } } @@ -59,23 +59,23 @@ IonPopup = { confirm: function (options) { IonPopup.show({ title: options.title, - subTitle: options.subtitle, + subTitle: options.subTitle, template: options.template, templateName: options.templateName, buttons: [ { text: options.okText ? options.okText : 'Ok', type: options.okType ? options.okType : 'button-positive', - onTap: function (event) { - if (options.onOk) options.onOk(event); + onTap: function (event, template) { + if (options.onOk) options.onOk(event, template); return true; } }, { text: options.cancelText ? options.cancelText : 'Cancel', type: options.cancelType ? options.cancelType : 'button-default', - onTap: function (event) { - if (options.onCancel) options.onCancel(event); + onTap: function (event, template) { + if (options.onCancel) options.onCancel(event, template); return true; } } @@ -96,7 +96,7 @@ IonPopup = { IonPopup.show({ title: options.title, - subTitle: options.subtitle, + subTitle: options.subTitle, template: template, buttons: [ { @@ -111,8 +111,8 @@ IonPopup = { { text: options.cancelText ? options.cancelText : 'Cancel', type: options.cancelType ? options.cancelType : 'button-default', - onTap: function (event) { - if (options.onCancel) options.onCancel(event); + onTap: function (event, template) { + if (options.onCancel) options.onCancel(event, template); return true; } }