IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implemented scrollBehavior for better scroll behaviar

Browse Source 
This scrolls even if you go forth and back in the browser.
Corrected URL for notifications in a Post.

Co-Authored-By: mattwr18 <mattwr18@gmail.com>
This commit is contained in:
Wolfgang Huß 2019-07-18 16:31:50 +02:00
parent 744f0cb225
commit ccae251ad9
3 changed files with 41 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
webapp/components/notifications/Notification/index.vue
View File

@ -15,7 +15,7 @@
<ds-space margin-bottom="x-small" /> <ds-space margin-bottom="x-small" />
<nuxt-link <nuxt-link
class="notification-mention-post" class="notification-mention-post"
:to="{ name: 'post-id-slug', params: postParams, hash: `#commentId-${comment.id}` }" :to="{ name: 'post-id-slug', params: postParams, ...hashParam }"
@click.native="$emit('read')" @click.native="$emit('read')"
> >
<ds-space margin-bottom="x-small"> <ds-space margin-bottom="x-small">
@ -68,9 +68,9 @@ export default {
slug: this.post.slug || this.comment.post.slug, slug: this.post.slug || this.comment.post.slug,
} }
}, },
queryParams() { hashParam() {
console.log('this.post.id: ', this.post.id, 'this.comment.id: ', this.comment.id) // Wolle: console.log('this.post.id: ', this.post.id, 'this.comment.id: ', this.comment.id)
return this.post.id ? {} : { commentId: `id-${this.comment.id}` } return this.post.id ? {} : { hash: `#commentId-${this.comment.id}` }
}, },
}, },
} }

84
webapp/nuxt.config.js
View File

@ -3,12 +3,12 @@ const envWhitelist = ['NODE_ENV', 'MAINTENANCE', 'MAPBOX_TOKEN']
const dev = process.env.NODE_ENV !== 'production' const dev = process.env.NODE_ENV !== 'production'
const styleguidePath = '../Nitro-Styleguide' 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/main.scss`,
`${styleguidePath}/src/system/styles/shared.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' const buildDir = process.env.NUXT_BUILD || '.nuxt'
@ -51,8 +51,7 @@ module.exports = {
head: { head: {
title: 'Human Connection', title: 'Human Connection',
titleTemplate: '%s - Human Connection', titleTemplate: '%s - Human Connection',
meta: [ meta: [{
{
charset: 'utf-8', charset: 'utf-8',
}, },
{ {
@ -65,13 +64,11 @@ module.exports = {
content: pkg.description, content: pkg.description,
}, },
], ],
link: [ link: [{
{ rel: 'icon',
rel: 'icon', type: 'image/x-icon',
type: 'image/x-icon', href: '/favicon.ico',
href: '/favicon.ico', }, ],
},
],
}, },
/* /*
@ -98,8 +95,7 @@ module.exports = {
/* /*
** Plugins to load before mounting the App ** Plugins to load before mounting the App
*/ */
plugins: [ plugins: [{
{
src: `~/plugins/styleguide${process.env.STYLEGUIDE_DEV ? '-dev' : ''}.js`, src: `~/plugins/styleguide${process.env.STYLEGUIDE_DEV ? '-dev' : ''}.js`,
ssr: true, ssr: true,
}, },
@ -138,21 +134,21 @@ module.exports = {
linkExactActiveClass: 'router-link-exact-active', linkExactActiveClass: 'router-link-exact-active',
scrollBehavior: (to, _from, savedPosition) => { scrollBehavior: (to, _from, savedPosition) => {
let position = false let position = false
console.log('to: ', to) // Wolle: console.log('to: ', to)
// if no children detected and scrollToTop is not explicitly disabled // if no children detected and scrollToTop is not explicitly disabled
if ( if (
to.matched.length < 2 && to.matched.length < 2 &&
to.matched.every(r => r.components.default.options.scrollToTop !== false) to.matched.every(r => r.components.default.options.scrollToTop !== false)
) { ) {
// scroll to the top of the page // 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 = { position = {
x: 0, x: 0,
y: 0, y: 0,
} }
} else if (to.matched.some(r => r.components.default.options.scrollToTop)) { } else if (to.matched.some(r => r.components.default.options.scrollToTop)) {
// if one of the children has scrollToTop option set to true // 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 = { position = {
x: 0, x: 0,
y: 0, y: 0,
@ -161,65 +157,55 @@ module.exports = {
// savedPosition is only available for popstate navigations (back button) // savedPosition is only available for popstate navigations (back button)
if (savedPosition) { if (savedPosition) {
console.log('savedPosition', savedPosition) // Wolle: console.log('savedPosition', savedPosition)
position = savedPosition position = savedPosition
} }
return new Promise(resolve => { return new Promise(resolve => {
// wait for the out transition to complete (if necessary) // wait for the out transition to complete (if necessary)
console.log('resolve', resolve) // Wolle: console.log('resolve', resolve)
window.$nuxt.$once('triggerScroll', () => { 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 processInterval = null
let processTime = 0 let processTime = 0
// coords will be used if no selector is provided, // coords will be used if no selector is provided,
// or if the selector didn't match any element. // 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) { if (to.hash) {
let hash = to.hash let hash = to.hash
console.log('hash', hash) // Wolle: console.log('hash', hash)
// CSS.escape() is not supported with IE and Edge. // CSS.escape() is not supported with IE and Edge.
if (typeof window.CSS !== 'undefined' && typeof window.CSS.escape !== 'undefined') { 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)) hash = '#' + window.CSS.escape(hash.substr(1))
console.log('hash after: ', hash) // Wolle: console.log('hash after: ', hash)
} }
try { try {
console.log('document', document) // Wolle: console.log('document', document)
console.log('document.querySelector(#comments)', document.querySelector('#comments')) // Wolle: console.log('document.querySelector(#comments)', document.querySelector('#comments'))
console.log('why wont you work?', document.querySelector(hash)) // Wolle: console.log('why wont you work?', document.querySelector(hash))
// sleep(2000) // Wolle: console.log('after sleep()')
console.log('after sleep()')
processInterval = setInterval(() => { processInterval = setInterval(() => {
console.log('process tick !!!') // Wolle: console.log('process tick !!!')
const queryIs = document.querySelector(hash) const queryIs = document.querySelector(hash)
if (queryIs) { if (queryIs) {
position = { position = {
selector: hash, selector: hash,
} }
console.log('found hash position: ', position) // Wolle: console.log('found hash position: ', position)
} }
processTime += 100 processTime += 100
if (queryIs || processTime >= 2000) { if (queryIs || processTime >= 2000) {
console.log('clearInterval of process !!!') // Wolle: console.log('clearInterval of process !!!')
clearInterval(processInterval) clearInterval(processInterval)
processInterval = null processInterval = null
} }
}, 100) }, 100)
// if (document.querySelector(hash)) { // Wolle: if (document.querySelector(hash)) {
// // scroll to anchor by returning the selector // // scroll to anchor by returning the selector
// console.log('document.querySelector(hash)', document.querySelector(hash)) // console.log('document.querySelector(hash)', document.querySelector(hash))
// position = { // position = {
@ -227,6 +213,7 @@ module.exports = {
// } // }
// } // }
} catch (e) { } catch (e) {
/* eslint-disable-next-line no-console */
console.warn( console.warn(
'Failed to save scroll position. Please add CSS.escape() polyfill (https://github.com/mathiasbynens/CSS.escape).', '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(() => { let resolveInterval = setInterval(() => {
console.log('resolve tick !!!') // Wolle: console.log('resolve tick !!!')
if (!processInterval) { if (!processInterval) {
clearInterval(resolveInterval) clearInterval(resolveInterval)
console.log('position', position) // Wolle: console.log('position', position)
resolve(position) resolve(position)
} }
}, 100) }, 100)
// console.log('position', position) // Wolle: console.log('position', position)
// resolve(position) // resolve(position)
}) })
}) })
@ -372,8 +359,7 @@ module.exports = {
loader: 'vue-svg-loader', loader: 'vue-svg-loader',
options: { options: {
svgo: { svgo: {
plugins: [ plugins: [{
{
removeViewBox: false, removeViewBox: false,
}, },
{ {

4
webapp/pages/post/_id/_slug/index.vue
View File

@ -93,12 +93,12 @@ export default {
} }
}, },
data() { data() {
const { commentId = null } = this.$route.query // Wolle: const { commentId = null } = this.$route.query
return { return {
post: null, post: null,
ready: false, ready: false,
title: 'loading', title: 'loading',
commentId, // Wolle: commentId,
} }
}, },
watch: { watch: {