vscroll
Version:
Virtual scroll engine
166 lines • 6.12 kB
JavaScript
import { Direction } from '../inputs/index';
var Routines = /** @class */ (function () {
function Routines(element, settings) {
this.element = element;
this.settings = {
viewport: settings.viewport,
horizontal: settings.horizontal,
window: settings.windowViewport
};
// initialization
this.viewport = this.getViewportElement();
this.onInit(settings);
}
Routines.prototype.checkElement = function (element) {
if (!element) {
throw new Error('HTML element is not defined');
}
};
Routines.prototype.getViewportElement = function () {
if (this.settings.window) {
return document.documentElement;
}
if (this.settings.viewport) {
return this.settings.viewport;
}
this.checkElement(this.element);
var parent = this.element.parentElement;
this.checkElement(parent);
return parent;
};
Routines.prototype.onInit = function (settings) {
if (settings.windowViewport) {
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
}
if (settings.dismissOverflowAnchor) {
this.viewport.style.overflowAnchor = 'none';
}
};
Routines.prototype.findElementBySelector = function (element, selector) {
this.checkElement(element);
return element.querySelector(selector);
};
Routines.prototype.findPaddingElement = function (direction) {
return this.findElementBySelector(this.element, "[data-padding-".concat(direction, "]"));
};
Routines.prototype.findItemElement = function (id) {
return this.findElementBySelector(this.element, "[data-sid=\"".concat(id, "\"]"));
};
Routines.prototype.findItemChildBySelector = function (id, selector) {
return this.findElementBySelector(this.element, "[data-sid=\"".concat(id, "\"] ").concat(selector));
};
Routines.prototype.getScrollPosition = function () {
if (this.settings.window) {
return this.settings.horizontal ? window.pageXOffset : window.pageYOffset;
}
return this.viewport[this.settings.horizontal ? 'scrollLeft' : 'scrollTop'];
};
Routines.prototype.setScrollPosition = function (value) {
value = Math.max(0, value);
if (this.settings.window) {
if (this.settings.horizontal) {
window.scrollTo(value, window.scrollY);
}
else {
window.scrollTo(window.scrollX, value);
}
return;
}
this.viewport[this.settings.horizontal ? 'scrollLeft' : 'scrollTop'] = value;
};
Routines.prototype.getElementParams = function (element) {
this.checkElement(element);
return element.getBoundingClientRect();
};
Routines.prototype.getWindowParams = function () {
var height = window.innerHeight;
var width = window.innerWidth;
return {
height: height,
width: width,
top: 0,
bottom: height,
left: 0,
right: width,
x: 0,
y: 0,
toJSON: function () { return null; }
};
};
Routines.prototype.getSize = function (element) {
return this.getElementParams(element)[this.settings.horizontal ? 'width' : 'height'];
};
Routines.prototype.getScrollerSize = function () {
return this.getElementParams(this.element)[this.settings.horizontal ? 'width' : 'height'];
};
Routines.prototype.getViewportSize = function () {
if (this.settings.window) {
return this.getWindowParams()[this.settings.horizontal ? 'width' : 'height'];
}
return this.getSize(this.viewport);
};
Routines.prototype.getSizeStyle = function (element) {
this.checkElement(element);
var size = element.style[this.settings.horizontal ? 'width' : 'height'];
return parseFloat(size) || 0;
};
Routines.prototype.setSizeStyle = function (element, value) {
this.checkElement(element);
value = Math.max(0, Math.round(value));
element.style[this.settings.horizontal ? 'width' : 'height'] = "".concat(value, "px");
};
Routines.prototype.getEdge = function (element, direction) {
var horizontal = this.settings.horizontal;
var params = this.getElementParams(element);
var isFwd = direction === Direction.forward;
return params[isFwd ? (horizontal ? 'right' : 'bottom') : horizontal ? 'left' : 'top'];
};
Routines.prototype.getViewportEdge = function (direction) {
var _a = this.settings, window = _a.window, horizontal = _a.horizontal;
if (window) {
var params = this.getWindowParams();
var isFwd = direction === Direction.forward;
return params[isFwd ? (horizontal ? 'right' : 'bottom') : horizontal ? 'left' : 'top'];
}
return this.getEdge(this.viewport, direction);
};
Routines.prototype.makeElementVisible = function (element) {
this.checkElement(element);
element.style.left = '';
element.style.top = '';
element.style.position = '';
};
Routines.prototype.hideElement = function (element) {
this.checkElement(element);
element.style.display = 'none';
};
Routines.prototype.getOffset = function () {
var _this = this;
var get = function (element) {
return (_this.settings.horizontal ? element.offsetLeft : element.offsetTop) || 0;
};
return get(this.element) - (!this.settings.window ? get(this.viewport) : 0);
};
Routines.prototype.scrollTo = function (element, argument) {
this.checkElement(element);
element.scrollIntoView(argument);
};
Routines.prototype.render = function (cb, _params) {
var timeoutId = setTimeout(function () { return cb(); });
return function () { return clearTimeout(timeoutId); };
};
Routines.prototype.animate = function (cb) {
var animationFrameId = requestAnimationFrame(function () { return cb(); });
return function () { return cancelAnimationFrame(animationFrameId); };
};
Routines.prototype.onScroll = function (handler) {
var eventReceiver = this.settings.window ? window : this.viewport;
eventReceiver.addEventListener('scroll', handler);
return function () { return eventReceiver.removeEventListener('scroll', handler); };
};
return Routines;
}());
export { Routines };
//# sourceMappingURL=domRoutines.js.map