stewart
/
EnglishPal
forked from mrlan/EnglishPal
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Bug477 重构 and 增加功能 (#48) 

Co-authored-by: cjybyjk <cjybyjk@zjnu.edu.cn>
Co-authored-by: Lan Hui <1348141770@qq.com>
Reviewed-on: http://121.4.94.30:3000/mrlan/EnglishPal/pulls/48
Co-authored-by: 陈靖毅 <cjybyjk@zjnu.edu.cn>
Co-committed-by: 陈靖毅 <cjybyjk@zjnu.edu.cn>
陈靖毅 2022-07-18 16:00:08 +08:00 committed by mrlan
parent 9d420acd8b
commit c21659ba7e
3 changed files with 97 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
app/static/js/fillword.js
View File

@ -1,29 +1,64 @@
isRead = true; let isRead = true;
isChoose = true; let isChoose = true;
var reader = window.speechSynthesis; // 全局定义朗读者，以便朗读和暂停 let reader = window.speechSynthesis; // 全局定义朗读者，以便朗读和暂停
let current_position = 0; // 朗读文本的当前位置
let original_position = 0; // 朗读文本的初始位置
let to_speak = ""; // 朗读的初始内容
function getWord(){ function getWord() {
var word = window.getSelection?window.getSelection():document.selection.createRange().text; return window.getSelection ? window.getSelection() : document.selection.createRange().text;
return word;
} }
function fillinWord(){
var word = getWord(); function fillInWord() {
if (isRead) read(word); let word = getWord();
if (!isChoose) return; if (isRead) read(word);
var element = document.getElementById("selected-words"); if (!isChoose) return;
element.value = element.value + " " + word; const element = document.getElementById("selected-words");
element.value = element.value + " " + word;
} }
document.getElementById("text-content").addEventListener("click", fillinWord, false);
function read(s){ document.getElementById("text-content").addEventListener("click", fillInWord, false);
var msg = new SpeechSynthesisUtterance(s);
reader.speak(msg); function makeUtterance(str, rate) {
let msg = new SpeechSynthesisUtterance(str);
msg.rate = rate;
msg.lang = "en-US"; // TODO: add language options menu
msg.onboundary = ev => {
if (ev.name == "word") {
current_position = ev.charIndex;
}
}
return msg;
} }
function onReadClick(){
const sliderValue = document.getElementById("rangeValue"); // 显示值
const inputSlider = document.getElementById("rangeComponent"); // 滑块元素
inputSlider.oninput = () => {
let value = inputSlider.value; // 获取滑块的值
sliderValue.textContent = value + '×';
if (!reader.speaking) return;
reader.cancel();
let msg = makeUtterance(to_speak.substring(original_position + current_position), value);
original_position = original_position + current_position;
current_position = 0;
reader.speak(msg);
};
function read(s) {
to_speak = s.toString();
original_position = 0;
current_position = 0;
let msg = makeUtterance(to_speak, inputSlider.value);
reader.speak(msg);
}
function onReadClick() {
isRead = !isRead; isRead = !isRead;
if(!isRead){ if (!isRead) {
reader.cancel(); reader.cancel();
} }
} }
function onChooseClick(){
function onChooseClick() {
isChoose = !isChoose; isChoose = !isChoose;
} }

67
app/static/js/highlight.js
View File

@ -1,45 +1,44 @@
var isHighlight = true; let isHighlight = true;
function cancelBtnHandler() { function cancelBtnHandler() {
cancel_highLight(); cancel_highLight();
document.getElementById("text-content").removeEventListener("click", fillinWord, false); document.getElementById("text-content").removeEventListener("click", fillInWord, false);
document.getElementById("text-content").removeEventListener("touchstart", fillinWord, false); document.getElementById("text-content").removeEventListener("touchstart", fillInWord, false);
document.getElementById("text-content").addEventListener("click", fillinWord2, false); document.getElementById("text-content").addEventListener("click", fillInWord2, false);
document.getElementById("text-content").addEventListener("touchstart", fillinWord2, false); document.getElementById("text-content").addEventListener("touchstart", fillInWord2, false);
} }
function showBtnHandler() { function showBtnHandler() {
document.getElementById("text-content").removeEventListener("click", fillinWord2, false); document.getElementById("text-content").removeEventListener("click", fillInWord2, false);
document.getElementById("text-content").removeEventListener("touchstart", fillinWord2, false); document.getElementById("text-content").removeEventListener("touchstart", fillInWord2, false);
document.getElementById("text-content").addEventListener("click", fillinWord, false); document.getElementById("text-content").addEventListener("click", fillInWord, false);
document.getElementById("text-content").addEventListener("touchstart", fillinWord, false); document.getElementById("text-content").addEventListener("touchstart", fillInWord, false);
highLight(); highLight();
} }
function getWord() { function getWord() {
var word = window.getSelection ? window.getSelection() : document.selection.createRange().text; return window.getSelection ? window.getSelection() : document.selection.createRange().text;
return word;
} }
function highLight() { function highLight() {
if(!isHighlight) return; if (!isHighlight) return;
var txt = document.getElementById("article").innerText; let txt = document.getElementById("article").innerText;
var sel_word1 = document.getElementById("selected-words"); let sel_word1 = document.getElementById("selected-words");
var sel_word2 = document.getElementById("selected-words2"); let sel_word2 = document.getElementById("selected-words2");
if (sel_word1 != null) { if (sel_word1 != null) {
var list = sel_word1.value.split(" "); const list = sel_word1.value.split(" ");
for (var i = 0; i < list.length; ++i) { for (let i = 0; i < list.length; ++i) {
list[i] = list[i].replace(/(^\s*)|(\s*$)/g, ""); list[i] = list[i].replace(/(^\s*)|(\s*$)/g, "");
if (list[i] != "" && "<mark>".indexOf(list[i]) == -1 && "</mark>".indexOf(list[i]) == -1) { if (list[i] !== "" && "<mark>".indexOf(list[i]) === -1 && "</mark>".indexOf(list[i]) === -1) {
txt = txt.replace(new RegExp(list[i], "g"), "<mark>" + list[i] + "</mark>"); txt = txt.replace(new RegExp(list[i], "g"), "<mark>" + list[i] + "</mark>");
} }
} }
} }
if (sel_word2 != null) { if (sel_word2 != null) {
var list2 = sel_word2.value.split(" "); const list2 = sel_word2.value.split(" ");
for (var i = 0; i < list2.length; ++i) { for (let i = 0; i < list2.length; ++i) {
list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, ""); list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, "");
if (list2[i] != "" && "<mark>".indexOf(list2[i]) == -1 && "</mark>".indexOf(list2[i]) == -1) { if (list2[i] !== "" && "<mark>".indexOf(list2[i]) === -1 && "</mark>".indexOf(list2[i]) === -1) {
txt = txt.replace(new RegExp(list2[i], "g"), "<mark>" + list2[i] + "</mark>"); txt = txt.replace(new RegExp(list2[i], "g"), "<mark>" + list2[i] + "</mark>");
} }
} }
@ -48,24 +47,24 @@ function highLight() {
} }
function cancel_highLight() { function cancel_highLight() {
var txt = document.getElementById("article").innerText; const list = sel_word1.value.split(" ");
var sel_word1 = document.getElementById("selected-words"); let txt = document.getElementById("article").innerText;
var sel_word2 = document.getElementById("selected-words2"); let sel_word1 = document.getElementById("selected-words");
const sel_word2 = document.getElementById("selected-words2");
if (sel_word1 != null) { if (sel_word1 != null) {
var list = sel_word1.value.split(" "); for (let i = 0; i < list.length; ++i) {
for (var i = 0; i < list.length; ++i) {
list[i] = list[i].replace(/(^\s*)|(\s*$)/g, ""); list[i] = list[i].replace(/(^\s*)|(\s*$)/g, "");
if (list[i] != "") { if (list[i] !== "") {
txt = txt.replace("<mark>" + list[i] + "</mark>", "list[i]"); txt = txt.replace("<mark>" + list[i] + "</mark>", "list[i]");
} }
} }
} }
if (sel_word2 != null) { if (sel_word2 != null) {
var list2 = sel_word1.value.split(" "); let list2 = sel_word1.value.split(" ");
for (var i = 0; i < list2.length; ++i) { for (let i = 0; i < list2.length; ++i) {
var list2 = sel_word2.value.split(" "); list2 = sel_word2.value.split(" ");
list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, ""); list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, "");
if (list2[i] != "") { if (list2[i] !== "") {
txt = txt.replace("<mark>" + list[i] + "</mark>", "list[i]"); txt = txt.replace("<mark>" + list[i] + "</mark>", "list[i]");
} }
} }
@ -73,11 +72,11 @@ function cancel_highLight() {
document.getElementById("article").innerHTML = txt; document.getElementById("article").innerHTML = txt;
} }
function fillinWord() { function fillInWord() {
highLight(); highLight();
} }
function fillinWord2() { function fillInWord2() {
cancel_highLight(); cancel_highLight();
} }
@ -92,4 +91,4 @@ function ChangeHighlight() {
} }
} }
showBtnHandler(); showBtnHandler();

9
app/templates/userpage_get.html
View File

@ -35,7 +35,14 @@
<input type="checkbox" onclick="ChangeHighlight()" checked/>生词高亮 <input type="checkbox" onclick="ChangeHighlight()" checked/>生词高亮
<input type="checkbox" onclick="onReadClick()" checked/>大声朗读 <input type="checkbox" onclick="onReadClick()" checked/>大声朗读
<input type="checkbox" onclick="onChooseClick()" checked/>划词入库 <input type="checkbox" onclick="onChooseClick()" checked/>划词入库
<div class="range">
<div class="field">
<div class="sliderValue">
<span id="rangeValue">1×</span>
</div>
<input type="range" id="rangeComponent" min="0.5" max="2" value="1" step="0.25" "/>
</div>
</div>
<p><b>收集生词吧</b> （可以在正文中划词，也可以复制黏贴）</p> <p><b>收集生词吧</b> （可以在正文中划词，也可以复制黏贴）</p>
<form method="post" action="/{{ username }}"> <form method="post" action="/{{ username }}">
<textarea name="content" id="selected-words" rows="10" cols="120"></textarea><br/> <textarea name="content" id="selected-words" rows="10" cols="120"></textarea><br/>