catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts

   1 import {Directive, Input, ElementRef} from '@angular/core';
   2 import * as PerfectScrollbar from 'perfect-scrollbar';
   3
   4 interface IPerfectScrollbarOptions {
   5     wheelSpeed?: number;
   6     wheelPropagation?: boolean;
   7     minScrollbarLength?: number;
   8     useBothWheelAxes?: boolean;
   9     useKeyboard?: boolean;
  10     suppressScrollX?: boolean;
  11     suppressScrollY?: boolean;
  12     scrollXMarginOffset?: number;
  13     scrollYMarginOffset?: number;
  14     includePadding?: boolean;
  15 }
  16
  17 @Directive({
  18     selector: '[perfectScrollbar]'
  19 })
  20 export class PerfectScrollbarDirective {
  21     @Input() public perfectScrollbarOptions: IPerfectScrollbarOptions;
  22
  23     private psOptions: IPerfectScrollbarOptions;
  24     private updatingPS: boolean;
  25
  26     constructor(public elemRef:ElementRef) {
  27         console.log('PSbar: Constructor');
  28         this.psOptions = Object.assign({}, this.perfectScrollbarOptions);
  29         this.updatingPS = false;
  30     }
  31
  32     public ngOnInit() {
  33         console.log('PSbar: Initializing');
  34         PerfectScrollbar.initialize(this.elemRef.nativeElement, this.psOptions);
  35     }
  36
  37     public ngAfterContentChecked() {
  38         // update perfect-scrollbar after content is checked (updated) - bounced
  39         if (!this.updatingPS) {
  40             this.updatingPS = true;
  41             setTimeout(() => {
  42                 this.updatingPS = false;
  43                 PerfectScrollbar.update(this.elemRef.nativeElement);
  44             }, 100);
  45         }
  46     }
  47
  48     public ngOnDestroy() {
  49         PerfectScrollbar.destroy(this.elemRef.nativeElement);
  50     }
  51 }