@integec/grid-tools/lib/ScrollSyncHelper.js

Integ Grid Tools

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var ScrollSyncHelper = function () {
  function ScrollSyncHelper() {
    var _this = this;

    _classCallCheck(this, ScrollSyncHelper);

    this.verticalPanes = [];
    this.horizonalPanes = [];

    this.addEvents = function (node) {
      /* For some reason element.addEventListener doesnt work with document.body */
      node.onscroll = _this.handlePaneScroll.bind(_this, node); // eslint-disable-line
    };

    this.removeEvents = function (node) {
      /* For some reason element.removeEventListener doesnt work with document.body */
      node.onscroll = null; // eslint-disable-line
    };

    this.handlePaneScroll = function (node) {
      window.requestAnimationFrame(function () {
        _this.syncScrollPositions(node);
      });
    };

    this.isHorizontallySynced = function (pane) {
      return _this.horizonalPanes.includes(pane);
    };

    this.isVerticallySynced = function (pane) {
      return _this.verticalPanes.includes(pane);
    };

    this.syncScrollPositions = function (scrolledPane) {
      var scrollTop = scrolledPane.scrollTop,
          scrollLeft = scrolledPane.scrollLeft;
      // const scrollTopOffset = scrollHeight - clientHeight
      // const scrollLeftOffset = scrollWidth - clientWidth

      if (_this.isHorizontallySynced(scrolledPane)) {
        _this.setTargetScrolls(scrolledPane, _this.horizonalPanes, function (pane) {
          return pane.scrollLeft = scrollLeft;
        });
      }
      if (_this.isVerticallySynced(scrolledPane)) {
        _this.setTargetScrolls(scrolledPane, _this.verticalPanes, function (pane) {
          return pane.scrollTop = scrollTop;
        });
      }
    };
  }

  _createClass(ScrollSyncHelper, [{
    key: 'registerPane',
    value: function registerPane(pane, MODE) {
      this.addEvents(pane);
      if (MODE === ScrollSyncHelper.HORIZONTAL && !this.horizonalPanes.includes(pane)) {
        this.horizonalPanes = [].concat(_toConsumableArray(this.horizonalPanes), [pane]);
      }
      if (MODE === ScrollSyncHelper.VERTICAL && !this.verticalPanes.includes(pane)) {
        this.verticalPanes = [].concat(_toConsumableArray(this.verticalPanes), [pane]);
      }
    }
  }, {
    key: 'unReisterPane',
    value: function unReisterPane(pane) {
      this.verticalPanes = this.verticalPanes.filter(function (p) {
        return p !== pane;
      });
      this.horizonalPanes = this.horizonalPanes.filter(function (p) {
        return p !== pane;
      });
      this.removeEvents(pane);
    }
  }, {
    key: 'setTargetScrolls',
    value: function setTargetScrolls(pane, syncedTargets, setter) {
      var _this2 = this;

      var _loop = function _loop(i) {
        if (syncedTargets[i] !== pane) {
          _this2.removeEvents(syncedTargets[i]);
          setter(syncedTargets[i]);
          window.requestAnimationFrame(function () {
            return _this2.addEvents(syncedTargets[i]);
          });
        }
      };

      for (var i = 0; i < syncedTargets.length; i++) {
        _loop(i);
      }
    }
  }]);

  return ScrollSyncHelper;
}();

ScrollSyncHelper.HORIZONTAL = 'SCROLL_SYNC_HORIZONTAL';
ScrollSyncHelper.VERTICAL = 'SCROLL_SYNC_VERTICAL';
exports.default = ScrollSyncHelper;
//# sourceMappingURL=ScrollSyncHelper.js.map