1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<template>
<div :class="{ 'cw-ribbon-wrapper-consume': consumeMode }">
<div v-if="stickyRibbon" class="cw-ribbon-sticky-top"></div>
<header class="cw-ribbon" :class="{ 'cw-ribbon-sticky': stickyRibbon, 'cw-ribbon-consume': consumeMode }">
<div class="cw-ribbon-wrapper-left">
<nav class="cw-ribbon-nav">
<slot name="buttons" />
</nav>
<nav class="cw-ribbon-breadcrumb">
<ul>
<slot v-if="breadcrumbFallback" name="breadcrumbFallback" />
<slot v-else name="breadcrumbList" />
</ul>
</nav>
</div>
<div class="cw-ribbon-wrapper-right">
<button
class="cw-ribbon-button cw-ribbon-button-menu"
:title="textRibbon.toolbar"
@click="activeToolbar"
>
</button>
<button
ref="consumeModeSwitch"
class="cw-ribbon-button"
:class="[consumeMode ? 'cw-ribbon-button-zoom-out' : 'cw-ribbon-button-zoom']"
:title="consumeMode ? textRibbon.fullscreen_off : textRibbon.fullscreen_on"
@click="toggleConsumeMode"
>
</button>
<slot name="menu" />
</div>
<div v-if="consumeMode" class="cw-ribbon-consume-bottom"></div>
<courseware-ribbon-toolbar
v-if="showTools"
:toolsActive="unfold"
:class="{ 'cw-ribbon-tools-sticky': stickyRibbon }"
:canEdit="canEdit"
@deactivate="deactivateToolbar"
/>
</header>
<div v-if="stickyRibbon" class="cw-ribbon-sticky-bottom"></div>
<div v-if="stickyRibbon" class="cw-ribbon-sticky-spacer"></div>
</div>
</template>
<script>
import CoursewareRibbonToolbar from './CoursewareRibbonToolbar.vue';
export default {
name: 'courseware-ribbon',
components: {
CoursewareRibbonToolbar,
},
props: {
canEdit: Boolean,
},
data() {
return {
readModeActive: false,
stickyRibbon: false,
textRibbon: {
toolbar: this.$gettext('Inhaltsverzeichnis'),
fullscreen_on: this.$gettext('Vollbild einschalten'),
fullscreen_off: this.$gettext('Vollbild ausschalten'),
},
unfold: false,
showTools: false,
};
},
computed: {
consumeMode() {
return this.$store.getters.consumeMode;
},
toolsActive() {
return this.$store.getters.showToolbar;
},
breadcrumbFallback() {
return window.outerWidth < 1200;
},
},
methods: {
toggleConsumeMode() {
if (!this.consumeMode) {
this.$store.dispatch('coursewareConsumeMode', true);
this.$store.dispatch('coursewareSelectedToolbarItem', 'contents');
this.$store.dispatch('coursewareViewMode', 'read');
} else {
this.$store.dispatch('coursewareConsumeMode', false);
}
},
activeToolbar() {
this.$store.dispatch('coursewareShowToolbar', true);
},
deactivateToolbar() {
this.$store.dispatch('coursewareShowToolbar', false);
},
handleScroll() {
if (window.outerWidth > 767) {
this.stickyRibbon = window.scrollY > 130;
} else {
this.stickyRibbon = window.scrollY > 75;
}
},
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
watch: {
toolsActive(newState, oldState) {
let view = this;
if(newState) {
this.showTools = true;
setTimeout(() => {view.unfold = true}, 10);
} else {
this.unfold = false;
setTimeout(() => {
if(!view.toolsActive) {
view.showTools = false;
}
}, 800);
}
},
consumeMode(newState) {
this.$refs.consumeModeSwitch.focus();
}
}
};
</script>
|
