ng2-page-transition/dist/bundles/ng2-page-transition.umd.js

Simple Angular2 component that creates a page transition animation on route changes

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/router')) :
	typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/router'], factory) :
	(factory((global['ng2-page-transition'] = global['ng2-page-transition'] || {}),global.ng.core,global.ng.router));
}(this, (function (exports,_angular_core,_angular_router) { 'use strict';

function defaultPageTransition() {
    return fadeOutAndIn();
}
function fadeOutAndIn() {
    return _angular_core.trigger('ng2ElementState', [
        _angular_core.state('leave', _angular_core.style({
            opacity: 0.3,
        })),
        _angular_core.state('out', _angular_core.style({
            opacity: 0,
        })),
        _angular_core.state('enter', _angular_core.style({
            opacity: 1,
        })),
        _angular_core.transition('* => enter', _angular_core.animate('0.5s ease-in')),
        _angular_core.transition('* => leave', _angular_core.animate('0.2s ease-out')),
        _angular_core.transition('* => out', _angular_core.animate('0ms'))
    ]);
}

var __decorate = (undefined && undefined.__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 = (undefined && undefined.__param) || function (paramIndex, decorator) {
    return function (target, key) { decorator(target, key, paramIndex); }
};
exports.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 _angular_router.NavigationStart) {
                this.animation.state = "leave";
                this.delayPromise = new Promise(function (resolve, reject) {
                    window.setTimeout(function () {
                        resolve(true);
                    }, _this.animation.enterDelay);
                });
            }
            else if (event instanceof _angular_router.NavigationEnd || event instanceof _angular_router.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([
    _angular_core.Input()
], exports.Ng2PageTransitionComponent.prototype, "scrollTop", void 0);
__decorate([
    _angular_core.Input()
], exports.Ng2PageTransitionComponent.prototype, "onlyOnRoutes", void 0);
__decorate([
    _angular_core.Input()
], exports.Ng2PageTransitionComponent.prototype, "ignoreOnRoutes", void 0);
__decorate([
    _angular_core.Input()
], exports.Ng2PageTransitionComponent.prototype, "animation", void 0);
exports.Ng2PageTransitionComponent = __decorate([
    _angular_core.Component({
        selector: 'ng2-page-transition',
        template: '<div [@ng2ElementState]="animation.custom || animation.state"><ng-content></ng-content></div>',
        animations: [defaultPageTransition()],
    }),
    __param(0, _angular_core.Inject(_angular_core.forwardRef(function () { return _angular_router.Router; })))
], exports.Ng2PageTransitionComponent);

var __decorate$1 = (undefined && undefined.__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;
};
exports.Ng2PageTransitionModule = (function () {
    function Ng2PageTransitionModule() {
    }
    return Ng2PageTransitionModule;
}());
exports.Ng2PageTransitionModule = __decorate$1([
    _angular_core.NgModule({
        declarations: [exports.Ng2PageTransitionComponent],
        exports: [exports.Ng2PageTransitionComponent]
    })
], exports.Ng2PageTransitionModule);

exports.defaultPageTransition = defaultPageTransition;
exports.fadeOutAndIn = fadeOutAndIn;

Object.defineProperty(exports, '__esModule', { value: true });

})));