| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96 | 1×
1×
1×
1×
87×
87×
87×
87×
87×
31×
31×
31×
31×
30×
30×
30×
10×
10×
10×
3×
3×
3×
87×
87×
87×
1×
83×
83×
83×
83×
1×
74×
74×
1×
84×
84×
84×
84×
84×
84×
69×
69×
69×
69×
69×
69×
69×
69×
1×
68×
68×
68×
55×
68×
66×
66×
12×
66×
68×
1×
23×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1, ej2_base_2) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var InterSectionObserver = (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();
ej2_base_1.EventHandler.add(this.options.container, 'wheel', function () { return _this.fromWheel = true; }, this);
ej2_base_1.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 = ej2_base_1.Browser.info.name === 'chrome' ? 200 : 100;
var debounced100 = ej2_base_2.debounce(callback, delay);
var debounced50 = ej2_base_2.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;
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;
}());
exports.InterSectionObserver = InterSectionObserver;
});
|