Skip to content
Snippets Groups Projects
Commit 98cdfb1b authored by Farbod Zamani's avatar Farbod Zamani Committed by Jan-Hendrik Willms
Browse files

Resolve "scroll position problem in Courseware's ribbon", fixes #467

parent d5746b24
No related branches found
No related tags found
No related merge requests found
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
class="cw-ribbon-tools" class="cw-ribbon-tools"
:class="{ unfold: toolsActive, 'cw-ribbon-tools-consume': consumeMode }" :class="{ unfold: toolsActive, 'cw-ribbon-tools-consume': consumeMode }"
> >
<div class="cw-ribbon-tool-content" ref="ribbonContent"> <div class="cw-ribbon-tool-content">
<div class="cw-ribbon-tool-content-nav"> <div class="cw-ribbon-tool-content-nav">
<ul> <ul>
<li <li
...@@ -33,9 +33,9 @@ ...@@ -33,9 +33,9 @@
</ul> </ul>
<button :title="textClose" class="cw-tools-hide-button" @click="$emit('deactivate')"></button> <button :title="textClose" class="cw-tools-hide-button" @click="$emit('deactivate')"></button>
</div> </div>
<div class="cw-ribbon-tool"> <div class="cw-ribbon-tool" ref="ribbonContent" @scroll="handleScroll">
<courseware-tools-contents v-if="showContents" /> <courseware-tools-contents v-if="showContents" />
<courseware-tools-blockadder v-if="showBlockAdder" @scrollTop="scrollTop"/> <courseware-tools-blockadder v-if="showBlockAdder" @scrollTop="scrollTop('blockadder')"/>
<courseware-tools-admin v-if="showAdmin" /> <courseware-tools-admin v-if="showAdmin" />
</div> </div>
</div> </div>
...@@ -63,7 +63,12 @@ export default { ...@@ -63,7 +63,12 @@ export default {
showContents: true, showContents: true,
showAdmin: false, showAdmin: false,
showBlockAdder: false, showBlockAdder: false,
textClose: this.$gettext('schließen') textClose: this.$gettext('schließen'),
scrollPos: {
contents: 0,
admin: 0,
blockadder: 0
}
}; };
}, },
computed: { computed: {
...@@ -107,15 +112,65 @@ export default { ...@@ -107,15 +112,65 @@ export default {
this.showBlockAdder = true; this.showBlockAdder = true;
break; break;
} }
this.updateScrollPos();
}, },
disableContainerAdder() { disableContainerAdder() {
if (this.containerAdder !== false) { if (this.containerAdder !== false) {
this.$store.dispatch('coursewareContainerAdder', false); this.$store.dispatch('coursewareContainerAdder', false);
} }
}, },
scrollTop() { scrollTop(tool) {
this.$refs.ribbonContent.scrollTop = 0; switch (tool) {
case 'contents':
this.$set(this.scrollPos, 'contents', 0);
break;
case 'admin':
this.$set(this.scrollPos, 'admin', 0);
break;
case 'blockadder':
this.$set(this.scrollPos, 'blockadder', 0);
break;
}
this.updateScrollPos();
},
handleScroll: function() {
if (this.timeout) {
clearTimeout(this.timeout);
} }
this.timeout = setTimeout(() => {
var currentScrollPos = this.$refs.ribbonContent.scrollTop;
if (this.showContents) {
this.$set(this.scrollPos, 'contents', currentScrollPos);
}
if (this.showAdmin) {
this.$set(this.scrollPos, 'admin', currentScrollPos);
}
if (this.showBlockAdder) {
this.$set(this.scrollPos, 'blockadder', currentScrollPos);
}
}, 100);
},
updateScrollPos() {
var scrollPos = 0;
if (this.showContents) {
scrollPos = this.scrollPos.contents;
}
if (this.showAdmin) {
scrollPos = this.scrollPos.admin;
}
if (this.showBlockAdder) {
scrollPos = this.scrollPos.blockadder;
}
this.$nextTick(function() {
$(this.$refs.ribbonContent).stop().animate({
scrollTop: scrollPos
}, 100);
});
}
},
mounted () {
this.updateScrollPos();
}, },
watch: { watch: {
adderStorage(newValue) { adderStorage(newValue) {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment