442 lines
12 KiB
JavaScript
442 lines
12 KiB
JavaScript
|
import apis from "~/apis/tahrirApi";
|
|||
|
|
// import tinyTahrir from "assets/tahrir/vendors/tinymce-files/tinytahrir";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
created() {
|
|||
|
|
this.httpService = useNuxtApp()["$http"];
|
|||
|
|
},
|
|||
|
|
// beforeMount() {
|
|||
|
|
// this.commentHttpService = new HttpService(
|
|||
|
|
// import.meta.env.VITE_TAHRIR_BASE_URL
|
|||
|
|
// );
|
|||
|
|
// },
|
|||
|
|
destroyed() {
|
|||
|
|
// window.removeEventListener("scroll", this.handleScroll);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
id: "",
|
|||
|
|
|
|||
|
|
comments: [],
|
|||
|
|
newComment: false,
|
|||
|
|
selectedText: null,
|
|||
|
|
globalGuid: undefined,
|
|||
|
|
paragraphId: undefined,
|
|||
|
|
paragraphParentId: undefined,
|
|||
|
|
commentHttpService: undefined,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/*
|
|||
|
|
open comment form when user select a text
|
|||
|
|
*/
|
|||
|
|
onMouseUp($event) {
|
|||
|
|
// Get selected text and encode it
|
|||
|
|
const selection = encodeURIComponent(
|
|||
|
|
this.getSelected().toString()
|
|||
|
|
).replace(/[!'()*]/g);
|
|||
|
|
|
|||
|
|
if (selection) {
|
|||
|
|
this.selectedText = selection;
|
|||
|
|
|
|||
|
|
this.setParagraphId($event);
|
|||
|
|
// this.createPopup($event);
|
|||
|
|
this.saveSelectedTextComment($event);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/*
|
|||
|
|
extract user selected text
|
|||
|
|
*/
|
|||
|
|
getSelected() {
|
|||
|
|
if (window.getSelection) {
|
|||
|
|
return window.getSelection();
|
|||
|
|
} else if (document.getSelection) {
|
|||
|
|
return document.getSelection();
|
|||
|
|
} else {
|
|||
|
|
var selection = document.selection && document.selection.createRange();
|
|||
|
|
if (selection.text) {
|
|||
|
|
return selection.text;
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
setParagraphId(ev) {
|
|||
|
|
this.paragraphId = ev.target.id;
|
|||
|
|
this.paragraphParentId = ev.target.parentNode?.id;
|
|||
|
|
},
|
|||
|
|
/*
|
|||
|
|
create comment popup and place it on top fo the selected text;
|
|||
|
|
*/
|
|||
|
|
createPopup(event) {
|
|||
|
|
// this.openCommentForm();
|
|||
|
|
// Get cursor position
|
|||
|
|
// const posX = event.clientX - 130;
|
|||
|
|
// const posY = event.clientY - 200;
|
|||
|
|
// const posX = event.clientX;
|
|||
|
|
// const posY = event.clientY;
|
|||
|
|
// try {
|
|||
|
|
// this.$refs.popupMenu.$el.style.top = posY + "px";
|
|||
|
|
// this.$refs.popupMenu.$el.style.left = posX + "px";
|
|||
|
|
// this.$refs.popupMenu.$el.style.opacity = 1;
|
|||
|
|
// }
|
|||
|
|
// catch(err) {
|
|||
|
|
// setTimeout(() => {
|
|||
|
|
// this.$refs.popupMenu.$el.style.top = posY + "px";
|
|||
|
|
// this.$refs.popupMenu.$el.style.left = posX + "px";
|
|||
|
|
// this.$refs.popupMenu.$el.style.opacity = 1;
|
|||
|
|
// }, 700);
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
openCommentForm() {
|
|||
|
|
this.newComment = true;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
summary: save selected text
|
|||
|
|
|
|||
|
|
description: replace selected text with the new span.tcomment tag and then save it.
|
|||
|
|
send a new request to api for saving the comment.
|
|||
|
|
then update/replace paragraph content with newely created content.
|
|||
|
|
then crawle all paragraphs for .tcomment ids.
|
|||
|
|
then request api for paragraphs comments.
|
|||
|
|
|
|||
|
|
@fires when user clicked on comment popup save button.
|
|||
|
|
@param {userComment} Html user comment.
|
|||
|
|
@return void.
|
|||
|
|
*/
|
|||
|
|
saveSelectedTextComment(userComment) {
|
|||
|
|
const url = tahrirUrl()+ apis.comments.addCommentToSelectedParag;
|
|||
|
|
const replacedContent = this.replaceSelectedText();
|
|||
|
|
|
|||
|
|
const payload = {
|
|||
|
|
content: replacedContent,
|
|||
|
|
guid: this.paragraphId,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
this.commentHttpService
|
|||
|
|
.formDataRequest(url, payload)
|
|||
|
|
.then((res) => {
|
|||
|
|
this.newComment = false;
|
|||
|
|
|
|||
|
|
this.addComment(
|
|||
|
|
{
|
|||
|
|
text: userComment,
|
|||
|
|
pid: this.globalGuid,
|
|||
|
|
},
|
|||
|
|
replacedContent
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
mySwalToast({
|
|||
|
|
html: err?.message,
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.finally(() => (this.loading = false));
|
|||
|
|
},
|
|||
|
|
/*
|
|||
|
|
summary: save comment
|
|||
|
|
|
|||
|
|
description:
|
|||
|
|
send a new request to api for saving the comment.
|
|||
|
|
then update/replace paragraph content with newely created content.
|
|||
|
|
then crawle all paragraphs for .tcomment ids.
|
|||
|
|
then request api for paragraphs comments.
|
|||
|
|
|
|||
|
|
@fires when saveSelectedTextComment method completed...
|
|||
|
|
|
|||
|
|
@param {text} String user comment.
|
|||
|
|
@param {pid} String globalGuid.
|
|||
|
|
@param {replacedContent} Html user comment.
|
|||
|
|
|
|||
|
|
@return void.
|
|||
|
|
*/
|
|||
|
|
addComment({ text, pid }, replacedContent) {
|
|||
|
|
const payload = { text: JSON.stringify(text) };
|
|||
|
|
const url = tahrirUrl()+ apis.comments.add + "/" + pid;
|
|||
|
|
|
|||
|
|
this.commentHttpService.formDataRequest(url, payload).then((res) => {
|
|||
|
|
this.updateParagraphContentProperty(replacedContent);
|
|||
|
|
|
|||
|
|
this.crawlParagsForCommentId(this.localParagraphs).then((guidList) => {
|
|||
|
|
this.getComments(guidList);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
mySwalToast({
|
|||
|
|
html: res.message,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/*
|
|||
|
|
summary: update paragraph content property
|
|||
|
|
|
|||
|
|
description: update paragraph old content property with updated content.
|
|||
|
|
|
|||
|
|
@fires when addComment method completed...
|
|||
|
|
|
|||
|
|
@param {replacedContent} Html user comment.
|
|||
|
|
|
|||
|
|
@return void.
|
|||
|
|
*/
|
|||
|
|
updateParagraphContentProperty(replacedContent) {
|
|||
|
|
this.localParagraphs.forEach((pars) => {
|
|||
|
|
if (pars.id == this.paragraphParentId.slice(7))
|
|||
|
|
pars.content = replacedContent;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
summary: update new comment form position
|
|||
|
|
|
|||
|
|
description: update position of new comment form when scrolling.
|
|||
|
|
|
|||
|
|
@fires when user scroll
|
|||
|
|
|
|||
|
|
@param {event} event window scroll event.
|
|||
|
|
|
|||
|
|
@return void.
|
|||
|
|
*/
|
|||
|
|
updateCommentFormTopPosition(event) {
|
|||
|
|
// Find out how much (if any) user has scrolled
|
|||
|
|
var scrollTop =
|
|||
|
|
window.screenY !== undefined
|
|||
|
|
? window.screenY
|
|||
|
|
: (
|
|||
|
|
document.documentElement ||
|
|||
|
|
document.body.parentNode ||
|
|||
|
|
document.body
|
|||
|
|
).scrollTop;
|
|||
|
|
|
|||
|
|
const posY = event.clientY - 200 + scrollTop;
|
|||
|
|
this.$refs.popupMenu._vnode.elm.style.top = posY + "px";
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
summary: comment list
|
|||
|
|
description: getting list of comments from the api.
|
|||
|
|
|
|||
|
|
@fires after page crawl for tcomment complete.
|
|||
|
|
|
|||
|
|
@param {array} guidList paragraph's comment ids.
|
|||
|
|
|
|||
|
|
@return void.
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
getComments(guidList) {
|
|||
|
|
const payload = {
|
|||
|
|
pids: guidList,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
this.commentHttpService
|
|||
|
|
.formDataRequest(tahrirUrl()+apis.comments.documentComment, payload)
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.data) this.attachCommentsToParags(res.data);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/*
|
|||
|
|
summary: attach comments to paragraphs object
|
|||
|
|
description: loop over paragraphs and find paragraphs that
|
|||
|
|
its content property math the comment id catched from the api.
|
|||
|
|
|
|||
|
|
@fires after getComment method called.
|
|||
|
|
|
|||
|
|
@param {object}
|
|||
|
|
|
|||
|
|
@return void.
|
|||
|
|
*/
|
|||
|
|
attachCommentsToParags(comments) {
|
|||
|
|
try {
|
|||
|
|
this.localParagraphs.forEach((parag) => {
|
|||
|
|
const commentList = [];
|
|||
|
|
|
|||
|
|
Object.keys(comments).forEach((value) => {
|
|||
|
|
if (parag.content.includes(value))
|
|||
|
|
commentList.push(comments[value]);
|
|||
|
|
});
|
|||
|
|
this.$set(parag, "comments", commentList);
|
|||
|
|
});
|
|||
|
|
} catch (err) {
|
|||
|
|
this.comments = comments;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.fetchingData = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
summary: replace selected text with new span.
|
|||
|
|
description: find the parent paragraph with its refs and
|
|||
|
|
then replace the selected text with new span.
|
|||
|
|
|
|||
|
|
@fires when saveSelectedTextComment method called.
|
|||
|
|
|
|||
|
|
@return Html.
|
|||
|
|
*/
|
|||
|
|
replaceSelectedText() {
|
|||
|
|
const text = decodeURIComponent(this.selectedText);
|
|||
|
|
this.globalGuid = this.newGuid();
|
|||
|
|
const replacementTag = `<mark id="${this.globalGuid}" class="c01206 c01172 c01173"><span class="c01186" id="19">${text} </span> <span class="c01210 c01209">ORG<span class="c01174">×</span></span></mark>`;
|
|||
|
|
const refContent = this.$refs[this.paragraphParentId];
|
|||
|
|
refContent.innerHTML = refContent.innerHTML.replace(text, replacementTag);
|
|||
|
|
|
|||
|
|
return refContent.innerHTML;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
closeCommentForm() {
|
|||
|
|
this.newComment = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
summary: crawl paragraphs for .tcomment.
|
|||
|
|
description: crawl paragraph fot .tcomment tags and getting its id.
|
|||
|
|
|
|||
|
|
@fires when addComment method called.
|
|||
|
|
|
|||
|
|
@return Html.
|
|||
|
|
*/
|
|||
|
|
async crawlParagsForCommentId(pars) {
|
|||
|
|
return await pars
|
|||
|
|
.map((par) => {
|
|||
|
|
if (par?.content.includes("tcomment"))
|
|||
|
|
return this.geCommenttIds(par.content);
|
|||
|
|
})
|
|||
|
|
.filter((item) => item)
|
|||
|
|
.join(",");
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
summary: create unique id.
|
|||
|
|
|
|||
|
|
@fires when crawlParagsForCommentId method called.
|
|||
|
|
|
|||
|
|
@return string.
|
|||
|
|
*/
|
|||
|
|
newGuid() {
|
|||
|
|
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
|
|||
|
|
/[xy]/g,
|
|||
|
|
function (c) {
|
|||
|
|
var r = (Math.random() * 16) | 0,
|
|||
|
|
v = c == "x" ? r : (r & 0x3) | 0x8;
|
|||
|
|
return v.toString(16);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
summary: separate spans id property..
|
|||
|
|
|
|||
|
|
@fires when crawlParagsForCommentId method called.
|
|||
|
|
|
|||
|
|
@return string.
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
geCommenttIds(content) {
|
|||
|
|
var ids = "";
|
|||
|
|
var regex =
|
|||
|
|
/\<span id=\\{0,1}\"([a-z0-9-]*?)\\{0,1}\" class=\\{0,1}\"tcomment\\{0,1}\".*?\>/g;
|
|||
|
|
var m = regex.exec(content);
|
|||
|
|
while (m !== null) {
|
|||
|
|
if (m.index === regex.lastIndex) {
|
|||
|
|
regex.lastIndex++;
|
|||
|
|
}
|
|||
|
|
if (ids != "") ids += ",";
|
|||
|
|
ids += m[1];
|
|||
|
|
m = regex.exec(content);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return ids;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleScroll(event) {
|
|||
|
|
// Any code to be executed when the window is scrolled
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
summary: hide/show other paragraphs comments.
|
|||
|
|
description: when user clicked on comment, hide other
|
|||
|
|
comments and add active class to .tcomment tag in the paragraph
|
|||
|
|
|
|||
|
|
@fires when user open/close the comments.
|
|||
|
|
|
|||
|
|
@param {object} paragraph
|
|||
|
|
@param {Number} commentIndex
|
|||
|
|
|
|||
|
|
@return void.
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
hideOtherComments({ paragraph, commentIndex }) {
|
|||
|
|
const _this = this;
|
|||
|
|
|
|||
|
|
_this.localParagraphs.forEach((par) => {
|
|||
|
|
// parse other paragraphs
|
|||
|
|
if (par.id != paragraph.id) {
|
|||
|
|
if (par.comments?.length) {
|
|||
|
|
par.comments.forEach((com, index) => {
|
|||
|
|
const res = com.isShow == undefined ? false : !com.isShow;
|
|||
|
|
_this.$set(par.comments[index], "isShow", res);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// parse selected paragraph
|
|||
|
|
else {
|
|||
|
|
if (par.comments?.length) {
|
|||
|
|
par.comments.forEach((com, index) => {
|
|||
|
|
// hide sibling comments in the active paragraph.
|
|||
|
|
if (index != commentIndex) {
|
|||
|
|
const res = com.isShow == undefined ? false : !com.isShow;
|
|||
|
|
_this.$set(par.comments[index], "isShow", res);
|
|||
|
|
}
|
|||
|
|
// toggle paragraph .tcomment class
|
|||
|
|
else {
|
|||
|
|
Array.from(
|
|||
|
|
_this.$refs["parent-" + par.id][0].children[0].children
|
|||
|
|
).forEach((child) => {
|
|||
|
|
if (child.id == com[0].pid) {
|
|||
|
|
child.classList.toggle("active");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
removSpan(comment) {
|
|||
|
|
const spanTag = document.getElementsById(comment.pid);
|
|||
|
|
const rawText = spanTag.innerHTML;
|
|||
|
|
|
|||
|
|
this.paragraph.content = this.paragraph.content.replace(spanTag, rawText);
|
|||
|
|
return this.paragraph.content;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
saveChangeSelectedTextComment(userComment) {
|
|||
|
|
const url = apis.comments.addCommentToSelectedParag;
|
|||
|
|
const replacedContent = this.removSpan();
|
|||
|
|
|
|||
|
|
const payload = {
|
|||
|
|
content: replacedContent,
|
|||
|
|
guid: this.paragraphId,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
ApiService.formData(url, payload)
|
|||
|
|
.then((res) => {
|
|||
|
|
this.newComment = false;
|
|||
|
|
|
|||
|
|
this.addComment(
|
|||
|
|
{
|
|||
|
|
text: userComment,
|
|||
|
|
pid: this.globalGuid,
|
|||
|
|
},
|
|||
|
|
replacedContent
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
mySwalToast({
|
|||
|
|
html: err?.message,
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.finally(() => (this.loading = false));
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|