diff options
Diffstat (limited to 'catalog-ui/app/scripts/directives/perfect-scrollbar')
| -rw-r--r-- | catalog-ui/app/scripts/directives/perfect-scrollbar/angular-perfect-scrollbar.ts | 159 |
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']; +} |