forked from mrlan/EnglishPal
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>
mrlan
parent
9d420acd8b
commit
c21659ba7e
|
|
@ -1,29 +1,64 @@
|
|||
isRead = true;
|
||||
isChoose = true;
|
||||
var reader = window.speechSynthesis; // 全局定义朗读者，以便朗读和暂停
|
||||
let isRead = true;
|
||||
let isChoose = true;
|
||||
let reader = window.speechSynthesis; // 全局定义朗读者，以便朗读和暂停
|
||||
let current_position = 0; // 朗读文本的当前位置
|
||||
let original_position = 0; // 朗读文本的初始位置
|
||||
let to_speak = ""; // 朗读的初始内容
|
||||
|
||||
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();
|
||||
|
||||
function fillInWord() {
|
||||
let word = getWord();
|
||||
if (isRead) read(word);
|
||||
if (!isChoose) return;
|
||||
var element = document.getElementById("selected-words");
|
||||
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);
|
||||
|
||||
document.getElementById("text-content").addEventListener("click", fillInWord, false);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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(){
|
||||
|
||||
function onReadClick() {
|
||||
isRead = !isRead;
|
||||
if(!isRead){
|
||||
if (!isRead) {
|
||||
reader.cancel();
|
||||
}
|
||||
}
|
||||
function onChooseClick(){
|
||||
|
||||
function onChooseClick() {
|
||||
isChoose = !isChoose;
|
||||
}
|
||||
|
|
@ -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] != "" && "<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>");
|
||||
}
|
||||
}
|
||||
}
|
||||
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] != "" && "<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>");
|
||||
}
|
||||
}
|
||||
|
|
@ -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("<mark>" + list[i] + "</mark>", "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("<mark>" + list[i] + "</mark>", "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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,14 @@
|
|||
<input type="checkbox" onclick="ChangeHighlight()" checked/>生词高亮
|
||||
<input type="checkbox" onclick="onReadClick()" 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>
|
||||
<form method="post" action="/{{ username }}">
|
||||
<textarea name="content" id="selected-words" rows="10" cols="120"></textarea><br/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue