Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(ionNavAnimation): `<a href="#/page" ion-nav-animation="slide-in-…
…up">`
  • Loading branch information
ajoslin committed Feb 26, 2014
1 parent 4c996c7 commit 8354d42
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 12 deletions.
15 changes: 15 additions & 0 deletions js/ext/angular/src/directive/ionNavAnimation.js
@@ -0,0 +1,15 @@
angular.module('ionic.ui.navAnimation', [])
.directive('ionNavAnimation', function() {
return {
restrict: 'A',
require: '^?ionNavView',
link: function($scope, $element, $attrs, navViewCtrl) {
if (!navViewCtrl) {
return;
}
ionic.on('tap', function() {
navViewCtrl.setNextAnimation($attrs.ionNavAnimation);
}, $element[0]);
}
};
});
10 changes: 6 additions & 4 deletions js/ext/angular/src/directive/ionicViewState.js
Expand Up @@ -295,7 +295,6 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
};
}])


.directive('ionNavView', ['$ionicViewService', '$state', '$compile', '$controller', '$animate',
function( $ionicViewService, $state, $compile, $controller, $animate) {
// IONIC's fork of Angular UI Router, v0.2.7
Expand All @@ -307,9 +306,13 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
terminal: true,
priority: 2000,
transclude: true,
controller: function() {}, //noop controller so this can be required
controller: ['$scope', function($scope) {
this.setNextAnimation = function(anim) {
$scope.$nextAnimation = anim;
};
}],
compile: function (element, attr, transclude) {
return function(scope, element, attr) {
return function(scope, element, attr, navViewCtrl) {
var viewScope, viewLocals,
name = attr[directive.name] || attr.name || '',
onloadExp = attr.onload || '',
Expand Down Expand Up @@ -351,7 +354,6 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
if (locals === viewLocals) return; // nothing to do
var renderer = $ionicViewService.getRenderer(element, attr, scope);


// Destroy previous view scope
if (viewScope) {
viewScope.$destroy();
Expand Down
26 changes: 19 additions & 7 deletions js/ext/angular/src/service/ionicView.js
Expand Up @@ -384,17 +384,26 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
var doAnimation;

// climb up the DOM and see which animation classname to use, if any
var animationClass = null;
var el = navViewElement[0];
while(!animationClass && el) {
animationClass = el.getAttribute('animation');
el = el.parentElement;
var animationClass = angular.isDefined(navViewScope.$nextAnimation) ?
navViewScope.$nextAnimation :
getParentAnimationClass(navViewElement[0]);

navViewScope.$nextAnimation = undefined;

function getParentAnimationClass(el) {
var className = '';
while(!className && el) {
className = el.getAttribute('animation');
el = el.parentElement;
}
return className;
}
el = null;

function setAnimationClass() {
// add the animation CSS class we're gonna use to transition between views
navViewElement[0].classList.add(animationClass);
if (animationClass) {
navViewElement[0].classList.add(animationClass);
}

if(registerData.navDirection === 'back') {
// animate like we're moving backward
Expand All @@ -421,6 +430,9 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])

$animate.enter(element, navViewElement, null, function() {
document.body.classList.remove('disable-pointer-events');
if (animationClass) {
navViewElement[0].classList.remove(animationClass);
}
});
return;
}
Expand Down
41 changes: 41 additions & 0 deletions js/ext/angular/test/directive/ionicNavAnimation.unit.js
@@ -0,0 +1,41 @@
describe('ionNavAnimation directive', function() {
beforeEach(module('ionic.ui.navAnimation'));

var navViewCtrl;
function setup(anim, noNavViewCtrl) {
if (noNavViewCtrl) {
navViewCtrl = null;
} else {
navViewCtrl = {
setNextAnimation: jasmine.createSpy('setNextAnimation')
};
}
var element = angular.element(
'<div ion-nav-animation="'+(anim||'')+'"></div>'
);
element.data('$ionNavViewController', navViewCtrl);
inject(function($compile, $rootScope) {
$compile(element)($rootScope.$new());
});

return element;
}

it('should not listen for tap if no navViewCtrl', function() {
spyOn(ionic, 'on');
setup('', true);
expect(ionic.on).not.toHaveBeenCalled();
});

it('should listen for tap', function() {
spyOn(ionic, 'on');
var el = setup('');
expect(ionic.on).toHaveBeenCalledWith('tap', jasmine.any(Function), el[0]);
});

it('should call navViewCtrl.setNextAnimation on tap', function() {
var el = setup('foobar');
ionic.trigger('tap', { target: el[0] });
expect(navViewCtrl.setNextAnimation).toHaveBeenCalledWith('foobar');
});
});
2 changes: 1 addition & 1 deletion js/ext/angular/test/viewState.html
Expand Up @@ -140,7 +140,7 @@ <h3>Information</h3>
<ion-view title="'Auto List'">
<ion-content has-header="true" has-tabs="true">
<ion-list>
<ion-item ng-repeat="auto in autos" ng-href="#/tabs/autos/{{ $index }}">
<ion-item ng-repeat="auto in autos" ng-href="#/tabs/autos/{{ $index }}" ion-nav-animation="{{$index === 0 ? 'slide-in-up' : 'slide-left-right'}}">
{{ auto.year }} {{ auto.make }} {{ auto.model }}
</ion-item>
</ion-list>
Expand Down

0 comments on commit 8354d42

Please sign in to comment.