From 9cdc9c6f7fe06fcdb485c9ca038f953a67cf30e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E9=9B=A8=E5=B3=B0?= <1141730046@qq.com> Date: Sun, 29 Jan 2023 12:01:19 +0800 Subject: [PATCH] Bug521-LiYuFeng-Refactor (#72) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @mrlan 蓝老师： 本次改进内容如下： 1. 对生词居中问题进行修改，现在已经不会居中了。 2. 对于单词数量基数大而导致的排序速度慢的问题，我们进行了优化，提升了排序的速度。 3. 对用户交互进行了优化，当用户点击“熟悉”或“不熟悉”之后，会自动进行排序，并会跳转到那个单词的位置，用抖动的效果来提示用户。 Co-authored-by: isaac <1141730046@qq.com> Reviewed-on: http://121.4.94.30:3000/mrlan/EnglishPal/pulls/72 Co-authored-by: 李雨峰 <1141730046@qq.com> Co-committed-by: 李雨峰 <1141730046@qq.com> --- app/static/js/word_operation.js | 139 ++++++++++++++++++++++++++++++-- app/templates/userpage_get.html | 64 ++++++++++----- 2 files changed, 177 insertions(+), 26 deletions(-) diff --git a/app/static/js/word_operation.js b/app/static/js/word_operation.js index a55fb6e..a9af300 100644 --- a/app/static/js/word_operation.js +++ b/app/static/js/word_operation.js @@ -7,10 +7,20 @@ function familiar(theWord) { url:"/" + username + "/" + word + "/familiar", success:function(response){ let new_freq = freq - 1; - if(new_freq <1) { - $("#p_" + theWord).remove(); + const allow_move = document.getElementById("move_dynamiclly").checked; + if (allow_move) { + + if (new_freq <= 0) { + removeWord(theWord); + } else { + renderWord({ word: theWord, freq: new_freq }); + } } else { - $("#freq_" + theWord).text(new_freq); + if(new_freq <1) { + $("#p_" + theWord).remove(); + } else { + $("#freq_" + theWord).text(new_freq); + } } } }); @@ -25,7 +35,12 @@ function unfamiliar(theWord) { url:"/" + username + "/" + word + "/unfamiliar", success:function(response){ let new_freq = parseInt(freq) + 1; - $("#freq_" + theWord).text(new_freq); + const allow_move = document.getElementById("move_dynamiclly").checked; + if (allow_move) { + renderWord({ word: theWord, freq: new_freq }); + } else { + $("#freq_" + theWord).text(new_freq); + } } }); } @@ -37,7 +52,121 @@ function delete_word(theWord) { type:"GET", url:"/" + username + "/" + word + "/del", success:function(response){ - $("#p_" + theWord).remove(); + const allow_move = document.getElementById("move_dynamiclly").checked; + if (allow_move) { + removeWord(theWord); + } else { + $("#p_" + theWord).remove(); + } } }); } + +/* + * interface Word { + * word: string, + * freq: number + * } +* */ + +/** + * 传入一个词频HTML元素，将其解析为Word类型的对象 + */ +function parseWord(element) { + const word = element + .querySelector("a.btn.btn-light[role=button]") // 获取当前词频元素的词汇元素 + .innerText // 获取词汇值; + const freq = Number.parseInt(element.querySelector(`#freq_${word}`).innerText); // 获取词汇的数量 + return { + word, + freq + }; +} + +/** + * 使用模板将传入的单词转换为相应的HTML字符串 +*/ +function wordTemplate(word) { + // 这个模板应当与 templates/userpage_get.html 中的

...

保持一致 + return `

+ ${word.word} + ( ${word.freq} ) + 熟悉 + 不熟悉 + 删除 +

`; +} + +/** + * 删除某一词频元素 + * 此处word为词频元素对应的单词 + */ +function removeWord(word) { + // 根据词频信息删除元素 + const element_to_remove = document.getElementById(`p_${word}`); + if (element_to_remove != null) { + element_to_remove.remove(); + } +} + +function renderWord(word) { + const container = document.querySelector(".word-container"); + // 删除原有元素 + removeWord(word.word); + // 插入新元素 + let inserted = false; + const new_element = elementFromString(wordTemplate(word)); + for (const current of container.children) { + const cur_word = parseWord(current); + // 找到第一个词频比它小的元素，插入到这个元素前面 + if (compareWord(cur_word, word) == -1) { + container.insertBefore(new_element, current); + inserted = true; + break; + } + } + // 当word就是词频最小的词时，把他补回去 + if (!inserted) { + container.appendChild(new_element); + } + // 让发生变化的元素抖动 + new_element.classList.add("shaking"); + // 移动到该元素 + new_element.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"}); + // 抖动完毕后删除抖动类 + setTimeout(() => { + new_element.classList.remove("shaking"); + }, 1600); +} + +/** + * 从string中创建一个HTML元素并返回 + */ +function elementFromString(string) { + const d = document.createElement('div'); + d.innerHTML = string; + return d.children.item(0); +} + +/** + * 对比两个单词： + * 当first小于second时返回-1 + * 当first等于second时返回0 + * 当first大于second时返回1 + */ +function compareWord(first, second) { + if (first.freq < second.freq) { + return -1; + } + if (first.freq > second.freq) { + return 1; + } + if (first.word < second.word) { + return -1; + } + if (first.word > second.word) { + return 1; + } + return 0; +} \ No newline at end of file diff --git a/app/templates/userpage_get.html b/app/templates/userpage_get.html index 24bff60..dc0d497 100644 --- a/app/templates/userpage_get.html +++ b/app/templates/userpage_get.html @@ -19,19 +19,33 @@ {% endif %} EnglishPal Study Room for {{ username }} + +

English Pal for {{ username }} - 退出 - 重设密码 + 退出 + 重设密码

{{ flashed_messages|safe }} - 下一篇 Next Article + 下一篇 Next Article {% if session.get('articleID') != session.get('old_articleID') %} {% if session.get('old_articleID') != None %} - 上一篇 Previous Article + 上一篇 Previous Article {% endif%} {% endif %} @@ -52,7 +66,7 @@

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


- +
{% if session.get['thisWord'] %} @@ -67,22 +81,30 @@ {% endif %} {% if d_len > 0 %} -

我的生词簿

- {% for x in lst3 %} - {% set word = x[0] %} - {% set freq = x[1] %} - {% if session.get('thisWord') == x[0] and session.get('time') == 1 %} - - {% endif %} -

- {{ word }} - ( {{ freq }} ) - 熟悉 - 不熟悉 - 删除 -

- {% endfor %} +

+ 我的生词簿 + +

+ +
+ {% for x in lst3 %} + {% set word = x[0] %} + {% set freq = x[1] %} + {% if session.get('thisWord') == x[0] and session.get('time') == 1 %} + {% endif %} +

+ {{ word }} + ( {{ freq }} ) + 熟悉 + 不熟悉 + 删除 +

+ {% endfor %} +
{% endif %}