forked from mrlan/EnglishPal
refactor fillword.js and highlight.js
parent
e48008550a
commit
3d24690ccf
GPG Key ID:
5E68C9F49AF31528
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
@ -92,4 +91,4 @@ function ChangeHighlight() {
|
|||
}
|
||||
}
|
||||
|
||||
showBtnHandler();
|
||||
showBtnHandler();
|
||||
Loading…
Reference in New Issue