From 7d6a92fada23c3d755de8f1e7c0589ec6c44f9bf Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sun, 10 Jun 2018 19:46:10 +0300 Subject: [PATCH] (FusePerfectScrollbar) Added options for configuring the scrollbar Updated layouts and navbar to make use of the scrollbar options --- .../fuse-perfect-scrollbar.directive.ts | 61 ++++++++++--------- .../components/navbar/navbar.component.html | 3 +- .../layout-1/layout-1.component.html | 3 +- .../body-scroll/body-scroll.component.html | 3 +- .../content-scroll.component.html | 3 +- .../vertical/layout-2/layout-2.component.html | 7 ++- 6 files changed, 43 insertions(+), 37 deletions(-) diff --git a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts b/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts index 06bc53a9..49926bb5 100644 --- a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts +++ b/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts @@ -1,9 +1,10 @@ import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core'; -import { NavigationEnd, Router } from '@angular/router'; +import { NavigationStart, Router } from '@angular/router'; import { Platform } from '@angular/cdk/platform'; import { Subject } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; import PerfectScrollbar from 'perfect-scrollbar'; +import * as _ from 'lodash'; import { FuseConfigService } from '@fuse/services/config.service'; @@ -18,7 +19,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy // Private private _enabled: boolean | ''; - private _updateOnNavigationEnd: boolean | ''; + private _options: any; private _unsubscribeAll: Subject; /** @@ -42,7 +43,9 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy // Set the private defaults this._enabled = false; - this._updateOnNavigationEnd = false; + this._options = { + updateOnRouteChange: false + }; this._unsubscribeAll = new Subject(); } @@ -50,6 +53,24 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy // @ Accessors // ----------------------------------------------------------------------------------------------------- + /** + * Perfect Scrollbar options + * + * @param value + */ + @Input() + set fusePerfectScrollbarOptions(value) + { + // Merge the options + this._options = _.merge({}, this._options, value); + } + + get fusePerfectScrollbarOptions(): any + { + // Return the options + return this._options; + } + /** * Is enabled * @@ -89,30 +110,10 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy get enabled(): boolean | '' { + // Return the enabled status return this._enabled; } - /** - * Update on navigation end - * - * @param value - */ - @Input() - set updateOnNavigationEnd(value) - { - if ( value === '' ) - { - value = true; - } - - this._updateOnNavigationEnd = value; - } - - get updateOnNavigationEnd(): boolean | '' - { - return this._updateOnNavigationEnd; - } - // ----------------------------------------------------------------------------------------------------- // @ Lifecycle hooks // ----------------------------------------------------------------------------------------------------- @@ -131,14 +132,13 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy } ); - // If updateOnNavigationEnd attribute is provided, - // scroll to the top on every NavigationEnd - if ( this.updateOnNavigationEnd ) + // Scroll to the top on every route change + if ( this.fusePerfectScrollbarOptions.updateOnRouteChange ) { this._router.events .pipe( takeUntil(this._unsubscribeAll), - filter(event => event instanceof NavigationEnd) + filter(event => event instanceof NavigationStart) ) .subscribe(() => { this.scrollToTop(); @@ -188,11 +188,12 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy return; } - // Initialize the perfect-scrollbar + // Set as initialized this.isInitialized = true; + // Initialize the perfect-scrollbar this.ps = new PerfectScrollbar(this.elementRef.nativeElement, { - wheelPropagation: true + ...this.fusePerfectScrollbarOptions }); } diff --git a/src/app/layout/components/navbar/navbar.component.html b/src/app/layout/components/navbar/navbar.component.html index a7fcd7da..6532818a 100644 --- a/src/app/layout/components/navbar/navbar.component.html +++ b/src/app/layout/components/navbar/navbar.component.html @@ -21,7 +21,8 @@ -
+
diff --git a/src/app/layout/horizontal/layout-1/layout-1.component.html b/src/app/layout/horizontal/layout-1/layout-1.component.html index 1585d402..f71c2da1 100644 --- a/src/app/layout/horizontal/layout-1/layout-1.component.html +++ b/src/app/layout/horizontal/layout-1/layout-1.component.html @@ -28,7 +28,8 @@
-
+
diff --git a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html index fb79bfec..8981cf8f 100644 --- a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html +++ b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html @@ -6,7 +6,8 @@ -
+
diff --git a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html index b0dc5ea4..086e8d5f 100644 --- a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html +++ b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html @@ -22,7 +22,8 @@ -
+
diff --git a/src/app/layout/vertical/layout-2/layout-2.component.html b/src/app/layout/vertical/layout-2/layout-2.component.html index ddb30b83..ed0b3969 100644 --- a/src/app/layout/vertical/layout-2/layout-2.component.html +++ b/src/app/layout/vertical/layout-2/layout-2.component.html @@ -6,7 +6,8 @@ -
+
@@ -24,8 +25,8 @@ + [ngClass]="{'ml-32':fuseConfig.layout.navbar.position === 'left', 'mr-32':fuseConfig.layout.navbar.position === 'right'}"> +