Second commit

2026-04-20 20:30:42 +02:00
parent 9f2578f7d2
commit 254a645c25
1072 changed files with 4491 additions and 17 deletions
--- a/frontend/app/components/viewer/content/Note.vue
+++ b/frontend/app/components/viewer/content/Note.vue
@@ -0,0 +1,171 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+// import { GetNote, GetContent } from '@/services/Content';
+const props = defineProps(['text', 'title', 'noteKey']);
+
+const noteContent = ref(null);
+
+const emitter = useEmitter();
+
+function gotoNote(){
+    // emitter.emit('goto-note', props.noteKey);
+}
+
+function closeNote(){
+    // emitter.emit('delete-note', props.noteKey);
+}
+
+
+/*
+onMounted(() => {
+    let content = GetContent();
+    let elements = noteContent.value.getElementsByTagName('a');
+    for(let i = 0, len = elements.length; i < len; i++) {
+        let link = elements[i].pathname.split('/').slice(1).join('');
+        link = decodeURIComponent(link);
+        if(content[link] !== undefined){
+            elements[i].onclick = function (event) {
+                event.preventDefault();
+                
+                GetNote(link, (result) => {
+                    emitter.emit("push-note", {key: link, text: "<h1>" + result.title + "</h1>" + result.html, title: result.title});
+                });
+                return false;
+            }
+        } else {
+            elements[i].classList.add("error-link");
+            elements[i].onclick = function (event) {
+                event.preventDefault();
+                return false;
+            }
+        }
+    }
+
+    setTimeout(() => setupCallout(), 0);
+});
+
+function closeNote(){
+    emitter.emit('delete-note', props.noteKey);
+}
+
+function gotoNote(){
+    // emitter.emit('goto-note', props.noteKey);
+}
+
+function toggleCallout() {
+  const outerBlock = this.parentElement;
+  outerBlock.classList.toggle("is-collapsed")
+  const collapsed = outerBlock.classList.contains("is-collapsed")
+  const height = collapsed ? this.scrollHeight : outerBlock.scrollHeight
+  outerBlock.style.maxHeight = height + "px"
+
+  // walk and adjust height of all parents
+  let current = outerBlock
+  let parent = outerBlock.parentElement
+  while (parent) {
+    if (!parent.classList.contains("callout")) {
+      return
+    }
+
+    const collapsed = parent.classList.contains("is-collapsed")
+    const height = collapsed ? parent.scrollHeight : parent.scrollHeight + current.scrollHeight
+    parent.style.maxHeight = height + "px"
+
+    current = parent
+    parent = parent.parentElement
+  }
+}
+
+function setupCallout() {
+  const collapsible = noteContent.value.getElementsByClassName(
+    `callout is-collapsible`,
+  );
+  for (const div of collapsible) {
+    const title = div.firstElementChild;
+
+    if (title) {
+      title.addEventListener("click", toggleCallout)
+
+      const collapsed = div.classList.contains("is-collapsed")
+      const height = collapsed ? title.scrollHeight : div.scrollHeight
+      div.style.maxHeight = height + "px"
+    }
+  }
+}
+*/
+
+
+</script>
+
+<template>
+<div class="note">
+    <div class="note-stunt" v-on:click="gotoNote">
+        <div class="close-button" v-on:click="closeNote">
+            <img class="icon" src="/icons/Pixelarticons/white/close.svg" alt="My Happy SVG"/>
+        </div>
+        <span>{{ title }}</span>
+    </div>
+    <div class="note-content-container">
+        <div class="note-content" ref="noteContent" v-html="text"></div>
+    </div>
+</div>
+</template>
+
+<style scoped>
+.note-stunt {
+    writing-mode: vertical-lr;
+    position: sticky;
+    top: 0px;
+    left: 0px;
+    bottom: 0px;
+    padding: 10px;
+    display: flex;
+    user-select: none;
+}
+
+.close-button {
+    height: 20px;
+    width: 20px;
+    margin-bottom: 5px;
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.note {
+    min-width: 700px;
+    max-width: 700px;
+    overflow-y: auto;
+
+    border-color: var(--note-border-color);
+    border-width: 0px;
+    border-right-width: 1px;
+    border-style: solid;
+    display: flex;
+
+    background-color: var(--background-color);
+    position: sticky;
+    top: 0px;
+}
+
+/* Contingut de cada nota */
+.note-content {
+    padding-bottom: 60px;
+    overflow-y: auto;
+}
+
+.note-content-container {
+    margin: 20px;
+}
+</style>
+
+<style>
+.note-content > h1 {
+    text-align: center;
+}
+
+.note-content  .katex-display {
+    max-width: 600px;
+}
+</style>