ng2-page-transition
Version:
Simple Angular2 component that creates a page transition animation on route changes
110 lines • 4.78 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
import { Component, Input, Inject, forwardRef } from '@angular/core';
import { Router, NavigationStart, NavigationEnd, NavigationCancel } from '@angular/router';
import { defaultPageTransition } from './default-transition.animation';
var Ng2PageTransitionComponent = (function () {
function Ng2PageTransitionComponent(router) {
var _this = this;
this.router = router;
this.scrollTop = true;
this.onlyOnRoutes = [""];
this.ignoreOnRoutes = [""];
this.animation = {
state: "leave",
custom: false,
enterDelay: 0
};
this.animation.state = "leave";
router.events.subscribe(function (event) { return _this.routerSubscription(event); });
}
Ng2PageTransitionComponent.prototype.routerSubscription = function (event) {
var _this = this;
if (this.shouldTriggerForRoute(event.url)) {
if (event instanceof NavigationStart) {
this.animation.state = "leave";
this.delayPromise = new Promise(function (resolve, reject) {
window.setTimeout(function () {
resolve(true);
}, _this.animation.enterDelay);
});
}
else if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
if (typeof this.delayPromise !== "undefined") {
this.delayPromise.then(function () {
_this.animation.state = "out";
if (_this.scrollTop) {
window.scrollTo(0, 0);
}
setTimeout(function () {
_this.animation.state = "enter";
}, 0);
});
}
else {
this.animation.state = "out";
if (this.scrollTop) {
window.scrollTo(0, 0);
}
setTimeout(function () {
_this.animation.state = "enter";
}, 0);
}
}
}
};
Ng2PageTransitionComponent.prototype.shouldTriggerForRoute = function (url) {
return this.passesOnlyOnRoutes(url) && this.passesIgnoreOnRoutes(url);
};
Ng2PageTransitionComponent.prototype.passesOnlyOnRoutes = function (url) {
if (!url) {
return false;
}
for (var i = 0; i < this.onlyOnRoutes.length; i++) {
if (url.indexOf(this.onlyOnRoutes[i]) > -1) {
return true;
}
}
return false;
};
Ng2PageTransitionComponent.prototype.passesIgnoreOnRoutes = function (url) {
if (!url) {
return false;
}
var filteredRoutes = this.ignoreOnRoutes.filter(function (route) { return url.indexOf(route) > -1; });
if (filteredRoutes.length && filteredRoutes.length > 0) {
return false;
}
return true;
};
return Ng2PageTransitionComponent;
}());
__decorate([
Input()
], Ng2PageTransitionComponent.prototype, "scrollTop", void 0);
__decorate([
Input()
], Ng2PageTransitionComponent.prototype, "onlyOnRoutes", void 0);
__decorate([
Input()
], Ng2PageTransitionComponent.prototype, "ignoreOnRoutes", void 0);
__decorate([
Input()
], Ng2PageTransitionComponent.prototype, "animation", void 0);
Ng2PageTransitionComponent = __decorate([
Component({
selector: 'ng2-page-transition',
template: '<div [@ng2ElementState]="animation.custom || animation.state"><ng-content></ng-content></div>',
animations: [defaultPageTransition()],
}),
__param(0, Inject(forwardRef(function () { return Router; })))
], Ng2PageTransitionComponent);
export { Ng2PageTransitionComponent };
//# sourceMappingURL=ng2-page-transition.component.js.map