mirror of
https://github.com/donl/meteor-ionic.git
synced 2026-05-26 22:06:41 -06:00
04fcd742e9
In _uihooks, sometimes the `next` argument is null, which means the new dquote> node should be appended to the parent. However, using jQuery (`$(node).insertBefore(next)`), that's not possible, since jQuery has no way of knowing what parent you mean. Instead, this commit uses a standard DOM method, `parent.insertBefore(node, next)`, which does the right thing -- it's what Blaze uses internally when no `insertElement` hook is defined.
117 lines
3.1 KiB
JavaScript
117 lines
3.1 KiB
JavaScript
Template.ionNavBar.created = function () {
|
|
this.data = this.data || {};
|
|
|
|
if (Platform.isAndroid()) {
|
|
this.transition = 'android';
|
|
} else {
|
|
this.transition = 'ios';
|
|
}
|
|
|
|
// Allow overriding the transition
|
|
if (this.data.transition) {
|
|
this.transition = this.data.transition;
|
|
}
|
|
|
|
if (this.transition === 'ios') {
|
|
this.transitionDuration = 450;
|
|
} else {
|
|
this.transitionDuration = 200;
|
|
}
|
|
};
|
|
|
|
Template.ionNavBar.rendered = function () {
|
|
Session.set('hasHeader', true);
|
|
|
|
IonHeaderBar.alignTitle.call(this);
|
|
IonHeaderBar.positionTitle.call(this);
|
|
|
|
var template = this;
|
|
var container = this.find('[data-navbar-container]');
|
|
container._uihooks = {
|
|
insertElement: function(node, next) {
|
|
var $node = $(node);
|
|
|
|
if (!$node.hasClass('title') && !$node.hasClass('button') || IonNavigation.skipTransitions) {
|
|
container.insertBefore(node, next);
|
|
// Changing tabs skips transition animations, but we still want to update the position of the title
|
|
IonHeaderBar.alignTitle.call(template);
|
|
IonHeaderBar.positionTitle.call(template);
|
|
return;
|
|
}
|
|
|
|
if ($node.hasClass('title')) {
|
|
container.insertBefore(node, next);
|
|
$node.addClass('title-entering title-stage');
|
|
|
|
IonHeaderBar.alignTitle.call(template);
|
|
IonHeaderBar.positionTitle.call(template);
|
|
|
|
Meteor.setTimeout(function() {
|
|
$node.removeClass('title-stage').addClass('title-active');
|
|
}, 16);
|
|
|
|
Meteor.setTimeout(function () {
|
|
$(this).removeClass('title-entering');
|
|
$('[data-navbar-container]').removeClass('nav-bar-direction-back').addClass('nav-bar-direction-forward');
|
|
}, template.transitionDuration + 16);
|
|
}
|
|
|
|
if ($node.hasClass('button')) {
|
|
container.insertBefore(node, next);
|
|
$node.addClass('button-entering button-stage');
|
|
Meteor.setTimeout(function() {
|
|
$node.removeClass('button-stage').addClass('button-active');
|
|
}, 16);
|
|
|
|
Meteor.setTimeout(function () {
|
|
$(this).removeClass('button-entering');
|
|
}, template.transitionDuration + 16);
|
|
}
|
|
},
|
|
|
|
removeElement: function(node) {
|
|
var $node = $(node);
|
|
if (!$node.hasClass('title') && !$node.hasClass('button') || IonNavigation.skipTransitions) {
|
|
$node.remove();
|
|
return;
|
|
}
|
|
|
|
if ($node.hasClass('title')) {
|
|
$node.addClass('title-leaving title-stage');
|
|
Meteor.setTimeout(function() {
|
|
$node.removeClass('title-stage').addClass('title-active');
|
|
}, 16);
|
|
|
|
Meteor.setTimeout(function () {
|
|
$node.remove();
|
|
}, template.transitionDuration + 16);
|
|
}
|
|
|
|
if ($node.hasClass('button')) {
|
|
$node.remove();
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
Template.ionNavBar.destroyed = function () {
|
|
Session.set('hasHeader', false);
|
|
};
|
|
|
|
Template.ionNavBar.helpers({
|
|
classes: function () {
|
|
var classes = ['bar', 'bar-header'];
|
|
|
|
if (this.class) {
|
|
classes.push(this.class);
|
|
} else {
|
|
classes.push('bar-stable');
|
|
}
|
|
|
|
return classes.join(' ');
|
|
},
|
|
|
|
transition: function () {
|
|
return Template.instance().transition;
|
|
}
|
|
});
|