1 files changed, 125 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/perfect-scrollbar/angular-perfect-scrollbar.ts b/catalog-ui/src/app/directives/perfect-scrollbar/angular-perfect-scrollbar.ts
new file mode 100644
index 0000000000..914a7049bb
--- /dev/null
+++ b/catalog-ui/src/app/directives/perfect-scrollbar/angular-perfect-scrollbar.ts
@@ -0,0 +1,125 @@
+'use strict';
+
+export interface IPerfectScrollerScope extends ng.IScope {
+    //update(event:string): void;
+}
+
+export class PerfectScrollerDirective implements ng.IDirective {
+
+    constructor(private $parse:any) {
+
+    }
+
+    replace = true;
+    restrict = 'EA';
+    transclude = true;
+
+    template = ():string => {
+        return '<div><div ng-transclude=""></div></div>';
+    };
+
+    link = ($scope:IPerfectScrollerScope, $elem, $attr) => {
+        let self = this;
+        let options = {};
+
+        let psOptions = [
+            'wheelSpeed', 'wheelPropagation', 'minScrollbarLength', 'useBothWheelAxes',
+            'useKeyboard', 'suppressScrollX', 'suppressScrollY', 'scrollXMarginOffset',
+            'scrollYMarginOffset', 'includePadding'//, 'onScroll', 'scrollDown'
+        ];
+
+        for (let i = 0, l = psOptions.length; i < l; i++) {
+            let opt = psOptions[i];
+            if ($attr[opt] !== undefined) {
+                options[opt] = self.$parse($attr[opt])();
+            }
+        }
+
+        $scope.$evalAsync(function () {
+            $elem.perfectScrollbar(options);
+            let onScrollHandler = self.$parse($attr.onScroll)
+            $elem.scroll(function () {
+                let scrollTop = $elem.scrollTop()
+                let scrollHeight = $elem.prop('scrollHeight') - $elem.height()
+                $scope.$apply(function () {
+                    onScrollHandler($scope, {
+                        scrollTop: scrollTop,
+                        scrollHeight: scrollHeight
+                    })
+                })
+            });
+        });
+
+        /*
+         $scope.update = (event:string): void => {
+         $scope.$evalAsync(function() {
+         //if ($attr.scrollDown == 'true' && event != 'mouseenter') {
+         if (event != 'mouseenter') {
+         setTimeout(function () {
+         $($elem).scrollTop($($elem).prop("scrollHeight"));
+         }, 100);
+         }
+         $elem.perfectScrollbar('update');
+         });
+         };
+         */
+
+        // This is necessary when you don't watch anything with the scrollbar
+        $elem.bind('mouseenter', function () {
+            //console.log("mouseenter");
+            $elem.perfectScrollbar('update');
+        });
+
+        $elem.bind('mouseleave', function () {
+            //console.log("mouseleave");
+            setTimeout(function () {
+                $(window).trigger('mouseup');
+                $elem.perfectScrollbar('update');
+            }, 10);
+        });
+
+        $elem.bind('click', function () {
+            //console.log("click");
+            // Wait 500 milliseconds until the collapse finish closing and update.
+            setTimeout(function () {
+                $elem.perfectScrollbar('update');
+            }, 500);
+        });
+
+        /**
+         * Check if the content of the scroller was changed, and if changed update the scroller.
+         * Because DOMSubtreeModified event is fire many time (while filling the content), I'm checking that
+         * there is at least 100 milliseconds between DOMSubtreeModified events to update the scrollbar.
+         * @type {boolean}
+         */
+        let insideDOMSubtreeModified = false;
+        $elem.bind('DOMSubtreeModified', function () {
+            if (insideDOMSubtreeModified == false) {
+                insideDOMSubtreeModified = true;
+                setTimeout(function () {
+                    insideDOMSubtreeModified = false;
+                    $elem.perfectScrollbar('update');
+                }, 100);
+            }
+        });
+
+        // Possible future improvement - check the type here and use the appropriate watch for non-arrays
+        if ($attr.refreshOnChange) {
+            $scope.$watchCollection($attr.refreshOnChange, function () {
+                $elem.perfectScrollbar('update');
+            });
+        }
+
+        $elem.bind('$destroy', function () {
+            $elem.perfectScrollbar('destroy');
+        });
+
+    };
+
+    public static factory = ($parse:any)=> {
+        return new PerfectScrollerDirective($parse);
+    };
+
+}
+
+PerfectScrollerDirective.factory.$inject = ['$parse'];