138 lines
3.8 KiB
JavaScript
138 lines
3.8 KiB
JavaScript
import { defineStore } from "pinia";
|
|
import { ref, computed, watch } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
|
|
export const useDialogStore = defineStore("dialog", () => {
|
|
const content = ref(null);
|
|
const openedFile = ref(null);
|
|
|
|
const comments = computed(() => {
|
|
return openedFile.value.comments;
|
|
});
|
|
|
|
function updateFile(newFile) {
|
|
console.log(newFile);
|
|
openedFile.value = newFile;
|
|
|
|
// if (!content.value.files) return;
|
|
// content.value.files = content.value.files.map((file) =>
|
|
// file.id === newFile.id ? newFile : file
|
|
// );
|
|
}
|
|
|
|
const route = useRoute();
|
|
const isCommentsOpen = ref(
|
|
route.query.hasOwnProperty("comments") ? true : false
|
|
);
|
|
|
|
const draftComment = ref({});
|
|
watch(
|
|
draftComment,
|
|
(newVal) => {
|
|
if (draftComment.value.position) showDraftMarker(newVal);
|
|
},
|
|
{ deep: true }
|
|
);
|
|
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 = draftComment.position.pageIndex
|
|
? document.querySelector(
|
|
`.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
|
|
)
|
|
: document.querySelector(".track");
|
|
|
|
container.appendChild(bubble);
|
|
}
|
|
|
|
const isViewerDisabled = ref(false);
|
|
watch(isCommentsOpen, (newVal) => {
|
|
if (newVal) {
|
|
setCommentMarkers();
|
|
} else {
|
|
removeCommentMarkers();
|
|
}
|
|
});
|
|
watch(openedFile, () => {
|
|
removeCommentMarkers();
|
|
if (isCommentsOpen.value) {
|
|
setCommentMarkers();
|
|
}
|
|
});
|
|
watch(openedFile, (newVal, oldVal) => {
|
|
if (!isCommentsOpen.value || !oldVal || newVal.url == oldVal.url) return;
|
|
|
|
isViewerDisabled.value = true;
|
|
|
|
setTimeout(() => {
|
|
isViewerDisabled.value = false;
|
|
removeCommentMarkers();
|
|
if (newVal.comments) {
|
|
setCommentMarkers();
|
|
}
|
|
}, 100);
|
|
});
|
|
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;
|
|
|
|
let container = comment.position?.pageIndex
|
|
? document.querySelector(
|
|
`.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
|
|
)
|
|
: document.querySelector(".track");
|
|
|
|
const timeOut = container ? 0 : 500;
|
|
setTimeout(() => {
|
|
container = comment.position?.pageIndex
|
|
? document.querySelector(
|
|
`.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
|
|
)
|
|
: document.querySelector(".track");
|
|
|
|
container.appendChild(bubble);
|
|
|
|
setTimeout(() => {
|
|
bubble.addEventListener("mouseenter", () => highlight(comment));
|
|
bubble.addEventListener("mouseleave", () => unhighlight(comment));
|
|
}, 100);
|
|
}, timeOut);
|
|
});
|
|
}
|
|
|
|
function removeCommentMarkers() {
|
|
document.querySelectorAll(".comment-marker").forEach((bubble) => {
|
|
bubble.parentNode.removeChild(bubble);
|
|
});
|
|
}
|
|
|
|
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");
|
|
}
|
|
|
|
return {
|
|
content,
|
|
openedFile,
|
|
comments,
|
|
draftComment,
|
|
isCommentsOpen,
|
|
updateFile,
|
|
};
|
|
});
|