@blackbyte/sugar 1.0.0-beta.23 → 1.0.0-beta.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { distanceFromElementTopToViewportTop, whenRemoved, } from '
|
|
1
|
+
import { distanceFromElementTopToViewportTop, whenRemoved, } from '@blackbyte/sugar/dom';
|
|
2
|
+
import { isInViewport } from '@blackbyte/sugar/is';
|
|
2
3
|
const _viewportEventsInited = new WeakMap();
|
|
3
4
|
export default function viewportEvents($elm, settings) {
|
|
4
5
|
let observer, status = 'out';
|
|
@@ -10,61 +11,86 @@ export default function viewportEvents($elm, settings) {
|
|
|
10
11
|
}
|
|
11
12
|
_viewportEventsInited.set($elm, true);
|
|
12
13
|
const finalSettings = Object.assign({ offset: 25, once: false }, (settings !== null && settings !== void 0 ? settings : {}));
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
// check if the element is already in the viewport
|
|
15
|
+
// when the user has changed tab and come back
|
|
16
|
+
function visibilitychangeHandler() {
|
|
17
|
+
if (document.visibilityState === 'visible' && isInViewport($elm)) {
|
|
18
|
+
onIn();
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
onOut();
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
document.addEventListener('visibilitychange', visibilitychangeHandler);
|
|
25
|
+
// function to stop observing the element and remove the event listener
|
|
26
|
+
function cancel() {
|
|
27
|
+
observer === null || observer === void 0 ? void 0 : observer.disconnect();
|
|
28
|
+
document.removeEventListener('visibilitychange', visibilitychangeHandler);
|
|
29
|
+
}
|
|
30
|
+
// when the element
|
|
31
|
+
function onIn() {
|
|
32
|
+
if (status === 'in') {
|
|
18
33
|
return;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
const distanceToTop = distanceFromElementTopToViewportTop($elm);
|
|
24
|
-
if (distanceToTop < window.innerHeight * 0.5) {
|
|
25
|
-
$elm.dispatchEvent(new CustomEvent('viewport.enter.above', {
|
|
26
|
-
bubbles: true,
|
|
27
|
-
}));
|
|
28
|
-
}
|
|
29
|
-
else {
|
|
30
|
-
$elm.dispatchEvent(new CustomEvent('viewport.enter.below', {
|
|
31
|
-
bubbles: true,
|
|
32
|
-
}));
|
|
33
|
-
}
|
|
34
|
-
status = 'in';
|
|
35
|
-
$elm.dispatchEvent(new CustomEvent('viewport.enter', {
|
|
34
|
+
}
|
|
35
|
+
const distanceToTop = distanceFromElementTopToViewportTop($elm);
|
|
36
|
+
if (distanceToTop < window.innerHeight * 0.5) {
|
|
37
|
+
$elm.dispatchEvent(new CustomEvent('viewport.enter.above', {
|
|
36
38
|
bubbles: true,
|
|
37
39
|
}));
|
|
38
|
-
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
$elm.dispatchEvent(new CustomEvent('viewport.enter.below', {
|
|
39
43
|
bubbles: true,
|
|
40
44
|
}));
|
|
41
|
-
if (finalSettings === null || finalSettings === void 0 ? void 0 : finalSettings.once) {
|
|
42
|
-
observer.disconnect();
|
|
43
|
-
}
|
|
44
45
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
46
|
+
status = 'in';
|
|
47
|
+
$elm.dispatchEvent(new CustomEvent('viewport.enter', {
|
|
48
|
+
bubbles: true,
|
|
49
|
+
}));
|
|
50
|
+
$elm.dispatchEvent(new CustomEvent('viewport.in', {
|
|
51
|
+
bubbles: true,
|
|
52
|
+
}));
|
|
53
|
+
if (finalSettings === null || finalSettings === void 0 ? void 0 : finalSettings.once) {
|
|
54
|
+
observer.disconnect();
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
function onOut() {
|
|
58
|
+
if (status === 'out') {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
const distanceToTop = distanceFromElementTopToViewportTop($elm);
|
|
62
|
+
if (distanceToTop < window.innerHeight * 0.5) {
|
|
63
|
+
$elm.dispatchEvent(new CustomEvent('viewport.leave.above', {
|
|
62
64
|
bubbles: true,
|
|
63
65
|
}));
|
|
64
|
-
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
$elm.dispatchEvent(new CustomEvent('viewport.leave.below', {
|
|
65
69
|
bubbles: true,
|
|
66
70
|
}));
|
|
67
71
|
}
|
|
72
|
+
status = 'out';
|
|
73
|
+
$elm.dispatchEvent(new CustomEvent('viewport.leave', {
|
|
74
|
+
bubbles: true,
|
|
75
|
+
}));
|
|
76
|
+
$elm.dispatchEvent(new CustomEvent('viewport.out', {
|
|
77
|
+
bubbles: true,
|
|
78
|
+
}));
|
|
79
|
+
}
|
|
80
|
+
observer = new IntersectionObserver((entries) => {
|
|
81
|
+
if (!entries.length)
|
|
82
|
+
return;
|
|
83
|
+
const entry = entries.pop();
|
|
84
|
+
if (!entry)
|
|
85
|
+
return;
|
|
86
|
+
// if the element is intersecting the viewport, we consider it as "in"
|
|
87
|
+
if (entry.intersectionRatio > 0) {
|
|
88
|
+
onIn();
|
|
89
|
+
// if the element is not intersecting the viewport, we consider it as "out"
|
|
90
|
+
}
|
|
91
|
+
else {
|
|
92
|
+
onOut();
|
|
93
|
+
}
|
|
68
94
|
}, {
|
|
69
95
|
root: null, // viewport
|
|
70
96
|
rootMargin: typeof finalSettings.offset === 'string'
|
|
@@ -75,13 +101,11 @@ export default function viewportEvents($elm, settings) {
|
|
|
75
101
|
observer.observe($elm);
|
|
76
102
|
// clean up on remove
|
|
77
103
|
whenRemoved($elm).then(() => {
|
|
78
|
-
|
|
104
|
+
cancel();
|
|
79
105
|
});
|
|
80
106
|
return {
|
|
81
107
|
$elm,
|
|
82
|
-
cancel
|
|
83
|
-
observer.disconnect();
|
|
84
|
-
},
|
|
108
|
+
cancel,
|
|
85
109
|
};
|
|
86
110
|
}
|
|
87
111
|
//# sourceMappingURL=viewportEvents.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"viewportEvents.js","sourceRoot":"","sources":["../../../../src/js/dom/event/viewportEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mCAAmC,EACnC,WAAW,GACZ,MAAM,
|
|
1
|
+
{"version":3,"file":"viewportEvents.js","sourceRoot":"","sources":["../../../../src/js/dom/event/viewportEvents.ts"],"names":[],"mappings":"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"}
|
|
@@ -23,14 +23,17 @@
|
|
|
23
23
|
* @since 1.0.0
|
|
24
24
|
* @author Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
|
|
25
25
|
*/
|
|
26
|
-
export default function isInViewport(elm) {
|
|
26
|
+
export default function isInViewport($elm) {
|
|
27
27
|
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop, scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
|
|
28
|
-
const containerHeight = window.innerHeight || document.documentElement.clientHeight, containerWidth = window.innerWidth || document.documentElement.clientWidth, rect = elm.getBoundingClientRect();
|
|
28
|
+
const containerHeight = window.innerHeight || document.documentElement.clientHeight, containerWidth = window.innerWidth || document.documentElement.clientWidth, rect = $elm.getBoundingClientRect();
|
|
29
29
|
const top = rect.top - scrollTop, left = rect.left - scrollLeft, right = rect.right - scrollLeft, bottom = rect.bottom - scrollTop;
|
|
30
|
-
const isTopIn = top
|
|
31
|
-
// if at least
|
|
32
|
-
if (
|
|
33
|
-
|
|
30
|
+
const isTopIn = top >= 0 && top <= containerHeight, isBottomIn = bottom >= 0 && bottom <= containerHeight, isLeftIn = left >= 0 && left <= containerWidth, isRightIn = right >= 0 && right <= containerWidth;
|
|
31
|
+
// if the element is smaller than the viewport, at least one of its corner must be in the viewport
|
|
32
|
+
if (containerHeight <= window.innerHeight) {
|
|
33
|
+
// if at least top|bottom AND left|right
|
|
34
|
+
if ((isTopIn || isBottomIn) && (isLeftIn || isRightIn)) {
|
|
35
|
+
return true;
|
|
36
|
+
}
|
|
34
37
|
}
|
|
35
38
|
// is rect is bigger than viewport in all directions
|
|
36
39
|
if (top <= 0 &&
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"isInViewport.js","sourceRoot":"","sources":["../../../src/js/is/isInViewport.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,
|
|
1
|
+
{"version":3,"file":"isInViewport.js","sourceRoot":"","sources":["../../../src/js/is/isInViewport.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,IAAiB;IACpD,MAAM,SAAS,GACX,QAAQ,CAAC,eAAe,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,EAC/D,UAAU,GACR,QAAQ,CAAC,eAAe,CAAC,UAAU,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;IAEpE,MAAM,eAAe,GACjB,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,YAAY,EAC7D,cAAc,GAAG,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,eAAe,CAAC,WAAW,EAC1E,IAAI,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAEtC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,EAC9B,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,UAAU,EAC7B,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,UAAU,EAC/B,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;IAEnC,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,eAAe,EAChD,UAAU,GAAG,MAAM,IAAI,CAAC,IAAI,MAAM,IAAI,eAAe,EACrD,QAAQ,GAAG,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,cAAc,EAC9C,SAAS,GAAG,KAAK,IAAI,CAAC,IAAI,KAAK,IAAI,cAAc,CAAC;IAEpD,kGAAkG;IAClG,IAAI,eAAe,IAAI,MAAM,CAAC,WAAW,EAAE,CAAC;QAC1C,wCAAwC;QACxC,IAAI,CAAC,OAAO,IAAI,UAAU,CAAC,IAAI,CAAC,QAAQ,IAAI,SAAS,CAAC,EAAE,CAAC;YACvD,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;IAED,oDAAoD;IACpD,IACE,GAAG,IAAI,CAAC;QACR,MAAM,IAAI,eAAe;QACzB,IAAI,IAAI,CAAC;QACT,KAAK,IAAI,cAAc,EACvB,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,GAAG,IAAI,CAAC,IAAI,MAAM,IAAI,eAAe,IAAI,IAAI,IAAI,CAAC,IAAI,SAAS,EAAE,CAAC;QACpE,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IACE,GAAG,IAAI,CAAC;QACR,MAAM,IAAI,eAAe;QACzB,KAAK,IAAI,cAAc;QACvB,QAAQ,EACR,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,cAAc,IAAI,GAAG,IAAI,CAAC,IAAI,UAAU,EAAE,CAAC;QACnE,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IACE,IAAI,IAAI,CAAC;QACT,KAAK,IAAI,cAAc;QACvB,MAAM,IAAI,eAAe;QACzB,OAAO,EACP,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC"}
|