ngx-page-scroll
Version:
Convenience directive for animated scrolling functionality for angular written in pure typescript
189 lines (183 loc) • 9.25 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, DOCUMENT, Output, Input, Optional, Inject, Directive, NgModule } from '@angular/core';
import * as i1 from 'ngx-page-scroll-core';
import { NgxPageScrollCoreModule } from 'ngx-page-scroll-core';
import * as i2 from '@angular/router';
import { NavigationEnd, NavigationError, NavigationCancel } from '@angular/router';
import { filter, take } from 'rxjs/operators';
/* eslint-disable @angular-eslint/no-host-metadata-property, @angular-eslint/directive-selector */
class NgxPageScrollDirective {
constructor(pageScrollService, router, document) {
this.pageScrollService = pageScrollService;
this.router = router;
this.pageScrollAdjustHash = false;
this.pageScrollFinish = new EventEmitter();
this.document = document;
}
ngOnChanges(changes) {
// Some inputs changed, reset the pageScrollInstance
this.pageScrollInstance = undefined;
}
ngOnDestroy() {
if (this.pageScrollInstance) {
this.pageScrollService.stop(this.pageScrollInstance);
}
}
getPageScrollTarget() {
return this.pageScrollTarget || this.href || (this.fragment ? '#' + this.fragment : '');
}
generatePageScrollInstance() {
if (this.pageScrollInstance === undefined || this.pageScrollInstance === null) {
const options = {
document: this.document,
scrollTarget: this.getPageScrollTarget(),
};
if (this.pageScroll) {
options.namespace = this.pageScroll;
}
if (this.pageScrollHorizontal !== undefined && this.pageScrollHorizontal !== null) {
options.verticalScrolling = !this.pageScrollHorizontal;
}
if (this.pageScrollOffset !== undefined && this.pageScrollOffset !== null) {
options.scrollOffset = this.pageScrollOffset;
}
if (this.pageScrollInterruptible !== undefined && this.pageScrollInterruptible !== null) {
options.interruptible = this.pageScrollInterruptible;
}
if (this.pageScrollInView !== undefined && this.pageScrollInView !== null) {
options.scrollInView = this.pageScrollInView;
}
if (this.pageScrollEasing) {
options.easingLogic = this.pageScrollEasing;
}
if (this.pageScrollDuration !== undefined && this.pageScrollDuration !== null) {
options.duration = this.pageScrollDuration;
}
if (this.pageScrollSpeed !== undefined && this.pageScrollSpeed !== null) {
options.speed = this.pageScrollSpeed;
}
if (this.pageScrollFinish) {
options.scrollFinishListener = this.pageScrollFinish;
}
this.pageScrollInstance = this.pageScrollService.create(options);
}
return this.pageScrollInstance;
}
pushRouterState() {
if (this.pageScrollAdjustHash && typeof this.pageScrollInstance.pageScrollOptions.scrollTarget === 'string'
&& this.pageScrollInstance.pageScrollOptions.scrollTarget.substr(0, 1) === '#') {
// "Navigate" to the current route again and this time set the fragment/hash
this.router.navigate([], {
fragment: this.pageScrollInstance.pageScrollOptions.scrollTarget.substr(1),
queryParamsHandling: 'preserve',
});
}
}
scroll() {
const pageScrollInstance = this.generatePageScrollInstance();
this.pushRouterState();
this.pageScrollService.start(pageScrollInstance);
}
handleClick(clickEvent) {
if (this.routerLink && this.router !== null && this.router !== undefined) {
let urlTree;
if (typeof this.routerLink === 'string') {
urlTree = this.router.parseUrl(this.routerLink);
}
else {
urlTree = this.router.createUrlTree(this.routerLink);
}
if (!this.router.isActive(urlTree, true)) {
// We need to navigate their first.
// Navigation is handled by the routerLink directive so we only need to listen for route change
this.router.events.pipe(filter(routerEvent => {
// We're only interested in successful navigations or when the navigation fails
return routerEvent instanceof NavigationEnd || routerEvent instanceof NavigationError
|| routerEvent instanceof NavigationCancel;
}),
// Consume only one event, automatically "unsubscribing" from the event stream afterwards
take(1)).subscribe((routerEvent) => {
if (routerEvent instanceof NavigationEnd) {
// use a timeout to start scrolling as soon as the stack is cleared
setTimeout(() => {
this.scroll();
}, 0);
}
});
return false; // to preventDefault()
}
}
this.scroll();
return false; // to preventDefault()
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: NgxPageScrollDirective, deps: [{ token: i1.PageScrollService }, { token: i2.Router, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.2", type: NgxPageScrollDirective, isStandalone: true, selector: "[pageScroll]", inputs: { routerLink: "routerLink", href: "href", fragment: "fragment", pageScrollTarget: "pageScrollTarget", pageScrollHorizontal: "pageScrollHorizontal", pageScrollOffset: "pageScrollOffset", pageScrollDuration: "pageScrollDuration", pageScrollSpeed: "pageScrollSpeed", pageScrollEasing: "pageScrollEasing", pageScrollInterruptible: "pageScrollInterruptible", pageScrollInView: "pageScrollInView", pageScrollAdjustHash: "pageScrollAdjustHash", pageScroll: "pageScroll" }, outputs: { pageScrollFinish: "pageScrollFinish" }, host: { listeners: { "click": "handleClick($event)" } }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: NgxPageScrollDirective, decorators: [{
type: Directive,
args: [{
selector: '[pageScroll]',
host: {
'(click)': 'handleClick($event)',
}
}]
}], ctorParameters: () => [{ type: i1.PageScrollService }, { type: i2.Router, decorators: [{
type: Optional
}] }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }], propDecorators: { routerLink: [{
type: Input
}], href: [{
type: Input
}], fragment: [{
type: Input
}], pageScrollTarget: [{
type: Input
}], pageScrollHorizontal: [{
type: Input
}], pageScrollOffset: [{
type: Input
}], pageScrollDuration: [{
type: Input
}], pageScrollSpeed: [{
type: Input
}], pageScrollEasing: [{
type: Input
}], pageScrollInterruptible: [{
type: Input
}], pageScrollInView: [{
type: Input
}], pageScrollAdjustHash: [{
type: Input
}], pageScroll: [{
type: Input
}], pageScrollFinish: [{
type: Output
}] } });
class NgxPageScrollModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: NgxPageScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.2", ngImport: i0, type: NgxPageScrollModule, imports: [NgxPageScrollCoreModule,
NgxPageScrollDirective], exports: [NgxPageScrollDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: NgxPageScrollModule, imports: [NgxPageScrollCoreModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: NgxPageScrollModule, decorators: [{
type: NgModule,
args: [{
imports: [
NgxPageScrollCoreModule,
NgxPageScrollDirective,
],
exports: [
NgxPageScrollDirective,
],
}]
}] });
/*
* Public API Surface of ngx-page-scroll
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxPageScrollDirective, NgxPageScrollModule };
//# sourceMappingURL=ngx-page-scroll.mjs.map