diff --git a/app/main.py b/app/main.py index 9c46b5e..0c747a3 100644 --- a/app/main.py +++ b/app/main.py @@ -2,7 +2,7 @@ # Copyright 2019 (C) Hui Lan # Written permission must be obtained from the author for commercial uses. ########################################################################### -from flask import abort +from flask import abort, jsonify from markupsafe import escape from Login import * from Article import * @@ -11,6 +11,7 @@ from user_service import userService from account_service import accountService from admin_service import adminService, ADMIN_NAME import os +from translate import * app = Flask(__name__) app.secret_key = os.urandom(32) @@ -118,6 +119,15 @@ def mainpage(): number_of_essays=number_of_essays, ratio = ratio) +@app.route("/translate", methods=['POST']) +def translate_word(): + data = request.get_json() + word = data.get('word', '') + from_lang = data.get('from_lang', 'en') # 假设默认源语言是英语 + to_lang = data.get('to_lang', 'zh') # 假设默认目标语言是中文 + result = translate(word, from_lang, to_lang) + return jsonify({'translation': result}) + if __name__ == '__main__': ''' diff --git a/app/static/js/highlight.js b/app/static/js/highlight.js index 9646ff3..c239eaa 100644 --- a/app/static/js/highlight.js +++ b/app/static/js/highlight.js @@ -17,21 +17,20 @@ function showBtnHandler() { } function getWord() { - return window.getSelection ? window.getSelection() : document.selection.createRange().text; + return window.getSelection ? window.getSelection().toString() : document.selection.createRange().text; } function highLight() { if (!isHighlight) return; - let word = (getWord() + "").trim(); + let word = (getWord() + "").trim().replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, ""); let articleContent = document.getElementById("article").innerHTML; // innerHTML保留HTML标签来保持部分格式,且适配不同的浏览器 let pickedWords = document.getElementById("selected-words"); // words picked to the text area let dictionaryWords = document.getElementById("selected-words2"); // words appearing in the user's new words list let allWords = dictionaryWords === null ? pickedWords.value + " " : pickedWords.value + " " + dictionaryWords.value; - highlightWords = document.getElementById("selected-words3"); + let highlightWords = document.getElementById("selected-words3"); allWords = highlightWords == null ? allWords : allWords + " " + highlightWords.value; const list = allWords.split(" "); // 将所有的生词放入一个list中 if(word !== null && word !== "" && word !== " "){ - let articleContent_fb2 = articleContent; if(localStorage.getItem("nowWords").indexOf(word) !== -1 || localStorage.getItem("nowWords").indexOf(word.toLowerCase()) !== -1){ articleContent = articleContent.replace(new RegExp('' + word + '', "gi"), word); pickedWords.value = localStorage.getItem("nowWords").replace(word,""); @@ -58,6 +57,7 @@ function highLight() { articleContent = articleContent.replace(new RegExp("\\b" + word + "\\b", "g"), "" + word + ""); } document.getElementById("article").innerHTML = articleContent; + addClickEventToHighlightedWords(); } function cancelHighlighting() { @@ -83,7 +83,62 @@ function toggleHighlighting() { isHighlight = true; highLight(); } - localStorage.setItem('highlightChecked', isHighlight); + localStorage.setItem('highlightChecked', isHighlight); } -showBtnHandler(); \ No newline at end of file +function showWordMeaning(event) { + const word = event.target.innerText.trim().replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").toLowerCase(); + const apiUrl = '/translate'; + const rect = event.target.getBoundingClientRect(); + const tooltipX = rect.left + window.scrollX; + const tooltipY = rect.top + window.scrollY + rect.height; + // 发送POST请求 + fetch(apiUrl, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ word: word }), // 发送的JSON数据 + }) + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); // 解析JSON响应 + }) + .then(data => { + // 假设data.translation是翻译结果 + const tooltip = document.getElementById('tooltip'); + if (!tooltip) { + console.error('Tooltip element not found'); + return; + } + + tooltip.textContent = data.translation || '没有找到该单词的中文意思'; + tooltip.style.left = `${tooltipX}px`; + tooltip.style.top = `${tooltipY}px`; + tooltip.style.display = 'block'; + tooltip.style.position = 'absolute'; + tooltip.style.background = 'yellow'; + + // 可以在这里添加点击事件监听器来隐藏tooltip,但注意避免内存泄漏 + document.addEventListener('click', function handler(e) { + if (!tooltip.contains(e.target)) { + tooltip.style.display = 'none'; + document.removeEventListener('click', handler); + } + }); + }) + .catch(error => { + console.error('There was a problem with your fetch operation:', error); + }); +} + +function addClickEventToHighlightedWords() { + const highlightedWords = document.querySelectorAll('.highlighted'); + highlightedWords.forEach(word => { + word.addEventListener('click', showWordMeaning); + }); +} + +showBtnHandler(); diff --git a/app/templates/userpage_get.html b/app/templates/userpage_get.html index 8daa344..60598df 100644 --- a/app/templates/userpage_get.html +++ b/app/templates/userpage_get.html @@ -107,6 +107,7 @@
+