171 lines
4.0 KiB
Vue
171 lines
4.0 KiB
Vue
<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> |