Verified Commit 80d5644d authored by Frauke's avatar Frauke

add scrolling and tooltips

parent 797b5daa
......@@ -8,7 +8,7 @@
<script>
import messages from '~/mixins/messages'
const VueScrollTo = require('vue-scrollto');
import animateScrollTo from 'animated-scroll-to'
export default {
mixins: [messages],
......@@ -27,25 +27,21 @@
nextName = 'PASSWORD'
break
case 'CUSTOMISE' :
//nextName = 'DOMAIN_STATUS'
var cancelScroll = VueScrollTo.scrollTo(document.querySelector('.nav'), 500, {
easing: 'ease-in',
offset: -60,
onDone: function(element) {
animateScrollTo(document.querySelector('.nav'), {
onComplete: () => {
// scrolling is done, show tooltip
console.log('show')
this.$store.commit('storeCustomise', 'settings')
}
})
this.$store.commit('storeCustomise', true)
break
}
if (nextName) {
return this.getQuestion(nextName)
}
})
.then(this.addMessage)
.catch(this.errorHandler)
}
})
}
}
}
</script>
......@@ -4,12 +4,14 @@
<li class="nav__item">
<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>
<div class="tooltip" v-if="tooltip === 'index'" v-t="'tooltip.index'"></div>
</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 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>
<div class="tooltip" v-if="tooltip === 'settings'" v-t="'tooltip.settings'"></div>
</li>
<li class="nav__item"><span class="nav__link is-disabled">...</span></li>
</ul>
......@@ -23,7 +25,12 @@ export default {
openSettings() {
this.$emit("openSettings");
}
},
computed: {
tooltip () {
return this.$store.state.customise
}
},
};
</script>
......
......@@ -7,6 +7,10 @@
"search": "Search",
"settings": "Settings"
},
"tooltip": {
"settings": "Customise your site from the Settings page now.",
"index": "When you’re done, go back here to continue…"
},
"settings": {
"name": {
"label": "Name",
......
......@@ -7,6 +7,10 @@
"search": "Zoek",
"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": {
"name": {
"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 {
})
},
errorHandler (err) {
console.log(err)
return new Promise((resolve, reject) => {
if (err.code >= 500) {
return resolve(this.getQuestion(`${this.message.type}_SERVER_ERROR`))
......
......@@ -25,6 +25,7 @@
import socket from '~/mixins/socket'
import messages from '~/mixins/messages'
import Vue from 'vue'
import animateScrollTo from 'animated-scroll-to'
export default {
mixins: [socket, messages],
......@@ -45,6 +46,10 @@
},
mounted () {
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
}
// Add first message
......@@ -52,7 +57,12 @@
},
methods: {
scrollToBottom () {
if(this.$store.state.customise === 'scroll') {
animateScrollTo(document.body.scrollHeight)
this.$store.commit('storeCustomise', '')
} else {
window.scrollTo(0, document.body.scrollHeight)
}
},
isSent (message) {
return message.sent === true
......
......@@ -32,7 +32,7 @@ const createStore = () => {
profileImageMetadata: null
},
domainStatus: null,
customise: false
customise: ''
},
mutations
})
......
......@@ -49,7 +49,7 @@ module.exports = {
},
plugins: ['~/plugins/timeago.js', '~/plugins/i18n.js'],
router: {
middleware: ['i18n', 'auth']
middleware: ['i18n', 'auth', 'route']
},
env: {
SUPPORTED_LOCALES: {
......
......@@ -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": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz",
......@@ -1647,12 +1652,6 @@
"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": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/bfj-node4/-/bfj-node4-5.3.1.tgz",
......@@ -17538,15 +17537,6 @@
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
"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": {
"version": "2.5.16",
"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