Skip to content

Commit 23f1ec7

Browse files
jacobmllr95jacobmllr95
committed
Merge branch 'ag/6306' of https://github.com/andrei-gheorghiu/bootstrap-vue into pr/6367
2 parents f556807 + ce5aa18 commit 23f1ec7

File tree

4 files changed

+58
-81
lines changed

4 files changed

+58
-81
lines changed

‎docs/components/quick-links.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,9 @@ export default {
6666
}
6767
},
6868
methods: {
69-
scrollIntoView(evt, href) {
70-
evt.preventDefault()
71-
evt.stopPropagation()
69+
scrollIntoView(event, href) {
70+
event.preventDefault()
71+
event.stopPropagation()
7272
// We use an attribute `querySelector()` rather than `getElementByID()`,
7373
// as some auto-generated ID's are invalid or not unique
7474
const id = (href || '').replace(/#/g, '')

‎docs/components/section.js

Lines changed: 20 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,37 @@
11
import { mergeData } from 'vue-functional-data-merge'
2-
import { offsetTop, scrollTo } from '~/utils'
2+
import { scrollTargetIntoView } from '~/utils'
33

4-
// -- Utility handlers --
4+
// --- Utility methods ---
55

6-
// Scroll an in-page link target into view
7-
// this is the same as in toc.vue (as an instance method)
8-
const scrollIntoView = (evt, href) => {
9-
evt.preventDefault()
10-
evt.stopPropagation()
11-
// We use an attribute `querySelector()` rather than `getElementByID()`,
12-
// as some auto-generated ID's are invalid or not unique
13-
const id = (href || '').replace(/#/g, '')
14-
const $el = document.body.querySelector(`[id="${id}"]`)
15-
if ($el) {
16-
// Get the document scrolling element
17-
const scroller = document.scrollingElement || document.documentElement || document.body
18-
// Scroll heading into view (minus offset to account for nav top height
19-
scrollTo(scroller, offsetTop($el) - 70, 100, () => {
20-
// Set a tab index so we can focus header for a11y support
21-
$el.tabIndex = -1
22-
// Focus the heading
23-
$el.focus()
24-
})
25-
}
26-
}
27-
28-
// Convert local links to router push or scrollIntoView
29-
const linkToRouter = evt => {
30-
if (!evt || evt.type !== 'click') {
6+
// Convert local links to router push or scroll target into view
7+
const linkToRouter = event => {
8+
if (!event || event.type !== 'click') {
319
return
3210
}
33-
const target = evt.target && evt.target.closest ? evt.target.closest('a[href]') : null
11+
const $target = event.target && event.target.closest ? event.target.closest('a[href]') : null
12+
// Early exit if click inside an example, not a link,
13+
// or default prevented or is a Vue instance
3414
if (
35-
!target ||
36-
evt.type !== 'click' ||
37-
target.__vue__ ||
38-
target.closest('.bd-example') ||
39-
target.closest('pre') ||
40-
evt.defaultPrevented
15+
!$target ||
16+
event.type !== 'click' ||
17+
$target.__vue__ ||
18+
$target.closest('.bd-example') ||
19+
$target.closest('pre') ||
20+
event.defaultPrevented
4121
) {
42-
// Early exit if click inside an example, not a link, or
43-
// default prevented or is a Vue instance
4422
return
4523
}
46-
const href = target.getAttribute('href')
24+
const href = $target.getAttribute('href')
4725
if (href && href.indexOf('/') === 0 && href.indexOf('//') !== 0) {
48-
// if local page-to-page-docs link, convert click to `$router.push()`
49-
evt.preventDefault()
26+
// If local page-to-page-docs link, convert click to `$router.push()`
27+
event.preventDefault()
5028
if (typeof window !== 'undefined' && window.$nuxt) {
51-
// Since we are a functional component, we can't use this.$router
29+
// Since we are a functional component, we can't use `this.$router`
5230
window.$nuxt.$router.push(href)
5331
}
5432
} else if (href && href.indexOf('#') === 0) {
55-
// In page anchor link, so use scrollIntoView utility method
56-
scrollIntoView(evt, href)
33+
// In page anchor link, so use `scrollTargetIntoView` utility method
34+
scrollTargetIntoView(event, href)
5735
}
5836
// Else, normal browser link handling (i.e. external links)
5937
}

‎docs/components/toc.vue

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<b-link
2323
:href="h2.href"
2424
class="nav-link"
25-
@click="scrollIntoView($event, h2.href)"
25+
@click="scrollTargetIntoView($event, h2.href)"
2626
>
2727
<span v-html="h2.label"></span>
2828
</b-link>
@@ -36,7 +36,7 @@
3636
:key="h3.href"
3737
:href="h3.href"
3838
class="toc-entry toc-h3"
39-
@click="scrollIntoView($event, h3.href)"
39+
@click="scrollTargetIntoView($event, h3.href)"
4040
>
4141
<span v-html="h3.label"></span>
4242
</b-nav-item>
@@ -46,7 +46,7 @@
4646
</template>
4747

4848
<script>
49-
import { offsetTop, scrollTo } from '~/utils'
49+
import { scrollTargetIntoView } from '~/utils'
5050
5151
export default {
5252
name: 'BVToc',
@@ -68,27 +68,9 @@ export default {
6868
}
6969
},
7070
methods: {
71+
scrollTargetIntoView,
7172
isArray(value) {
7273
return Array.isArray(value)
73-
},
74-
scrollIntoView(evt, href) {
75-
evt.preventDefault()
76-
evt.stopPropagation()
77-
// We use an attribute `querySelector()` rather than `getElementByID()`,
78-
// as some auto-generated ID's are invalid or not unique
79-
const id = (href || '').replace(/#/g, '')
80-
const $el = document.body.querySelector(`[id="${id}"]`)
81-
if ($el) {
82-
// Get the document scrolling element
83-
const scroller = document.scrollingElement || document.documentElement || document.body
84-
// Scroll heading into view (minus offset to account for nav top height
85-
scrollTo(scroller, offsetTop($el) - 70, 100, () => {
86-
// Set a tab index so we can focus header for a11y support
87-
$el.tabIndex = -1
88-
// Focus the heading
89-
$el.focus()
90-
})
91-
}
9274
}
9375
}
9476
}

‎docs/utils/index.js

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -173,39 +173,56 @@ export const importAll = context => {
173173
)
174174
}
175175

176-
// Smooth Scroll handler methods
176+
// Smooth scroll handler methods
177177
const easeInOutQuad = (t, b, c, d) => {
178178
t /= d / 2
179-
if (t < 1) return (c / 2) * t * t + b
179+
if (t < 1) {
180+
return (c / 2) * t * t + b
181+
}
180182
t--
181183
return (-c / 2) * (t * (t - 2) - 1) + b
182184
}
183185

184-
export const scrollTo = (scroller, to, duration, cb) => {
185-
const start = scroller.scrollTop
186+
export const scrollTo = ($scroller, to, duration, callback) => {
187+
const start = $scroller.scrollTop
186188
const change = to - start
187189
const increment = 20
188190
let currentTime = 0
189191
const animateScroll = function() {
190192
currentTime += increment
191-
const val = easeInOutQuad(currentTime, start, change, duration)
192-
scroller.scrollTop = Math.round(val)
193+
$scroller.scrollTop = Math.round(easeInOutQuad(currentTime, start, change, duration))
193194
if (currentTime < duration) {
194195
setTimeout(animateScroll, increment)
195-
} else if (cb && typeof cb === 'function') {
196-
cb()
196+
} else if (callback && typeof callback === 'function') {
197+
callback()
197198
}
198199
}
199200
animateScroll()
200201
}
201202

202203
// Return an element's offset wrt document element
203204
// https://j11y.io/jquery/#v=git&fn=jQuery.fn.offset
204-
export const offsetTop = el => {
205-
if (!el.getClientRects().length) {
206-
return 0
205+
export const offsetTop = $el =>
206+
$el.getClientRects().length > 0
207+
? $el.getBoundingClientRect().top + $el.ownerDocument.defaultView.pageYOffset
208+
: 0
209+
210+
// Scroll an in-page link target into view
211+
export const scrollTargetIntoView = (event, href) => {
212+
event.stopPropagation()
213+
// We use an attribute `querySelector()` rather than `getElementByID()`,
214+
// as some auto-generated ID's are invalid or not unique
215+
const id = (href || '').replace(/#/g, '')
216+
const $el = document.body.querySelector(`[id="${id}"]`)
217+
if ($el) {
218+
// Get the document scrolling element
219+
const $scroller = document.scrollingElement || document.documentElement || document.body
220+
// Scroll heading into view (minus offset to account for nav top height
221+
scrollTo($scroller, offsetTop($el) - 70, 150, () => {
222+
// Set a tab index so we can focus header for a11y support
223+
$el.tabIndex = -1
224+
// Focus the heading
225+
$el.focus()
226+
})
207227
}
208-
const bcr = el.getBoundingClientRect()
209-
const win = el.ownerDocument.defaultView
210-
return bcr.top + win.pageYOffset
211228
}

0 commit comments

Comments
 (0)