studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

fix comment problem

Browse source
This commit is contained in:
isUnknown 2024-11-27 17:51:49 +01:00
parent 16d57ec024
commit cca389f1b0
10 changed files with 128 additions and 545 deletions
Download patch file Download diff file Expand all files Collapse all files

224
src/components/project/brief/PdfViewer.vue
View file

@ -1,224 +0,0 @@
<template>
<Dialog
id="add-pdf"
v-model:visible="isOpen"
modal
:draggable="false"
header="Titre du PDF"
class="dialog"
:class="{ 'with-comments': isCommentsOpen }"
:closeOnEscape="true"
>
<template #header>
<button
v-if="
dialog.content.id === 'clientBrief' &&
dialog.content.isValidated !== true
"
class="btn"
@click="validate()"
>
Valider et envoyer le brief
</button>
<h2
class="font-serif text-lg"
:title="openedFile?.label.length ? openedFile.label : openedFile.name"
>
{{ openedFile?.label.length ? openedFile.label : openedFile.name }}
</h2>
</template>
<div id="vpv-container">
<VPdfViewer
:darkMode="true"
:initialThumbnailsVisible="true"
:src="openedFile.url"
local="fr_FR"
@loaded="onPdfLoaded"
/>
<button
id="toggle-comments"
:aria-pressed="isCommentsOpen"
class="btn btn--transparent btn--outline"
data-icon="comment"
@click="isCommentsOpen = !isCommentsOpen"
>
<span class="sr-only">Afficher les commentaires</span>
</button>
<Comments v-if="isCommentsOpen" @show-draft-marker="showDraftMarker" />
</div>
</Dialog>
</template>
<script setup>
import Dialog from "primevue/dialog";
import Comments from "../../comments/Comments.vue";
import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
import { ref, watch } from "vue";
import { useDialogStore } from "../../../stores/dialog";
import { useRoute, useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useApiStore } from "../../../stores/api";
const router = useRouter();
const route = useRoute();
const dialog = useDialogStore();
const api = useApiStore();
const { openedFile, comments } = storeToRefs(useDialogStore());
openedFile.value = route.query.fileIndex
? dialog.content.files[route.query.fileIndex]
: dialog.content.files[0];
const licenseKey = import.meta.env.VITE_VPV_LICENSE;
useLicense({ licenseKey });
const draftComment = ref(null);
const isOpen = ref(true);
watch(isOpen, (newValue) => {
router.push({ name: route.name });
});
console.log(route.query);
const isCommentsOpen = ref(
route.query.hasOwnProperty("comments") ? true : false
);
const currentPageIndex = ref(1);
watch(isCommentsOpen, (newVal) => {
if (newVal) {
setCommentMarkers();
} else {
removeCommentMarkers();
}
});
watch(openedFile, (newVal) => {
removeCommentMarkers();
if (newVal.comments) {
setCommentMarkers();
}
});
// Functions
const onPdfLoaded = () => {
const wrapper = document.querySelector(".vpv-pages-inner-container");
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry, index) => {
if (entry.intersectionRatio > 0.5) {
currentPageIndex.value = parseInt(
entry.target.getAttribute("aria-label").split(" ")[1]
);
}
});
},
{
root: wrapper,
threshold: [0.5],
}
);
const observePages = () => {
const pages = document.querySelectorAll(".vpv-page-inner-container");
pages.forEach((page) => {
if (!page.__observed__) {
observer.observe(page);
page.__observed__ = true;
}
});
};
const mutationObserver = new MutationObserver(() => {
observePages();
});
if (wrapper) {
mutationObserver.observe(wrapper, { childList: true, subtree: true });
}
observePages();
};
function setCommentMarkers() {
if (!comments.value) return;
comments.value.forEach((comment) => {
const bubble = document.createElement("a");
bubble.classList.add("comment-marker");
bubble.style.left = comment.position.x + "%";
bubble.style.top = comment.position.y + "%";
bubble.href = "#comment-" + comment.id;
const container = document.querySelector(
`.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
);
container.appendChild(bubble);
setTimeout(() => {
bubble.addEventListener("mouseenter", () => highlight(comment));
bubble.addEventListener("mouseleave", () => unhighlight(comment));
}, 100);
});
}
function highlight(comment) {
const target = document.querySelector("#comment-" + comment.id);
target.classList.add("highlight");
}
function unhighlight(comment) {
const target = document.querySelector("#comment-" + comment.id);
target.classList.remove("highlight");
}
function removeCommentMarkers() {
document.querySelectorAll(".comment-marker").forEach((bubble) => {
bubble.parentNode.removeChild(bubble);
});
}
function showDraftMarker(draftComment) {
const bubble = document.createElement("a");
bubble.classList.add("comment-marker");
bubble.classList.add("comment-marker--draft");
bubble.style.left = draftComment.position.x + "%";
bubble.style.top = draftComment.position.y + "%";
bubble.href = "#comment-" + draftComment.id;
const container = document.querySelector(
`.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
);
container.appendChild(bubble);
}
async function validate() {
const response = await api.validateBrief(
route.path + "/client-brief",
route.fullPath
);
if (response.success) {
dialog.content.isValidated = true;
} else {
console.alert(response);
}
}
</script>
<style>
#vpv-container {
width: var(--dialog-max-w);
height: calc(var(--dialog-max-h) - var(--dialog-header-h));
background: black;
position: relative;
}
.with-comments .vpv-pages-container-wrapper {
margin-right: var(--dialog-comments-w, 20rem);
}
</style>
<style scoped>
@import "../../../assets/css/src/2.blocks.pdf-viewer.css";
</style>