openproject/frontend/app/components/wp-table/wp-virtual-scroll.directive.ts

// -- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License version 3.
//
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
// Copyright (C) 2006-2013 Jean-Philippe Lang
// Copyright (C) 2010-2013 the ChiliProject Team
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
//
// See doc/COPYRIGHT.rdoc for more details.
// ++

import {wpDirectivesModule} from "../../angular-modules";
import {scopedObservable, runInScopeDigest} from "../../helpers/angular-rx-utils";
import IScope = angular.IScope;
import IRootElementService = angular.IRootElementService;
import IAnimateProvider = angular.IAnimateProvider;
import ITranscludeFunction = angular.ITranscludeFunction;


// function getBlockNodes(nodes) {
//   var node = nodes[0];
//   var endNode = nodes[nodes.length - 1];
//   var blockNodes = [node];
//
//   do {
//     node = node.nextSibling;
//     if (!node) {
//       break;
//     }
//     blockNodes.push(node);
//   } while (node !== endNode);
//
//   return $(blockNodes);
// }

// function createDummyRow(content: any, columnCount: number) {
//   const tr = document.createElement('tr');
//   for (let i = 0; i < columnCount; i++) {
//     const td = document.createElement('td');
//     td.innerHTML = content;
//     tr.appendChild(td);
//   }
//   return tr;
// }

function wpVirtualScrollRow($animate: any,
                            workPackageTableVirtualScrollService: WorkPackageTableVirtualScrollService) {
  return {
    // multiElement: true,
    // transclude: 'element',
    // priority: 600,
    // terminal: true,
    restrict: 'A',
    // $$tlb: true,

    link: ($scope: IScope,
           $element: IRootElementService,
           $attr: any,
           ctrl: any,
           $transclude: ITranscludeFunction) => {

      new RowDisplay($animate, $scope, $element, $attr, $transclude, workPackageTableVirtualScrollService);
    }
  };
}

wpDirectivesModule.directive('wpVirtualScrollRow', wpVirtualScrollRow);

class RowDisplay {

  // private block: any;
  // private childScope: IScope;
  // private previousElements: any;

  // private dummyRow: HTMLElement = null;
  private index: number;
  private viewport: [number, number] = [0, 0];
  // private visible: boolean = undefined;
  // private clone: JQuery;
  private watchersEnabled = true;

  constructor(private $animate: any,
    private $scope: angular.IScope,
    private $element: angular.IRootElementService,
    private $attr: any,
    private $transclude: angular.ITranscludeFunction,
    private workPackageTableVirtualScrollService: WorkPackageTableVirtualScrollService) {

    this.index = $scope.$eval($attr.wpVirtualScrollRow);

    // console.log("subscirbe für index:" + this.index);
    scopedObservable($scope, workPackageTableVirtualScrollService.viewportChanges)
      .subscribe(vp => {
        // console.log("viewport changed für index: " + this.index);
        this.viewport = vp;
        this.viewportChanged();
      });
  }

  private isRowInViewport() {
    const offsetTop = this.$element.offset().top;
    const top = this.viewport[0];
    const bottom = this.viewport[1];
    // console.log("isRowInViewport: " + this.index + ", " + offsetTop);
    return (offsetTop > top && offsetTop < bottom);

    // console.log(this.index + ": " + offsetTop);
    // console.log(window.outerHeight);
    // return this.index >= this.viewport[0] && this.index <= this.viewport[1];
  }

  // private isRowInViewportOffset() {
  // return true;
  // const offset = this.workPackageTableVirtualScrollService.viewportOffset;
  // return this.index >= (this.viewport[0] - offset) && this.index <= (this.viewport[1] + offset);
  // }

  private viewportChanged() {
    // const isRowInViewport = this.isRowInViewportOffset();
    const enableWatchers = this.isRowInViewport();

    // const firstRun = this.visible === undefined;

    // if (firstRun) {
    //   this.renderRow(isRowInViewport);
    // } else if (!this.visible && isRowInViewport) {
    //   this.hide();
    //   this.renderRow(true);
    // } else if (!this.visible && !isRowInViewport) {
    //   this.renderRow(false);
    // }

    // if (!firstRun && this.clone) {
    if (this.watchersEnabled !== enableWatchers) {
      this.adjustWatchers(this.$element, enableWatchers);
    }

    // this.adjustWatchers(this.clone, enableWatchers);
    // }
  }

  /*
   renderRow(renderRow: boolean) {
   if (!this.childScope) {
   if (renderRow) {
   // render work package row
   this.hide();

   this.$transclude((clone: any, newScope: any) => {
   this.clone = clone;
   this.childScope = newScope;
   this.visible = true;

   clone[clone.length++] = document.createComment(' wp-virtual-scroll: ' + this.index + ' ');
   this.block = {
   clone: clone
   };
   this.$animate.enter(clone, this.$element.parent(), this.$element);
   });
   } else if (this.dummyRow === null) {
   // render placeholder row
   this.hide();

   this.visible = false;
   this.dummyRow = createDummyRow(
   "&nbsp;",
   this.workPackageTableVirtualScrollService.columnCount);

   this.$animate.enter(this.dummyRow, this.$element.parent(), this.$element);
   }
   }
   }

   private hide() {
   this.dummyRow && this.$element.parent()[0].removeChild(this.dummyRow);
   this.dummyRow = null;

   if (this.previousElements) {
   this.previousElements.remove();
   this.previousElements = null;
   }
   if (this.childScope) {
   this.childScope.$destroy();
   this.childScope = null;
   }
   if (this.block) {
   this.previousElements = getBlockNodes(this.block.clone);
   this.$animate.leave(this.previousElements).then(() => {
   this.previousElements = null;
   });
   this.block = null;
   }
   }
   */

  private adjustWatchers(element: JQuery, enableWatchers: boolean) {
    // console.log("adjustWatchers für index: " + this.index);
    this.watchersEnabled = enableWatchers;

    const scope: any = angular.element(element).scope();
    if (scope === undefined) {
      return;
    }

    if (!enableWatchers) {
      if (scope.$$watchers && scope.$$watchers.length > 0) {
        // console.log("disable watcher:" + this.index);
        scope.__backup_watchers = scope.$$watchers;
        scope.$$watchers = [];
      }
    } else {
      if (scope.__backup_watchers && scope.__backup_watchers.length > 0) {
        // console.log("enable watcher:" + this.index);
        scope.$$watchers = scope.__backup_watchers;
        scope.__backup_watchers = [];
      }
    }

    angular.forEach(angular.element(element).children(), (child: JQuery) => {
      this.adjustWatchers(child, enableWatchers);
    });

  }

}


class WorkPackageTableVirtualScrollService {

  private lastTop: number;

  private lastBottom: number;

  // public viewportOffset = 0;

  public viewportChanges: Rx.Subject<[number, number]> = new Rx.ReplaySubject<[number, number]>(0);

  // public columnCount = 1;

  constructor(private $rootScope: angular.IRootScopeService) {
  }

  updateScrollInfo(top: number, bottom: number) {
    // if (top !== this.lastTop || bottom !== this.lastBottom) {
      runInScopeDigest(this.$rootScope, () => {
        // console.log("updateScrollInfo - onNext");
        this.viewportChanges.onNext([top, bottom]);
      });
      // window.dispatchEvent(new Event('resize'));
    // }

    this.lastTop = top;
    this.lastBottom = bottom;
  }

  // setColumnCount(columnCount: number) {
  //   this.columnCount = columnCount;
  // }
}

wpDirectivesModule.service("workPackageTableVirtualScrollService", WorkPackageTableVirtualScrollService);


function wpVirtualScrollTable(workPackageTableVirtualScrollService: WorkPackageTableVirtualScrollService) {
  return {
    restrict: 'A',
    link: ($scope: IScope, $element: IRootElementService, attr: any) => {
      // flag to avoid endless loops
      let updateActive = false;

      // Number of columns a placeholder row should have
      // let columnCount = $scope.$eval(attr.columnCount);
      // columnCount = columnCount ? columnCount : 1;
      // workPackageTableVirtualScrollService.setColumnCount(columnCount);

      // Row height in pixel
      // let rowHeight = attr.rowHeight;

      const updateScrollInfo = () => {
        if (updateActive) {
          return;
        }
        updateActive = true;
        try {
          // const scrollTop = $element.scrollTop();
          // const height = $element.outerHeight();
          // const rowsAboveCount = Math.floor(scrollTop / rowHeight);
          // const rowsInViewport = Math.round(height / rowHeight) + 5;
          workPackageTableVirtualScrollService.updateScrollInfo(
            -50,
            window.innerHeight + 50);
        } finally {
          updateActive = false;
        }
      };

      let scrollTimeout: any;
      $element.on("scroll", () => {
        scrollTimeout && clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(() => {
          updateScrollInfo();
        }, 1000);
      });

      window.addEventListener('resize', () => {
        updateScrollInfo();
      });

      updateScrollInfo();
    }
  };
}

wpDirectivesModule.directive('wpVirtualScrollTable', wpVirtualScrollTable);