@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
176 lines (172 loc) • 8.28 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TableStickyScrollbar = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _ui = require("@atlaskit/editor-common/ui");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _types = require("../types");
var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function () {
function TableStickyScrollbar(wrapper, view) {
var _this = this;
(0, _classCallCheck2.default)(this, TableStickyScrollbar);
(0, _defineProperty2.default)(this, "sentinels", {});
(0, _defineProperty2.default)(this, "handleScroll", function (event) {
if (!_this.stickyScrollbarContainerElement || !_this.wrapper || event.target !== _this.stickyScrollbarContainerElement) {
return;
}
_this.wrapper.scrollLeft = _this.stickyScrollbarContainerElement.scrollLeft;
});
this.wrapper = wrapper;
this.view = view;
if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', true)) {
requestAnimationFrame(function () {
_this.init();
});
} else {
this.init();
}
}
return (0, _createClass2.default)(TableStickyScrollbar, [{
key: "dispose",
value: function dispose() {
if (this.stickyScrollbarContainerElement) {
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.stickyScrollbarContainerElement.removeEventListener('scroll', this.handleScroll);
}
this.deleteIntersectionObserver();
}
}, {
key: "scrollLeft",
value: function scrollLeft(left) {
if (this.stickyScrollbarContainerElement) {
this.stickyScrollbarContainerElement.scrollLeft = left;
}
}
}, {
key: "init",
value: function init() {
var _this$wrapper$parentE;
if (!this.wrapper) {
return;
}
this.stickyScrollbarContainerElement = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelector(".".concat(_types.TableCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER));
if (this.stickyScrollbarContainerElement) {
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.stickyScrollbarContainerElement.addEventListener('scroll', this.handleScroll, {
passive: true
});
}
this.createIntersectionObserver();
}
}, {
key: "createIntersectionObserver",
value: function createIntersectionObserver() {
var _this2 = this,
_this$wrapper,
_this$wrapper2;
this.editorScrollableElement =
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
(0, _ui.findOverflowScrollParent)(this.view.dom) || window.document;
if (!this.editorScrollableElement || !this.wrapper) {
return;
}
this.intersectionObserver = new IntersectionObserver(function (entries, _) {
if (!_this2.stickyScrollbarContainerElement) {
return;
}
entries.forEach(function (entry) {
var _entry$rootBounds;
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var target = entry.target;
// if the rootBounds has 0 height, e.g. confluence preview mode, we do nothing.
if (((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.height) === 0) {
return;
}
if (target.classList.contains(_types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) {
_this2.sentinelBottomCallback(entry);
}
if (target.classList.contains(_types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) {
_this2.sentinelTopCallback(entry);
}
});
}, {
root: this.editorScrollableElement
});
// Multiple bottom sentinels may be found if there are nested tables. We need to make sure we get the last one which will belong to the parent table.
var bottomSentinels = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 || (_this$wrapper = _this$wrapper.parentElement) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM);
// eslint-disable-next-line @atlaskit/editor/no-as-casting
this.sentinels.bottom = bottomSentinels === null || bottomSentinels === void 0 ? void 0 : bottomSentinels.item(bottomSentinels.length - 1);
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
this.sentinels.top = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.item(0);
[this.sentinels.bottom, this.sentinels.top].forEach(function (el) {
if (el !== null && _this2.intersectionObserver) {
_this2.intersectionObserver.observe(el);
}
});
}
}, {
key: "deleteIntersectionObserver",
value: function deleteIntersectionObserver() {
if (this.intersectionObserver) {
if (this.sentinels.bottom) {
this.intersectionObserver.unobserve(this.sentinels.bottom);
}
this.intersectionObserver.disconnect();
}
}
}, {
key: "sentinelBottomCallback",
value: function sentinelBottomCallback(entry) {
var _entry$rootBounds2, _entry$rootBounds3;
var sentinelIsAboveScrollArea = entry.boundingClientRect.top < (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.top) || 0) ||
// When editorScrollableElement is the root document or inside modal,
// so the boundingClientRect.top will never be less than the rootBounds.top,
// so we need to check if the boundingClientRect.top is less than 20% of the rootBounds.height
// to determine if the bottom sentinel is above the scroll area
entry.boundingClientRect.top < (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.height) || 0) * 0.2;
this.bottomSentinelState = sentinelIsAboveScrollArea ? 'above' : entry.isIntersecting ? 'visible' : 'below';
this.toggle();
}
}, {
key: "sentinelTopCallback",
value: function sentinelTopCallback(entry) {
var _entry$rootBounds4;
var sentinelIsBelowScrollArea = (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.bottom) || 0) < entry.boundingClientRect.top;
this.topSentinelState = sentinelIsBelowScrollArea ? 'below' : entry.isIntersecting ? 'visible' : 'above';
this.toggle();
}
}, {
key: "toggle",
value: function toggle() {
if ((this.topSentinelState === 'visible' || this.topSentinelState === 'above') && this.bottomSentinelState === 'below') {
this.show();
} else {
this.hide();
}
}
}, {
key: "hide",
value: function hide() {
if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'none') {
this.stickyScrollbarContainerElement.style.display = 'none';
}
}
}, {
key: "show",
value: function show() {
if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'block') {
this.stickyScrollbarContainerElement.style.display = 'block';
}
}
}]);
}();