4 angular.module('foundation.dynamicRouting.animations', ['foundation.dynamicRouting'])
5 .directive('uiView', uiView)
8 uiView.$inject = ['$rootScope', '$state'];
10 function uiView($rootScope, $state) {
19 function link(scope, element) {
21 var animationEnded = false;
25 $rootScope.$on('$stateChangeStart', onStateChangeStart),
26 $rootScope.$on('$stateChangeError', onStateChangeError),
27 scope.$on('$stateChangeSuccess', onStateChangeSuccess),
28 scope.$on('$viewContentAnimationEnded', onViewContentAnimationEnded)
31 var destroyed = scope.$on('$destroy', function onDestroy() {
32 angular.forEach(cleanup, function (cb) {
33 if (angular.isFunction(cb)) {
41 function onStateChangeStart(event, toState, toParams, fromState, fromParams) {
43 if (fromState.animation) {
44 if (!fromState.animation.leave && !toState.animation.leave) {
48 animationRouter(event, toState, fromState);
53 function animationRouter(event, toState, fromState) {
54 if (!animationEnded) {
58 element.removeClass(fromState.animation.leave);
63 element.addClass(fromState.animation.leave);
68 function onStateChangeError() {
70 element.removeClass(animation.leave);
73 resetParent(); //reset parent if state change fails
76 function onStateChangeSuccess() {
78 if ($state.includes(getState()) && animation.enter) {
79 element.addClass(animation.enter);
83 function onViewContentAnimationEnded(event) {
84 if (event.targetScope === scope && animation.enter) {
85 element.removeClass(animation.enter);
88 animationEnded = true;
93 var view = element.data('$uiView');
94 var state = view && view.state && view.state.self;
97 angular.extend(animation, state.animation);
103 function resetParent() {
104 element.parent().removeClass('position-absolute');
105 if(presetHeight !== true) {
106 element.parent()[0].style.height = null;
110 function prepareParent() {
111 var parentHeight = parseInt(element.parent()[0].style.height);
112 var elHeight = parseInt(window.getComputedStyle(element[0], null).getPropertyValue('height'));
113 var tempHeight = parentHeight > 0 ? parentHeight : elHeight > 0 ? elHeight : '';
115 if(parentHeight > 0) {
119 element.parent()[0].style.height = tempHeight + 'px';
120 element.parent().addClass('position-absolute');