Add possibility to add multiple back-to-tops

nasa-jpl · Jul 28, 2023 · d2170c9 · d2170c9
1 parent 72e21e3
commit d2170c9
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 8 deletions.
diff --git a/dist/js/explorer-1.min.js b/dist/js/explorer-1.min.js
diff --git a/src/index.html b/src/index.html
@@ -806,7 +806,7 @@ <h2 class="text-h3">Heading</h2>
         Maintained by DesignLab
       </p>
     </div>
-    <div id="BackToTop" class="BlockBackToTop" data-threshold="600">
+    <div class="BlockBackToTop" data-threshold="600">
       <button
         class="BaseButton text-contrast-none inline-block -primary -compact fixed bottom-10 right-10 z-60"
       >

diff --git a/src/js/components/_BlockBackToTop.js b/src/js/components/_BlockBackToTop.js
@@ -4,8 +4,7 @@
  **
  */
 
-document.addEventListener('DOMContentLoaded', () => {
-  const backToTop = document.getElementById('BackToTop')
+const initBackToTop = (backToTop) => {
   const backToTopBtn = backToTop.querySelector('button')
   const threshold = parseInt(backToTop.dataset.threshold) || 300
   const scrollTo = parseInt(backToTop.dataset.scrollto) || 0
@@ -26,4 +25,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
   window.addEventListener('scroll', onScroll)
   backToTopBtn.addEventListener('click', scrollToTop)
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const backToTopElements = document.querySelectorAll('.BlockBackToTop')
+  backToTopElements.forEach(initBackToTop)
 })
diff --git a/storybook/stories/components/BlockBackToTop/BlockBackToTop.js b/storybook/stories/components/BlockBackToTop/BlockBackToTop.js
@@ -8,7 +8,7 @@ export const BlockBackToTopTemplate = ({
   if (!threshold) threshold = ''
   if (!scrollTo) scrollTo = ''
 
-  return `<div id="BackToTop" class="BlockBackToTop" data-threshold="${threshold}" data-scrollto="${scrollTo}">
+  return `<div class="BlockBackToTop" data-threshold="${threshold}" data-scrollto="${scrollTo}">
   ${BaseButtonTemplate({
     variant: 'primary',
     cssClass: `z-60 ${alwaysVisible ? 'always-visible' : ''}`,

diff --git a/storybook/stories/components/BlockBackToTop/BlockBackToTop.stories.js b/storybook/stories/components/BlockBackToTop/BlockBackToTop.stories.js
@@ -10,19 +10,26 @@ export default {
     threshold: {
       type: 'number',
       description:
-        'Specifies the scroll position at which BackToTop becomes visible. Defaults to 300',
+        'Specifies the scroll position at which BackToTop becomes visible.',
+      table: {
+        defaultValue: { summary: '300' },
+      },
     },
     scrollTo: {
       type: 'number',
       description:
-        'Specifies the vertical scroll position to which the page will scroll when BackToTop is clicked. Defaults to 0',
+        'Specifies the vertical scroll position to which the page will scroll when BackToTop is clicked.',
+      table: {
+        defaultValue: { summary: '0' },
+      },
     },
   },
   parameters: {
     viewMode: 'docs',
     docs: {
       description: {
-        component: 'Allows users to scroll back to the top of the page',
+        component:
+          'Allows users to scroll back to the specified position or to the top of the page',
       },
     },
   },