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

Integ Grid Tools

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var ScrollSyncHelper =
/*#__PURE__*/
function () {
  function ScrollSyncHelper() {
    var _this = this;

    _classCallCheck(this, ScrollSyncHelper);

    _defineProperty(this, "verticalPanes", []);

    _defineProperty(this, "horizonalPanes", []);

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

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

    _defineProperty(this, "handlePaneScroll", function (node) {
      window.requestAnimationFrame(function () {
        _this.syncScrollPositions(node);
      });
    });

    _defineProperty(this, "isHorizontallySynced", function (pane) {
      return _this.horizonalPanes.includes(pane);
    });

    _defineProperty(this, "isVerticallySynced", function (pane) {
      return _this.verticalPanes.includes(pane);
    });

    _defineProperty(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;
}();

_defineProperty(ScrollSyncHelper, "HORIZONTAL", 'SCROLL_SYNC_HORIZONTAL');

_defineProperty(ScrollSyncHelper, "VERTICAL", 'SCROLL_SYNC_VERTICAL');

var _default = ScrollSyncHelper;
exports["default"] = _default;
//# sourceMappingURL=ScrollSyncHelper.js.map