From c180aa94f53c2a002ae5bae3973bb7f721bf52ea Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 22 Jan 2024 16:16:04 +0100
Subject: [PATCH] Show sidebar only after clicking some highlighted text

---
 .../content-blocks/ContentComponent.vue       | 10 +++++++
 .../highlights/HighlightSidebar.vue           | 10 +++++--
 client/src/helpers/highlight-sidebar.ts       | 26 +++++++++++++++++++
 client/src/layouts/DefaultLayout.vue          |  3 ---
 4 files changed, 44 insertions(+), 5 deletions(-)
 create mode 100644 client/src/helpers/highlight-sidebar.ts

diff --git a/client/src/components/content-blocks/ContentComponent.vue b/client/src/components/content-blocks/ContentComponent.vue
index 305d0b12..335eab54 100644
--- a/client/src/components/content-blocks/ContentComponent.vue
+++ b/client/src/components/content-blocks/ContentComponent.vue
@@ -30,6 +30,7 @@ import { constructContentComponentBookmarkMutation } from '@/helpers/update-cont
 import { useMutation } from '@vue/apollo-composable';
 import { HighlightNode } from '@/__generated__/graphql';
 import * as Mark from 'mark.js';
+import highlightSidebar from '@/helpers/highlight-sidebar';
 
 export interface Props {
   component: any;
@@ -209,6 +210,14 @@ const markHighlights = () => {
     ];
     instance.markRanges(ranges, {
       className: `highlight highlight--${highlight.color}`,
+      each: (newMark) => {
+        newMark.dataset.id = highlight.id;
+        console.log(newMark);
+        newMark.addEventListener('click', () => {
+          console.log('clicked');
+          highlightSidebar.open();
+        });
+      },
     });
   }
 };
@@ -223,6 +232,7 @@ onMounted(() => {
 .highlight {
   background-color: Highlight;
   color: HighlightText;
+  cursor: pointer;
 
   &--alpha {
     background-color: var(--mark-alpha);
diff --git a/client/src/components/highlights/HighlightSidebar.vue b/client/src/components/highlights/HighlightSidebar.vue
index 517fcf39..6a680156 100644
--- a/client/src/components/highlights/HighlightSidebar.vue
+++ b/client/src/components/highlights/HighlightSidebar.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="highlight-sidebar">
-    <div class="highlight-sidebar__close-button">
+    <div
+      class="highlight-sidebar__close-button"
+      @click="close"
+    >
       <cross class="highlight-sidebar__close-icon" />
     </div>
     <div class="highlight-sidebar__section highlight-sidebar__highlight">
@@ -17,7 +20,7 @@
       <pre>{{ highlightMark?.clientHeight }}</pre>
     </div>
     <div class="highlight-sidebar__section highlight-sidebar__note">
-      <h2 class="b">Meine Notiz</h2>
+      <h2 class="heading-4">Meine Notiz</h2>
       <div class="form-with-border highlight-sidebar__note-form">
         <textarea
           class="borderless-textarea"
@@ -32,6 +35,9 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent, ref } from 'vue';
 
+const emits = defineEmits(['close']);
+const close = () => emits('close');
+
 const highlightMark = ref<HTMLElement | null>(null);
 
 const overflowing = computed(() => {
diff --git a/client/src/helpers/highlight-sidebar.ts b/client/src/helpers/highlight-sidebar.ts
new file mode 100644
index 00000000..dc5a3fc7
--- /dev/null
+++ b/client/src/helpers/highlight-sidebar.ts
@@ -0,0 +1,26 @@
+import { createApp } from 'vue';
+import HighlightSidebar from '@/components/highlights/HighlightSidebar.vue';
+import autoGrow from '@/directives/auto-grow';
+export default {
+  open() {
+    const app = document.getElementById('app');
+    const mountEl = document.createElement('div');
+    console.log(app);
+    app?.appendChild(mountEl);
+
+    const cleanUp = () => {
+      mountEl?.parentNode?.removeChild(mountEl);
+      sidebar.unmount();
+    };
+
+    const sidebar = createApp(HighlightSidebar, {
+      onClose() {
+        cleanUp();
+      },
+    });
+
+    sidebar.directive('auto-grow', autoGrow); // todo: can this be done a different way? maybe use this declaration inside the component itself
+
+    sidebar.mount(mountEl);
+  },
+};
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index 68477d85..7efdece2 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -5,7 +5,6 @@
   >
     <navigation-sidebar />
     <profile-sidebar />
-    <highlight-sidebar />
     <header-bar
       class="header layout__header"
       v-if="showHeader"
@@ -28,7 +27,6 @@ import HeaderBar from '@/components/HeaderBar.vue';
 import ProfileSidebar from '@/components/profile/ProfileSidebar.vue';
 import DynamicFooter from '@/layouts/DynamicFooter.vue';
 import NavigationSidebar from '@/components/book-navigation/NavigationSidebar.vue';
-import HighlightSidebar from '@/components/highlights/HighlightSidebar.vue';
 
 export default {
   components: {
@@ -36,7 +34,6 @@ export default {
     ProfileSidebar,
     NavigationSidebar,
     DynamicFooter,
-    HighlightSidebar,
   },
 
   computed: {