From ed64b5edff15e702493df21aa3230b81593e6133 Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Fri, 9 Jun 2017 03:19:04 +0300 Subject: [SDC-29] catalog 1707 rebase commit. Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1 Signed-off-by: Michael Lando --- .../perfect-scrollbar/angular-perfect-scrollbar.ts | 125 +++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 catalog-ui/src/app/directives/perfect-scrollbar/angular-perfect-scrollbar.ts (limited to 'catalog-ui/src/app/directives/perfect-scrollbar') 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 '
'; + }; + + 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']; -- cgit 1.2.3-korg