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