From ccae251ad9b900039d9d7c2b9666f43006948dcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Thu, 18 Jul 2019 16:31:50 +0200 Subject: [PATCH] Implemented `scrollBehavior` for better scroll behaviar This scrolls even if you go forth and back in the browser. Corrected URL for notifications in a Post. Co-Authored-By: mattwr18 --- .../notifications/Notification/index.vue | 8 +- webapp/nuxt.config.js | 84 ++++++++----------- webapp/pages/post/_id/_slug/index.vue | 4 +- 3 files changed, 41 insertions(+), 55 deletions(-) diff --git a/webapp/components/notifications/Notification/index.vue b/webapp/components/notifications/Notification/index.vue index 7be551c0b..ef0e51817 100644 --- a/webapp/components/notifications/Notification/index.vue +++ b/webapp/components/notifications/Notification/index.vue @@ -15,7 +15,7 @@ @@ -68,9 +68,9 @@ export default { slug: this.post.slug || this.comment.post.slug, } }, - queryParams() { - console.log('this.post.id: ', this.post.id, 'this.comment.id: ', this.comment.id) - return this.post.id ? {} : { commentId: `id-${this.comment.id}` } + hashParam() { + // Wolle: console.log('this.post.id: ', this.post.id, 'this.comment.id: ', this.comment.id) + return this.post.id ? {} : { hash: `#commentId-${this.comment.id}` } }, }, } diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js index 3bee74b84..24c569af8 100644 --- a/webapp/nuxt.config.js +++ b/webapp/nuxt.config.js @@ -3,12 +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 - ? [ - `${styleguidePath}/src/system/styles/main.scss`, - `${styleguidePath}/src/system/styles/shared.scss`, - ] - : '@human-connection/styleguide/dist/shared.scss' +const styleguideStyles = process.env.STYLEGUIDE_DEV ? + [ + `${styleguidePath}/src/system/styles/main.scss`, + `${styleguidePath}/src/system/styles/shared.scss`, + ] : + '@human-connection/styleguide/dist/shared.scss' const buildDir = process.env.NUXT_BUILD || '.nuxt' @@ -51,8 +51,7 @@ module.exports = { head: { title: 'Human Connection', titleTemplate: '%s - Human Connection', - meta: [ - { + meta: [{ charset: 'utf-8', }, { @@ -65,13 +64,11 @@ module.exports = { content: pkg.description, }, ], - link: [ - { - rel: 'icon', - type: 'image/x-icon', - href: '/favicon.ico', - }, - ], + link: [{ + rel: 'icon', + type: 'image/x-icon', + href: '/favicon.ico', + }, ], }, /* @@ -98,8 +95,7 @@ module.exports = { /* ** Plugins to load before mounting the App */ - plugins: [ - { + plugins: [{ src: `~/plugins/styleguide${process.env.STYLEGUIDE_DEV ? '-dev' : ''}.js`, ssr: true, }, @@ -138,21 +134,21 @@ module.exports = { linkExactActiveClass: 'router-link-exact-active', scrollBehavior: (to, _from, savedPosition) => { let position = false - console.log('to: ', to) + // Wolle: console.log('to: ', to) // 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') + // Wolle: 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') + // Wolle: console.log('to.match.some ---- scrolling to top') position = { x: 0, y: 0, @@ -161,65 +157,55 @@ module.exports = { // savedPosition is only available for popstate navigations (back button) if (savedPosition) { - console.log('savedPosition', savedPosition) + // Wolle: console.log('savedPosition', savedPosition) position = savedPosition } return new Promise(resolve => { // wait for the out transition to complete (if necessary) - console.log('resolve', resolve) + // Wolle: 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') + // Wolle: console.log('inside window.$nuxt.$once') if (to.hash) { let hash = to.hash - console.log('hash', hash) + // Wolle: 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) + // Wolle: console.log('window.CSS', window.CSS) hash = '#' + window.CSS.escape(hash.substr(1)) - console.log('hash after: ', hash) + // Wolle: 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)) + // Wolle: console.log('document', document) + // Wolle: console.log('document.querySelector(#comments)', document.querySelector('#comments')) + // Wolle: console.log('why wont you work?', document.querySelector(hash)) - // sleep(2000) - console.log('after sleep()') + // Wolle: console.log('after sleep()') processInterval = setInterval(() => { - console.log('process tick !!!') + // Wolle: console.log('process tick !!!') const queryIs = document.querySelector(hash) if (queryIs) { position = { selector: hash, } - console.log('found hash position: ', position) + // Wolle: console.log('found hash position: ', position) } processTime += 100 if (queryIs || processTime >= 2000) { - console.log('clearInterval of process !!!') + // Wolle: console.log('clearInterval of process !!!') clearInterval(processInterval) processInterval = null } }, 100) - // if (document.querySelector(hash)) { + // Wolle: if (document.querySelector(hash)) { // // scroll to anchor by returning the selector // console.log('document.querySelector(hash)', document.querySelector(hash)) // position = { @@ -227,6 +213,7 @@ module.exports = { // } // } } catch (e) { + /* eslint-disable-next-line no-console */ console.warn( 'Failed to save scroll position. Please add CSS.escape() polyfill (https://github.com/mathiasbynens/CSS.escape).', ) @@ -234,14 +221,14 @@ module.exports = { } let resolveInterval = setInterval(() => { - console.log('resolve tick !!!') + // Wolle: console.log('resolve tick !!!') if (!processInterval) { clearInterval(resolveInterval) - console.log('position', position) + // Wolle: console.log('position', position) resolve(position) } }, 100) - // console.log('position', position) + // Wolle: console.log('position', position) // resolve(position) }) }) @@ -372,8 +359,7 @@ module.exports = { loader: 'vue-svg-loader', options: { svgo: { - plugins: [ - { + plugins: [{ removeViewBox: false, }, { diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue index 69ad46c66..2530ef2ae 100644 --- a/webapp/pages/post/_id/_slug/index.vue +++ b/webapp/pages/post/_id/_slug/index.vue @@ -93,12 +93,12 @@ export default { } }, data() { - const { commentId = null } = this.$route.query + // Wolle: const { commentId = null } = this.$route.query return { post: null, ready: false, title: 'loading', - commentId, + // Wolle: commentId, } }, watch: {