1 files changed, 51 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts b/catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts
new file mode 100644
index 0000000000..ccc1e2181e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts
@@ -0,0 +1,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);
+    }
+}