app/static/js/fillword.js

@@ -1,62 +1,29 @@
-let isRead = true;
+isRead = true;
-let isChoose = true;
+isChoose = true;
-let reader = window.speechSynthesis; // 全局定义朗读者，以便朗读和暂停
+var 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;
+   var word = window.getSelection?window.getSelection():document.selection.createRange().text;
+   return word;
 }
-
+function fillinWord(){
-function fillInWord() {
+   var word = getWord();
-    let word = getWord();
    if (isRead) read(word);
    if (!isChoose) return;
-    const element = document.getElementById("selected-words");
+   var element = document.getElementById("selected-words");
    element.value = element.value + " " + word;
 }
-
+document.getElementById("text-content").addEventListener("click", fillinWord, false);
-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") {
-            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;
-    reader.speak(msg);
-};
-
 function read(s){
-    to_speak = s.toString();
+   var msg = new SpeechSynthesisUtterance(s);
-    orig_position = 0;
-    let msg = makeUtterance(to_speak, inputSlider.value);
    reader.speak(msg);
 }
-
 function onReadClick(){
     isRead = !isRead;
     if(!isRead){
        reader.cancel();
     }
 }
-
 function onChooseClick(){
     isChoose = !isChoose;
 }

app/static/js/highlight.js

@@ -1,44 +1,45 @@
-let isHighlight = true;
+var isHighlight = true;
 
 function cancelBtnHandler() {
     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() {
-    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();
 }
 
 function getWord() {
-    return window.getSelection ? window.getSelection() : document.selection.createRange().text;
+    var word = window.getSelection ? window.getSelection() : document.selection.createRange().text;
+    return word;
 }
 
 function highLight() {
     if(!isHighlight) return;
-    let txt = document.getElementById("article").innerText;
+    var txt = document.getElementById("article").innerText;
-    let sel_word1 = document.getElementById("selected-words");
+    var sel_word1 = document.getElementById("selected-words");
-    let sel_word2 = document.getElementById("selected-words2");
+    var sel_word2 = document.getElementById("selected-words2");
     if (sel_word1 != null) {
-        const list = sel_word1.value.split(" ");
+        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, "");
-            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) {
-        const list2 = sel_word2.value.split(" ");
+        var list2 = sel_word2.value.split(" ");
-        for (let i = 0; i < list2.length; ++i) {
+        for (var 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>");
             }
         }
@@ -47,24 +48,24 @@ function highLight() {
 }
 
 function cancel_highLight() {
-    const list = sel_word1.value.split(" ");
+    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");
-    const sel_word2 = document.getElementById("selected-words2");
     if (sel_word1 != null) {
-        for (let i = 0; i < list.length; ++i) {
+        var list = sel_word1.value.split(" ");
+        for (var 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) {
-        let list2 = sel_word1.value.split(" ");
+        var list2 = sel_word1.value.split(" ");
-        for (let i = 0; i < list2.length; ++i) {
+        for (var i = 0; i < list2.length; ++i) {
-            list2 = sel_word2.value.split(" ");
+            var 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]");
             }
         }
@@ -72,11 +73,11 @@ function cancel_highLight() {
     document.getElementById("article").innerHTML = txt;
 }
 
-function fillInWord() {
+function fillinWord() {
     highLight();
 }
 
-function fillInWord2() {
+function fillinWord2() {
     cancel_highLight();
 }
 

app/templates/userpage_get.html

@@ -35,14 +35,7 @@
     <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/>