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" />
<nuxt-link
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')"
>
<ds-space margin-bottom="x-small">
@ -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}` }
},
},
}

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 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,
},
{

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

@ -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: {