github/meteor-ionic
2
0
Fork 0
mirror of https://github.com/donl/meteor-ionic.git synced 2026-05-26 22:06:41 -06:00
Code Issues Projects Packages Wiki Activity Actions

Merge pull request #95 from bastiRe/master

Browse source 
ionPopup implementation
This commit is contained in:
Nick Wientge 2015-03-03 08:49:04 -08:00
commit ebf37381fe
2 changed files with 177 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

38
components/ionPopup/ionPopup.html
View file

@ -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">
{{{template}}}
</div>
{{#if buttons.length}}
<div class="popup-buttons">
{{#each buttons}}
<button data-action="buttonTapped" data-index="{{index}}"
class="button {{type}}">
{{{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>

162
components/ionPopup/ionPopup.js
View file

@ -1,21 +1,169 @@
IonPopup = {
show: function () {
show: function (options) {
this.template = Template.ionPopup;
this.buttons = [];
var innerTemplate;
for (var i = 0; i < options.buttons.length; i++) {
var button = options.buttons[i];
this.buttons.push({
text: button.text,
type: button.type,
index: i,
onTap: 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 = '<span>' + options.template + '</span>';
}
var data = {
title: options.title,
subTitle: options.subTitle,
buttons: this.buttons,
template: innerTemplate
};
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 () {
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, template) {
if (options.onOk) options.onOk(event, template);
return true;
}
}
]
});
},
alert: function () {
confirm: 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, 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, template) {
if (options.onCancel) options.onCancel(event, template);
return true;
}
}
]
});
},
confirm: function () {
prompt: function (options) {
if (options.templateName) {
template = Template[options.templateName].renderFunction().value;
} else {
template = '<span>' + options.template + '</span>';
}
template += '<input type="' + options.inputType + '" placeholder="' +
options.inputPlaceholder + '" name="prompt" >';
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, template) {
if (options.onCancel) options.onCancel(event, template);
return true;
}
}
]
});
},
prompt: function () {
close: function () {
var $backdrop = $(this.view.firstNode());
var $popup = $backdrop.find('.popup-container');
$popup.addClass('popup-hidden').removeClass('active');
setTimeout(function () {
$('body').removeClass('popup-open');
Blaze.remove(this.view);
}.bind(this), 100);
},
buttonClicked: function (index, event, template) {
var callback = this.buttons[index].onTap;
if(callback){
if (callback(event, template) === true) {
IonPopup.close();
}
}
}
};
Template.ionPopup.rendered = function () {
$(window).on('keyup.ionPopup', function(event) {
if (event.which == 27) {
IonPopup.close();
}
});
};
Template.ionPopup.destroyed = function () {
$(window).off('keyup.ionPopup');
};
Template.ionPopup.events({
// Handle clicking the backdrop
'click': function (event, template) {
if ($(event.target).hasClass('popup-container')) {
IonPopup.close();
}
},
'click [data-index]': function (event, template) {
var index = $(event.target).data('index');
IonPopup.buttonClicked(index, event, template);
}
});