chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
78 lines (76 loc) • 2.8 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.default = void 0;
var _isServer = require("../../utils/isServer");
let lastPageY;
const requestAnimationFrameFallback = (0, _isServer.isServer)() ? c => setTimeout(c, 0) : window.requestAnimationFrame.bind(window) || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || (c => setTimeout(c, 0));
class ScrollViewHelper {
constructor(el, _ref) {
let {
wrapper,
content,
bar
} = _ref;
this.target = el;
this.bar = bar;
this.wrapper = wrapper;
this.content = content;
this.direction = (0, _isServer.isServer)() ? undefined : window.getComputedStyle(this.target).direction;
if (this.direction === 'rtl') {
this.content.classList.add('rtl');
}
this.dragDealer(this.bar);
this.refresh();
if (!chayns.env.isMobile) {
this.content.addEventListener('scroll', this.moveBar.bind(this));
this.content.addEventListener('mouseenter', this.moveBar.bind(this));
}
}
dragDealer() {
const drag = e => {
const delta = e.pageY - lastPageY;
lastPageY = e.pageY;
requestAnimationFrameFallback(() => {
this.content.scrollTop += delta / this.scrollRatio;
});
};
const stop = () => {
this.target.classList.remove('cc__scroll-view--grabbed');
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', stop);
};
this.bar.addEventListener('mousedown', e => {
lastPageY = e.pageY;
this.target.classList.add('cc__scroll-view--grabbed');
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stop);
return false;
});
}
moveBar() {
requestAnimationFrameFallback(() => {
const totalHeight = this.content.scrollHeight;
const {
height
} = this.content.getBoundingClientRect();
const ownHeight = Math.ceil(height);
this.scrollRatio = ownHeight / totalHeight;
const right = (this.target.clientWidth - this.bar.clientWidth) * -1;
if (this.scrollRatio >= 1) {
this.content.classList.add('cc__scroll-view--hidden');
this.bar.style.height = 0;
} else {
this.content.classList.remove('cc__scroll-view--hidden');
const barHeightPercent = Math.max(this.scrollRatio, 0.1);
this.bar.style.height = `${barHeightPercent * ownHeight}px`;
this.bar.style.top = `${this.content.scrollTop / (totalHeight - ownHeight) * (ownHeight * (1 - barHeightPercent))}px`;
this.bar.style.right = `${right}px`;
}
});
}
refresh() {
this.moveBar();
}
}
exports.default = ScrollViewHelper;
//# sourceMappingURL=ScrollViewHelper.js.map