1 files changed, 159 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/perfect-scrollbar/angular-perfect-scrollbar.ts b/catalog-ui/app/scripts/directives/perfect-scrollbar/angular-perfect-scrollbar.ts
new file mode 100644
index 0000000000..b53a059a40
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/perfect-scrollbar/angular-perfect-scrollbar.ts
@@ -0,0 +1,159 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../references"/>
+module Sdc.Directives {
+
+    'use strict';
+
+    export interface IPerfectScrollerScope extends ng.IScope {
+        //update(event:string): void;
+    }
+
+    export class PerfectScrollerDirective implements ng.IDirective {
+
+        constructor(
+            private $templateCache: ng.ITemplateCacheService,
+            private $parse:any,
+            private $window: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');
+                });
+            }
+
+            /*
+            // this is from a pull request - I am not totally sure what the original issue is but seems harmless
+            if ($attr.refreshOnResize) {
+                self.$window.on('resize', function(e){$scope.update(e)});
+            }
+            */
+
+            $elem.bind('$destroy', function() {
+                //self.$window.off('resize', function(e){$scope.update(e)});
+                $elem.perfectScrollbar('destroy');
+            });
+
+        };
+
+        public static factory = ($templateCache: ng.ITemplateCacheService, $parse:any, $window:any)=> {
+            return new PerfectScrollerDirective($templateCache, $parse, $window);
+        };
+
+    }
+
+    PerfectScrollerDirective.factory.$inject = ['$templateCache','$parse','$window'];
+}