361 lines
11 KiB
JavaScript
361 lines
11 KiB
JavaScript
import { mapState, mapActions } from "pinia";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
parentEl: undefined,
|
|
paragraphId: undefined,
|
|
paragraphParentId: undefined,
|
|
globalGuid: undefined,
|
|
clientX: undefined,
|
|
clientY: undefined,
|
|
selectedText: undefined,
|
|
fishActions: undefined,
|
|
isShowHilight: true,
|
|
valueResearchModal: {},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(useEntityStore, [
|
|
"activeEntityViewSchemaGetter",
|
|
"listHighlightTextGetter",
|
|
]),
|
|
},
|
|
methods: {
|
|
// #region mehdi all
|
|
...mapActions(useEntityStore, [
|
|
"selectedTextSetter",
|
|
"fishActionsSetter",
|
|
"listHighlightTextSetter",
|
|
"toggleShowHighlightSetter",
|
|
]),
|
|
...mapActions(useCommonStore, ["isShowHilightSetter"]),
|
|
onMouseUp($event) {
|
|
this.clientX = $event.clientX;
|
|
this.clientY = $event.clientY;
|
|
this.textEvent = $event;
|
|
// Get selected text and encode it
|
|
const selection = encodeURIComponent(
|
|
this.getSelected().toString()
|
|
).replace(/[!'()*]/g);
|
|
const encodedString = selection;
|
|
if (encodedString == "") {
|
|
this.selectedText = this.getSelectionParentElement()?.innerText;
|
|
this.selectedTextSetter(this.selectedText);
|
|
} else {
|
|
this.selectedText = decodeURIComponent(encodedString);
|
|
this.selectedTextSetter(this.selectedText);
|
|
}
|
|
},
|
|
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;
|
|
}
|
|
},
|
|
getSelectionParentElement() {
|
|
var parentEl = null,
|
|
sel;
|
|
if (window.getSelection) {
|
|
sel = window.getSelection();
|
|
if (sel.rangeCount) {
|
|
parentEl = sel.getRangeAt(0).commonAncestorContainer;
|
|
if (parentEl.nodeType != 1) {
|
|
parentEl = parentEl.parentNode;
|
|
}
|
|
}
|
|
} else if ((sel = document.selection) && sel.type != "Control") {
|
|
parentEl = sel.createRange().parentElement();
|
|
}
|
|
return parentEl;
|
|
},
|
|
linksHandler(event) {
|
|
if (!this.$el || isMajlesBuild()) return;
|
|
// let's handler all contextmenu event on all archor tags
|
|
let links = this.$el.querySelectorAll(".text-main-paragraf");
|
|
|
|
const vm = this;
|
|
|
|
links.forEach((element) => {
|
|
element.addEventListener(
|
|
"contextmenu",
|
|
(event) => {
|
|
const ctxMenuData = this.getContextMenu(vm, element);
|
|
|
|
vm.$root.$emit("contextmenu", { event, ctxMenuData });
|
|
},
|
|
false
|
|
);
|
|
});
|
|
},
|
|
getContextMenu(vm, element) {
|
|
let res = [];
|
|
this.activeEntityViewSchemaGetter?.contextMenu.forEach((item) => {
|
|
item.handler = vm.contextMenuHandler.bind(vm, item, element);
|
|
res.push(item);
|
|
});
|
|
|
|
return res;
|
|
},
|
|
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);
|
|
}
|
|
);
|
|
},
|
|
|
|
contextMenuHandler(item, target) {
|
|
if (item?.key == "fish") this.takingNotHyperLink(target, item);
|
|
else if (item?.key == "note") this.textAnnotation(target, item);
|
|
else if (item?.key == "link") this.linkingHyper(target, item);
|
|
else if (item?.key == "similar")
|
|
this.vectorMatching(); // مشابهت یابی معنایی
|
|
else if (item?.key == "similar-text")
|
|
this.textualMatching(); // مشابهت یابی لفظی
|
|
else if (item?.key == "term") this.termSimilar(target, item);
|
|
else if (item?.key == "hilight") this.hilightText(target, item);
|
|
},
|
|
// #endregion
|
|
// #region mehdi فیش برداری
|
|
takingNotHyperLink(target, itemSchema) {
|
|
this.$emit("fishHandler", {
|
|
selectedText: this.selectedText,
|
|
action: "add",
|
|
itemSchema: itemSchema,
|
|
});
|
|
},
|
|
// createPopupReceipt() {
|
|
// setTimeout(() => {
|
|
// this.$refs.linkReceipt.$el.style.opacity = 1;
|
|
// this.$refs.linkReceipt.$el.style.display = "block";
|
|
// }, 700);
|
|
// },
|
|
// closePopupReceipt() {
|
|
// this.newFish = false;
|
|
// this.$refs.linkReceipt.$el.style.opacity = 0;
|
|
// this.$refs.linkReceipt.$el.style.display = "none";
|
|
// },
|
|
// #endregion
|
|
// #region mehdi حاشیه نویسی
|
|
textAnnotation(target, itemSchema) {
|
|
// this.newAnnotation = true;
|
|
// this.createPopupAnnotation();
|
|
// this.annotationActionsSetter("Record");
|
|
this.$emit("annotationHandler", {
|
|
selectedText: this.selectedText,
|
|
action: "add",
|
|
itemSchema: itemSchema,
|
|
});
|
|
},
|
|
// createPopupAnnotation() {
|
|
// setTimeout(() => {
|
|
// this.$refs.linkAnnotation.$el.style.opacity = 1;
|
|
// this.$refs.linkAnnotation.$el.style.display = "block";
|
|
// }, 700);
|
|
// },
|
|
// closePopupAnnotation() {
|
|
// this.newAnnotation = false;
|
|
// this.$refs.linkAnnotation.$el.style.opacity = 0;
|
|
// this.$refs.linkAnnotation.$el.style.display = "none";
|
|
// },
|
|
// #endregion
|
|
// #region mehdi مشابه یابی
|
|
|
|
textSimilar() {
|
|
this.similarInfoSetter({
|
|
type: "vector",
|
|
show: true,
|
|
text: this.selectedText,
|
|
id: this.sectionitem._id,
|
|
label: "مشابهت یابی معنایی",
|
|
});
|
|
},
|
|
|
|
// #endregion
|
|
// #region mehdi "لینک زنی"
|
|
linkingHyper(target) {
|
|
this.newLink = true;
|
|
this.createPopup();
|
|
},
|
|
deleteHyperLink(target) {
|
|
const problemSection = target.parentElement;
|
|
problemSection.innerHTML = problemSection.innerHTML.replace(
|
|
target.outerHTML,
|
|
target.innerHTML
|
|
);
|
|
this.parentEl = problemSection;
|
|
},
|
|
createPopup() {
|
|
const posX = this.clientX;
|
|
const posY = this.clientY;
|
|
|
|
setTimeout(() => {
|
|
this.$refs.linkPopup.$el.style.top = posY + "px";
|
|
this.$refs.linkPopup.$el.style.left = posX + "px";
|
|
this.$refs.linkPopup.$el.style.opacity = 1;
|
|
}, 700);
|
|
},
|
|
saveLink(linkText = null) {
|
|
const text = decodeURIComponent(this.selectedText);
|
|
this.globalGuid = this.newGuid();
|
|
const replacementTag = `<a id="${this.globalGuid}" name="${this.globalGuid}" href="${linkText}" title="${linkText}" target="_blank" class="c-link tlink">${text}</a>`;
|
|
const refContent = this.parentEl;
|
|
refContent.innerHTML = refContent.innerHTML.replace(text, replacementTag);
|
|
const sectionContent = refContent.innerHTML;
|
|
this.linksHandlerForLinkingHyper();
|
|
return sectionContent;
|
|
},
|
|
closeCommentForm() {
|
|
this.newLink = false;
|
|
},
|
|
linksHandlerForLinkingHyper() {
|
|
if (!this.$el) return;
|
|
|
|
let links = this.$el.querySelectorAll(".text-main-paragraf a");
|
|
const vm = this;
|
|
|
|
links.forEach((element) => {
|
|
element.addEventListener(
|
|
"contextmenu",
|
|
(event) => {
|
|
const ctxMenuData = [
|
|
{
|
|
title: this.$t("Delete"),
|
|
icon: "Component-295--1",
|
|
handler: vm.deleteHyperLink.bind(vm, element),
|
|
},
|
|
];
|
|
vm.$root.$emit("contextmenu", { event, ctxMenuData });
|
|
},
|
|
false
|
|
);
|
|
});
|
|
},
|
|
// #endregion
|
|
// #region mehdi " اصطلاحات"
|
|
|
|
textCorrectionHyper(target) {},
|
|
|
|
termSimilar(target, itemSchema) {
|
|
this.$emit("termHandler", {
|
|
show: true,
|
|
selectedText: this.selectedText,
|
|
modal: "term",
|
|
action: "add",
|
|
itemSchema: itemSchema,
|
|
});
|
|
},
|
|
// #endregion
|
|
// #region mehdi " hilight"
|
|
|
|
replaSpan(text, color) {
|
|
let item = `<span style="background-color:${color};" class="c-link tlink"> ${text} </span>`;
|
|
return item;
|
|
},
|
|
|
|
hilightText(target) {
|
|
// this.$emit("hilightTextHandler", {
|
|
// selectedText: this.selectedText,
|
|
// target: target,
|
|
// });
|
|
// this.openModal("ComponentHilightText", " نشانه گذاری متن");
|
|
this.openBaseModal("ComponentHilightText", " نشانه گذاری متن");
|
|
this.valueResearchModal = {
|
|
selectedText: this.selectedText,
|
|
target: target,
|
|
};
|
|
},
|
|
showHilightText(event) {
|
|
this.listHighlightTextGetter.forEach((element) => {
|
|
if (element.text !== event.text) return;
|
|
let text = decodeURIComponent(element.text);
|
|
let color = element?.color;
|
|
if (element.show == false) color = "transparent";
|
|
let replacementTag = this.replaSpan(text, color);
|
|
|
|
// Escape special characters for regex
|
|
const escapedText = text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
let regex = new RegExp(`(${escapedText})`, "gi");
|
|
|
|
let content = this.textMain;
|
|
let highlightedContent = content.replace(regex, replacementTag);
|
|
this.textMain = highlightedContent;
|
|
});
|
|
this.isShowHilightSetter(true);
|
|
},
|
|
showHilightTextTheFirstTime() {
|
|
this.listHighlightTextGetter.forEach((element) => {
|
|
let text = decodeURIComponent(element.text);
|
|
let color = element?.color;
|
|
if (element.show == false) color = "transparent";
|
|
let replacementTag = this.replaSpan(text, color);
|
|
|
|
// Escape special characters for regex
|
|
const escapedText = text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
let regex = new RegExp(`(${escapedText})`, "gi");
|
|
|
|
let content = this.textMain;
|
|
let highlightedContent = content.replace(regex, replacementTag);
|
|
this.textMain = highlightedContent;
|
|
});
|
|
// this.isShowHilightSetter(true);
|
|
},
|
|
deleteItem(event) {
|
|
const text = decodeURIComponent(event.text);
|
|
let color = event?.color;
|
|
if (event.show == false) color = "transparent";
|
|
|
|
// Escape special characters for regex
|
|
const escapedText = this.replaSpan(text, color).replace(
|
|
/[.*+?^${}()|[\]\\]/g,
|
|
"\\$&"
|
|
);
|
|
const regex = new RegExp(escapedText, "gi");
|
|
|
|
const content = this.textMain;
|
|
const highlightedContent = content.replace(regex, text);
|
|
this.textMain = highlightedContent;
|
|
},
|
|
toggleHandlerShowHilightText(isShowHilight) {
|
|
let replacementTagOld = "";
|
|
let replacementTagNew = "";
|
|
|
|
this.listHighlightTextGetter.forEach((element) => {
|
|
const text = element?.text;
|
|
let color = element?.color;
|
|
|
|
if (isShowHilight) {
|
|
replacementTagOld = this.replaSpan(text, "transparent");
|
|
replacementTagNew = this.replaSpan(text, color);
|
|
} else {
|
|
replacementTagOld = this.replaSpan(text, color);
|
|
replacementTagNew = this.replaSpan(text, "transparent");
|
|
}
|
|
|
|
// Escape special characters for regex
|
|
const escapedReplacementTagOld = replacementTagOld.replace(
|
|
/[.*+?^${}()|[\]\\]/g,
|
|
"\\$&"
|
|
);
|
|
const regex = new RegExp(`(${escapedReplacementTagOld})`, "gi");
|
|
|
|
let content = this.textMain;
|
|
let highlightedContent = content.replace(regex, replacementTagNew);
|
|
this.textMain = highlightedContent;
|
|
});
|
|
},
|
|
// #endregion
|
|
},
|
|
};
|