comment 360 working
This commit is contained in:
parent
bc0ae8861f
commit
4daaa3dc88
8 changed files with 134 additions and 91 deletions
|
|
@ -202,6 +202,10 @@ async function replyComment(newComment) {
|
|||
}
|
||||
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -36,35 +36,6 @@ const { openedFile, isCommentsOpen, comments, draftComment } = storeToRefs(
|
|||
useDialogStore()
|
||||
);
|
||||
|
||||
const isViewerDisabled = ref(false);
|
||||
|
||||
watch(openedFile, () => {
|
||||
removeCommentMarkers();
|
||||
setCommentMarkers();
|
||||
});
|
||||
|
||||
watch(isCommentsOpen, (newVal) => {
|
||||
if (newVal) {
|
||||
setCommentMarkers();
|
||||
} else {
|
||||
removeCommentMarkers();
|
||||
}
|
||||
});
|
||||
|
||||
watch(openedFile, (newVal, oldVal) => {
|
||||
if (newVal.url === oldVal.url) return;
|
||||
|
||||
isViewerDisabled.value = true;
|
||||
|
||||
setTimeout(() => {
|
||||
isViewerDisabled.value = false;
|
||||
removeCommentMarkers();
|
||||
if (newVal.comments) {
|
||||
setCommentMarkers();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
const currentPageIndex = ref(1);
|
||||
|
||||
// Functions
|
||||
|
|
@ -107,46 +78,6 @@ const onPdfLoaded = () => {
|
|||
|
||||
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`
|
||||
);
|
||||
|
||||
console.log(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);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue