| 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133 | 1×
1×
1×
1×
218×
218×
218×
218×
218×
55×
55×
55×
55×
51×
51×
51×
13×
13×
13×
3×
3×
3×
218×
218×
218×
1×
215×
215×
215×
215×
15×
15×
215×
82×
82×
215×
1×
120×
120×
1×
97×
97×
34×
34×
34×
5×
34×
1×
216×
216×
216×
216×
216×
216×
216×
118×
118×
118×
118×
118×
118×
118×
118×
118×
118×
25×
118×
1×
118×
118×
1×
117×
117×
117×
93×
117×
112×
112×
14×
112×
117×
1×
357×
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);
if (!ej2_base_1.isNullOrUndefined(this.options.horizontalScrollbar)) {
ej2_base_1.EventHandler.add(this.options.horizontalScrollbar, 'wheel', function () { return _this.fromWheel = true; }, this);
ej2_base_1.EventHandler.add(this.options.horizontalScrollbar, 'scroll', this.onVirtualContentScroll(), this);
}
if (!ej2_base_1.isNullOrUndefined(this.options.verticalScrollbar)) {
ej2_base_1.EventHandler.add(this.options.verticalScrollbar, 'wheel', function () { return _this.fromWheel = true; }, this);
ej2_base_1.EventHandler.add(this.options.verticalScrollbar, 'scroll', this.onVirtualContentScroll(), 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.onVirtualContentScroll = function () {
var _this = this;
return function (e) {
var target = e.target;
var container = _this.options.container;
if (target.classList.contains('e-virtual-vertical-scrollbar') &&
container.scrollTop !== target.scrollTop) {
container.scrollTop = target.scrollTop;
}
Iif (target.classList.contains('e-virtual-horizontal-scrollbar') &&
container.scrollLeft !== target.scrollLeft) {
container.scrollLeft = target.scrollLeft;
}
};
};
InterSectionObserver.prototype.virtualScrollHandler = function (callback, onEnterCallback) {
var _this = this;
var browserDelay = ej2_base_1.Browser.info.name === 'chrome' ? 200 : 100;
var delay = !ej2_base_1.isNullOrUndefined(this.options.scrollThrottle)
? this.options.scrollThrottle : browserDelay;
var debounced100 = delay > 0 ? ej2_base_2.debounce(callback, delay) : callback;
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;
requestAnimationFrame(function () {
var currentTop = _this.options.container.scrollTop;
var currentLeft = _this.options.container.scrollLeft;
if (!ej2_base_1.isNullOrUndefined(_this.options.verticalScrollbar) &&
_this.options.verticalScrollbar.scrollTop !== currentTop) {
_this.options.verticalScrollbar.scrollTop = currentTop;
}
if (!ej2_base_1.isNullOrUndefined(_this.options.horizontalScrollbar) &&
_this.options.horizontalScrollbar.scrollLeft !== currentLeft) {
_this.options.horizontalScrollbar.scrollLeft = currentLeft;
}
});
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;
});
|