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
|
<template>
<div data-text-el="editor-outline" class="editor--outline" :class="{ 'editor--outline-mobile': mobile }">
<header class="editor--outline__header">
<h2>{{ t('text', 'Outline') }}</h2>
<NcButton type="tertiary" :aria-label="t('text', 'Close outline view')" @click="$outlineActions.toggle">
<template #icon>
<Close />
</template>
</NcButton>
</header>
<TableOfContents />
</div>
</template>
<script>
import debounce from 'debounce'
import { NcButton } from '@nextcloud/vue'
import TableOfContents from './TableOfContents.vue'
import { useOutlineStateMixin, useOutlineActions } from './Wrapper.provider.js'
import { Close } from './../icons.js'
import useStore from '../../mixins/store.js'
export default {
name: 'EditorOutline',
components: {
Close,
NcButton,
TableOfContents,
},
mixins: [useStore, useOutlineStateMixin, useOutlineActions],
data: () => ({
visible: false,
mobile: false,
}),
watch: {
'$store.getters.hasHeadings': 'setVisible',
},
mounted() {
this.$onResize = debounce(() => {
this.mobile = this.$el.parentElement.clientWidth < 320
}, 10)
this.$resizeObserver = new ResizeObserver(this.$onResize)
this.$resizeObserver.observe(this.$el.parentElement)
this.$onResize()
},
beforeDestroy() {
this.$resizeObserver.unobserve(this.$el.parentElement)
this.$resizeObserver = null
this.$onResize = null
},
methods: {
setVisible(val) {
this.visible = val
},
},
}
</script>
<style lang="scss" scoped>
.editor--outline {
width: 300px;
padding: 0 10px;
position: fixed;
top: 104px;
height: calc(100% - 100px);
overflow: auto;
&-mobile {
box-shadow: 8px 0 17px -19px var(--color-box-shadow);
background-color: var(--color-main-background-translucent);
z-index: 1;
}
}
.editor--outline__header {
margin: 0rem;
position: sticky;
padding: 10px;
display: flex;
height: 44px;
h2 {
font-size: 1rem;
margin-top: 13px;
flex-grow: 1;
}
}
</style>
|
