@griddo/ax 11.12.1-rc.9 → 11.13.0
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.
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@griddo/ax",
|
|
3
3
|
"description": "Griddo Author Experience",
|
|
4
|
-
"version": "11.
|
|
4
|
+
"version": "11.13.0",
|
|
5
5
|
"authors": [
|
|
6
6
|
"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
|
|
7
7
|
"Diego M. Béjar <diego.bejar@secuoyas.com>",
|
|
@@ -217,5 +217,5 @@
|
|
|
217
217
|
"publishConfig": {
|
|
218
218
|
"access": "public"
|
|
219
219
|
},
|
|
220
|
-
"gitHead": "
|
|
220
|
+
"gitHead": "ff4a9e68323e9c422c66ba0a451ae3dc05a964d2"
|
|
221
221
|
}
|
|
@@ -23,29 +23,6 @@ const isEffectivelyVisible = (el: HTMLElement): boolean => {
|
|
|
23
23
|
return true;
|
|
24
24
|
};
|
|
25
25
|
|
|
26
|
-
const getScrollOffset = (el: HTMLElement): { scrollX: number; scrollY: number } => {
|
|
27
|
-
let scrollX = window.scrollX;
|
|
28
|
-
let scrollY = window.scrollY;
|
|
29
|
-
|
|
30
|
-
let parent: HTMLElement | null = el.parentElement;
|
|
31
|
-
while (parent && parent !== document.body) {
|
|
32
|
-
const style = window.getComputedStyle(parent);
|
|
33
|
-
const overflowY = style.overflowY;
|
|
34
|
-
const overflowX = style.overflowX;
|
|
35
|
-
|
|
36
|
-
if (overflowY === "auto" || overflowY === "scroll") {
|
|
37
|
-
scrollY = parent.scrollTop;
|
|
38
|
-
}
|
|
39
|
-
if (overflowX === "auto" || overflowX === "scroll") {
|
|
40
|
-
scrollX = parent.scrollLeft;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
parent = parent.parentElement;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
return { scrollX, scrollY };
|
|
47
|
-
};
|
|
48
|
-
|
|
49
26
|
const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
|
|
50
27
|
const [boxes, setBoxes] = useState<HeadingBox[]>([]);
|
|
51
28
|
const rafRef = useRef<number>(0);
|
|
@@ -56,13 +33,14 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
|
|
|
56
33
|
rafRef.current = requestAnimationFrame(() => {
|
|
57
34
|
const selector = headingFilter || "h1, h2, h3, h4, h5, h6";
|
|
58
35
|
const headings = Array.from(document.querySelectorAll<HTMLElement>(selector));
|
|
36
|
+
const scrollX = window.scrollX;
|
|
37
|
+
const scrollY = window.scrollY;
|
|
59
38
|
const boxes: HeadingBox[] = [];
|
|
60
39
|
for (let i = 0; i < headings.length; i++) {
|
|
61
40
|
const el = headings[i];
|
|
62
41
|
const rect = el.getBoundingClientRect();
|
|
63
42
|
if (rect.width === 0 && rect.height === 0) continue;
|
|
64
43
|
if (!isEffectivelyVisible(el)) continue;
|
|
65
|
-
const { scrollX, scrollY } = getScrollOffset(el);
|
|
66
44
|
boxes.push({
|
|
67
45
|
id: el.dataset.griddoid || `heading-${i}`,
|
|
68
46
|
tag: el.tagName.toLowerCase(),
|
|
@@ -83,41 +61,7 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
|
|
|
83
61
|
document.addEventListener("animationend", update, true);
|
|
84
62
|
document.addEventListener("transitionend", update, true);
|
|
85
63
|
|
|
86
|
-
|
|
87
|
-
const scrollContainers = new Set<Element>();
|
|
88
|
-
const detectScrollContainers = () => {
|
|
89
|
-
scrollContainers.clear();
|
|
90
|
-
const headings = Array.from(document.querySelectorAll<HTMLElement>(headingFilter || "h1, h2, h3, h4, h5, h6"));
|
|
91
|
-
headings.forEach((el) => {
|
|
92
|
-
let parent: HTMLElement | null = el.parentElement;
|
|
93
|
-
while (parent && parent !== document.body) {
|
|
94
|
-
const style = window.getComputedStyle(parent);
|
|
95
|
-
if (
|
|
96
|
-
style.overflowY === "auto" ||
|
|
97
|
-
style.overflowY === "scroll" ||
|
|
98
|
-
style.overflowX === "auto" ||
|
|
99
|
-
style.overflowX === "scroll"
|
|
100
|
-
) {
|
|
101
|
-
scrollContainers.add(parent);
|
|
102
|
-
break;
|
|
103
|
-
}
|
|
104
|
-
parent = parent.parentElement;
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
detectScrollContainers();
|
|
110
|
-
scrollContainers.forEach((container) => {
|
|
111
|
-
container.addEventListener("scroll", update, { passive: true });
|
|
112
|
-
});
|
|
113
|
-
|
|
114
|
-
const observer = new MutationObserver(() => {
|
|
115
|
-
detectScrollContainers();
|
|
116
|
-
scrollContainers.forEach((container) => {
|
|
117
|
-
container.addEventListener("scroll", update, { passive: true });
|
|
118
|
-
});
|
|
119
|
-
update();
|
|
120
|
-
});
|
|
64
|
+
const observer = new MutationObserver(update);
|
|
121
65
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
122
66
|
|
|
123
67
|
return () => {
|
|
@@ -125,9 +69,6 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
|
|
|
125
69
|
window.removeEventListener("resize", update);
|
|
126
70
|
document.removeEventListener("animationend", update, true);
|
|
127
71
|
document.removeEventListener("transitionend", update, true);
|
|
128
|
-
scrollContainers.forEach((container) => {
|
|
129
|
-
container.removeEventListener("scroll", update);
|
|
130
|
-
});
|
|
131
72
|
observer.disconnect();
|
|
132
73
|
};
|
|
133
74
|
}, [headingFilter]);
|