@onsvisual/svelte-components 1.0.34 → 1.0.35
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.
|
@@ -33,22 +33,32 @@
|
|
|
33
33
|
const observer = getContext("observer");
|
|
34
34
|
const tocId = getContext("tocId");
|
|
35
35
|
|
|
36
|
-
let
|
|
36
|
+
let mounted = false;
|
|
37
|
+
let observed = false;
|
|
37
38
|
|
|
38
|
-
|
|
39
|
-
|
|
39
|
+
// This allows the table of contents (toc) to render before hydration
|
|
40
|
+
let section = { id, dataset: { title, subsection: String(subsection) } };
|
|
41
|
+
$sections = [...$sections.filter((s) => s.id !== section.id), section];
|
|
42
|
+
|
|
43
|
+
// This allows sections to be highlighted on the toc after hydration,
|
|
44
|
+
// and for sections to be added/removed gracefully from the DOM
|
|
45
|
+
function addToObserver(observer, mounted) {
|
|
46
|
+
if (mounted && observer && !observed) {
|
|
40
47
|
$sections = [...section.parentElement.getElementsByTagName("section")].filter(
|
|
41
48
|
(s) => s.dataset.type === "NavSection"
|
|
42
49
|
);
|
|
43
|
-
|
|
50
|
+
observer.observe(section);
|
|
51
|
+
observed = true;
|
|
44
52
|
}
|
|
45
|
-
}
|
|
53
|
+
}
|
|
54
|
+
$: addToObserver($observer, mounted);
|
|
55
|
+
|
|
56
|
+
onMount(() => (mounted = true));
|
|
46
57
|
|
|
47
58
|
onDestroy(() => {
|
|
48
|
-
if (
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
59
|
+
if ($observer) $observer.unobserve(section);
|
|
60
|
+
if ($sections) $sections = $sections.filter((s) => s.id !== id);
|
|
61
|
+
mounted = observed = false;
|
|
52
62
|
});
|
|
53
63
|
</script>
|
|
54
64
|
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
79
|
root: null,
|
|
80
|
-
rootMargin: "-
|
|
80
|
+
rootMargin: "-25% 0px -75%",
|
|
81
81
|
threshold: 0
|
|
82
82
|
}
|
|
83
83
|
);
|
|
@@ -134,9 +134,7 @@
|
|
|
134
134
|
</div>
|
|
135
135
|
<div class="ons-grid__col ons-col-8@m">
|
|
136
136
|
<slot name="before" />
|
|
137
|
-
|
|
138
|
-
<slot />
|
|
139
|
-
{/if}
|
|
137
|
+
<slot />
|
|
140
138
|
<slot name="after" />
|
|
141
139
|
</div>
|
|
142
140
|
</div>
|