@syncfusion/ej2-grids/src/grid/services/intersection-observer.js

Feature-rich JavaScript datagrid (datatable) control with built-in support for editing, filtering, grouping, paging, sorting, and exporting to Excel.

import { EventHandler, Browser } from '@syncfusion/ej2-base';
import { debounce } from '@syncfusion/ej2-base';
/**
 * InterSectionObserver - class watch whether it enters the viewport.
 *
 * @hidden
 */
var InterSectionObserver = /** @class */ (function () {
    function InterSectionObserver(element, options, movableEle) {
        var _this = this;
        this.fromWheel = false;
        this.touchMove = false;
        this.options = {};
        this.sentinelInfo = {
            'up': {
                check: function (rect, info) {
                    var top = rect.top - _this.containerRect.top;
                    var bottom = _this.containerRect.bottom > rect.bottom ? _this.containerRect.bottom - rect.bottom : 0;
                    info.entered = top >= 0;
                    return top + (_this.options.pageHeight / 2) >= 0 || (bottom > 0 && rect.bottom > 0);
                },
                axis: 'Y'
            },
            'down': {
                check: function (rect, info) {
                    var bottom = rect.bottom;
                    info.entered = rect.bottom <= _this.containerRect.bottom;
                    return ((bottom - _this.containerRect.top) - (_this.options.pageHeight / 2)) <= _this.options.pageHeight / 2;
                }, axis: 'Y'
            },
            'right': {
                check: function (rect, info) {
                    var right = rect.right;
                    info.entered = right < _this.containerRect.right;
                    return right - _this.containerRect.width <= _this.containerRect.right;
                }, axis: 'X'
            },
            'left': {
                check: function (rect, info) {
                    var left = rect.left;
                    info.entered = left > 0;
                    return left + _this.containerRect.width >= _this.containerRect.left;
                }, axis: 'X'
            }
        };
        this.element = element;
        this.options = options;
        this.movableEle = movableEle;
    }
    InterSectionObserver.prototype.observe = function (callback, onEnterCallback) {
        var _this = this;
        this.containerRect = this.options.container.getBoundingClientRect();
        EventHandler.add(this.options.container, 'wheel', function () { return _this.fromWheel = true; }, this);
        EventHandler.add(this.options.container, 'scroll', this.virtualScrollHandler(callback, onEnterCallback), this);
    };
    InterSectionObserver.prototype.check = function (direction) {
        var info = this.sentinelInfo["" + direction];
        return info.check(this.element.getBoundingClientRect(), info);
    };
    InterSectionObserver.prototype.virtualScrollHandler = function (callback, onEnterCallback) {
        var _this = this;
        var delay = Browser.info.name === 'chrome' ? 200 : 100;
        var debounced100 = debounce(callback, delay);
        var debounced50 = debounce(callback, 50);
        this.options.prevTop = this.options.prevLeft = 0;
        return function (e) {
            var top = e.target.scrollTop;
            var left = e.target.scrollLeft;
            var direction = _this.options.prevTop < top ? 'down' : 'up';
            direction = _this.options.prevLeft === left ? direction : _this.options.prevLeft < left ? 'right' : 'left';
            _this.options.prevTop = top;
            _this.options.prevLeft = left;
            var current = _this.sentinelInfo["" + direction];
            if (_this.options.axes.indexOf(current.axis) === -1) {
                return;
            }
            _this.containerRect = _this.options.container.getBoundingClientRect();
            var check = _this.check(direction);
            if (current.entered) {
                onEnterCallback(_this.element, current, direction, { top: top, left: left }, _this.fromWheel, check);
            }
            if (check) {
                var fn = debounced100;
                //this.fromWheel ? this.options.debounceEvent ? debounced100 : callback : debounced100;
                if (current.axis === 'X') {
                    fn = debounced50;
                }
                fn({ direction: direction, sentinel: current, offset: { top: top, left: left },
                    focusElement: document.activeElement });
            }
            _this.fromWheel = false;
        };
    };
    InterSectionObserver.prototype.setPageHeight = function (value) {
        this.options.pageHeight = value;
    };
    return InterSectionObserver;
}());
export { InterSectionObserver };