@griddo/ax 11.12.1-rc.10 → 11.12.1-rc.11
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.12.1-rc.
|
|
4
|
+
"version": "11.12.1-rc.11",
|
|
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": "69e57e648b4070c825ad96e1c81c6cb0af5cc2b9"
|
|
221
221
|
}
|
|
@@ -45,24 +45,21 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
|
|
|
45
45
|
rafRef.current = requestAnimationFrame(() => {
|
|
46
46
|
const selector = headingFilter || "h1, h2, h3, h4, h5, h6";
|
|
47
47
|
const headings = Array.from(document.querySelectorAll<HTMLElement>(selector));
|
|
48
|
+
const scrollX = window.scrollX;
|
|
49
|
+
const scrollY = window.scrollY;
|
|
48
50
|
const boxes: HeadingBox[] = [];
|
|
49
51
|
for (let i = 0; i < headings.length; i++) {
|
|
50
52
|
const el = headings[i];
|
|
51
53
|
const rect = el.getBoundingClientRect();
|
|
52
54
|
if (rect.width === 0 && rect.height === 0) continue;
|
|
53
55
|
if (!isEffectivelyVisible(el)) continue;
|
|
54
|
-
|
|
55
|
-
// Para headings dentro de sticky/fixed, no sumar scroll de página
|
|
56
|
-
const inStickyOrFixed = isInStickyOrFixed(el);
|
|
57
|
-
const scrollX = inStickyOrFixed ? 0 : window.scrollX;
|
|
58
|
-
const scrollY = inStickyOrFixed ? 0 : window.scrollY;
|
|
59
|
-
|
|
60
56
|
boxes.push({
|
|
61
57
|
id: el.dataset.griddoid || `heading-${i}`,
|
|
62
58
|
tag: el.tagName.toLowerCase(),
|
|
63
59
|
rect,
|
|
64
60
|
scrollX,
|
|
65
61
|
scrollY,
|
|
62
|
+
inStickyOrFixed: isInStickyOrFixed(el),
|
|
66
63
|
});
|
|
67
64
|
}
|
|
68
65
|
setBoxes(boxes);
|
|
@@ -91,7 +88,7 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
|
|
|
91
88
|
|
|
92
89
|
return createPortal(
|
|
93
90
|
<div data-testid="headings-overlay">
|
|
94
|
-
{boxes.map(({ id, tag, rect, scrollX, scrollY }) => {
|
|
91
|
+
{boxes.map(({ id, tag, rect, scrollX, scrollY, inStickyOrFixed }) => {
|
|
95
92
|
const color = headColors[tag];
|
|
96
93
|
if (!color) return null;
|
|
97
94
|
const labelAbove = rect.left < 30;
|
|
@@ -99,9 +96,10 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
|
|
|
99
96
|
<S.Box
|
|
100
97
|
key={id}
|
|
101
98
|
$color={color}
|
|
99
|
+
$fixed={inStickyOrFixed}
|
|
102
100
|
style={{
|
|
103
|
-
top: rect.top + scrollY,
|
|
104
|
-
left: rect.left + scrollX,
|
|
101
|
+
top: inStickyOrFixed ? rect.top : rect.top + scrollY,
|
|
102
|
+
left: inStickyOrFixed ? rect.left : rect.left + scrollX,
|
|
105
103
|
width: rect.width,
|
|
106
104
|
height: rect.height,
|
|
107
105
|
}}
|
|
@@ -123,6 +121,7 @@ interface HeadingBox {
|
|
|
123
121
|
rect: DOMRect;
|
|
124
122
|
scrollX: number;
|
|
125
123
|
scrollY: number;
|
|
124
|
+
inStickyOrFixed: boolean;
|
|
126
125
|
}
|
|
127
126
|
|
|
128
127
|
export interface IHeadingsOverlayProps {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styled from "styled-components";
|
|
2
2
|
|
|
3
|
-
const Box = styled.div<{ $color: string }>`
|
|
4
|
-
position: absolute;
|
|
3
|
+
const Box = styled.div<{ $color: string; $fixed?: boolean }>`
|
|
4
|
+
position: ${(p) => (p.$fixed ? "fixed" : "absolute")};
|
|
5
5
|
outline: 2px solid ${(p) => p.$color};
|
|
6
6
|
z-index: 1001;
|
|
7
7
|
pointer-events: none;
|