@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
81 lines (80 loc) • 3.85 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.shadowObserverClassNames = exports.ShadowObserver = exports.ShadowKeys = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _defineProperty3 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var ShadowKeys = exports.ShadowKeys = /*#__PURE__*/function (ShadowKeys) {
ShadowKeys["SHOW_LEFT_SHADOW"] = "showLeftShadow";
ShadowKeys["SHOW_RIGHT_SHADOW"] = "showRightShadow";
return ShadowKeys;
}({});
var shadowObserverClassNames = exports.shadowObserverClassNames = {
SENTINEL_LEFT: 'sentinel-left',
SENTINEL_RIGHT: 'sentinel-right',
SHADOW_CONTAINER: 'with-shadow-observer'
};
var requestIdleCallback = function requestIdleCallback(fn) {
return window.requestIdleCallback ? window.requestIdleCallback(fn) : window.requestAnimationFrame(fn);
};
var cancelIdleCallback = function cancelIdleCallback(id) {
return window.cancelIdleCallback ? window.cancelIdleCallback(id) : window.cancelAnimationFrame(id);
};
var ShadowObserver = exports.ShadowObserver = /*#__PURE__*/function () {
function ShadowObserver(_ref) {
var _defineProperty2,
_this = this;
var scrollContainer = _ref.scrollContainer,
onUpdateShadows = _ref.onUpdateShadows;
(0, _classCallCheck2.default)(this, ShadowObserver);
(0, _defineProperty3.default)(this, "sentinels", {});
(0, _defineProperty3.default)(this, "shadowStates", (_defineProperty2 = {}, (0, _defineProperty3.default)(_defineProperty2, ShadowKeys.SHOW_LEFT_SHADOW, false), (0, _defineProperty3.default)(_defineProperty2, ShadowKeys.SHOW_RIGHT_SHADOW, false), _defineProperty2));
(0, _defineProperty3.default)(this, "init", function () {
if (!_this.scrollContainer || _this.intersectionObserver) {
return;
}
_this.sentinels.right = document.createElement('div');
_this.sentinels.right.classList.add(shadowObserverClassNames.SENTINEL_RIGHT);
_this.scrollContainer.appendChild(_this.sentinels.right);
_this.sentinels.left = document.createElement('div');
_this.sentinels.left.classList.add(shadowObserverClassNames.SENTINEL_LEFT);
_this.scrollContainer.prepend(_this.sentinels.left);
_this.intersectionObserver = new IntersectionObserver(function (entries, _) {
entries.forEach(_this.onIntersect);
}, {
root: _this.scrollContainer,
rootMargin: '1px'
});
_this.intersectionObserver.observe(_this.sentinels.left);
_this.intersectionObserver.observe(_this.sentinels.right);
});
(0, _defineProperty3.default)(this, "onIntersect", function (entry) {
_this.requestCallbackId = requestIdleCallback(function () {
if (entry.target.classList.contains(shadowObserverClassNames.SENTINEL_LEFT)) {
_this.shadowStates[ShadowKeys.SHOW_LEFT_SHADOW] = !entry.isIntersecting;
}
if (entry.target.classList.contains(shadowObserverClassNames.SENTINEL_RIGHT)) {
_this.shadowStates[ShadowKeys.SHOW_RIGHT_SHADOW] = !entry.isIntersecting;
}
_this.onUpdateShadows(_this.shadowStates);
});
});
this.scrollContainer = scrollContainer;
this.onUpdateShadows = onUpdateShadows;
this.init();
}
(0, _createClass2.default)(ShadowObserver, [{
key: "dispose",
value: function dispose() {
if (this.intersectionObserver) {
this.intersectionObserver.disconnect();
this.intersectionObserver = undefined;
this.requestCallbackId && cancelIdleCallback(this.requestCallbackId);
}
}
}]);
return ShadowObserver;
}();