javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Working on nav controller transitions, fixed #66

Browse Source
This commit is contained in:
Max Lynch
2013-11-05 20:49:18 -06:00
parent 7b9698e8b7
commit 781fb241a1
12 changed files with 334 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
js/ext/angular/src/directive/ionicNav.js vendored
View File

@ -38,6 +38,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) {
@ -56,7 +57,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));
});
});
@ -95,12 +99,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() {
@ -113,42 +121,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 {
@ -159,9 +167,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';
@ -177,26 +189,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;
}
}
});
}
}

36
js/ext/angular/src/directive/ionicTabBar.js vendored
View File

@ -48,7 +48,9 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
replace: true,
scope: {
animation: '@',
controllerChanged: '&'
controllerChanged: '&',
tabsType: '@',
tabsStyle: '@',
},
transclude: true,
controller: 'TabsCtrl',
@ -117,9 +119,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);
}
};
})
@ -162,27 +168,5 @@ 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>'
};
});

1
js/ext/angular/test/list.html
View File

@ -21,6 +21,7 @@
.my-repeat-animation > .ng-enter {
left:-10px;
opacity:0;
z-index: 10;
}
.my-repeat-animation > .ng-enter.ng-enter-active {
left:0;

10
js/ext/angular/test/tabs.html
View File

@ -48,16 +48,16 @@
</style>
</head>
<body ng-controller="RootCtrl">
<tabs animation="fade-in-out" controller-changed="onControllerChanged(oldController, oldIndex, newController, newIndex)">
<tabs animation="fade-in-out" tabs-type="tabs-icon-only" tabs-style="tabs-primary" controller-changed="onControllerChanged(oldController, oldIndex, newController, newIndex)">
<tab title="Home" icon-on="icon-ios7-filing" icon-off="icon-ios7-filing-outline" ng-controller="HomeCtrl">
<tab title="Home" icon-on="ion ion-ios7-filing" icon-off="ion ion-ios7-filing-outline" ng-controller="HomeCtrl">
<header class="bar bar-header bar-secondary">
<button class="button button-clear button-primary" ng-click="newTask()">New</button>
<h1 class="title">Tasks</h1>
<button class="button button-clear button-primary" ng-click="isEditingItems = !isEditingItems">Edit</button>
</header>
<content has-header="true" has-tabs="true">
<list is-editing="isEditingItems" animation="fade-out" delete-icon="icon-minus-circled" reorder-icon="icon-navicon">
<list is-editing="isEditingItems" animation="fade-out" delete-icon="ion ion-minus-circled" reorder-icon="ion-navicon">
<list-item ng-repeat="item in items"
item="item"
buttons="item.buttons"
@ -74,7 +74,7 @@
</content>
</tab>
<tab title="About" icon-on="icon-ios7-clock" icon-off="icon-ios7-clock-outline">
<tab title="About" icon-on="ion ion-ios7-clock" icon-off="ion ion-ios7-clock-outline">
<header class="bar bar-header bar-secondary">
<h1 class="title">Deadlines</h1>
</header>
@ -83,7 +83,7 @@
</content>
</tab>
<tab title="Settings" icon-on="icon-ios7-gear" icon-off="icon-ios7-gear-outline">
<tab title="Settings" icon-on="ion ion-ios7-gear" icon-off="ion ion-ios7-gear-outline">
<header class="bar bar-header bar-secondary">
<h1 class="title">Settings</h1>
</header>