mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
Sexy title anim
This commit is contained in:
Max Lynch
84
js/ext/angular/src/directive/ionicNavRouter.js
vendored
84
js/ext/angular/src/directive/ionicNavRouter.js
vendored
@ -34,8 +34,13 @@ angular.module('ionic.ui.navRouter', [])
|
||||
isVisible: true
|
||||
};
|
||||
|
||||
this.setTitle = function(value) {
|
||||
$scope.$broadcast('navRouter.titleChanged', value);
|
||||
};
|
||||
|
||||
$scope.navController = this;
|
||||
}],
|
||||
|
||||
link: function($scope, $element, $attr) {
|
||||
$scope.animation = $attr.animation;
|
||||
|
||||
@ -50,27 +55,27 @@ angular.module('ionic.ui.navRouter', [])
|
||||
var reverseTransition = function() {
|
||||
console.log('REVERSE');
|
||||
$element.removeClass('noop-animation');
|
||||
$element.removeClass($scope.animation);
|
||||
$element.addClass($scope.animation + '-reverse');
|
||||
$element.addClass($scope.animation);
|
||||
$element.addClass('reverse');
|
||||
};
|
||||
|
||||
var forwardTransition = function() {
|
||||
console.log('FORWARD');
|
||||
$element.removeClass('noop-animation');
|
||||
$element.removeClass($scope.animation + '-reverse');
|
||||
$element.removeClass('reverse');
|
||||
$element.addClass($scope.animation);
|
||||
};
|
||||
|
||||
$scope.$on('$routeChangeSuccess', function(e, a) {
|
||||
console.log('ROUTE CHANGED', a, e);
|
||||
});
|
||||
$scope.$on('$routeChangeStart', function(e, a) {
|
||||
console.log('ROUTE START', a, e);
|
||||
$scope.$on('$routeChangeStart', function(e, next, current) {
|
||||
console.log('ROUTE START', e, next, current);
|
||||
var back, historyState = $window.history.state;
|
||||
|
||||
back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
|
||||
|
||||
if(isFirst) {
|
||||
if(isFirst || (next && next.$$route.originalPath === "")) {
|
||||
// Don't animate
|
||||
return;
|
||||
}
|
||||
@ -82,9 +87,9 @@ angular.module('ionic.ui.navRouter', [])
|
||||
}
|
||||
});
|
||||
|
||||
$scope.$on('$locationChangeSuccess', function() {
|
||||
$scope.$on('$locationChangeSuccess', function(a, b, c) {
|
||||
// Store the new location
|
||||
console.log('LOCATION CHANGE SUCCESS');
|
||||
console.log('LOCATION CHANGE SUCCESS', a, b, c);
|
||||
$rootScope.actualLocation = $location.path();
|
||||
if(isFirst) {
|
||||
isFirst = false;
|
||||
@ -130,7 +135,30 @@ angular.module('ionic.ui.navRouter', [])
|
||||
/**
|
||||
* Our Nav Bar directive which updates as the controller state changes.
|
||||
*/
|
||||
.directive('navBar', ['$rootScope', function($rootScope) {
|
||||
.directive('navBar', ['$rootScope', '$animate', function($rootScope, $animate) {
|
||||
var animate = function($element, oldTitle, newTitle, cb) {
|
||||
if(!oldTitle || oldTitle === newTitle) {
|
||||
cb();
|
||||
return;
|
||||
}
|
||||
|
||||
var title, nTitle, titles = $element[0].querySelectorAll('.title');
|
||||
if(titles.length > 1) {
|
||||
nTitle = titles[0];
|
||||
title = titles[1];
|
||||
} else if(titles.length) {
|
||||
title = titles[0];
|
||||
nTitle = document.createElement('h1');
|
||||
nTitle.className = 'title';
|
||||
nTitle.appendChild(document.createTextNode(newTitle));
|
||||
|
||||
$animate.enter(angular.element(nTitle), $element, angular.element($element[0].firstElementChild));
|
||||
$animate.leave(angular.element(title), function() {
|
||||
cb();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: '^navRouter',
|
||||
@ -143,12 +171,11 @@ angular.module('ionic.ui.navRouter', [])
|
||||
alignTitle: '@',
|
||||
},
|
||||
template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' +
|
||||
'<button ng-click="goBack()" class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
|
||||
'<h1 class="title">{{navController.getTopController().scope.title}}</h1>' +
|
||||
'<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
|
||||
'<h1 class="title" ng-bind="currentTitle"></h1>' +
|
||||
'</header>',
|
||||
link: function($scope, $element, $attr, navCtrl) {
|
||||
var backButton;
|
||||
|
||||
$scope.enableBackButton = true;
|
||||
|
||||
$scope.backButtonContent = '';
|
||||
@ -185,6 +212,18 @@ angular.module('ionic.ui.navRouter', [])
|
||||
|
||||
$scope.headerBarView = hb;
|
||||
|
||||
$scope.$parent.$on('navRouter.titleChanged', function(e, value) {
|
||||
console.log(value);
|
||||
console.log('Title changing from', $scope.currentTitle, 'to', value);
|
||||
var oldTitle = $scope.currentTitle;
|
||||
animate($element, oldTitle, value, function() {
|
||||
$scope.currentTitle = value;
|
||||
hb.align();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
$scope.$parent.$on('navigation.push', function() {
|
||||
backButton = angular.element($element[0].querySelector('.button'));
|
||||
backButton.addClass($scope.backButtonType);
|
||||
@ -193,6 +232,7 @@ angular.module('ionic.ui.navRouter', [])
|
||||
$scope.$parent.$on('navigation.pop', function() {
|
||||
hb.align();
|
||||
});
|
||||
*/
|
||||
|
||||
$scope.$on('$destroy', function() {
|
||||
//
|
||||
@ -201,6 +241,26 @@ angular.module('ionic.ui.navRouter', [])
|
||||
};
|
||||
}])
|
||||
|
||||
.directive('navPage', ['$parse', function($parse) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: true,
|
||||
require: '^navRouter',
|
||||
link: function($scope, $element, $attr, navCtrl) {
|
||||
$element.addClass('pane');
|
||||
|
||||
var titleGet = $parse($attr.title);
|
||||
|
||||
$scope.$watch(titleGet, function(value) {
|
||||
console.log('Title changed');
|
||||
$scope.title = value;
|
||||
navCtrl.setTitle(value);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
}])
|
||||
|
||||
.directive('navBack', ['$window', '$rootScope', function($window, $rootScope) {
|
||||
return {
|
||||
restrict: 'AC',
|
||||
|
||||
@ -12,37 +12,37 @@
|
||||
</head>
|
||||
<body>
|
||||
<pane nav-router animation="slide-left-right">
|
||||
<nav-bar back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
|
||||
<nav-bar class="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
|
||||
<ng-view></ng-view>
|
||||
</pane>
|
||||
|
||||
<script id="page1.html" type="text/ng-template">
|
||||
<pane>
|
||||
<nav-page title="'Bears'">
|
||||
<h1>Page 1</h1>
|
||||
<span>{{num}}</span>
|
||||
<a class="button button-pure" nav-back>Back</a>
|
||||
<a class="button button-assertive" href="#/page2">Next</a>
|
||||
</pane>
|
||||
</nav-page>
|
||||
</script>
|
||||
<script id="page2.html" type="text/ng-template">
|
||||
<pane>
|
||||
<nav-page title="'Beets'">
|
||||
<h1>Page 2</h1>
|
||||
<a class="button button-pure" nav-back>Back</a>
|
||||
<a class="button button-assertive" href="#/page3">Next</a>
|
||||
</pane>
|
||||
</nav-page>
|
||||
</script>
|
||||
<script id="page3.html" type="text/ng-template">
|
||||
<pane>
|
||||
<nav-page title="'Battlestar Galactica'">
|
||||
<h1>Page 3</h1>
|
||||
<a class="button button-pure" nav-back>Back</a>
|
||||
</pane>
|
||||
</nav-page>
|
||||
</script>
|
||||
<script>
|
||||
angular.module('navTest', ['ionic'])
|
||||
|
||||
|
||||
.config(function($routeProvider, $locationProvider) {
|
||||
$routeProvider.when('/page1', {
|
||||
$routeProvider.when('/', {
|
||||
templateUrl: 'page1.html',
|
||||
controller: 'Page1Ctrl'
|
||||
});
|
||||
@ -54,9 +54,6 @@
|
||||
$routeProvider.when('/page3', {
|
||||
templateUrl: 'page3.html',
|
||||
});
|
||||
$routeProvider.otherwise({
|
||||
redirectTo: '/page1'
|
||||
});
|
||||
|
||||
// configure html5 to get links working on jsfiddle
|
||||
//$locationProvider.html5Mode(true);
|
||||
|
||||
Reference in New Issue
Block a user