442 lines
12 KiB
Vue
442 lines
12 KiB
Vue
<template>
|
|
<aside id="comments-container" aria-labelledby="comments-label">
|
|
<h2 id="comments-label" class="sr-only">Commentaires</h2>
|
|
<div
|
|
class="comments | flow"
|
|
:class="{ empty: !comments || comments.length === 0 }"
|
|
>
|
|
<template v-if="comments">
|
|
<template v-if="!openedComment">
|
|
<Comment
|
|
v-for="(comment, commentIndex) in sortedComments"
|
|
:comment="comment"
|
|
:commentIndex="comments.length - commentIndex"
|
|
:key="comment.id"
|
|
@click="openComment(comment)"
|
|
@update:file="changeFile"
|
|
@close:comment="closeComment"
|
|
/>
|
|
</template>
|
|
<template v-else>
|
|
<button
|
|
class="btn | justify-start w-full | bg-white-10 text-white | px-8"
|
|
data-icon="chevron-single-left"
|
|
@click="
|
|
openedComment = null;
|
|
isAddOpen = false;
|
|
"
|
|
>
|
|
<span>Retour à la liste</span>
|
|
</button>
|
|
<Comment
|
|
:comment="openedComment"
|
|
data-opened="true"
|
|
@update:file="changeFile"
|
|
@close:comment="closeComment"
|
|
/>
|
|
<div v-if="sortedReplies.length > 0" class="replies | flow">
|
|
<Comment
|
|
v-for="(reply, commentIndex) in sortedReplies"
|
|
:comment="reply"
|
|
:commentIndex="sortedReplies.length - commentIndex"
|
|
:key="reply.id"
|
|
@update:file="changeFile"
|
|
@close:comment="closeComment"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
<button
|
|
v-if="!openedComment && !isAddOpen"
|
|
id="create-comment"
|
|
class="btn btn--white-20 | w-full"
|
|
@click="toggleCommentPositionMode(true)"
|
|
>
|
|
Ajouter un commentaire
|
|
</button>
|
|
<button
|
|
v-else-if="openedComment && !isAddOpen"
|
|
id="reply-comment"
|
|
class="btn btn--white-20 | justify-start w-full | text-white-50"
|
|
@click="isAddOpen = true"
|
|
>
|
|
Répondre…
|
|
</button>
|
|
<!-- TODO: afficher #new-comment une fois le bouton Ajouter un commentaire cliqué -->
|
|
<div
|
|
v-if="waitingForCommentPosition"
|
|
id="new-comment"
|
|
class="bg-primary | text-sm text-white | rounded-lg | p-12"
|
|
>
|
|
<p class="flex justify-start | mb-12" data-icon="comment">
|
|
<strong>Nouveau commentaire</strong>
|
|
</p>
|
|
<p>
|
|
Dans la zone du contenu, cliquez où vous souhaitez positionner le
|
|
commentaire
|
|
</p>
|
|
</div>
|
|
<form
|
|
v-if="isAddOpen"
|
|
action=""
|
|
method="post"
|
|
class="flow | p-12 | rounded-xl"
|
|
@submit="handleSubmit"
|
|
>
|
|
<label class="sr-only" for="comment">Votre commentaire</label>
|
|
<textarea
|
|
name="comment"
|
|
id="comment"
|
|
placeholder="Ajouter un commentaire…"
|
|
rows="5"
|
|
class="text-sm | rounded-lg bg-black p-12"
|
|
v-model="draftComment.text"
|
|
></textarea>
|
|
<footer class="flex">
|
|
<input type="submit" class="btn btn--tranparent" />
|
|
<button class="btn btn--white-10" @click="isAddOpen = false">
|
|
Annuler
|
|
</button>
|
|
</footer>
|
|
</form>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup>
|
|
import dayjs from "dayjs";
|
|
import "dayjs/locale/fr";
|
|
import uniqid from "uniqid";
|
|
import { watch, ref, computed } from "vue";
|
|
import { useUserStore } from "../../stores/user";
|
|
import { usePageStore } from "../../stores/page";
|
|
import { useApiStore } from "../../stores/api";
|
|
import { useDialogStore } from "../../stores/dialog";
|
|
import Comment from "./Comment.vue";
|
|
import { storeToRefs } from "pinia";
|
|
import { useRoute } from "vue-router";
|
|
|
|
dayjs.locale("fr");
|
|
|
|
const { user } = useUserStore();
|
|
const { page } = usePageStore();
|
|
const dialog = useDialogStore();
|
|
const { comments, openedFile, draftComment, activeTracks, isEditCommentMode } =
|
|
storeToRefs(useDialogStore());
|
|
const api = useApiStore();
|
|
|
|
const openedComment = ref(null);
|
|
|
|
const isAddOpen = ref(false);
|
|
const route = useRoute();
|
|
const waitingForCommentPosition = ref(false);
|
|
|
|
const sortedComments = computed(() => {
|
|
return [...comments.value].reverse();
|
|
});
|
|
const sortedReplies = ref(null);
|
|
|
|
watch(openedComment, (newVal) => {
|
|
sortedReplies.value = newVal ? newVal.replies.slice().reverse() : null;
|
|
});
|
|
|
|
watch(isAddOpen, (newVal) => {
|
|
if (newVal) {
|
|
setTimeout(() => {
|
|
document.querySelector("textarea#comment").focus();
|
|
}, 100);
|
|
}
|
|
});
|
|
|
|
const viewContainer =
|
|
openedFile.value.type === "document"
|
|
? document.querySelector(".vpv-pages-inner-container")
|
|
: document.querySelector(".track");
|
|
|
|
window.addEventListener("keydown", (event) => {
|
|
if (
|
|
isAddOpen.value &&
|
|
event.key === "Enter" &&
|
|
(event.metaKey || event.ctrlKey)
|
|
) {
|
|
handleSubmit();
|
|
}
|
|
});
|
|
|
|
// Functions
|
|
function handleSubmit(event = null) {
|
|
if (event) {
|
|
event.preventDefault();
|
|
}
|
|
const date = dayjs().format();
|
|
const newComment = {
|
|
dialogUri: route.fullPath,
|
|
fileName: openedFile.value ? openedFile.value.name : false,
|
|
userUuid: user.uuid,
|
|
text: draftComment.value.text,
|
|
date,
|
|
position: {
|
|
pageIndex: openedComment.value
|
|
? openedComment.value.position.pageIndex
|
|
: draftComment.value.position.pageIndex,
|
|
x: openedComment.value ? false : draftComment.value.position.x,
|
|
y: openedComment.value ? false : draftComment.value.position.y,
|
|
},
|
|
id: uniqid(),
|
|
};
|
|
if (openedComment.value) {
|
|
replyComment(newComment);
|
|
} else {
|
|
addComment(newComment);
|
|
}
|
|
}
|
|
|
|
async function replyComment(newComment) {
|
|
newComment.parentId = openedComment.value.id;
|
|
const matchFileParentUri = openedComment.value.location.file.url.match(
|
|
/projects\/.*?(?=\/[^/]+\/[^/]+$)/
|
|
);
|
|
newComment.fileParentUri = matchFileParentUri ? matchFileParentUri[0] : null;
|
|
const newFile = await api.replyComment(newComment);
|
|
resetDraftComment();
|
|
isAddOpen.value = false;
|
|
dialog.updateFile(newFile);
|
|
openedComment.value = newFile.comments.find(
|
|
(item) => item.id === openedComment.value.id
|
|
);
|
|
}
|
|
|
|
async function addComment(newComment) {
|
|
const matchFileParentUri = openedFile.value.url.match(
|
|
/projects\/.*?(?=\/[^/]+\/[^/]+$)/
|
|
);
|
|
newComment.fileParentUri = matchFileParentUri ? matchFileParentUri[0] : null;
|
|
const newFile = await api.addComment(newComment);
|
|
resetDraftComment();
|
|
isAddOpen.value = false;
|
|
dialog.updateFile(newFile);
|
|
activeTracks.value = activeTracks.value.map((track) => {
|
|
if (track.files) {
|
|
track.files = track.files.map((file) =>
|
|
file.uuid === newFile.uuid ? newFile : file
|
|
);
|
|
}
|
|
return track;
|
|
});
|
|
}
|
|
|
|
function resetDraftComment() {
|
|
draftComment.value.text = "";
|
|
draftComment.value.position = null;
|
|
draftComment.value.padeIndex = null;
|
|
}
|
|
|
|
function closeComment() {
|
|
openedComment.value = null;
|
|
}
|
|
|
|
function toggleCommentPositionMode(enable) {
|
|
if (enable) {
|
|
waitingForCommentPosition.value = true;
|
|
viewContainer.classList.add("waiting-comment");
|
|
viewContainer.addEventListener("click", handleCommentPositionClick);
|
|
} else {
|
|
waitingForCommentPosition.value = false;
|
|
viewContainer.classList.remove("waiting-comment");
|
|
viewContainer.removeEventListener("click", handleCommentPositionClick);
|
|
}
|
|
}
|
|
|
|
function handleCommentPositionClick(event) {
|
|
if (openedFile.value.type === "document") {
|
|
prepareDraftCommentInPdf(event);
|
|
} else {
|
|
prepareDraftCommentInImage(event);
|
|
}
|
|
isAddOpen.value = true;
|
|
toggleCommentPositionMode(false);
|
|
}
|
|
|
|
function prepareDraftCommentInPdf(event) {
|
|
const pageContainer = event.target.closest(".page-inner-container");
|
|
if (!pageContainer || !viewContainer) return;
|
|
|
|
const pageLabel = pageContainer
|
|
.closest(".vpv-page-inner-container")
|
|
.getAttribute("aria-label");
|
|
const pageIndex = pageLabel.charAt(pageLabel.length - 1);
|
|
|
|
const viewRect = viewContainer.getBoundingClientRect();
|
|
const pageRect = pageContainer.getBoundingClientRect();
|
|
const pageScroll = viewRect.top - pageRect.top;
|
|
|
|
const mouseTop = event.clientY;
|
|
const y = mouseTop - viewRect.top + pageScroll;
|
|
const x = event.clientX - pageRect.left;
|
|
|
|
const relativeX = (x / pageRect.width) * 100;
|
|
const relativeY = (y / pageRect.height) * 100;
|
|
|
|
console.log(pageIndex);
|
|
|
|
draftComment.value.position = {
|
|
x: relativeX,
|
|
y: relativeY,
|
|
pageIndex: parseInt(pageIndex),
|
|
};
|
|
}
|
|
|
|
function prepareDraftCommentInImage(event) {
|
|
if (!viewContainer) return;
|
|
|
|
const imageRect = viewContainer.getBoundingClientRect();
|
|
|
|
const mouseTop = event.clientY;
|
|
const mouseLeft = event.clientX;
|
|
|
|
const relativeX = ((mouseLeft - imageRect.left) / imageRect.width) * 100;
|
|
const relativeY = ((mouseTop - imageRect.top) / imageRect.height) * 100;
|
|
|
|
draftComment.value.position = {
|
|
x: relativeX,
|
|
y: relativeY,
|
|
};
|
|
}
|
|
|
|
function openComment(comment) {
|
|
if (isEditCommentMode.value) return;
|
|
|
|
openedComment.value = comment;
|
|
|
|
if (activeTracks?.value.length === 1) {
|
|
openedFile.value = activeTracks.value[0].files.find(
|
|
(file) => file.uuid === openedComment.value.location.file.uuid
|
|
);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* Comments */
|
|
#toggle-comments {
|
|
position: absolute;
|
|
right: var(--space-16);
|
|
bottom: var(--space-16);
|
|
padding: 0.625rem;
|
|
}
|
|
#comments-container {
|
|
background-color: black;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 4.5rem;
|
|
width: var(--dialog-comments-w);
|
|
padding: var(--space-24) var(--space-32);
|
|
}
|
|
.comments {
|
|
scroll-behavior: smooth;
|
|
overflow-y: auto;
|
|
height: calc(100% - 3.5rem);
|
|
margin-bottom: 1rem;
|
|
margin-right: -2rem;
|
|
padding-right: 2rem;
|
|
}
|
|
.comments.empty::after {
|
|
content: "Partagez vos idées en ajoutant des commentaires";
|
|
height: 100%;
|
|
display: grid;
|
|
place-items: center;
|
|
text-align: center;
|
|
max-width: 24ch;
|
|
margin: auto;
|
|
font-size: var(--text-sm);
|
|
color: var(--color-grey-400);
|
|
}
|
|
.comments.empty::before {
|
|
--icon-size: 1.25rem;
|
|
--icon-color: var(--color-white);
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, calc(-50% - 4.5rem));
|
|
width: var(--icon-size);
|
|
height: var(--icon-size);
|
|
background: var(--icon-color, currentColor);
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
mask-size: var(--icon-size);
|
|
mask-image: var(--icon-comment);
|
|
}
|
|
#new-comment {
|
|
position: absolute;
|
|
bottom: var(--space-24);
|
|
left: var(--space-32);
|
|
right: var(--space-32);
|
|
}
|
|
#new-comment [data-icon] {
|
|
--column-gap: var(--space-12);
|
|
font-weight: 500;
|
|
}
|
|
#comments-container form {
|
|
--flow-space: 0.5rem;
|
|
flex-direction: column;
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
bottom: 5.5rem;
|
|
background: #333;
|
|
}
|
|
#comments-container textarea {
|
|
position: sticky;
|
|
bottom: 0;
|
|
margin: 0;
|
|
resize: none;
|
|
background: none;
|
|
padding: 0;
|
|
color: var(--color-white);
|
|
}
|
|
#comments-container textarea:focus {
|
|
outline: none;
|
|
}
|
|
::placeholder {
|
|
color: var(--color-white-50);
|
|
}
|
|
#comments-container form footer {
|
|
gap: var(--space-12);
|
|
}
|
|
#comments-container form footer > * {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.track.waiting-comment,
|
|
.track.waiting-comment .drag-zone,
|
|
.vpv-pages-inner-container.waiting-comment .page-inner-container,
|
|
.vpv-pages-inner-container.waiting-comment .vpv-text-layer-text,
|
|
.vpv-pages-inner-container.waiting-comment .vpv-text-layer-wrapper {
|
|
cursor: var(--icon-comment-cursor) -2 28, cell !important;
|
|
}
|
|
|
|
.comment-marker {
|
|
--marker-size: 1.75rem;
|
|
position: absolute;
|
|
display: block;
|
|
width: var(--marker-size);
|
|
height: var(--marker-size);
|
|
background: var(--icon-comment-default) no-repeat center / contain;
|
|
cursor: pointer !important;
|
|
z-index: 999;
|
|
overflow: visible;
|
|
transition: transform 0.1s ease-out;
|
|
transform-origin: bottom left;
|
|
margin-left: calc(var(--marker-size) * -0.025);
|
|
margin-top: calc(var(--marker-size) / -1.025);
|
|
}
|
|
.comment-marker:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
.comment-marker.active,
|
|
.comment-marker:focus {
|
|
background-image: var(--icon-comment-focus);
|
|
}
|
|
</style>
|