Approach to get scrollBehavior in a useful way. Works, but not fully successful

webapp/components/Comment.vue

@@ -10,7 +10,7 @@
     </ds-card>
   </div>
   <div v-else :class="{ comment: true, 'disabled-content': comment.deleted || comment.disabled }">
-    <ds-card :id="comment.id">
+    <ds-card :id="`commentId-${comment.id}`">
       <ds-space margin-bottom="small">
         <hc-user :user="author" :date-time="comment.createdAt" />
       </ds-space>
@@ -33,19 +33,15 @@
         v-show="comment.content !== comment.contentExcerpt"
         style="text-align: right;  margin-right: 20px; margin-top: -12px;"
       >
-        <a
+        <a v-if="isCollapsed" style="padding-left: 40px;" @click="isCollapsed = !isCollapsed">
-          v-if="isCollapsed"
+          {{ $t('comment.show.more') }}
-          style="padding-left: 40px;"
+        </a>
-          @click="isCollapsed = !isCollapsed"
-        >{{ $t('comment.show.more') }}</a>
       </div>
       <div v-if="!isCollapsed" v-html="comment.content" style="padding-left: 40px;" />
       <div style="text-align: right;  margin-right: 20px; margin-top: -12px;">
-        <a
+        <a v-if="!isCollapsed" @click="isCollapsed = !isCollapsed" style="padding-left: 40px; ">
-          v-if="!isCollapsed"
+          {{ $t('comment.show.less') }}
-          @click="isCollapsed = !isCollapsed"
+        </a>
-          style="padding-left: 40px; "
-        >{{ $t('comment.show.less') }}</a>
       </div>
       <ds-space margin-bottom="small" />
     </ds-card>

webapp/components/notifications/Notification/index.vue

@@ -8,14 +8,14 @@
           :trunc="35"
         />
       </ds-space>
-      <ds-text
+      <ds-text color="soft">
-        color="soft"
+        {{ $t('notifications.menu.mentioned', { resource: post.id ? 'post' : 'comment' }) }}
-      >{{ $t('notifications.menu.mentioned', { resource: post.id ? 'post' : 'comment' }) }}</ds-text>
+      </ds-text>
     </no-ssr>
     <ds-space margin-bottom="x-small" />
     <nuxt-link
       class="notification-mention-post"
-      :to="{ name: 'post-id', params: postParams, ...queryParams }"
+      :to="{ name: 'post-id-slug', params: postParams, hash: `#commentId-${comment.id}` }"
       @click.native="$emit('read')"
     >
       <ds-space margin-bottom="x-small">
@@ -65,14 +65,12 @@ export default {
     postParams() {
       return {
         id: this.post.id || this.comment.post.id,
+        slug: this.post.slug || this.comment.post.slug,
       }
     },
     queryParams() {
-      return this.post.id
+      console.log('this.post.id: ', this.post.id, 'this.comment.id: ', this.comment.id)
-        ? {}
+      return this.post.id ? {} : { commentId: `id-${this.comment.id}` }
-        : {
-            query: { commentId: this.comment.id },
-          }
     },
   },
 }

webapp/nuxt.config.js

@@ -3,11 +3,12 @@ const envWhitelist = ['NODE_ENV', 'MAINTENANCE', 'MAPBOX_TOKEN']
 const dev = process.env.NODE_ENV !== 'production'
 
 const styleguidePath = '../Nitro-Styleguide'
-const styleguideStyles = process.env.STYLEGUIDE_DEV ? [
+const styleguideStyles = process.env.STYLEGUIDE_DEV
-    `${styleguidePath}/src/system/styles/main.scss`,
+  ? [
-    `${styleguidePath}/src/system/styles/shared.scss`,
+      `${styleguidePath}/src/system/styles/main.scss`,
-  ] :
+      `${styleguidePath}/src/system/styles/shared.scss`,
-  '@human-connection/styleguide/dist/shared.scss'
+    ]
+  : '@human-connection/styleguide/dist/shared.scss'
 
 const buildDir = process.env.NUXT_BUILD || '.nuxt'
 
@@ -50,24 +51,27 @@ module.exports = {
   head: {
     title: 'Human Connection',
     titleTemplate: '%s - Human Connection',
-    meta: [{
+    meta: [
-        charset: 'utf-8'
+      {
+        charset: 'utf-8',
       },
       {
         name: 'viewport',
-        content: 'width=device-width, initial-scale=1'
+        content: 'width=device-width, initial-scale=1',
       },
       {
         hid: 'description',
         name: 'description',
-        content: pkg.description
+        content: pkg.description,
+      },
+    ],
+    link: [
+      {
+        rel: 'icon',
+        type: 'image/x-icon',
+        href: '/favicon.ico',
       },
     ],
-    link: [{
-      rel: 'icon',
-      type: 'image/x-icon',
-      href: '/favicon.ico'
-    }],
   },
 
   /*
@@ -94,36 +98,37 @@ module.exports = {
   /*
    ** Plugins to load before mounting the App
    */
-  plugins: [{
+  plugins: [
+    {
       src: `~/plugins/styleguide${process.env.STYLEGUIDE_DEV ? '-dev' : ''}.js`,
       ssr: true,
     },
     {
       src: '~/plugins/i18n.js',
-      ssr: true
+      ssr: true,
     },
     {
       src: '~/plugins/axios.js',
-      ssr: false
+      ssr: false,
     },
     {
       src: '~/plugins/keep-alive.js',
-      ssr: false
+      ssr: false,
     },
     {
       src: '~/plugins/vue-directives.js',
-      ssr: false
+      ssr: false,
     },
     {
       src: '~/plugins/v-tooltip.js',
-      ssr: false
+      ssr: false,
     },
     {
       src: '~/plugins/izi-toast.js',
-      ssr: false
+      ssr: false,
     },
     {
-      src: '~/plugins/vue-filters.js'
+      src: '~/plugins/vue-filters.js',
     },
   ],
 
@@ -131,11 +136,115 @@ module.exports = {
     middleware: ['authenticated'],
     linkActiveClass: 'router-link-active',
     linkExactActiveClass: 'router-link-exact-active',
-    scrollBehavior: () => {
+    scrollBehavior: (to, _from, savedPosition) => {
-      return {
+      let position = false
-        x: 0,
+      console.log('to: ', to)
-        y: 0
+      // if no children detected and scrollToTop is not explicitly disabled
+      if (
+        to.matched.length < 2 &&
+        to.matched.every(r => r.components.default.options.scrollToTop !== false)
+      ) {
+        // scroll to the top of the page
+        console.log('to.matched.length --- scrolling to top')
+        position = {
+          x: 0,
+          y: 0,
+        }
+      } else if (to.matched.some(r => r.components.default.options.scrollToTop)) {
+        // if one of the children has scrollToTop option set to true
+        console.log('to.match.some ---- scrolling to top')
+        position = {
+          x: 0,
+          y: 0,
+        }
       }
+
+      // savedPosition is only available for popstate navigations (back button)
+      if (savedPosition) {
+        console.log('savedPosition', savedPosition)
+        position = savedPosition
+      }
+
+      return new Promise(resolve => {
+        // wait for the out transition to complete (if necessary)
+        console.log('resolve', resolve)
+        window.$nuxt.$once('triggerScroll', () => {
+          // function sleep(ms) {
+          //   // return new Promise(resolve => setTimeout(resolve, ms))
+          //   console.log('sleep init: ')
+          //   var waitTill = new Date(new Date().getTime() + ms)
+          //   console.log('sleep start: ', new Date().getTime())
+          //   while (waitTill.getTime() > new Date().getTime()) {}
+          //   console.log('sleep stop: ', waitTill.getTime())
+          // }
+
+          let processInterval = null
+          let processTime = 0
+
+          // coords will be used if no selector is provided,
+          // or if the selector didn't match any element.
+          console.log('inside window.$nuxt.$once')
+          if (to.hash) {
+            let hash = to.hash
+            console.log('hash', hash)
+            // CSS.escape() is not supported with IE and Edge.
+            if (typeof window.CSS !== 'undefined' && typeof window.CSS.escape !== 'undefined') {
+              console.log('window.CSS', window.CSS)
+              hash = '#' + window.CSS.escape(hash.substr(1))
+              console.log('hash after: ', hash)
+            }
+            try {
+              console.log('document', document)
+              console.log('document.querySelector(#comments)', document.querySelector('#comments'))
+              console.log('why wont you work?', document.querySelector(hash))
+
+              // sleep(2000)
+              console.log('after sleep()')
+
+              processInterval = setInterval(() => {
+                console.log('process tick !!!')
+                const queryIs = document.querySelector(hash)
+
+                if (queryIs) {
+                  position = {
+                    selector: hash,
+                  }
+                  console.log('found hash position: ', position)
+                }
+                processTime += 100
+                if (queryIs || processTime >= 2000) {
+                  console.log('clearInterval of process !!!')
+                  clearInterval(processInterval)
+                  processInterval = null
+                }
+              }, 100)
+
+              // if (document.querySelector(hash)) {
+              //   // scroll to anchor by returning the selector
+              //   console.log('document.querySelector(hash)', document.querySelector(hash))
+              //   position = {
+              //     selector: hash,
+              //   }
+              // }
+            } catch (e) {
+              console.warn(
+                'Failed to save scroll position. Please add CSS.escape() polyfill (https://github.com/mathiasbynens/CSS.escape).',
+              )
+            }
+          }
+
+          let resolveInterval = setInterval(() => {
+            console.log('resolve tick !!!')
+            if (!processInterval) {
+              clearInterval(resolveInterval)
+              console.log('position', position)
+              resolve(position)
+            }
+          }, 100)
+          // console.log('position', position)
+          // resolve(position)
+        })
+      })
     },
   },
 
@@ -143,12 +252,18 @@ module.exports = {
    ** Nuxt.js modules
    */
   modules: [
-    ['@nuxtjs/dotenv', {
+    [
-      only: envWhitelist
+      '@nuxtjs/dotenv',
-    }],
+      {
-    ['nuxt-env', {
+        only: envWhitelist,
-      keys: envWhitelist
+      },
-    }],
+    ],
+    [
+      'nuxt-env',
+      {
+        keys: envWhitelist,
+      },
+    ],
     'cookie-universal-nuxt',
     '@nuxtjs/apollo',
     '@nuxtjs/axios',
@@ -187,7 +302,7 @@ module.exports = {
       // make this configurable (nuxt-dotenv)
       target: process.env.GRAPHQL_URI || 'http://localhost:4000',
       pathRewrite: {
-        '^/api': ''
+        '^/api': '',
       },
       toProxy: true, // cloudflare needs that
       headers: {
@@ -257,7 +372,8 @@ module.exports = {
         loader: 'vue-svg-loader',
         options: {
           svgo: {
-            plugins: [{
+            plugins: [
+              {
                 removeViewBox: false,
               },
               {

webapp/pages/post/_id.vue

@@ -79,8 +79,8 @@ export default {
   },
   watch: {
     $route(to, from) {
+      console.log('to: ', to)
       if (to.hash === '#comments') {
-        console.log('to: ', to, 'from: ', from)
         window.scroll({
           top: document.getElementById('comments').offsetTop,
           left: 0,
@@ -89,11 +89,6 @@ export default {
       }
     },
   },
-  methods: {
-    scrollBehavior(to, from, savedPosition) {
-      console.log('to: ', to, 'from: ', from)
-    },
-  },
 }
 </script>
 

webapp/pages/post/_id/_slug/index.vue

@@ -131,7 +131,6 @@ export default {
     }
   },
   mounted() {
-    console.log('this.$router: ', this.$router)
     setTimeout(() => {
       // NOTE: quick fix for jumping flexbox implementation
       // will be fixed in a future update of the styleguide