From 3d24690ccfb2c801b9fa75f6fdc1a42e98e98903 Mon Sep 17 00:00:00 2001 From: cjybyjk Date: Tue, 14 Jun 2022 16:24:05 +0800 Subject: [PATCH 1/3] refactor fillword.js and highlight.js --- app/static/js/fillword.js | 45 +++++++++++++------------ app/static/js/highlight.js | 67 +++++++++++++++++++------------------- 2 files changed, 58 insertions(+), 54 deletions(-) diff --git a/app/static/js/fillword.js b/app/static/js/fillword.js index 3e3fbd9..95da524 100644 --- a/app/static/js/fillword.js +++ b/app/static/js/fillword.js @@ -1,29 +1,34 @@ -isRead = true; -isChoose = true; -var reader = window.speechSynthesis; // 全局定义朗读者，以便朗读和暂停 +let isRead = true; +let isChoose = true; +let reader = window.speechSynthesis; // 全局定义朗读者，以便朗读和暂停 -function getWord(){ - var word = window.getSelection?window.getSelection():document.selection.createRange().text; - return word; +function getWord() { + return window.getSelection ? window.getSelection() : document.selection.createRange().text; } -function fillinWord(){ - var word = getWord(); - if (isRead) read(word); - if (!isChoose) return; - var element = document.getElementById("selected-words"); - element.value = element.value + " " + word; + +function fillInWord() { + let word = getWord(); + if (isRead) read(word); + if (!isChoose) return; + const element = document.getElementById("selected-words"); + element.value = element.value + " " + word; } -document.getElementById("text-content").addEventListener("click", fillinWord, false); -function read(s){ - var msg = new SpeechSynthesisUtterance(s); - reader.speak(msg); + +document.getElementById("text-content").addEventListener("click", fillInWord, false); + +function read(s) { + let msg = new SpeechSynthesisUtterance(s); + reader.speak(msg); } -function onReadClick(){ + + +function onReadClick() { isRead = !isRead; - if(!isRead){ - reader.cancel(); + if (!isRead) { + reader.cancel(); } } -function onChooseClick(){ + +function onChooseClick() { isChoose = !isChoose; } \ No newline at end of file diff --git a/app/static/js/highlight.js b/app/static/js/highlight.js index 2e0d84a..5ef3f3c 100644 --- a/app/static/js/highlight.js +++ b/app/static/js/highlight.js @@ -1,45 +1,44 @@ -var isHighlight = true; +let isHighlight = true; function cancelBtnHandler() { cancel_highLight(); - document.getElementById("text-content").removeEventListener("click", fillinWord, false); - document.getElementById("text-content").removeEventListener("touchstart", fillinWord, false); - document.getElementById("text-content").addEventListener("click", fillinWord2, false); - document.getElementById("text-content").addEventListener("touchstart", fillinWord2, false); + document.getElementById("text-content").removeEventListener("click", fillInWord, false); + document.getElementById("text-content").removeEventListener("touchstart", fillInWord, false); + document.getElementById("text-content").addEventListener("click", fillInWord2, false); + document.getElementById("text-content").addEventListener("touchstart", fillInWord2, false); } function showBtnHandler() { - document.getElementById("text-content").removeEventListener("click", fillinWord2, false); - document.getElementById("text-content").removeEventListener("touchstart", fillinWord2, false); - document.getElementById("text-content").addEventListener("click", fillinWord, false); - document.getElementById("text-content").addEventListener("touchstart", fillinWord, false); + document.getElementById("text-content").removeEventListener("click", fillInWord2, false); + document.getElementById("text-content").removeEventListener("touchstart", fillInWord2, false); + document.getElementById("text-content").addEventListener("click", fillInWord, false); + document.getElementById("text-content").addEventListener("touchstart", fillInWord, false); highLight(); } function getWord() { - var word = window.getSelection ? window.getSelection() : document.selection.createRange().text; - return word; + return window.getSelection ? window.getSelection() : document.selection.createRange().text; } function highLight() { - if(!isHighlight) return; - var txt = document.getElementById("article").innerText; - var sel_word1 = document.getElementById("selected-words"); - var sel_word2 = document.getElementById("selected-words2"); + if (!isHighlight) return; + let txt = document.getElementById("article").innerText; + let sel_word1 = document.getElementById("selected-words"); + let sel_word2 = document.getElementById("selected-words2"); if (sel_word1 != null) { - var list = sel_word1.value.split(" "); - for (var i = 0; i < list.length; ++i) { + const list = sel_word1.value.split(" "); + for (let i = 0; i < list.length; ++i) { list[i] = list[i].replace(/(^\s*)|(\s*$)/g, ""); - if (list[i] != "" && "".indexOf(list[i]) == -1 && "".indexOf(list[i]) == -1) { + if (list[i] !== "" && "".indexOf(list[i]) === -1 && "".indexOf(list[i]) === -1) { txt = txt.replace(new RegExp(list[i], "g"), "" + list[i] + ""); } } } if (sel_word2 != null) { - var list2 = sel_word2.value.split(" "); - for (var i = 0; i < list2.length; ++i) { + const list2 = sel_word2.value.split(" "); + for (let i = 0; i < list2.length; ++i) { list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, ""); - if (list2[i] != "" && "".indexOf(list2[i]) == -1 && "".indexOf(list2[i]) == -1) { + if (list2[i] !== "" && "".indexOf(list2[i]) === -1 && "".indexOf(list2[i]) === -1) { txt = txt.replace(new RegExp(list2[i], "g"), "" + list2[i] + ""); } } @@ -48,24 +47,24 @@ function highLight() { } function cancel_highLight() { - var txt = document.getElementById("article").innerText; - var sel_word1 = document.getElementById("selected-words"); - var sel_word2 = document.getElementById("selected-words2"); + const list = sel_word1.value.split(" "); + let txt = document.getElementById("article").innerText; + let sel_word1 = document.getElementById("selected-words"); + const sel_word2 = document.getElementById("selected-words2"); if (sel_word1 != null) { - var 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, ""); - if (list[i] != "") { + if (list[i] !== "") { txt = txt.replace("" + list[i] + "", "list[i]"); } } } if (sel_word2 != null) { - var list2 = sel_word1.value.split(" "); - for (var i = 0; i < list2.length; ++i) { - var list2 = sel_word2.value.split(" "); + let list2 = sel_word1.value.split(" "); + for (let i = 0; i < list2.length; ++i) { + list2 = sel_word2.value.split(" "); list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, ""); - if (list2[i] != "") { + if (list2[i] !== "") { txt = txt.replace("" + list[i] + "", "list[i]"); } } @@ -73,11 +72,11 @@ function cancel_highLight() { document.getElementById("article").innerHTML = txt; } -function fillinWord() { +function fillInWord() { highLight(); } -function fillinWord2() { +function fillInWord2() { cancel_highLight(); } @@ -92,4 +91,4 @@ function ChangeHighlight() { } } -showBtnHandler(); +showBtnHandler(); \ No newline at end of file -- 2.17.1 From de1d191e5a6a5642aeec82a51de5bd4f7d6363f3 Mon Sep 17 00:00:00 2001 From: cjybyjk Date: Tue, 14 Jun 2022 19:19:02 +0800 Subject: [PATCH 2/3] add slider of speech-rate --- app/static/js/fillword.js | 36 ++++++++++++++++++++++++++++++--- app/templates/userpage_get.html | 9 ++++++++- 2 files changed, 41 insertions(+), 4 deletions(-) diff --git a/app/static/js/fillword.js b/app/static/js/fillword.js index 95da524..6fd7aad 100644 --- a/app/static/js/fillword.js +++ b/app/static/js/fillword.js @@ -1,6 +1,9 @@ let isRead = true; let isChoose = true; let reader = window.speechSynthesis; // 全局定义朗读者，以便朗读和暂停 +let cur_position = 0; // 朗读文本的当前位置 +let orig_position = 0; // 朗读文本的初始位置 +let to_speak = ""; // 朗读的初始内容 function getWord() { return window.getSelection ? window.getSelection() : document.selection.createRange().text; @@ -16,11 +19,38 @@ function fillInWord() { document.getElementById("text-content").addEventListener("click", fillInWord, false); -function read(s) { - let 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") { + cur_position = ev.charIndex; + } + } + return msg; } +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(orig_position + cur_position), value); + orig_position = orig_position + cur_position; + cur_position = 0; + reader.speak(msg); +}; + +function read(s) { + to_speak = s.toString(); + orig_position = 0; + cur_position = 0; + let msg = makeUtterance(to_speak, inputSlider.value); + reader.speak(msg); +} function onReadClick() { isRead = !isRead; diff --git a/app/templates/userpage_get.html b/app/templates/userpage_get.html index 19542c1..0396fb8 100644 --- a/app/templates/userpage_get.html +++ b/app/templates/userpage_get.html @@ -35,7 +35,14 @@ 生词高亮 大声朗读 划词入库 - +
+
+
+ 1× +
+ +
+

收集生词吧 （可以在正文中划词，也可以复制黏贴）


-- 2.17.1 From 13b39cf85cd934468e37f45fde5d0b19324ce25e Mon Sep 17 00:00:00 2001 From: Lan Hui <1348141770@qq.com> Date: Mon, 18 Jul 2022 15:57:23 +0800 Subject: [PATCH 3/3] Use better variable names. --- app/static/js/fillword.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/app/static/js/fillword.js b/app/static/js/fillword.js index 6fd7aad..505808e 100644 --- a/app/static/js/fillword.js +++ b/app/static/js/fillword.js @@ -1,8 +1,8 @@ let isRead = true; let isChoose = true; let reader = window.speechSynthesis; // 全局定义朗读者，以便朗读和暂停 -let cur_position = 0; // 朗读文本的当前位置 -let orig_position = 0; // 朗读文本的初始位置 +let current_position = 0; // 朗读文本的当前位置 +let original_position = 0; // 朗读文本的初始位置 let to_speak = ""; // 朗读的初始内容 function getWord() { @@ -25,7 +25,7 @@ function makeUtterance(str, rate) { msg.lang = "en-US"; // TODO: add language options menu msg.onboundary = ev => { if (ev.name == "word") { - cur_position = ev.charIndex; + current_position = ev.charIndex; } } return msg; @@ -38,16 +38,16 @@ inputSlider.oninput = () => { sliderValue.textContent = value + '×'; if (!reader.speaking) return; reader.cancel(); - let msg = makeUtterance(to_speak.substring(orig_position + cur_position), value); - orig_position = orig_position + cur_position; - cur_position = 0; + 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(); - orig_position = 0; - cur_position = 0; + original_position = 0; + current_position = 0; let msg = makeUtterance(to_speak, inputSlider.value); reader.speak(msg); } @@ -61,4 +61,4 @@ function onReadClick() { function onChooseClick() { isChoose = !isChoose; -} \ No newline at end of file +} -- 2.17.1