From 2051395e7b8a356e1e6a5918edaca8daa3ac0530 Mon Sep 17 00:00:00 2001 From: Christian Cueni Date: Mon, 15 Apr 2019 09:36:56 +0200 Subject: [PATCH] fix scrolling --- .../content-blocks/assignment/Assignment.vue | 7 +-- client/src/pages/module.vue | 52 +++++++++---------- client/src/store/index.js | 17 +++++- 3 files changed, 46 insertions(+), 30 deletions(-) diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue index afbada8f..157a2087 100644 --- a/client/src/components/content-blocks/assignment/Assignment.vue +++ b/client/src/components/content-blocks/assignment/Assignment.vue @@ -196,10 +196,11 @@ id: this.value.id } }, - result({data}) { + result(response) { + const data = response.data; this.assignment = cloneDeep(data.assignment); this.assignment.submission = Object.assign(this.initialSubmission(), this.assignment.submission); - if (this.assignment.id === this.scrollToAssignmentId) { + if (this.assignment.id === this.scrollToAssignmentId && 'stale' in response) { this.$nextTick(() => this.scrollToAssignmentReady(true)); } } @@ -221,7 +222,7 @@ unsaved: false, saving: 0 } - }, + } } diff --git a/client/src/pages/module.vue b/client/src/pages/module.vue index 375d0c9c..2e28907e 100644 --- a/client/src/pages/module.vue +++ b/client/src/pages/module.vue @@ -15,11 +15,14 @@ }, methods: { - ...mapActions(['scrollToAssignmentReady']), + ...mapActions(['scrollToAssignmentReady', 'scrollingToAssignment']), }, computed: { - ...mapGetters(['scrollToAssignmentId']), + ...mapGetters({ + scrollToAssignmentId: 'scrollToAssignmentId', + isScrollingToAssignment: 'scrollingToAssignment' + }), }, apollo: { @@ -34,35 +37,32 @@ data() { return { module: {}, - assignments: [], - isScrolling: false + assignments: [] } }, mounted () { this.$store.subscribe((mutation, state) => { - if (mutation.type === 'setScrollToAssignmentReady' && state.scrollToAssignmentReady && !this.isScrolling) { - this.isScrolling = true; - // this.$nextTick(() => { - let options = { - container: '#app', - easing: 'ease-in', - offset: -60, - force: true, - cancelable: true, - onStart: (element) => { - }, - onDone: (element) => { - this.scrollToAssignmentReady(false); - this.isScrolling = false; - }, - onCancel: function() { - // scrolling has been interrupted - }, - x: false, - y: true - }; + if (mutation.type === 'setScrollToAssignmentReady' && mutation.payload && !this.isScrollingToAssignment) { + this.scrollingToAssignment(true); + let options = { + container: '#app', + easing: 'ease', + offset: -60, + onStart: (element) => { + }, + onDone: (element) => { + this.scrollToAssignmentReady(false); + this.scrollingToAssignment(false); + }, + onCancel: function() { + // scrolling has been interrupted + }, + x: false, + y: true + }; + setTimeout(() => { this.$scrollTo(`#${this.scrollToAssignmentId.replace(/=/g, '')}`, 1000, options); - // }) + }, 250) } }) }, diff --git a/client/src/store/index.js b/client/src/store/index.js index 8908b699..2e444a39 100644 --- a/client/src/store/index.js +++ b/client/src/store/index.js @@ -27,7 +27,8 @@ export default new Vuex.Store({ }, vimeoId: null, scrollToAssignmentId: '', - scrollToAssignmentReady: false + scrollToAssignmentReady: false, + scrollingToAssignment: false }, getters: { @@ -39,6 +40,7 @@ export default new Vuex.Store({ }, scrollToAssignmentId: state => state.scrollToAssignmentId, scrollToAssignmentReady: state => state.scrollToAssignmentReady, + scrollingToAssignment: state => state.scrollingToAssignment, }, actions: { @@ -128,6 +130,16 @@ export default new Vuex.Store({ }, scrollToAssignmentReady({commit}, payload) { commit('setScrollToAssignmentReady', payload); + }, + scrollingToAssignment({commit, state, dispatch}, payload) { + if (payload && !state.scrollingToAssignment) { + commit('setScrollingToAssignment', true); + }; + + if (!payload && state.scrollingToAssignment) { + commit('setScrollingToAssignment', false); + dispatch('scrollToAssignmentId', ''); + } } }, @@ -188,6 +200,9 @@ export default new Vuex.Store({ }, setScrollToAssignmentReady(state, payload) { state.scrollToAssignmentReady = payload; + }, + setScrollingToAssignment(state, payload) { + state.scrollingToAssignment = payload; } } })