ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add highlight content to sidebar

This commit is contained in:
Ramon Wenger 2024-01-23 11:02:03 +01:00
parent f905d6bbc0
commit 57cac25c6f
3 changed files with 10 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/content-blocks/ContentComponent.vue
View File

@ -214,7 +214,7 @@ const markHighlights = () => {
console.log(newMark); console.log(newMark);
newMark.addEventListener('click', () => { newMark.addEventListener('click', () => {
console.log('clicked'); console.log('clicked');
highlightSidebar.open(); highlightSidebar.open(highlight);
}); });
}, },
}); });

23
client/src/components/highlights/HighlightSidebar.vue
View File

@ -10,14 +10,14 @@
<h2 class="heading-4">Meine Markierung</h2> <h2 class="heading-4">Meine Markierung</h2>
<mark <mark
class="paragraph highlight-sidebar__highlighted-text" class="paragraph highlight-sidebar__highlighted-text"
:class="[`highlight--${highlight.color}`]"
ref="highlightMark" ref="highlightMark"
> >
hier ist ein bischen mehr text blabla blabla bla blabla blabla bla bla blabla blabla bla blabla blabla bla bla {{ highlight.text }}
noch mehr text noch mehr text
</mark> </mark>
</div> </div>
<div class="highlight-sidebar__section highlight-sidebar__note"> <div class="highlight-sidebar__section highlight-sidebar__note">
<h2 class="heading-4">Meine Notiz {{ id }}</h2> <h2 class="heading-4">Meine Notiz</h2>
<div class="form-with-border highlight-sidebar__note-form"> <div class="form-with-border highlight-sidebar__note-form">
<textarea <textarea
class="borderless-textarea" class="borderless-textarea"
@ -31,9 +31,10 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, defineAsyncComponent, ref } from 'vue'; import { HighlightNode } from '@/__generated__/graphql';
import { defineAsyncComponent, ref } from 'vue';
export interface Props { export interface Props {
id: string; highlight: HighlightNode;
} }
const emits = defineEmits(['close']); const emits = defineEmits(['close']);
@ -43,18 +44,6 @@ defineProps<Props>();
const highlightMark = ref<HTMLElement | null>(null); const highlightMark = ref<HTMLElement | null>(null);
const overflowing = computed(() => {
const element = highlightMark.value;
if (element) {
console.log('element is here');
console.log(element.scrollHeight);
console.log(element.clientHeight);
console.log(element.scrollHeight > element.clientHeight);
return element.scrollHeight > element.clientHeight;
}
return false;
});
const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vue')); const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vue'));
</script> </script>

5
client/src/helpers/highlight-sidebar.ts
View File

@ -1,11 +1,11 @@
import { createApp } from 'vue'; import { createApp } from 'vue';
import HighlightSidebar from '@/components/highlights/HighlightSidebar.vue'; import HighlightSidebar from '@/components/highlights/HighlightSidebar.vue';
import autoGrow from '@/directives/auto-grow'; import autoGrow from '@/directives/auto-grow';
import { HighlightNode } from '@/__generated__/graphql';
export default { export default {
open() { open(highlight: HighlightNode) {
const app = document.getElementById('app'); const app = document.getElementById('app');
const mountEl = document.createElement('div'); const mountEl = document.createElement('div');
console.log(app);
app?.appendChild(mountEl); app?.appendChild(mountEl);
const cleanUp = () => { const cleanUp = () => {
@ -14,6 +14,7 @@ export default {
}; };
const sidebar = createApp(HighlightSidebar, { const sidebar = createApp(HighlightSidebar, {
highlight,
onClose() { onClose() {
cleanUp(); cleanUp();
}, },