summaryrefslogtreecommitdiffstats
path: root/catalog-ui/app/scripts/directives/perfect-scrollbar/angular-perfect-scrollbar.ts
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/app/scripts/directives/perfect-scrollbar/angular-perfect-scrollbar.ts')
-rw-r--r--catalog-ui/app/scripts/directives/perfect-scrollbar/angular-perfect-scrollbar.ts159
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'];
+}