@botonic/react
Version:
Build Chatbots using React
103 lines • 3.57 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScrollbarController = void 0;
const dom_1 = require("../../util/dom");
const _1 = require(".");
const debounced = (delay, fn) => {
let timerId;
return function (...args) {
if (timerId) {
clearTimeout(timerId);
}
timerId = setTimeout(() => {
fn(...args);
timerId = null;
}, delay);
};
};
const stopAtScrollLimit = element => {
if (element.scrollTop === 0)
element.scrollTop = 1;
if (element.scrollHeight - element.scrollTop === element.clientHeight)
element.scrollTop -= 1;
};
class ScrollbarController {
constructor(currentDevice, host) {
this.currentDevice = currentDevice;
this.webchat = (0, dom_1.getWebchatElement)(host);
}
handleScrollEvents() {
/*
It handles scroll events for Mobile/Desktop.
"ontouchmove" is the phone equivalent for "onmouseover"
*/
if ((0, _1.isMobileDevice)()) {
if (this.currentDevice !== _1.DEVICES.MOBILE.IPHONE)
return;
this.limitScrollBoundaries();
this.webchat.ontouchstart = e => {
this.handleOnTouchMoveEvents(e);
};
this.webchat.ontouchmove = e => {
this.handleOnTouchMoveEvents(e);
};
}
else {
this.webchat.onmouseover = e => this.handleOnMouseOverEvents(e);
}
}
hasScrollbar() {
const scrollableArea = (0, dom_1.getScrollableArea)(this.webchat);
const isScrollable = scrollableArea.visible.clientHeight - scrollableArea.full.clientHeight < 0;
return isScrollable;
}
handleOnMouseOverEvents(e) {
let target = e.currentTarget;
while (target) {
this.toggleOnMouseWheelEvents();
target = target.parentNode;
}
}
toggleOnMouseWheelEvents() {
const scrollableContent = (0, dom_1.getScrollableContent)(this.webchat);
if (this.hasScrollbar()) {
scrollableContent.onmousewheel = {};
return;
}
scrollableContent.onmousewheel = e => e.preventDefault();
}
handleOnTouchMoveEvents(e) {
this.toggleOnTouchMoveEvents();
}
toggleOnTouchMoveEvents() {
if (this.hasScrollbar()) {
this.webchat.ontouchmove = {};
this.webchat.ontouchstart = {};
return;
}
this.webchat.ontouchmove = e => {
if (e.target === e.currentTarget)
e.preventDefault();
};
}
limitScrollBoundaries() {
if (this.currentDevice !== _1.DEVICES.MOBILE.IPHONE)
return;
/*
It adds a bounce effect when top or bottom limits of the scrollbar are reached for iOS,
as an alternative of overscroll-behavior (https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)
*/
const frame = (0, dom_1.getScrollableArea)(this.webchat).visible;
const dStopAtScrollLimit = debounced(100, stopAtScrollLimit);
if (frame) {
if (window.addEventListener) {
frame.addEventListener('scroll', () => dStopAtScrollLimit(frame), true);
}
else if (window.attachEvent) {
frame.attachEvent('scroll', () => dStopAtScrollLimit(frame));
}
}
}
}
exports.ScrollbarController = ScrollbarController;
//# sourceMappingURL=scrollbar-controller.js.map