mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
Working on nav controller transitions, fixed #66
This commit is contained in:
Max Lynch
139
dist/js/ionic-angular.js
vendored
139
dist/js/ionic-angular.js
vendored
@ -702,6 +702,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
|
||||
|
||||
|
||||
this.handleDrag = function(e) {
|
||||
// TODO: Support dragging between pages
|
||||
};
|
||||
|
||||
this.endDrag = function(e) {
|
||||
@ -720,7 +721,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 = $element[0].querySelector('.content');
|
||||
var content = angular.element($element[0].querySelector('.content'));
|
||||
|
||||
//content.append(cloned);
|
||||
//angular.element(content).append(cloned);
|
||||
$animate.enter(cloned, angular.element(content));
|
||||
});
|
||||
});
|
||||
@ -759,12 +763,16 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
|
||||
require: '^navs',
|
||||
replace: true,
|
||||
scope: true,
|
||||
template: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' +
|
||||
template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' +
|
||||
'<a href="#" ng-click="goBack()" class="button" ng-if="navController.controllers.length > 1">Back</a>' +
|
||||
'<h1 class="title">{{navController.getTopController().title}}</h1>' +
|
||||
'</header>',
|
||||
link: function(scope, element, attrs, navCtrl) {
|
||||
scope.navController = navCtrl;
|
||||
|
||||
scope.barType = attrs.barType || 'bar-dark';
|
||||
element.addClass(scope.barType);
|
||||
|
||||
scope.$watch('navController.controllers.length', function(value) {
|
||||
});
|
||||
scope.goBack = function() {
|
||||
@ -777,42 +785,42 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
|
||||
.directive('navContent', ['Gesture', '$animate', '$compile', function(Gesture, $animate, $compile) {
|
||||
|
||||
// We need to animate the new controller into view.
|
||||
var animatePushedController = function(childScope, clone, $element) {
|
||||
var animatePushedController = function(childScope, clone, $element, isForward) {
|
||||
var parent = angular.element($element.parent().parent().parent());
|
||||
|
||||
var title = angular.element(parent[0].querySelector('.title'));
|
||||
|
||||
// Clone the old title and insert it so we can animate it back into place for the new controller
|
||||
var newTitle = angular.element(title.clone());
|
||||
|
||||
$compile(newTitle)(childScope);
|
||||
title.after(newTitle);
|
||||
|
||||
// Grab the button so we can slide it in
|
||||
var button = angular.element(parent[0].querySelector('.button'));
|
||||
|
||||
clone.addClass(childScope.slideInAnimation);
|
||||
if(isForward) {
|
||||
|
||||
// Slide the button in
|
||||
$animate.addClass(button, childScope.slideButtonInAnimation, function() {
|
||||
$animate.removeClass(button, childScope.slideButtonInAnimation, function() {});
|
||||
})
|
||||
// Slide the button in
|
||||
$animate.addClass(button, childScope.slideButtonInAnimation, function() {
|
||||
$animate.removeClass(button, childScope.slideButtonInAnimation, function() {});
|
||||
})
|
||||
|
||||
// Slide the new title in
|
||||
$animate.addClass(newTitle, childScope.slideTitleInAnimation, function() {
|
||||
$animate.removeClass(newTitle, childScope.slideTitleInAnimation, function() {
|
||||
newTitle.scope().$destroy();
|
||||
newTitle.remove();
|
||||
// Slide the new title in
|
||||
$animate.addClass(newTitle, childScope.slideTitleInAnimation, function() {
|
||||
$animate.removeClass(newTitle, childScope.slideTitleInAnimation, function() {
|
||||
newTitle.scope().$destroy();
|
||||
newTitle.remove();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Grab the old title and slide it out
|
||||
var title = $element.parent().parent().parent()[0].querySelector('.title');
|
||||
$animate.enter(clone, $element.parent(), $element);
|
||||
$animate.addClass(angular.element(title), childScope.slideTitleOutAnimation, function() {
|
||||
$animate.removeClass(angular.element(title), childScope.slideTitleOutAnimation, function() {
|
||||
// Grab the old title and slide it out
|
||||
var title = $element.parent().parent().parent()[0].querySelector('.title');
|
||||
$animate.addClass(angular.element(title), childScope.slideTitleOutAnimation, function() {
|
||||
$animate.removeClass(angular.element(title), childScope.slideTitleOutAnimation, function() {
|
||||
});
|
||||
});
|
||||
});
|
||||
} else {
|
||||
clone.addClass(childScope.slideBackInAnimation);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
@ -823,9 +831,13 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
|
||||
return function($scope, $element, $attr, navCtrl) {
|
||||
var lastParent, lastIndex, childScope, childElement;
|
||||
|
||||
// Store that we should go forwards on the animation. This toggles
|
||||
// based on the visibility sequence (to support reverse transitions)
|
||||
var wasVisible = null;
|
||||
|
||||
$scope.title = $attr.title;
|
||||
$scope.slideInAnimation = $attr.slideAnimation || 'content-slide-in';
|
||||
$scope.pushAnimation = $attr.pushAnimation || 'slide-in-left';
|
||||
$scope.popAnimation = $attr.popAnimation || 'slide-in-right';
|
||||
$scope.slideTitleInAnimation = $attr.slideTitleInAnimation || 'bar-title-in';
|
||||
$scope.slideTitleOutAnimation = $attr.slideTitleOutAnimation || 'bar-title-out';
|
||||
$scope.slideButtonInAnimation = $attr.slideButtonInAnimation || 'bar-button-in';
|
||||
@ -841,26 +853,47 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
|
||||
$scope.pushController($scope, $element);
|
||||
|
||||
$scope.$watch('isVisible', function(value) {
|
||||
// Taken from ngIf
|
||||
if(childElement) {
|
||||
$animate.leave(childElement);
|
||||
childElement = undefined;
|
||||
}
|
||||
if(childScope) {
|
||||
childScope.$destroy();
|
||||
childScope = undefined;
|
||||
}
|
||||
|
||||
// Check if this is visible, and if so, create it and show it
|
||||
if(value) {
|
||||
childScope = $scope.$new();
|
||||
|
||||
transclude(childScope, function(clone) {
|
||||
childElement = clone;
|
||||
|
||||
animatePushedController(childScope, clone, $element);
|
||||
// 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.enter(clone, $element.parent(), $element);
|
||||
wasVisible = true;
|
||||
});
|
||||
}
|
||||
} 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);
|
||||
childElement = undefined;
|
||||
wasVisible = false;
|
||||
}
|
||||
if(childScope) {
|
||||
childScope.$destroy();
|
||||
childScope = undefined;
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1126,7 +1159,9 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
replace: true,
|
||||
scope: {
|
||||
animation: '@',
|
||||
controllerChanged: '&'
|
||||
controllerChanged: '&',
|
||||
tabsType: '@',
|
||||
tabsStyle: '@',
|
||||
},
|
||||
transclude: true,
|
||||
controller: 'TabsCtrl',
|
||||
@ -1195,9 +1230,13 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
transclude: true,
|
||||
replace: true,
|
||||
scope: true,
|
||||
template: '<div class="tabs tabs-icon-top tabs-primary">' +
|
||||
template: '<div class="tabs">' +
|
||||
'<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' +
|
||||
'</div>'
|
||||
'</div>',
|
||||
link: function($scope, $element, $attr) {
|
||||
$element.addClass($scope.tabsType);
|
||||
$element.addClass($scope.tabsStyle);
|
||||
}
|
||||
};
|
||||
})
|
||||
|
||||
@ -1240,30 +1279,8 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
template: '<div class="tabs tabs-primary" ng-transclude>' +
|
||||
'</div>'
|
||||
}
|
||||
})
|
||||
|
||||
.directive('tabItem', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
scope: {
|
||||
title: '@',
|
||||
iconOn: '@',
|
||||
iconOff: '@',
|
||||
active: '=',
|
||||
tabSelected: '@',
|
||||
index: '='
|
||||
},
|
||||
link: function(scope, element, attrs) {
|
||||
},
|
||||
template:
|
||||
'<a href="#" ng-class="{active:active}" ng-click="tabSelected()" class="tab-item">' +
|
||||
'<i class="{{icon}}" ng-if="icon"></i>' +
|
||||
'<i class="{{iconOn}}" ng-if="active"></i>' +
|
||||
'<i class="{{iconOff}}" ng-if="!active"></i> {{title}}' +
|
||||
'</a>'
|
||||
};
|
||||
});
|
||||
|
||||
;
|
||||
angular.module('ionic.ui.toggle', [])
|
||||
|
||||
|
||||
Reference in New Issue
Block a user