@awey/scroller
Version:
The best custom scroll bar
652 lines (651 loc) • 32 kB
JavaScript
var __accessCheck = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet = (obj, member, getter) => {
__accessCheck(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd = (obj, member, value) => {
if (member.has(obj))
throw TypeError("Cannot add the same private member more than once");
member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
};
var __privateSet = (obj, member, value, setter) => {
__accessCheck(obj, member, "write to private field");
setter ? setter.call(obj, value) : member.set(obj, value);
return value;
};
var __privateMethod = (obj, member, method) => {
__accessCheck(obj, member, "access private method");
return method;
};
var Scroller = function(ResizeObserver2) {
var _el, _direction, _trackClassName, _barClassName, _offset, _scaleable, _showOnHover, _dragDirection, _dragDiff, _barScroll, _scrollListeners, _DOM, _observers, _handlers, _needX, needX_fn, _needY, needY_fn, _noX, noX_fn, _noY, noY_fn, _init, init_fn, _initEl, initEl_fn, _handleChildInsert, handleChildInsert_fn, _syncPlaceholderSize, syncPlaceholderSize_fn, _setMask, setMask_fn, _insertBg, insertBg_fn, _initScrollBarDom, initScrollBarDom_fn, _getViewSize, getViewSize_fn, _calcStatus, calcStatus_fn, _calcVisible, calcVisible_fn, _calcBarSize, calcBarSize_fn, _content2bar, content2bar_fn, _mousedownHandler, mousedownHandler_fn, _mousemoveHandler, mousemoveHandler_fn, _mouseupHandler, mouseupHandler_fn, _clickHandler, clickHandler_fn, _setBarScroll, setBarScroll_fn, _bar2content, bar2content_fn;
"use strict";
const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const ResizeObserver__default = /* @__PURE__ */ _interopDefaultLegacy(ResizeObserver2);
const index = "";
const createElement = (elName, className) => {
const el = document.createElement(elName);
el.className = className;
return el;
};
const nestElements = (elements) => {
for (let i = 0; i < elements.length; i++) {
if (!i)
continue;
elements[i - 1].appendChild(elements[i]);
}
};
const transferDOM = (source, target, clear = true) => {
const fragment = document.createDocumentFragment();
const contents = [];
for (let i = 0; i < source.children.length; i++) {
contents.push(source.children[i]);
}
for (let i = 0; i < contents.length; i++) {
fragment.appendChild(contents[i]);
}
target.innerHTML = "";
if (clear)
source.innerHTML = "";
target.appendChild(fragment);
};
const addClass = (el, className) => {
if (el.className.indexOf(className) === -1) {
el.className += (el.className.trim() ? " " : "") + className;
}
};
const removeClass = (el, className) => {
if (el.className.indexOf(className) !== -1) {
el.className = el.className.split(/\s+/).filter((c) => {
return c && c.trim() !== className.trim();
}).join(" ");
}
};
const hasClass = (el, className) => {
return el.className.trim().indexOf(className.trim()) !== -1;
};
const addListener = (el, event, handler) => {
el.removeEventListener(event, handler);
el.addEventListener(event, handler);
};
const removeListener = (el, event, handler) => {
el.removeEventListener(event, handler);
};
const observeMutation = (el, handler, config, context, throttle) => {
let throttleTimer = null;
const clear = () => {
if (throttleTimer) {
window.clearTimeout(throttleTimer);
throttleTimer = null;
}
};
const observer = new window.MutationObserver((mutationList) => {
if (throttle) {
clear();
throttleTimer = window.setTimeout(() => {
handler.call(context, mutationList);
clear();
}, throttle);
} else {
handler.call(context, mutationList);
}
});
observer.observe(el, config);
return observer;
};
const observeChildInsert = (el, handler, context) => {
return observeMutation(el, (mutationList) => {
let addedNodes = [];
for (let mutation of mutationList) {
if (mutation.addedNodes && mutation.addedNodes.length) {
for (let i = 0; i < mutation.addedNodes.length; i++) {
const node = mutation.addedNodes[i];
if (addedNodes.indexOf(node) === -1)
addedNodes.push(node);
}
}
}
if (addedNodes.length)
handler.call(context, addedNodes);
}, { childList: true }, context);
};
const observeStyleChange = (el, handler, context) => observeMutation(el, handler, { attributeFilter: ["style"] }, context);
const observeResize = (el, handler, context) => {
let oldSize = { width: 0, height: 0 };
const observer = new ResizeObserver__default.default((entity) => {
let rect = entity[0].contentRect;
if (rect.width !== oldSize.width || rect.height !== oldSize.height) {
handler.call(context);
oldSize.width = rect.width;
oldSize.height = rect.height;
}
});
observer.observe(el);
return observer;
};
const isOnDocument = (elementNode) => {
if (elementNode === document.body)
return true;
else if (!elementNode.parentNode)
return false;
else if (elementNode.parentNode === document.body)
return true;
else
return isOnDocument(elementNode.parentNode);
};
let nativeScrollWidth = null;
const getNativeScrollBarWidth = () => {
if (nativeScrollWidth)
return nativeScrollWidth;
let outer = document.createElement("div");
let inner = document.createElement("div");
outer.appendChild(inner);
outer.style.width = "100px";
outer.style.position = "absolute";
outer.style.visibility = "hidden";
document.body.appendChild(outer);
let before = inner.getBoundingClientRect().width;
outer.style.overflow = "scroll";
let after = inner.getBoundingClientRect().width;
document.body.removeChild(outer);
nativeScrollWidth = before - after;
return nativeScrollWidth;
};
class Scroller2 {
constructor(options) {
__privateAdd(this, _needX);
__privateAdd(this, _needY);
__privateAdd(this, _noX);
__privateAdd(this, _noY);
__privateAdd(this, _init);
__privateAdd(this, _initEl);
__privateAdd(this, _handleChildInsert);
__privateAdd(this, _syncPlaceholderSize);
__privateAdd(this, _setMask);
__privateAdd(this, _insertBg);
__privateAdd(this, _initScrollBarDom);
__privateAdd(this, _getViewSize);
__privateAdd(this, _calcStatus);
__privateAdd(this, _calcVisible);
__privateAdd(this, _calcBarSize);
__privateAdd(this, _content2bar);
__privateAdd(this, _mousedownHandler);
__privateAdd(this, _mousemoveHandler);
__privateAdd(this, _mouseupHandler);
__privateAdd(this, _clickHandler);
__privateAdd(this, _setBarScroll);
__privateAdd(this, _bar2content);
__privateAdd(this, _el, void 0);
__privateAdd(this, _direction, "both");
__privateAdd(this, _trackClassName, "_scroller_bar_track_default");
__privateAdd(this, _barClassName, "_scroller_bar_handler_default");
__privateAdd(this, _offset, 2);
__privateAdd(this, _scaleable, true);
__privateAdd(this, _showOnHover, false);
__privateAdd(this, _dragDirection, "");
__privateAdd(this, _dragDiff, 0);
__privateAdd(this, _barScroll, 0);
__privateAdd(this, _scrollListeners, []);
__privateAdd(this, _DOM, {
container: createElement("div", "_container"),
mask: createElement("div", "_mask"),
contentWrapper: createElement("div", "_content_wrapper"),
content: createElement("div", "_content"),
placeholder: createElement("div", "_placeholder"),
xScrollBarContainer: createElement("div", "_x_scroller_container"),
xScrollBarTrack: createElement("div", "_x_scroller_track"),
xScrollBarHandler: createElement("div", "_x_scroller_bar_handler"),
yScrollBarContainer: createElement("div", "_y_scroller_container"),
yScrollBarTrack: createElement("div", "_y_scroller_track"),
yScrollBarHandler: createElement("div", "_y_scroller_bar_handler")
});
__privateAdd(this, _observers, {
elStyleChangeObserver: null,
elResizeObserver: null,
childInsertObserver: null,
contentSizeObserver: null
});
__privateAdd(this, _handlers, {
scrollHandler: () => __privateMethod(this, _content2bar, content2bar_fn).call(this),
mouseenterHandler: () => __privateMethod(this, _calcStatus, calcStatus_fn).call(this),
mouseleaveHandler: () => __privateMethod(this, _calcStatus, calcStatus_fn).call(this),
xMousedownHandler: (event) => __privateMethod(this, _mousedownHandler, mousedownHandler_fn).call(this, event, "horizontal"),
yMousedownHandler: (event) => __privateMethod(this, _mousedownHandler, mousedownHandler_fn).call(this, event, "vertical"),
xClickHandler: (event) => __privateMethod(this, _clickHandler, clickHandler_fn).call(this, event, "horizontal"),
yClickHandler: (event) => __privateMethod(this, _clickHandler, clickHandler_fn).call(this, event, "vertical"),
mousemoveHandler: (event) => __privateMethod(this, _mousemoveHandler, mousemoveHandler_fn).call(this, event),
mouseupHandler: (event) => __privateMethod(this, _mouseupHandler, mouseupHandler_fn).call(this, event)
});
if (!options.el) {
throw new Error("Scroller: you should at least specify an element in options");
}
__privateSet(this, _el, options.el);
options.trackClassName && __privateSet(this, _trackClassName, options.trackClassName);
options.barClassName && __privateSet(this, _barClassName, options.barClassName);
options.offset !== void 0 && __privateSet(this, _offset, options.offset);
options.scaleable !== void 0 && __privateSet(this, _scaleable, options.scaleable);
__privateMethod(this, _init, init_fn).call(this);
this.setDirection(options.direction || __privateGet(this, _direction), true);
}
getScroll() {
return {
scrollTop: __privateGet(this, _DOM).mask.scrollTop,
scrollLeft: __privateGet(this, _DOM).mask.scrollLeft
};
}
scrollTo(position) {
const { scrollTop, scrollLeft } = position;
if (scrollTop || scrollTop === 0) {
__privateGet(this, _DOM).mask.scrollTop = scrollTop;
}
if (scrollLeft || scrollLeft === 0) {
__privateGet(this, _DOM).mask.scrollLeft = scrollLeft;
}
return this;
}
onScroll(cb) {
if (__privateGet(this, _scrollListeners).indexOf(cb) === -1) {
__privateGet(this, _scrollListeners).push(cb);
addListener(__privateGet(this, _DOM).mask, "scroll", cb);
}
return this;
}
offScroll(cb) {
const index2 = __privateGet(this, _scrollListeners).indexOf(cb);
if (cb && index2 !== -1) {
removeListener(__privateGet(this, _DOM).mask, "scroll", cb);
__privateGet(this, _scrollListeners).splice(index2, 1);
} else {
__privateGet(this, _scrollListeners).forEach((c) => removeListener(__privateGet(this, _DOM).mask, "scroll", c));
}
return this;
}
setDirection(direction, lazy) {
__privateSet(this, _direction, direction);
if (__privateMethod(this, _noX, noX_fn).call(this)) {
addClass(__privateGet(this, _DOM).content, "_no_x");
} else {
removeClass(__privateGet(this, _DOM).content, "_no_x");
}
if (__privateMethod(this, _noY, noY_fn).call(this)) {
addClass(__privateGet(this, _DOM).content, "_no_y");
} else {
removeClass(__privateGet(this, _DOM).content, "_no_y");
}
if (!lazy) {
this.refresh();
}
return this;
}
refresh() {
__privateMethod(this, _syncPlaceholderSize, syncPlaceholderSize_fn).call(this);
__privateMethod(this, _setMask, setMask_fn).call(this);
__privateMethod(this, _calcStatus, calcStatus_fn).call(this);
}
getScrollElement() {
return __privateGet(this, _DOM).mask;
}
destroy() {
transferDOM(__privateGet(this, _DOM).content, __privateGet(this, _el));
__privateGet(this, _DOM).container.parentElement === __privateGet(this, _el) && __privateGet(this, _el).removeChild(__privateGet(this, _DOM).container);
__privateGet(this, _DOM).xScrollBarContainer.parentElement === __privateGet(this, _el) && __privateGet(this, _el).removeChild(__privateGet(this, _DOM).xScrollBarContainer);
__privateGet(this, _DOM).yScrollBarContainer.parentElement === __privateGet(this, _el) && __privateGet(this, _el).removeChild(__privateGet(this, _DOM).yScrollBarContainer);
__privateGet(this, _DOM).placeholder.parentElement === __privateGet(this, _el) && __privateGet(this, _el).removeChild(__privateGet(this, _DOM).placeholder);
removeClass(__privateGet(this, _el), "_scroller");
removeClass(__privateGet(this, _el), "_scaleable");
removeClass(__privateGet(this, _el), "_show_on_hover");
removeListener(__privateGet(this, _el), "mouseenter", __privateGet(this, _handlers).mouseenterHandler);
removeListener(__privateGet(this, _el), "mouseleave", __privateGet(this, _handlers).mouseleaveHandler);
removeListener(__privateGet(this, _DOM).xScrollBarHandler, "mousedown", __privateGet(this, _handlers).xMousedownHandler);
removeListener(__privateGet(this, _DOM).yScrollBarHandler, "mousedown", __privateGet(this, _handlers).yMousedownHandler);
removeListener(__privateGet(this, _DOM).xScrollBarTrack, "click", __privateGet(this, _handlers).xClickHandler);
removeListener(__privateGet(this, _DOM).yScrollBarTrack, "click", __privateGet(this, _handlers).yClickHandler);
removeListener(window, "mousemove", __privateGet(this, _handlers).mousemoveHandler);
removeListener(window, "mouseup", __privateGet(this, _handlers).mouseupHandler);
__privateGet(this, _scrollListeners).forEach((c) => removeListener(__privateGet(this, _DOM).mask, "scroll", c));
}
}
_el = new WeakMap();
_direction = new WeakMap();
_trackClassName = new WeakMap();
_barClassName = new WeakMap();
_offset = new WeakMap();
_scaleable = new WeakMap();
_showOnHover = new WeakMap();
_dragDirection = new WeakMap();
_dragDiff = new WeakMap();
_barScroll = new WeakMap();
_scrollListeners = new WeakMap();
_DOM = new WeakMap();
_observers = new WeakMap();
_handlers = new WeakMap();
_needX = new WeakSet();
needX_fn = function() {
const contentRect = __privateGet(this, _DOM).content.getBoundingClientRect();
const viewSize = __privateMethod(this, _getViewSize, getViewSize_fn).call(this);
return (__privateGet(this, _direction) === "horizontal" || __privateGet(this, _direction) === "both") && contentRect.width > viewSize.width;
};
_needY = new WeakSet();
needY_fn = function() {
const contentRect = __privateGet(this, _DOM).content.getBoundingClientRect();
const viewSize = __privateMethod(this, _getViewSize, getViewSize_fn).call(this);
return (__privateGet(this, _direction) === "vertical" || __privateGet(this, _direction) === "both") && contentRect.height > viewSize.height;
};
_noX = new WeakSet();
noX_fn = function() {
return __privateGet(this, _direction) === "vertical" || __privateGet(this, _direction) === "none";
};
_noY = new WeakSet();
noY_fn = function() {
return __privateGet(this, _direction) === "horizontal" || __privateGet(this, _direction) === "none";
};
_init = new WeakSet();
init_fn = function() {
__privateMethod(this, _initEl, initEl_fn).call(this);
nestElements([
__privateGet(this, _DOM).container,
__privateGet(this, _DOM).mask,
__privateGet(this, _DOM).contentWrapper,
__privateGet(this, _DOM).content
]);
transferDOM(__privateGet(this, _el), __privateGet(this, _DOM).content);
__privateGet(this, _el).appendChild(__privateGet(this, _DOM).placeholder);
__privateGet(this, _el).appendChild(__privateGet(this, _DOM).container);
__privateGet(this, _observers).elStyleChangeObserver = observeStyleChange(__privateGet(this, _el), this.refresh, this);
__privateGet(this, _observers).elResizeObserver = observeResize(__privateGet(this, _el), this.refresh, this);
__privateGet(this, _observers).contentSizeObserver = observeResize(__privateGet(this, _DOM).content, this.refresh, this);
__privateGet(this, _observers).childInsertObserver = observeChildInsert(__privateGet(this, _el), __privateMethod(this, _handleChildInsert, handleChildInsert_fn), this);
__privateMethod(this, _initScrollBarDom, initScrollBarDom_fn).call(this);
this.refresh();
};
_initEl = new WeakSet();
initEl_fn = function() {
addClass(__privateGet(this, _el), "_scroller");
__privateGet(this, _scaleable) && addClass(__privateGet(this, _el), "_scaleable");
__privateGet(this, _showOnHover) && addClass(__privateGet(this, _el), "_show_on_hover");
let positionStyle = window.getComputedStyle(__privateGet(this, _el)).position;
if (!positionStyle || positionStyle === "static") {
__privateGet(this, _el).style.position = "relative";
}
};
_handleChildInsert = new WeakSet();
handleChildInsert_fn = function(insertedNodes) {
const children = __privateGet(this, _el).children;
const indexOfChild = (childEl) => {
return Array.prototype.indexOf.call(children, childEl);
};
for (let el of insertedNodes) {
if (indexOfChild(el) > indexOfChild(__privateGet(this, _el))) {
__privateGet(this, _DOM).content.appendChild(el);
} else {
__privateGet(this, _DOM).content.insertBefore(el, __privateGet(this, _DOM).content.children[0]);
}
}
};
_syncPlaceholderSize = new WeakSet();
syncPlaceholderSize_fn = function() {
let contentRect = {};
if (isOnDocument(__privateGet(this, _DOM).content)) {
contentRect = __privateGet(this, _DOM).content.getBoundingClientRect();
if (!contentRect.width) {
let duplicate = __privateGet(this, _DOM).content.cloneNode(true);
duplicate.style.visibility = "hidden";
__privateGet(this, _DOM).placeholder.style.width = "auto";
__privateGet(this, _DOM).placeholder.style.height = "auto";
__privateGet(this, _DOM).placeholder.appendChild(duplicate);
contentRect.width = duplicate.getBoundingClientRect().width;
__privateGet(this, _DOM).placeholder.removeChild(duplicate);
}
} else {
let duplicate = __privateGet(this, _DOM).content.cloneNode(true);
duplicate.className = "___";
duplicate.style.display = "inline-block";
duplicate.style.position = "absolute";
duplicate.style.zIndex = "-99999";
duplicate.style.top = "9999999";
duplicate.style.left = "9999999";
document.body.appendChild(duplicate);
contentRect = duplicate.getBoundingClientRect();
document.body.removeChild(duplicate);
}
__privateGet(this, _DOM).placeholder.style.width = contentRect.width + "px";
__privateGet(this, _DOM).placeholder.style.height = contentRect.height + "px";
};
_setMask = new WeakSet();
setMask_fn = function() {
let {
paddingTop,
paddingRight,
paddingBottom,
paddingLeft
} = window.getComputedStyle(__privateGet(this, _el));
let { width, height } = __privateGet(this, _DOM).container.getBoundingClientRect();
__privateGet(this, _DOM).content.style.paddingLeft = paddingLeft;
__privateGet(this, _DOM).content.style.paddingTop = paddingTop;
__privateGet(this, _DOM).content.style.paddingRight = parseFloat(paddingRight) + "px";
__privateGet(this, _DOM).content.style.paddingBottom = parseFloat(paddingBottom) + "px";
if (!__privateMethod(this, _needX, needX_fn).call(this)) {
__privateGet(this, _DOM).mask.style.overflowX = "hidden";
__privateGet(this, _DOM).mask.style.height = height + "px";
} else {
__privateGet(this, _DOM).mask.style.overflowX = "auto";
__privateGet(this, _DOM).mask.style.height = height + getNativeScrollBarWidth() + "px";
}
if (!__privateMethod(this, _needY, needY_fn).call(this)) {
__privateGet(this, _DOM).mask.style.overflowY = "hidden";
__privateGet(this, _DOM).mask.style.width = width + "px";
} else {
__privateGet(this, _DOM).mask.style.overflowY = "auto";
__privateGet(this, _DOM).mask.style.width = width + getNativeScrollBarWidth() + "px";
}
__privateMethod(this, _content2bar, content2bar_fn).call(this);
addListener(__privateGet(this, _DOM).mask, "scroll", __privateGet(this, _handlers).scrollHandler);
};
_insertBg = new WeakSet();
insertBg_fn = function(el, className) {
const bg = document.createElement("div");
bg.className = className;
el.insertBefore(bg, el.querySelector(":first-child"));
return bg;
};
_initScrollBarDom = new WeakSet();
initScrollBarDom_fn = function() {
nestElements([
__privateGet(this, _DOM).xScrollBarContainer,
__privateGet(this, _DOM).xScrollBarTrack,
__privateGet(this, _DOM).xScrollBarHandler
]);
__privateMethod(this, _insertBg, insertBg_fn).call(this, __privateGet(this, _DOM).xScrollBarTrack, "_scroller_bg " + __privateGet(this, _trackClassName));
__privateMethod(this, _insertBg, insertBg_fn).call(this, __privateGet(this, _DOM).xScrollBarHandler, "_scroller_bg " + __privateGet(this, _barClassName));
__privateGet(this, _DOM).container.appendChild(__privateGet(this, _DOM).xScrollBarContainer);
nestElements([
__privateGet(this, _DOM).yScrollBarContainer,
__privateGet(this, _DOM).yScrollBarTrack,
__privateGet(this, _DOM).yScrollBarHandler
]);
__privateMethod(this, _insertBg, insertBg_fn).call(this, __privateGet(this, _DOM).yScrollBarTrack, "_scroller_bg " + __privateGet(this, _trackClassName));
__privateMethod(this, _insertBg, insertBg_fn).call(this, __privateGet(this, _DOM).yScrollBarHandler, "_scroller_bg " + __privateGet(this, _barClassName));
__privateGet(this, _DOM).container.appendChild(__privateGet(this, _DOM).yScrollBarContainer);
__privateGet(this, _DOM).xScrollBarContainer.style.bottom = __privateGet(this, _offset) + "px";
__privateGet(this, _DOM).yScrollBarContainer.style.right = __privateGet(this, _offset) + "px";
__privateMethod(this, _calcStatus, calcStatus_fn).call(this);
addListener(__privateGet(this, _el), "mouseenter", __privateGet(this, _handlers).mouseenterHandler);
addListener(__privateGet(this, _el), "mouseleave", __privateGet(this, _handlers).mouseleaveHandler);
addListener(__privateGet(this, _DOM).xScrollBarHandler, "mousedown", __privateGet(this, _handlers).xMousedownHandler);
addListener(__privateGet(this, _DOM).yScrollBarHandler, "mousedown", __privateGet(this, _handlers).yMousedownHandler);
addListener(__privateGet(this, _DOM).xScrollBarTrack, "click", __privateGet(this, _handlers).xClickHandler);
addListener(__privateGet(this, _DOM).yScrollBarTrack, "click", __privateGet(this, _handlers).yClickHandler);
};
_getViewSize = new WeakSet();
getViewSize_fn = function() {
const containerRect = __privateGet(this, _DOM).container.getBoundingClientRect();
return { width: containerRect.width, height: containerRect.height };
};
_calcStatus = new WeakSet();
calcStatus_fn = function() {
__privateMethod(this, _calcVisible, calcVisible_fn).call(this);
__privateMethod(this, _calcBarSize, calcBarSize_fn).call(this);
};
_calcVisible = new WeakSet();
calcVisible_fn = function() {
if (getNativeScrollBarWidth() === 0) {
__privateGet(this, _DOM).xScrollBarContainer.style.display = "none";
__privateGet(this, _DOM).yScrollBarContainer.style.display = "none";
} else {
if (__privateMethod(this, _needX, needX_fn).call(this)) {
__privateGet(this, _DOM).xScrollBarContainer.style.display = "inline-block";
} else {
__privateGet(this, _DOM).xScrollBarContainer.style.display = "none";
}
if (__privateMethod(this, _needY, needY_fn).call(this)) {
__privateGet(this, _DOM).yScrollBarContainer.style.display = "inline-block";
} else {
__privateGet(this, _DOM).yScrollBarContainer.style.display = "none";
}
}
};
_calcBarSize = new WeakSet();
calcBarSize_fn = function() {
const contentRect = __privateGet(this, _DOM).content.getBoundingClientRect();
const viewSize = __privateMethod(this, _getViewSize, getViewSize_fn).call(this);
const calc = (content, view, track) => Math.floor(track * view / content);
if (__privateMethod(this, _needY, needY_fn).call(this)) {
const res = calc(
contentRect.height,
viewSize.height,
__privateGet(this, _DOM).yScrollBarTrack.getBoundingClientRect().height
);
__privateGet(this, _DOM).yScrollBarHandler.style.height = res + "px";
if (res < 20) {
addClass(__privateGet(this, _DOM).yScrollBarHandler, "_minimal");
} else {
removeClass(__privateGet(this, _DOM).yScrollBarHandler, "_minimal");
}
}
if (__privateMethod(this, _needX, needX_fn).call(this)) {
const res = calc(
contentRect.width,
viewSize.width,
__privateGet(this, _DOM).xScrollBarTrack.getBoundingClientRect().width
);
__privateGet(this, _DOM).xScrollBarHandler.style.width = res + "px";
if (res < 20) {
addClass(__privateGet(this, _DOM).xScrollBarHandler, "_minimal");
} else {
removeClass(__privateGet(this, _DOM).xScrollBarHandler, "_minimal");
}
}
};
_content2bar = new WeakSet();
content2bar_fn = function() {
const contentRect = __privateGet(this, _DOM).content.getBoundingClientRect();
const scrollTop = __privateGet(this, _DOM).mask.scrollTop;
const scrollLeft = __privateGet(this, _DOM).mask.scrollLeft;
const calc = (scroll, content, track) => Math.ceil(scroll * track / content) + 1;
if (__privateMethod(this, _needX, needX_fn).call(this)) {
const trackRect = __privateGet(this, _DOM).xScrollBarTrack.getBoundingClientRect();
__privateGet(this, _DOM).xScrollBarHandler.style.transform = `
translateX(${calc(scrollLeft, contentRect.width, trackRect.width)}px)
`;
}
if (__privateMethod(this, _needY, needY_fn).call(this)) {
const trackRect = __privateGet(this, _DOM).yScrollBarTrack.getBoundingClientRect();
__privateGet(this, _DOM).yScrollBarHandler.style.transform = `
translateY(${calc(scrollTop, contentRect.height, trackRect.height)}px)
`;
}
};
_mousedownHandler = new WeakSet();
mousedownHandler_fn = function(event, direction) {
if (event.buttons !== 1)
return;
event.preventDefault();
event.stopPropagation();
__privateSet(this, _dragDirection, direction);
if (__privateGet(this, _dragDirection) === "vertical") {
__privateSet(this, _dragDiff, event.pageY - __privateGet(this, _DOM).yScrollBarHandler.getBoundingClientRect().top);
addClass(__privateGet(this, _DOM).yScrollBarHandler, "_dragging_target");
} else {
__privateSet(this, _dragDiff, event.pageX - __privateGet(this, _DOM).xScrollBarHandler.getBoundingClientRect().left);
addClass(__privateGet(this, _DOM).xScrollBarHandler, "_dragging_target");
}
addClass(__privateGet(this, _el), "_dragging");
addListener(window, "mousemove", __privateGet(this, _handlers).mousemoveHandler);
addListener(window, "mouseup", __privateGet(this, _handlers).mouseupHandler);
};
_mousemoveHandler = new WeakSet();
mousemoveHandler_fn = function(event) {
event.preventDefault();
event.stopPropagation();
let theoreticBarScroll = 0;
if (__privateGet(this, _dragDirection) === "vertical") {
theoreticBarScroll = event.pageY - __privateGet(this, _dragDiff) - __privateGet(this, _DOM).yScrollBarTrack.getBoundingClientRect().top;
} else {
theoreticBarScroll = event.pageX - __privateGet(this, _dragDiff) - __privateGet(this, _DOM).xScrollBarTrack.getBoundingClientRect().left;
}
__privateMethod(this, _setBarScroll, setBarScroll_fn).call(this, theoreticBarScroll);
__privateMethod(this, _bar2content, bar2content_fn).call(this);
};
_mouseupHandler = new WeakSet();
mouseupHandler_fn = function(event) {
event.preventDefault();
event.stopPropagation();
removeClass(__privateGet(this, _DOM).xScrollBarHandler, "_dragging_target");
removeClass(__privateGet(this, _DOM).yScrollBarHandler, "_dragging_target");
removeClass(__privateGet(this, _el), "_dragging");
removeListener(window, "mousemove", __privateGet(this, _handlers).mousemoveHandler);
removeListener(window, "mouseup", __privateGet(this, _handlers).mouseupHandler);
};
_clickHandler = new WeakSet();
clickHandler_fn = function(event, direction) {
if (hasClass(event.target, "_x_scroller_bar") || hasClass(event.target, "_y_scroller_bar"))
return false;
__privateSet(this, _dragDirection, direction);
const calc = (mouse, track, coreSize) => mouse - track - coreSize / 2;
if (__privateGet(this, _dragDirection) === "vertical") {
const coreRect = __privateGet(this, _DOM).yScrollBarHandler.getBoundingClientRect();
const trackRect = __privateGet(this, _DOM).yScrollBarTrack.getBoundingClientRect();
__privateSet(this, _barScroll, calc(event.clientY, trackRect.top, coreRect.height));
} else {
const coreRect = __privateGet(this, _DOM).xScrollBarHandler.getBoundingClientRect();
const trackRect = __privateGet(this, _DOM).xScrollBarTrack.getBoundingClientRect();
__privateSet(this, _barScroll, calc(event.clientX, trackRect.left, coreRect.width));
}
__privateMethod(this, _bar2content, bar2content_fn).call(this);
};
_setBarScroll = new WeakSet();
setBarScroll_fn = function(theoreticBarScroll) {
if (__privateGet(this, _dragDirection) === "vertical") {
const barRect = __privateGet(this, _DOM).yScrollBarTrack.getBoundingClientRect();
const coreRect = __privateGet(this, _DOM).yScrollBarHandler.getBoundingClientRect();
const max = barRect.height - coreRect.height;
const reality = theoreticBarScroll < 0 ? 0 : theoreticBarScroll > max ? max : theoreticBarScroll;
__privateGet(this, _DOM).yScrollBarHandler.style.transform = `translateY(${reality}px)`;
__privateSet(this, _barScroll, reality);
} else {
const barRect = __privateGet(this, _DOM).xScrollBarTrack.getBoundingClientRect();
const coreRect = __privateGet(this, _DOM).xScrollBarHandler.getBoundingClientRect();
const max = barRect.width - coreRect.width;
const reality = theoreticBarScroll < 0 ? 0 : theoreticBarScroll > max ? max : theoreticBarScroll;
__privateGet(this, _DOM).xScrollBarHandler.style.transform = `translateX(${reality}px)`;
__privateSet(this, _barScroll, reality);
}
};
_bar2content = new WeakSet();
bar2content_fn = function() {
const barScroll = __privateGet(this, _barScroll);
const contentRect = __privateGet(this, _DOM).content.getBoundingClientRect();
const calc = (barScroll2, content, track) => Math.ceil(barScroll2 * content / track);
if (__privateGet(this, _dragDirection) === "vertical") {
const trackRect = __privateGet(this, _DOM).yScrollBarTrack.getBoundingClientRect();
__privateGet(this, _DOM).mask.scrollTop = calc(barScroll, contentRect.height, trackRect.height);
} else {
const trackRect = __privateGet(this, _DOM).xScrollBarTrack.getBoundingClientRect();
__privateGet(this, _DOM).mask.scrollLeft = calc(barScroll, contentRect.width, trackRect.width);
}
};
return Scroller2;
}(ResizeObserver);