(FusePerfectScrollbar) Added options for configuring the scrollbar

Updated layouts and navbar to make use of the scrollbar options

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<any>;
 
     /**
@@ -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 route change
-        // scroll to the top on every NavigationEnd
+        if ( this.fusePerfectScrollbarOptions.updateOnRouteChange )
-        if ( this.updateOnNavigationEnd )
         {
             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
         });
     }
 

src/app/layout/components/navbar/navbar.component.html

@@ -21,7 +21,8 @@
 
         </div>
 
-        <div class="navbar-content" fusePerfectScrollbar>
+        <div class="navbar-content" fusePerfectScrollbar
+             [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
             <fuse-navigation [navigation]="navigation" layout="vertical"></fuse-navigation>
         </div>
 

src/app/layout/horizontal/layout-1/layout-1.component.html

@@ -28,7 +28,8 @@
 
         <div id="container-2" class="container">
 
-            <div id="container-3" class="container" fusePerfectScrollbar updateOnNavigationEnd>
+            <div id="container-3" class="container" fusePerfectScrollbar
+                 [fusePerfectScrollbarOptions]="{suppressScrollX: true, updateOnRouteChange : true}">
 
                 <!-- CONTENT -->
                 <content></content>

src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html

@@ -6,7 +6,8 @@
     </ng-container>
     <!-- / TOOLBAR: Above fixed -->
 
-    <div id="container-1" class="container" fusePerfectScrollbar updateOnNavigationEnd>
+    <div id="container-1" class="container" fusePerfectScrollbar
+         [fusePerfectScrollbarOptions]="{suppressScrollX: true, updateOnRouteChange : true}">
 
         <!-- TOOLBAR: Above static -->
         <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-static'">

src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html

@@ -22,7 +22,8 @@
             </ng-container>
             <!-- / TOOLBAR: Below fixed -->
 
-            <div id="container-3" class="container" fusePerfectScrollbar updateOnNavigationEnd>
+            <div id="container-3" class="container" fusePerfectScrollbar
+                 [fusePerfectScrollbarOptions]="{suppressScrollX: true, updateOnRouteChange : true}">
 
                 <!-- TOOLBAR: Below static -->
                 <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below-static'">

src/app/layout/vertical/layout-2/layout-2.component.html

@@ -6,7 +6,8 @@
     </ng-container>
     <!-- / TOOLBAR: Above fixed -->
 
-    <div id="container-1" class="container" fusePerfectScrollbar>
+    <div id="container-1" class="container" fusePerfectScrollbar
+         [fusePerfectScrollbarOptions]="{suppressScrollX: true, updateOnRouteChange : true}">
 
         <!-- TOOLBAR: Above static -->
         <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-static'">
@@ -24,8 +25,8 @@
 
             <!-- CONTENT -->
             <content
-                [ngClass]="{'ml-32':fuseConfig.layout.navbar.position === 'left', 'mr-32':fuseConfig.layout.navbar.position === 'right'}"
+                [ngClass]="{'ml-32':fuseConfig.layout.navbar.position === 'left', 'mr-32':fuseConfig.layout.navbar.position === 'right'}">
-            ></content>
+            </content>
             <!-- / CONTENT -->
 
             <!-- NAVBAR: Right -->