@onsvisual/svelte-components 1.0.34 → 1.0.36
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.
|
@@ -34,21 +34,34 @@
|
|
|
34
34
|
const tocId = getContext("tocId");
|
|
35
35
|
|
|
36
36
|
let section;
|
|
37
|
+
let mounted = false;
|
|
38
|
+
let observed = false;
|
|
37
39
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
+
// This should allow the table of contents (toc) to render before hydration
|
|
41
|
+
$sections = [
|
|
42
|
+
...$sections.filter((s) => s.id !== id),
|
|
43
|
+
{ id, dataset: { title, subsection: String(subsection) } }
|
|
44
|
+
];
|
|
45
|
+
|
|
46
|
+
// This allows sections to be highlighted on the toc after hydration,
|
|
47
|
+
// and for sections to be added/removed gracefully from the DOM
|
|
48
|
+
function addToObserver(observer, mounted) {
|
|
49
|
+
if (mounted && observer && !observed) {
|
|
40
50
|
$sections = [...section.parentElement.getElementsByTagName("section")].filter(
|
|
41
51
|
(s) => s.dataset.type === "NavSection"
|
|
42
52
|
);
|
|
43
|
-
|
|
53
|
+
observer.observe(section);
|
|
54
|
+
observed = true;
|
|
44
55
|
}
|
|
45
|
-
}
|
|
56
|
+
}
|
|
57
|
+
$: addToObserver($observer, mounted);
|
|
58
|
+
|
|
59
|
+
onMount(() => (mounted = true));
|
|
46
60
|
|
|
47
61
|
onDestroy(() => {
|
|
48
|
-
if (
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
62
|
+
if ($observer) $observer.unobserve(section);
|
|
63
|
+
if ($sections) $sections = $sections.filter((s) => s.id !== id);
|
|
64
|
+
mounted = observed = false;
|
|
52
65
|
});
|
|
53
66
|
</script>
|
|
54
67
|
|
|
@@ -62,7 +62,6 @@
|
|
|
62
62
|
}
|
|
63
63
|
return [...secs, sec];
|
|
64
64
|
}
|
|
65
|
-
$: formattedSections = formatSections($sections);
|
|
66
65
|
|
|
67
66
|
onMount(() => {
|
|
68
67
|
if (!noContents) {
|
|
@@ -77,7 +76,7 @@
|
|
|
77
76
|
},
|
|
78
77
|
{
|
|
79
78
|
root: null,
|
|
80
|
-
rootMargin: "-
|
|
79
|
+
rootMargin: "-25% 0px -75%",
|
|
81
80
|
threshold: 0
|
|
82
81
|
}
|
|
83
82
|
);
|
|
@@ -96,36 +95,34 @@
|
|
|
96
95
|
<h2 class="ons-table-of-contents__title ons-u-fs-r--b ons-u-mb-s">Contents</h2>
|
|
97
96
|
{/if}
|
|
98
97
|
<ol class="ons-list ons-u-mb-l ons-list--dashed">
|
|
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
|
-
{/each}
|
|
128
|
-
{/if}
|
|
98
|
+
{#each formatSections($sections) as section}
|
|
99
|
+
<li class="ons-list__item">
|
|
100
|
+
{#if section.id && section.title}
|
|
101
|
+
<a
|
|
102
|
+
href="#{section.id}"
|
|
103
|
+
class="ons-list__link"
|
|
104
|
+
class:ons-table-of-contents__link-active={section.id === active}
|
|
105
|
+
>
|
|
106
|
+
{section.title}
|
|
107
|
+
</a>
|
|
108
|
+
{/if}
|
|
109
|
+
{#if section.subsections.length > 0}
|
|
110
|
+
<ol class="ons-list ons-u-mb-no ons-list--dashed">
|
|
111
|
+
{#each section.subsections as subsection}
|
|
112
|
+
<li class="ons-list__item">
|
|
113
|
+
<a
|
|
114
|
+
href="#{subsection.id}"
|
|
115
|
+
class="ons-list__link"
|
|
116
|
+
class:ons-table-of-contents__link-active={subsection.id === active}
|
|
117
|
+
>
|
|
118
|
+
{subsection.title}
|
|
119
|
+
</a>
|
|
120
|
+
</li>
|
|
121
|
+
{/each}
|
|
122
|
+
</ol>
|
|
123
|
+
{/if}
|
|
124
|
+
</li>
|
|
125
|
+
{/each}
|
|
129
126
|
</ol>
|
|
130
127
|
</nav>
|
|
131
128
|
{/if}
|
|
@@ -134,9 +131,7 @@
|
|
|
134
131
|
</div>
|
|
135
132
|
<div class="ons-grid__col ons-col-8@m">
|
|
136
133
|
<slot name="before" />
|
|
137
|
-
|
|
138
|
-
<slot />
|
|
139
|
-
{/if}
|
|
134
|
+
<slot />
|
|
140
135
|
<slot name="after" />
|
|
141
136
|
</div>
|
|
142
137
|
</div>
|