1 +
<template>
2 +
<nav
3 +
:class="['bd-quick-links', 'mb-3', { 'd-none': !quickLinksVisible || !hasContent }]"
4 +
:aria-hidden="hasContent ? null : 'true'"
5 +
>
6 +
<header v-if="hasContent">
7 +
<b-button
8 +
v-b-toggle.bd-quick-links-collapse
9 +
class="font-weight-bold"
10 +
variant="outline-secondary"
11 +
size="sm"
12 +
block
13 +
>
14 +
<span v-if="quickLinksExpanded">Hide</span>
15 +
<span v-else>Show</span>
16 +
page table of contents
17 +
</b-button>
18 +
</header>
19 +
<b-collapse v-if="hasContent" id="bd-quick-links-collapse" v-model="quickLinksExpanded" tag="ul">
20 +
<li v-for="h2 in toc.toc" :key="h2.href">
21 +
<b-link :href="h2.href" @click="scrollIntoView($event, h2.href)">
22 +
<span v-html="h2.label"></span>
23 +
</b-link>
24 +
<ul v-if="h2.toc && h2.toc.length > 0" :key="`sub-${h2.href}`">
25 +
<li v-for="h3 in h2.toc" :key="h3.href">
26 +
<b-link :href="h3.href" @click="scrollIntoView($event, h3.href)">
27 +
<span v-html="h3.label"></span>
28 +
</b-link>
29 +
</li>
30 +
</ul>
31 +
</li>
32 +
</b-collapse>
33 +
</nav>
34 +
</template>
35 + 36 +
<style scoped lang="scss">
37 +
#bd-quick-links-collapse {
38 +
list-style-type: square;
39 +
border-left: 5px solid #ccc;
40 +
padding-left: 2.5rem;
41 +
margin-top: 1rem;
42 + 43 +
ul {
44 +
list-style-type: circle;
45 +
padding-left: 1.25rem;
46 +
margin-bottom: 0.25rem;
47 +
}
48 +
}
49 +
</style>
50 + 51 +
<script>
52 +
import { offsetTop, scrollTo } from '~/utils'
53 + 54 +
export default {
55 +
name: 'BDVQuickToc',
56 +
data() {
57 +
return {
58 +
toc: {},
59 +
offset: 0,
60 +
quickLinksExpanded: false,
61 +
quickLinksVisible: false
62 +
}
63 +
},
64 +
computed: {
65 +
hasContent() {
66 +
return !!this.toc.toc
67 +
}
68 +
},
69 +
created() {
70 +
this.$root.$on('docs-set-toc', toc => {
71 +
// Reset visible/expanded states
72 +
this.quickLinksVisible = false
73 +
this.quickLinksExpanded = false
74 +
// Update the TOC content
75 +
this.toc = toc
76 +
// Re-position the quick links
77 +
this.positionQuickLinks()
78 +
})
79 +
},
80 +
mounted() {
81 +
// Set the correct offset based on the header height
82 +
const $header = document.body.querySelector('header.navbar')
83 +
if ($header) {
84 +
this.offset = $header.offsetHeight + 6
85 +
}
86 +
// Re-position the quick links
87 +
this.positionQuickLinks()
88 +
},
89 +
methods: {
90 +
scrollIntoView(evt, href) {
91 +
evt.preventDefault()
92 +
evt.stopPropagation()
93 +
// We use an attribute `querySelector()` rather than `getElementByID()`,
94 +
// as some auto-generated ID's are invalid or not unique
95 +
const id = (href || '').replace(/#/g, '')
96 +
const $el = document.body.querySelector(`[id="${id}"]`)
97 +
if ($el) {
98 +
// Get the document scrolling element
99 +
const scroller = document.scrollingElement || document.documentElement || document.body
100 +
// Scroll heading into view (minus offset to account for nav top height
101 +
scrollTo(scroller, offsetTop($el) - 70, 100, () => {
102 +
// Set a tab index so we can focus header for a11y support
103 +
$el.tabIndex = -1
104 +
// Focus the heading
105 +
$el.focus()
106 +
})
107 +
}
108 +
},
109 +
positionQuickLinks() {
110 +
if (typeof document === 'undefined') {
111 +
return
112 +
}
113 +
// Move the quick links to the correct position, if possible
114 +
const $body = document.body
115 +
const $referenceNode = $body.querySelector('.bd-lead') || $body.querySelector('h1')
116 +
if ($referenceNode) {
117 +
// IE 11 doesn't support the `node.after()` method, and appears
118 +
// that the polyfill doesn't polyfill this method
119 +
$referenceNode.insertAdjacentElement('afterend', this.$el)
120 +
}
121 +
// Make the quick links visible
122 +
// We hide them initially to make the position change not that distracting
123 +
this.quickLinksVisible = true
124 +
}
125 +
}
126 +
}
127 +
</script>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4