aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts
blob: ccc1e2181eec969e2ba12e7a506de6c3c202d291 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import {Directive, Input, ElementRef} from '@angular/core';
import * as PerfectScrollbar from 'perfect-scrollbar';

interface IPerfectScrollbarOptions {
    wheelSpeed?: number;
    wheelPropagation?: boolean;
    minScrollbarLength?: number;
    useBothWheelAxes?: boolean;
    useKeyboard?: boolean;
    suppressScrollX?: boolean;
    suppressScrollY?: boolean;
    scrollXMarginOffset?: number;
    scrollYMarginOffset?: number;
    includePadding?: boolean;
}

@Directive({
    selector: '[perfectScrollbar]'
})
export class PerfectScrollbarDirective {
    @Input() public perfectScrollbarOptions: IPerfectScrollbarOptions;

    private psOptions: IPerfectScrollbarOptions;
    private updatingPS: boolean;

    constructor(public elemRef:ElementRef) {
        console.log('PSbar: Constructor');
        this.psOptions = Object.assign({}, this.perfectScrollbarOptions);
        this.updatingPS = false;
    }

    public ngOnInit() {
        console.log('PSbar: Initializing');
        PerfectScrollbar.initialize(this.elemRef.nativeElement, this.psOptions);
    }

    public ngAfterContentChecked() {
        // update perfect-scrollbar after content is checked (updated) - bounced
        if (!this.updatingPS) {
            this.updatingPS = true;
            setTimeout(() => {
                this.updatingPS = false;
                PerfectScrollbar.update(this.elemRef.nativeElement);
            }, 100);
        }
    }

    public ngOnDestroy() {
        PerfectScrollbar.destroy(this.elemRef.nativeElement);
    }
}