Skip to content

Expose animation promises #2597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 1, 2016
Merged

Expose animation promises #2597

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
84fd412
Revert "fix(viewDirective): $destroy event is triggered before animat…
christopherthielen Mar 1, 2016
eb68955
Revert "feat(ui-view): Add noanimation attribute to specify static re…
christopherthielen Mar 1, 2016
fde64e1
feat(uiView): Put $animate promises on element.data('$uiView')
christopherthielen Mar 1, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 52 additions & 71 deletions src/viewDirective.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
var ngMajorVer = angular.version.major;
var ngMinorVer = angular.version.minor;
/**
* @ngdoc directive
* @name ui.router.state.directive:ui-view
Expand All @@ -24,33 +22,30 @@ var ngMinorVer = angular.version.minor;
* service, {@link ui.router.state.$uiViewScroll}. This custom service let's you
* scroll ui-view elements into view when they are populated during a state activation.
*
* @param {string=} noanimation If truthy, the non-animated renderer will be selected (no animations
* will be applied to the ui-view)
*
* *Note: To revert back to old [`$anchorScroll`](http://docs.angularjs.org/api/ng.$anchorScroll)
* functionality, call `$uiViewScrollProvider.useAnchorScroll()`.*
*
* @param {string=} onload Expression to evaluate whenever the view updates.
*
*
* @example
* A view can be unnamed or named.
* A view can be unnamed or named.
* <pre>
* <!-- Unnamed -->
* <div ui-view></div>
*
* <div ui-view></div>
*
* <!-- Named -->
* <div ui-view="viewName"></div>
* </pre>
*
* You can only have one unnamed view within any template (or root html). If you are only using a
* You can only have one unnamed view within any template (or root html). If you are only using a
* single view and it is unnamed then you can populate it like so:
* <pre>
* <div ui-view></div>
* <div ui-view></div>
* $stateProvider.state("home", {
* template: "<h1>HELLO!</h1>"
* })
* </pre>
*
*
* The above is a convenient shortcut equivalent to specifying your view explicitly with the {@link ui.router.state.$stateProvider#methods_state `views`}
* config property, by name, in this case an empty name:
* <pre>
Expand All @@ -62,13 +57,13 @@ var ngMinorVer = angular.version.minor;
* }
* })
* </pre>
*
* But typically you'll only use the views property if you name your view or have more than one view
* in the same template. There's not really a compelling reason to name a view if its the only one,
*
* But typically you'll only use the views property if you name your view or have more than one view
* in the same template. There's not really a compelling reason to name a view if its the only one,
* but you could if you wanted, like so:
* <pre>
* <div ui-view="main"></div>
* </pre>
* </pre>
* <pre>
* $stateProvider.state("home", {
* views: {
Expand All @@ -78,14 +73,14 @@ var ngMinorVer = angular.version.minor;
* }
* })
* </pre>
*
*
* Really though, you'll use views to set up multiple views:
* <pre>
* <div ui-view></div>
* <div ui-view="chart"></div>
* <div ui-view="data"></div>
* <div ui-view="chart"></div>
* <div ui-view="data"></div>
* </pre>
*
*
* <pre>
* $stateProvider.state("home", {
* views: {
Expand Down Expand Up @@ -116,8 +111,8 @@ var ngMinorVer = angular.version.minor;
* <ui-view autoscroll='scopeVariable'/>
* </pre>
*/
$ViewDirective.$inject = ['$state', '$injector', '$uiViewScroll', '$interpolate'];
function $ViewDirective( $state, $injector, $uiViewScroll, $interpolate) {
$ViewDirective.$inject = ['$state', '$injector', '$uiViewScroll', '$interpolate', '$q'];
function $ViewDirective( $state, $injector, $uiViewScroll, $interpolate, $q) {

function getService() {
return ($injector.has) ? function(service) {
Expand All @@ -138,35 +133,24 @@ function $ViewDirective( $state, $injector, $uiViewScroll, $interpolate)
// Returns a set of DOM manipulation functions based on which Angular version
// it should use
function getRenderer(attrs, scope) {
var statics = {
enter: function (element, target, cb) { target.after(element); cb(); },
leave: function (element, cb) { element.remove(); cb(); }
var statics = function() {
return {
enter: function (element, target, cb) { target.after(element); cb(); },
leave: function (element, cb) { element.remove(); cb(); }
};
};

if (!!attrs.noanimation) return statics;

function animEnabled(element) {
if (ngMajorVer === 1 && ngMinorVer >= 4) return !!$animate.enabled(element);
if (ngMajorVer === 1 && ngMinorVer >= 2) return !!$animate.enabled();
return (!!$animator);
}

// ng 1.2+
if ($animate) {
return {
enter: function(element, target, cb) {
if (!animEnabled(element)) {
statics.enter(element, target, cb);
} else if (angular.version.minor > 2) {
if (angular.version.minor > 2) {
$animate.enter(element, null, target).then(cb);
} else {
$animate.enter(element, null, target, cb);
}
},
leave: function(element, cb) {
if (!animEnabled(element)) {
statics.leave(element, cb);
} else if (angular.version.minor > 2) {
if (angular.version.minor > 2) {
$animate.leave(element).then(cb);
} else {
$animate.leave(element, cb);
Expand All @@ -175,7 +159,6 @@ function $ViewDirective( $state, $injector, $uiViewScroll, $interpolate)
};
}

// ng 1.1.5
if ($animator) {
var animate = $animator && $animator(scope, attrs);

Expand All @@ -185,7 +168,7 @@ function $ViewDirective( $state, $injector, $uiViewScroll, $interpolate)
};
}

return statics;
return statics();
}

var directive = {
Expand All @@ -198,7 +181,8 @@ function $ViewDirective( $state, $injector, $uiViewScroll, $interpolate)
var previousEl, currentEl, currentScope, latestLocals,
onloadExp = attrs.onload || '',
autoScrollExp = attrs.autoscroll,
renderer = getRenderer(attrs, scope);
renderer = getRenderer(attrs, scope),
inherited = $element.inheritedData('$uiView');

scope.$on('$stateChangeSuccess', function() {
updateView(false);
Expand All @@ -207,45 +191,34 @@ function $ViewDirective( $state, $injector, $uiViewScroll, $interpolate)
updateView(true);

function cleanupLastView() {
var _previousEl = previousEl;
var _currentScope = currentScope;

if (_currentScope) {
_currentScope._willBeDestroyed = true;
if (previousEl) {
previousEl.remove();
previousEl = null;
}

function cleanOld() {
if (_previousEl) {
_previousEl.remove();
}

if (_currentScope) {
_currentScope.$destroy();
}
if (currentScope) {
currentScope.$destroy();
currentScope = null;
}

if (currentEl) {
var $uiViewData = currentEl.data('$uiView');
renderer.leave(currentEl, function() {
cleanOld();
$uiViewData.$$animLeave.resolve();
previousEl = null;
});

previousEl = currentEl;
} else {
cleanOld();
previousEl = null;
currentEl = null;
}

currentEl = null;
currentScope = null;
}

function updateView(firstTime) {
var newScope,
name = getUiViewName(scope, attrs, $element, $interpolate),
name = getUiViewName(scope, attrs, inherited, $interpolate),
previousLocals = name && $state.$current && $state.$current.locals[name];

if (!firstTime && previousLocals === latestLocals || scope._willBeDestroyed) return; // nothing to do
if (!firstTime && previousLocals === latestLocals) return; // nothing to do
newScope = scope.$new();
latestLocals = $state.$current.locals[name];

Expand All @@ -264,7 +237,16 @@ function $ViewDirective( $state, $injector, $uiViewScroll, $interpolate)
newScope.$emit('$viewContentLoading', name);

var clone = $transclude(newScope, function(clone) {
renderer.enter(clone, $element, function onUiViewEnter() {
var animEnter = $q.defer(), animLeave = $q.defer();
var viewData = {
name: name,
$animEnter: animEnter.promise,
$animLeave: animLeave.promise,
$$animLeave: animLeave
};

renderer.enter(clone.data('$uiView', viewData), $element, function onUiViewEnter() {
animEnter.resolve();
if(currentScope) {
currentScope.$emit('$viewContentAnimationEnded');
}
Expand Down Expand Up @@ -308,14 +290,14 @@ function $ViewDirectiveFill ( $compile, $controller, $state, $interpolate
var initial = tElement.html();
return function (scope, $element, attrs) {
var current = $state.$current,
name = getUiViewName(scope, attrs, $element, $interpolate),
locals = current && current.locals[name];
$uiViewData = $element.data('$uiView'),
locals = current && current.locals[$uiViewData.name];

if (! locals) {
return;
}

$element.data('$uiView', { name: name, state: locals.$$state });
extend($uiViewData, { state: locals.$$state });
$element.html(locals.$template ? locals.$template : initial);

var link = $compile($element.contents());
Expand All @@ -341,9 +323,8 @@ function $ViewDirectiveFill ( $compile, $controller, $state, $interpolate
* Shared ui-view code for both directives:
* Given scope, element, and its attributes, return the view's name
*/
function getUiViewName(scope, attrs, element, $interpolate) {
function getUiViewName(scope, attrs, inherited, $interpolate) {
var name = $interpolate(attrs.uiView || attrs.name || '')(scope);
var inherited = element.inheritedData('$uiView');
return name.indexOf('@') >= 0 ? name : (name + '@' + (inherited ? inherited.state.name : ''));
}

Expand Down
Loading