createCloseButton() {
const button = document.createElement("span");
button.textContent = "x";
Object.assign(button.style, {
position: "absolute",
top: "0px", /* Đẩy lên trên một chút */
right: "0px", /* Đẩy sang phải một chút */
cursor: "pointer",
color: "black",
fontSize: "14px",
fontWeight: "bold",
padding: "4px 8px", /* Tăng kích thước */
lineHeight: "14px",
});
button.onclick = () => button.parentElement.remove();
return button;
}
showTranslationBelow(targetElement, translatedText) {
const selection = window.getSelection();
const lastSelectedNode = selection.focusNode;
let lastSelectedParagraph = lastSelectedNode.parentElement;
while (lastSelectedParagraph && lastSelectedParagraph.tagName !== "P") {
lastSelectedParagraph = lastSelectedParagraph.parentElement;
}
if (!lastSelectedParagraph) {
lastSelectedParagraph = targetElement;
}
if (
lastSelectedParagraph.nextElementSibling?.classList.contains(
"translation-div",
)
) {
return;
}
const translationDiv = this.createTranslationDiv(translatedText);
translationDiv.appendChild(this.createCloseButton());
lastSelectedParagraph.parentNode.appendChild(translationDiv);
translationDiv.style.cssText = `
display: block; /* Giữ cho phần dịch không bị kéo dài hết chiều ngang */
max-width: fit-content;; /* Giới hạn chiều rộng */
width: auto; /* Để nó co giãn theo nội dung */
min-width: 150px;
background: rgba(242, 240, 235, 0.6);
color: black;
padding: 8px 20px 8px 8px; /* Tăng padding bên phải để tránh nút x đè lên chữ */
border-radius: 6px;
font-size: 16px;
margin-top: 5px;
position: relative;
z-index: 1000;
border: 1px solid rgba(242, 240, 235, 0.2);
white-space: normal; /* Cho phép xuống dòng nếu quá dài */
overflow-wrap: break-word; /* Ngắt từ nếu quá dài */
`;
}