Verified Commit 80d5644d authored by Frauke's avatar Frauke

add scrolling and tooltips

parent 797b5daa
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<script> <script>
import messages from '~/mixins/messages' import messages from '~/mixins/messages'
const VueScrollTo = require('vue-scrollto'); import animateScrollTo from 'animated-scroll-to'
export default { export default {
mixins: [messages], mixins: [messages],
...@@ -27,24 +27,20 @@ ...@@ -27,24 +27,20 @@
nextName = 'PASSWORD' nextName = 'PASSWORD'
break break
case 'CUSTOMISE' : case 'CUSTOMISE' :
//nextName = 'DOMAIN_STATUS' animateScrollTo(document.querySelector('.nav'), {
var cancelScroll = VueScrollTo.scrollTo(document.querySelector('.nav'), 500, { onComplete: () => {
easing: 'ease-in', // scrolling is done, show tooltip
offset: -60, this.$store.commit('storeCustomise', 'settings')
onDone: function(element) { }
// scrolling is done, show tooltip
console.log('show')
}
}) })
this.$store.commit('storeCustomise', true)
break break
} }
if (nextName) { if (nextName) {
return this.getQuestion(nextName) return this.getQuestion(nextName)
.then(this.addMessage)
.catch(this.errorHandler)
} }
}) })
.then(this.addMessage)
.catch(this.errorHandler)
} }
} }
} }
......
...@@ -4,12 +4,14 @@ ...@@ -4,12 +4,14 @@
<li class="nav__item"> <li class="nav__item">
<span v-if="settingsDisabled" class="nav__link is-disabled" v-t="'nav.me'"></span> <span v-if="settingsDisabled" class="nav__link is-disabled" v-t="'nav.me'"></span>
<nuxt-link v-if="!settingsDisabled" to="/" class="nav__link" v-t="'nav.me'"></nuxt-link> <nuxt-link v-if="!settingsDisabled" to="/" class="nav__link" v-t="'nav.me'"></nuxt-link>
<div class="tooltip" v-if="tooltip === 'index'" v-t="'tooltip.index'"></div>
</li> </li>
<li class="nav__item"><span class="nav__link is-disabled" v-t="'nav.everyone'"></span></li> <li class="nav__item"><span class="nav__link is-disabled" v-t="'nav.everyone'"></span></li>
<li class="nav__item"><span class="nav__link is-disabled" v-t="'nav.search'"></span></li> <li class="nav__item"><span class="nav__link is-disabled" v-t="'nav.search'"></span></li>
<li class="nav__item"> <li class="nav__item">
<span v-if="settingsDisabled" class="nav__link is-disabled" v-t="'nav.settings'"></span> <span v-if="settingsDisabled" class="nav__link is-disabled" v-t="'nav.settings'"></span>
<nuxt-link v-if="!settingsDisabled" to="/settings" class="nav__link" v-t="'nav.settings'"></nuxt-link> <nuxt-link v-if="!settingsDisabled" to="/settings" class="nav__link" v-t="'nav.settings'"></nuxt-link>
<div class="tooltip" v-if="tooltip === 'settings'" v-t="'tooltip.settings'"></div>
</li> </li>
<li class="nav__item"><span class="nav__link is-disabled">...</span></li> <li class="nav__item"><span class="nav__link is-disabled">...</span></li>
</ul> </ul>
...@@ -23,7 +25,12 @@ export default { ...@@ -23,7 +25,12 @@ export default {
openSettings() { openSettings() {
this.$emit("openSettings"); this.$emit("openSettings");
} }
} },
computed: {
tooltip () {
return this.$store.state.customise
}
},
}; };
</script> </script>
......
...@@ -7,6 +7,10 @@ ...@@ -7,6 +7,10 @@
"search": "Search", "search": "Search",
"settings": "Settings" "settings": "Settings"
}, },
"tooltip": {
"settings": "Customise your site from the Settings page now.",
"index": "When you’re done, go back here to continue…"
},
"settings": { "settings": {
"name": { "name": {
"label": "Name", "label": "Name",
......
...@@ -7,6 +7,10 @@ ...@@ -7,6 +7,10 @@
"search": "Zoek", "search": "Zoek",
"settings": "Instellingen" "settings": "Instellingen"
}, },
"tooltip": {
"settings": "Pas je site nu aan via de pagina instellingen.",
"index": "Als je klaar bent, ga je terug naar hier om door te gaan..."
},
"settings": { "settings": {
"name": { "name": {
"label": "Naam", "label": "Naam",
......
export default function ({isHMR, app, store, route, params, error, redirect, req}) {
// If middleware is called from hot module replacement, ignore it
if (isHMR) {
return
}
if (route.name === 'settings' && store.state.customise === "settings" ) {
// show tooltip on settings page
store.commit('storeCustomise', 'index')
} else if(store.state.customise === "index") {
store.commit('storeCustomise', 'scroll')
} else {
store.commit('storeCustomise', '')
}
}
...@@ -68,6 +68,7 @@ export default { ...@@ -68,6 +68,7 @@ export default {
}) })
}, },
errorHandler (err) { errorHandler (err) {
console.log(err)
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (err.code >= 500) { if (err.code >= 500) {
return resolve(this.getQuestion(`${this.message.type}_SERVER_ERROR`)) return resolve(this.getQuestion(`${this.message.type}_SERVER_ERROR`))
......
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
import socket from '~/mixins/socket' import socket from '~/mixins/socket'
import messages from '~/mixins/messages' import messages from '~/mixins/messages'
import Vue from 'vue' import Vue from 'vue'
import animateScrollTo from 'animated-scroll-to'
export default { export default {
mixins: [socket, messages], mixins: [socket, messages],
...@@ -45,6 +46,10 @@ ...@@ -45,6 +46,10 @@
}, },
mounted () { mounted () {
if (this.messages.length > 0) { if (this.messages.length > 0) {
// If comming from settings page, add next message
if(this.$store.state.customise === 'scroll') {
this.getQuestion('DOMAIN_STATUS').then(message => this.addMessage(message, false))
}
return return
} }
// Add first message // Add first message
...@@ -52,7 +57,12 @@ ...@@ -52,7 +57,12 @@
}, },
methods: { methods: {
scrollToBottom () { scrollToBottom () {
window.scrollTo(0, document.body.scrollHeight) if(this.$store.state.customise === 'scroll') {
animateScrollTo(document.body.scrollHeight)
this.$store.commit('storeCustomise', '')
} else {
window.scrollTo(0, document.body.scrollHeight)
}
}, },
isSent (message) { isSent (message) {
return message.sent === true return message.sent === true
......
...@@ -32,7 +32,7 @@ const createStore = () => { ...@@ -32,7 +32,7 @@ const createStore = () => {
profileImageMetadata: null profileImageMetadata: null
}, },
domainStatus: null, domainStatus: null,
customise: false customise: ''
}, },
mutations mutations
}) })
......
...@@ -49,7 +49,7 @@ module.exports = { ...@@ -49,7 +49,7 @@ module.exports = {
}, },
plugins: ['~/plugins/timeago.js', '~/plugins/i18n.js'], plugins: ['~/plugins/timeago.js', '~/plugins/i18n.js'],
router: { router: {
middleware: ['i18n', 'auth'] middleware: ['i18n', 'auth', 'route']
}, },
env: { env: {
SUPPORTED_LOCALES: { SUPPORTED_LOCALES: {
......
...@@ -299,6 +299,11 @@ ...@@ -299,6 +299,11 @@
} }
} }
}, },
"animated-scroll-to": {
"version": "1.1.10",
"resolved": "https://registry.npmjs.org/animated-scroll-to/-/animated-scroll-to-1.1.10.tgz",
"integrity": "sha512-w6UuaE6f5XntxdlblhXNWweHfudAOnhqWBBMp+vzwTYHMdM73p/oQkq3w+V1vLpnHfoImCnv+800NXWwKdpW7Q=="
},
"ansi-escapes": { "ansi-escapes": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz",
...@@ -1647,12 +1652,6 @@ ...@@ -1647,12 +1652,6 @@
"tweetnacl": "0.14.5" "tweetnacl": "0.14.5"
} }
}, },
"bezier-easing": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.0.3.tgz",
"integrity": "sha1-y0k/3bf4kg7MoAlzNEzgUYiF8X4=",
"dev": true
},
"bfj-node4": { "bfj-node4": {
"version": "5.3.1", "version": "5.3.1",
"resolved": "https://registry.npmjs.org/bfj-node4/-/bfj-node4-5.3.1.tgz", "resolved": "https://registry.npmjs.org/bfj-node4/-/bfj-node4-5.3.1.tgz",
...@@ -17538,15 +17537,6 @@ ...@@ -17538,15 +17537,6 @@
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
"integrity": "sha512-vLLoY452L+JBpALMP5UHum9+7nzR9PeIBCghU9ZtJ1eWm6ieUI8Zb/DI3MYxH32bxkjzYV1LRjNv4qr8d+uX/w==" "integrity": "sha512-vLLoY452L+JBpALMP5UHum9+7nzR9PeIBCghU9ZtJ1eWm6ieUI8Zb/DI3MYxH32bxkjzYV1LRjNv4qr8d+uX/w=="
}, },
"vue-scrollto": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/vue-scrollto/-/vue-scrollto-2.11.0.tgz",
"integrity": "sha512-kNR7YHjtJQyoIh5rdRjQw+Abk03DPhwKy8KXYlXmzbLn+0R5Oye//ktylK8un+CuhzUbt51HIHSQvZr7lFRK1A==",
"dev": true,
"requires": {
"bezier-easing": "2.0.3"
}
},
"vue-server-renderer": { "vue-server-renderer": {
"version": "2.5.16", "version": "2.5.16",
"resolved": "https://registry.npmjs.org/vue-server-renderer/-/vue-server-renderer-2.5.16.tgz", "resolved": "https://registry.npmjs.org/vue-server-renderer/-/vue-server-renderer-2.5.16.tgz",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment