purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(FusePerfectScrollbar) Added options for configuring the scrollbar

Browse Source 
Updated layouts and navbar to make use of the scrollbar options
This commit is contained in:
Sercan Yemen 2018-06-10 19:46:10 +03:00
parent acbed8e305
commit 7d6a92fada
6 changed files with 43 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
View File

@ -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 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
});
}

3
src/app/layout/components/navbar/navbar.component.html
View File

@ -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>

3
src/app/layout/horizontal/layout-1/layout-1.component.html
View File

@ -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>

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

@ -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'">

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

@ -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'">

7
src/app/layout/vertical/layout-2/layout-2.component.html
View File

@ -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'}"
></content>
[ngClass]="{'ml-32':fuseConfig.layout.navbar.position === 'left', 'mr-32':fuseConfig.layout.navbar.position === 'right'}">
</content>
<!-- / CONTENT -->
<!-- NAVBAR: Right -->