From f95fb16dbf97c55056ec773f49bd45234e621d79 Mon Sep 17 00:00:00 2001
From: Sandro Ducceschi <ducceschi@ditoy.com>
Date: Mon, 23 Oct 2023 17:44:46 +0200
Subject: [PATCH] ADDED: samepage anchor jumps

---
 src/App.vue                                 | 81 ++++++++++++++++++---
 src/components/blocks/ResponsiveGallery.vue |  2 +-
 2 files changed, 73 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 18ee2dd..1e0e8c2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,33 +17,96 @@ export default {
     Footer,
     CookieNotice,
   },
+  //---------------------------------------------------
+  //
+  //  Properties
+  //
+  //---------------------------------------------------
+  props: {},
+  //---------------------------------------------------
+  //
+  //  Meta
+  //
+  //---------------------------------------------------
   metaInfo: {
     title: '',
     titleTemplate: '%s | Casper Network',
   },
-  watch: {
-    $route: {
-      handler(value) {
-        this.hash = value.hash || null;
-      },
-    },
-  },
+  //---------------------------------------------------
+  //
+  //  Data model
+  //
+  //---------------------------------------------------
   data() {
     return {
       hash: null,
+      samePage: false,
     };
   },
+  //---------------------------------------------------
+  //
+  //  Computed Properties
+  //
+  //---------------------------------------------------
+  computed: {},
+  //---------------------------------------------------
+  //
+  //  Watch Properties
+  //
+  //---------------------------------------------------
+  watch: {
+    $route: {
+      handler(newval, oldval) {
+        this.samePage = newval.path === oldval?.path;
+        this.hash = newval.hash || null;
+      },
+    },
+  },
+  //---------------------------------------------------
+  //
+  //  Filter Properties
+  //
+  //---------------------------------------------------
+  // filters: {},
+  //---------------------------------------------------
+  //
+  //  Validation Properties
+  //
+  //---------------------------------------------------
+  // validations: {},
+  //---------------------------------------------------
+  //
+  //  Vue Lifecycle
+  //
+  //---------------------------------------------------
+  // beforeCreate() {},
+  // created() {},
+  // beforeMount() {},
+  // render(h) { return h(); },
+  // mounted() {},
+  // beforeUpdate() {},
   updated() {
     if (this.hash) {
       this.$nextTick(() => {
-        const hash = this.hash.substr(1);
+        const { samePage } = this;
+        let { hash } = this;
+        hash = hash.substr(1);
         const element = document.querySelector(`[data-slug='${hash}']`);
         if (element) {
-          element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
+          const options = { behavior: 'smooth', block: 'center', inline: 'center' };
+          options.block = samePage ? 'start' : 'center';
+          element.scrollIntoView(options);
         }
       });
     }
   },
+  // beforeDestroy() {},
+  // destroyed() {},
+  //---------------------------------------------------
+  //
+  //  Methods
+  //
+  //---------------------------------------------------
   methods: {
     handleManageCookies() {
       this.$refs.cookieNotice.show();
diff --git a/src/components/blocks/ResponsiveGallery.vue b/src/components/blocks/ResponsiveGallery.vue
index 9726219..e93bec2 100644
--- a/src/components/blocks/ResponsiveGallery.vue
+++ b/src/components/blocks/ResponsiveGallery.vue
@@ -76,7 +76,7 @@ export default {
   //---------------------------------------------------
   computed: {
     slugged() {
-      const title = (this.blockTitle || '').replace(/<\/?[^>]+(>|$)/g, '');
+      const title = (this.title || '').replace(/<\/?[^>]+(>|$)/g, '');
       return slugify(title, { lower: true, strict: true });
     },
     computedItems() {