Merge branch 'ag/6306' of https://github.com/andrei-gheorghiu/bootstrap-vue into pr/6367

jacobmllr95 · jacobmllr95 · commit 23f1ec7568c8 · 2021-01-28T00:46:11.000+01:00
diff --git a/docs/components/quick-links.vue b/docs/components/quick-links.vue
@@ -66,9 +66,9 @@ export default {
     }
   },
   methods: {
-    scrollIntoView(evt, href) {
-      evt.preventDefault()
-      evt.stopPropagation()
+    scrollIntoView(event, href) {
+      event.preventDefault()
+      event.stopPropagation()
       // We use an attribute `querySelector()` rather than `getElementByID()`,
       // as some auto-generated ID's are invalid or not unique
       const id = (href || '').replace(/#/g, '')
diff --git a/docs/components/section.js b/docs/components/section.js
@@ -1,59 +1,37 @@
 import { mergeData } from 'vue-functional-data-merge'
-import { offsetTop, scrollTo } from '~/utils'
+import { scrollTargetIntoView } from '~/utils'
 
-// -- Utility handlers --
+// --- Utility methods ---
 
-// Scroll an in-page link target into view
-// this is the same as in toc.vue (as an instance method)
-const scrollIntoView = (evt, href) => {
-  evt.preventDefault()
-  evt.stopPropagation()
-  // We use an attribute `querySelector()` rather than `getElementByID()`,
-  // as some auto-generated ID's are invalid or not unique
-  const id = (href || '').replace(/#/g, '')
-  const $el = document.body.querySelector(`[id="${id}"]`)
-  if ($el) {
-    // Get the document scrolling element
-    const scroller = document.scrollingElement || document.documentElement || document.body
-    // Scroll heading into view (minus offset to account for nav top height
-    scrollTo(scroller, offsetTop($el) - 70, 100, () => {
-      // Set a tab index so we can focus header for a11y support
-      $el.tabIndex = -1
-      // Focus the heading
-      $el.focus()
-    })
-  }
-}
-
-// Convert local links to router push or scrollIntoView
-const linkToRouter = evt => {
-  if (!evt || evt.type !== 'click') {
+// Convert local links to router push or scroll target into view
+const linkToRouter = event => {
+  if (!event || event.type !== 'click') {
     return
   }
-  const target = evt.target && evt.target.closest ? evt.target.closest('a[href]') : null
+  const $target = event.target && event.target.closest ? event.target.closest('a[href]') : null
+  // Early exit if click inside an example, not a link,
+  // or default prevented or is a Vue instance
   if (
-    !target ||
-    evt.type !== 'click' ||
-    target.__vue__ ||
-    target.closest('.bd-example') ||
-    target.closest('pre') ||
-    evt.defaultPrevented
+    !$target ||
+    event.type !== 'click' ||
+    $target.__vue__ ||
+    $target.closest('.bd-example') ||
+    $target.closest('pre') ||
+    event.defaultPrevented
   ) {
-    // Early exit if click inside an example, not a link, or
-    // default prevented or is a Vue instance
     return
   }
-  const href = target.getAttribute('href')
+  const href = $target.getAttribute('href')
   if (href && href.indexOf('/') === 0 && href.indexOf('//') !== 0) {
-    // if local page-to-page-docs link, convert click to `$router.push()`
-    evt.preventDefault()
+    // If local page-to-page-docs link, convert click to `$router.push()`
+    event.preventDefault()
     if (typeof window !== 'undefined' && window.$nuxt) {
-      // Since we are a functional component, we can't use this.$router
+      // Since we are a functional component, we can't use `this.$router`
       window.$nuxt.$router.push(href)
     }
   } else if (href && href.indexOf('#') === 0) {
-    // In page anchor link, so use scrollIntoView utility method
-    scrollIntoView(evt, href)
+    // In page anchor link, so use `scrollTargetIntoView` utility method
+    scrollTargetIntoView(event, href)
   }
   // Else, normal browser link handling (i.e. external links)
 }
diff --git a/docs/components/toc.vue b/docs/components/toc.vue
@@ -22,7 +22,7 @@
       <b-link
         :href="h2.href"
         class="nav-link"
-        @click="scrollIntoView($event, h2.href)"
+        @click="scrollTargetIntoView($event, h2.href)"
       >
         <span v-html="h2.label"></span>
       </b-link>
@@ -36,7 +36,7 @@
           :key="h3.href"
           :href="h3.href"
           class="toc-entry toc-h3"
-          @click="scrollIntoView($event, h3.href)"
+          @click="scrollTargetIntoView($event, h3.href)"
         >
           <span v-html="h3.label"></span>
         </b-nav-item>
@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import { offsetTop, scrollTo } from '~/utils'
+import { scrollTargetIntoView } from '~/utils'
 
 export default {
   name: 'BVToc',
@@ -68,27 +68,9 @@ export default {
     }
   },
   methods: {
+    scrollTargetIntoView,
     isArray(value) {
       return Array.isArray(value)
-    },
-    scrollIntoView(evt, href) {
-      evt.preventDefault()
-      evt.stopPropagation()
-      // We use an attribute `querySelector()` rather than `getElementByID()`,
-      // as some auto-generated ID's are invalid or not unique
-      const id = (href || '').replace(/#/g, '')
-      const $el = document.body.querySelector(`[id="${id}"]`)
-      if ($el) {
-        // Get the document scrolling element
-        const scroller = document.scrollingElement || document.documentElement || document.body
-        // Scroll heading into view (minus offset to account for nav top height
-        scrollTo(scroller, offsetTop($el) - 70, 100, () => {
-          // Set a tab index so we can focus header for a11y support
-          $el.tabIndex = -1
-          // Focus the heading
-          $el.focus()
-        })
-      }
     }
   }
 }
diff --git a/docs/utils/index.js b/docs/utils/index.js
@@ -173,39 +173,56 @@ export const importAll = context => {
   )
 }
 
-// Smooth Scroll handler methods
+// Smooth scroll handler methods
 const easeInOutQuad = (t, b, c, d) => {
   t /= d / 2
-  if (t < 1) return (c / 2) * t * t + b
+  if (t < 1) {
+    return (c / 2) * t * t + b
+  }
   t--
   return (-c / 2) * (t * (t - 2) - 1) + b
 }
 
-export const scrollTo = (scroller, to, duration, cb) => {
-  const start = scroller.scrollTop
+export const scrollTo = ($scroller, to, duration, callback) => {
+  const start = $scroller.scrollTop
   const change = to - start
   const increment = 20
   let currentTime = 0
   const animateScroll = function() {
     currentTime += increment
-    const val = easeInOutQuad(currentTime, start, change, duration)
-    scroller.scrollTop = Math.round(val)
+    $scroller.scrollTop = Math.round(easeInOutQuad(currentTime, start, change, duration))
     if (currentTime < duration) {
       setTimeout(animateScroll, increment)
-    } else if (cb && typeof cb === 'function') {
-      cb()
+    } else if (callback && typeof callback === 'function') {
+      callback()
     }
   }
   animateScroll()
 }
 
 // Return an element's offset wrt document element
 // https://j11y.io/jquery/#v=git&fn=jQuery.fn.offset
-export const offsetTop = el => {
-  if (!el.getClientRects().length) {
-    return 0
+export const offsetTop = $el =>
+  $el.getClientRects().length > 0
+    ? $el.getBoundingClientRect().top + $el.ownerDocument.defaultView.pageYOffset
+    : 0
+
+// Scroll an in-page link target into view
+export const scrollTargetIntoView = (event, href) => {
+  event.stopPropagation()
+  // We use an attribute `querySelector()` rather than `getElementByID()`,
+  // as some auto-generated ID's are invalid or not unique
+  const id = (href || '').replace(/#/g, '')
+  const $el = document.body.querySelector(`[id="${id}"]`)
+  if ($el) {
+    // Get the document scrolling element
+    const $scroller = document.scrollingElement || document.documentElement || document.body
+    // Scroll heading into view (minus offset to account for nav top height
+    scrollTo($scroller, offsetTop($el) - 70, 150, () => {
+      // Set a tab index so we can focus header for a11y support
+      $el.tabIndex = -1
+      // Focus the heading
+      $el.focus()
+    })
   }
-  const bcr = el.getBoundingClientRect()
-  const win = el.ownerDocument.defaultView
-  return bcr.top + win.pageYOffset
 }
