github/meteor-ionic
2
0
Fork 0
mirror of https://github.com/donl/meteor-ionic.git synced 2026-06-03 06:12:24 -06:00
Code Issues Projects Packages Wiki Activity Actions

initial navbar animiations

Browse source
This commit is contained in:
Nick Wientge 2014-12-23 21:23:12 -05:00
parent 58802e8404
commit 6c735dc3f7
5 changed files with 148 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

1
components/ionBody/ionBody.js
View file

@ -48,6 +48,7 @@ Template.ionBody.events({
'click [data-nav-direction]': function (event, template) {
$('[data-nav-container]').addClass('nav-view-direction-' + $(event.target).data('nav-direction'));
$('[data-navbar-container]').addClass('nav-bar-direction-' + $(event.target).data('nav-direction'));
},
'click [data-ion-menu-toggle]': function (event, template) {

7
components/ionNavBar/ionNavBar.html Normal file
View file

@ -0,0 +1,7 @@
<template name="ionNavBar">
<div class="{{classes}} nav-bar-block nav-bar-transition-{{transition}} nav-bar-direction-forward" data-navbar-container>
{{> yield "headerButtonLeft"}}
{{> yield "headerTitle"}}
{{> yield "headerButtonRight"}}
</div>
</template>

121
components/ionNavBar/ionNavBar.js Normal file
View file

@ -0,0 +1,121 @@
Template.ionNavBar.created = function () {
if (isAndroid()) {
this.transition = 'android';
} else {
this.transition = 'ios';
}
// Allow overriding the transition
if (this.data && 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);
var align = this.alignTitle || 'center';
var $title = this.$('.title');
if (align === 'center') {
$title.addClass('title-center');
} else if (align === 'left') {
$title.addClass('title-left');
} else if (align === 'right') {
$title.addClass('title-right');
}
// Animate the title
var template = this;
this.find('[data-navbar-container]')._uihooks = {
insertElement: function(node, next) {
var $node = $(node);
if (!$node.hasClass('title') && !$node.hasClass('button')) {
$node.insertBefore(next);
return;
}
if ($node.hasClass('title')) {
$node.insertBefore(next).addClass('title-entering title-stage');
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')) {
$node.insertBefore(next).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')) {
$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.addClass('button-leaving button-stage');
Meteor.setTimeout(function() {
$node.removeClass('button-stage').addClass('tibuttontle-active');
}, 16);
Meteor.setTimeout(function () {
$node.remove();
}, template.transitionDuration + 16);
}
}
};
};
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;
}
});

30
components/ionNavView/ionNavView.js
View file

@ -1,10 +1,10 @@
Template.ionNavView.created = function () {
Session.setDefault('ionNavDirection', 'forward');
if (isIOS()) {
this.transition = 'ios';
} else {
if (isAndroid()) {
this.transition = 'android';
} else {
this.transition = 'ios';
}
// Allow overriding the transition
@ -24,37 +24,39 @@ Template.ionNavView.rendered = function () {
this.find('[data-nav-container]')._uihooks = {
insertElement: function(node, next) {
if (!template.transition || !$(node).hasClass('view')) {
$(node).insertBefore(next);
var $node = $(node);
if (!template.transition || !$node.hasClass('view')) {
$node.insertBefore(next);
return;
}
$(node).insertBefore(next).addClass('nav-view-entering nav-view-stage');
$node.insertBefore(next).addClass('nav-view-entering nav-view-stage');
Meteor.setTimeout(function() {
$(node).removeClass('nav-view-stage').addClass('nav-view-active');
$node.removeClass('nav-view-stage').addClass('nav-view-active');
}, 16);
Meteor.setTimeout(function () {
$(this).removeClass('nav-view-entering');
$('[data-nav-container]').removeClass('nav-view-direction-back').addClass('nav-view-direction-forward');
}, template.transitionDuration);
}, template.transitionDuration + 16);
},
removeElement: function(node) {
if (!template.transition || !$(node).hasClass('view')) {
$(node).remove();
var $node = $(node);
if (!template.transition || !$node.hasClass('view')) {
$node.remove();
return;
}
$(node).addClass('nav-view-leaving nav-view-stage');
$node.addClass('nav-view-leaving nav-view-stage');
Meteor.setTimeout(function() {
$(node).removeClass('nav-view-stage').addClass('nav-view-active');
$node.removeClass('nav-view-stage').addClass('nav-view-active');
}, 16);
Meteor.setTimeout(function () {
$(node).remove();
$node.remove();
Session.set('ionNavDirection', 'forward');
}, template.transitionDuration);
}, template.transitionDuration + 16);
}
};
};

3
package.js
View file

@ -48,6 +48,9 @@ Package.onUse(function(api) {
"components/ionModal/ionModal.html",
"components/ionModal/ionModal.js",
"components/ionNavBar/ionNavBar.html",
"components/ionNavBar/ionNavBar.js",
"components/ionNavView/ionNavView.html",
"components/ionNavView/ionNavView.js",