Merge pull request #72 from casper-network/repeatable-anchor-jump

MODIFIED: make anchor jump repeatable
casper-network · Oct 31, 2023 · 3c4c043 · 3c4c043
2 parents 4113ae9 + 3683026
commit 3c4c043
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 9 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -83,22 +83,22 @@ export default {
   // created() {},
   // beforeMount() {},
   // render(h) { return h(); },
-  // mounted() {},
+  mounted() {
+    this.checkForAnchorLinks();
+  },
   // beforeUpdate() {},
   updated() {
     if (this.hash) {
       this.$nextTick(() => {
         const { samePage } = this;
         let { hash } = this;
-        hash = hash.substr(1);
-        const element = document.querySelector(`[data-slug='${hash}']`);
-        if (element) {
-          const options = { behavior: 'smooth', block: 'center', inline: 'center' };
-          options.block = samePage ? 'start' : 'center';
-          element.scrollIntoView(options);
+        hash = hash.substr(1) || '';
+        if (hash.length > 0) {
+          this.scrollToAnchor(hash, samePage);
         }
       });
     }
+    this.checkForAnchorLinks();
   },
   // beforeDestroy() {},
   // destroyed() {},
@@ -108,6 +108,29 @@ export default {
   //
   //---------------------------------------------------
   methods: {
+    checkForAnchorLinks() {
+      this.$nextTick(() => {
+        const a = document.querySelectorAll('a[href*="#"]');
+        a.forEach((o) => {
+          o.addEventListener('click', this.handleAnchorLink);
+        });
+      });
+    },
+    handleAnchorLink(evt) {
+      const href = evt.target?.href.split('#')[1] || '';
+      const hash = window.location.hash.substr(1) || '';
+      if (href !== '' && hash !== '' && href === hash) {
+        this.scrollToAnchor(hash);
+      }
+    },
+    scrollToAnchor(anchor, samePage = true) {
+      const element = document.querySelector(`[data-slug='${anchor}'], #${anchor}`);
+      if (element) {
+        const options = { behavior: 'smooth', block: 'center', inline: 'center' };
+        options.block = samePage ? 'start' : 'center';
+        element.scrollIntoView(options);
+      }
+    },
     handleManageCookies() {
       this.$refs.cookieNotice.show();
     },

diff --git a/src/components/blocks/ResponsiveGallery.vue b/src/components/blocks/ResponsiveGallery.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="carousel-container">
+  <div class="responsive-carousel-container" :id="id">
     <div class="container">
       <h2 v-if="title" v-html="title" :data-slug="slugged"></h2>
     </div>
@@ -65,6 +65,7 @@ export default {
   //---------------------------------------------------
   data() {
     return {
+      id: 'rcc',
       glider: null,
       timeoutId: null,
     };
@@ -283,7 +284,7 @@ export default {
   cursor: pointer;
 }
 
-.carousel-container {
+.responsive-carousel-container {
   display: block;
   width: 100%;
   overflow: hidden;