This commit is contained in:
Max Lynch
2013-11-11 21:18:48 -06:00
parent 58dc717ab9
commit 56a64b8bc6
7 changed files with 172 additions and 76 deletions

View File

@ -60,21 +60,17 @@ ionic.controllers.NavController = ionic.controllers.ViewController.inherit({
return;
// Actually switch the active controllers
// Remove the old one
//last && last.detach();
if(last) {
last.isVisible = false;
last.visibilityChanged && last.visibilityChanged();
last.visibilityChanged && last.visibilityChanged('push');
}
// Grab the top controller on the stack
var next = this.controllers[this.controllers.length - 1];
// TODO: No DOM stuff here
//this.content.el.appendChild(next.el);
next.isVisible = true;
next.visibilityChanged && next.visibilityChanged();
// Trigger visibility change, but send 'first' if this is the first page
next.visibilityChanged && next.visibilityChanged(last ? 'push' : 'first');
this._updateNavBar();
@ -99,7 +95,7 @@ ionic.controllers.NavController = ionic.controllers.ViewController.inherit({
last = this.controllers.pop();
if(last) {
last.isVisible = false;
last.visibilityChanged && last.visibilityChanged();
last.visibilityChanged && last.visibilityChanged('pop');
}
// Remove the old one
@ -110,7 +106,7 @@ ionic.controllers.NavController = ionic.controllers.ViewController.inherit({
// TODO: No DOM stuff here
//this.content.el.appendChild(next.el);
next.isVisible = true;
next.visibilityChanged && next.visibilityChanged();
next.visibilityChanged && next.visibilityChanged('pop');
// Switch to it (TODO: Animate or such things here)

View File

@ -48,7 +48,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
* Push a template onto the navigation stack.
* @param {string} templateUrl the URL of the template to load.
*/
this.pushFromTemplate = function(templateUrl) {
this.pushFromTemplate = ionic.debounce(function(templateUrl) {
var childScope = $scope.$new();
childScope.isVisible = true;
@ -58,13 +58,10 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
// Compile the template with the new scrope, and append it to the navigation's content area
var el = $compile(templateString)(childScope, function(cloned, scope) {
var content = angular.element($element[0].querySelector('.content, .scroll'));
//content.append(cloned);
//angular.element(content).append(cloned);
$animate.enter(cloned, angular.element(content));
});
});
};
}, 100, true);
/**
* Push a controller to the stack. This is called by the child
@ -169,7 +166,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
// Store that we should go forwards on the animation. This toggles
// based on the visibility sequence (to support reverse transitions)
var wasVisible = null;
var lastDirection = null;
$scope.title = $attr.title;
$scope.pushAnimation = $attr.pushAnimation || 'slide-in-left';
@ -185,6 +182,24 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
navCtrl.showNavBar();
}
$scope.visibilityChanged = function(direction) {
lastDirection = direction;
if(!childElement) {
return;
}
var clone = childElement;
if(direction == 'push') {
clone.addClass(childScope.pushAnimation);
clone.removeClass(childScope.popAnimation);
} else if(direction == 'pop') {
clone.addClass(childScope.popAnimation);
clone.removeClass(childScope.pushAnimation);
}
};
// Push this controller onto the stack
$scope.pushController($scope, $element);
@ -196,39 +211,33 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
transclude(childScope, function(clone) {
childElement = clone;
// Check if this is visible, and if so, create it and show it
if(wasVisible === false) {
clone.removeClass(childScope.pushAnimation);
clone.addClass(childScope.popAnimation);
} else {
if(lastDirection == 'push') {
clone.addClass(childScope.pushAnimation);
clone.removeClass(childScope.popAnimation);
} else if(lastDirection == 'pop') {
clone.addClass(childScope.popAnimation);
}
$animate.enter(clone, $element.parent(), $element);
wasVisible = true;
$animate.enter(clone, $element.parent(), $element, function() {
clone.removeClass(childScope.pushAnimation);
clone.removeClass(childScope.popAnimation);
});
});
} else {
// Taken from ngIf
if(childElement) {
var clone = childElement;
// Check if this is visible, and if so, create it and show it
if(wasVisible === false) {
clone.removeClass(childScope.pushAnimation);
clone.addClass(childScope.popAnimation);
} else {
clone.addClass(childScope.pushAnimation);
clone.removeClass(childScope.popAnimation);
}
$animate.leave(childElement);
$animate.leave(childElement, function() {
if(childScope) {
childElement.removeClass(childScope.pushAnimation);
childElement.removeClass(childScope.popAnimation);
}
});
childElement = undefined;
wasVisible = false;
}
if(childScope) {
childScope.$destroy();
childScope = undefined;
}
}
});
}

View File

@ -1,8 +1,15 @@
(function(ionic) {
/**
* Various utilities used throughout Ionic
*
* Some of these are adopted from underscore.js and backbone.js, both also MIT licensed.
*/
ionic.Utils = {
// Return a function that will be called with the given context
/**
* Return a function that will be called with the given context
*/
proxy: function(func, context) {
var args = Array.prototype.slice.call(arguments, 2);
return function() {
@ -10,6 +17,41 @@
};
},
/**
* Only call a function once in the given interval.
*
* @param func {Function} the function to call
* @param wait {int} how long to wait before/after to allow function calls
* @param immediate {boolean} whether to call immediately or after the wait interval
*/
debounce: function(func, wait, immediate) {
var timeout, args, context, timestamp, result;
return function() {
context = this;
args = arguments;
timestamp = new Date();
var later = function() {
var last = (new Date()) - timestamp;
if (last < wait) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
if (!immediate) result = func.apply(context, args);
}
};
var callNow = immediate && !timeout;
if (!timeout) {
timeout = setTimeout(later, wait);
}
if (callNow) result = func.apply(context, args);
return result;
};
},
/**
* Throttle the given fun, only allowing it to be
* called at most every `wait` ms.
*/
throttle: function(func, wait, options) {
var context, args, result;
var timeout = null;
@ -94,5 +136,6 @@
ionic.extend = ionic.Utils.extend;
ionic.throttle = ionic.Utils.throttle;
ionic.proxy = ionic.Utils.proxy;
ionic.debounce = ionic.Utils.debounce;
})(window.ionic);