nizhouting
/
EnglishPal
forked from mrlan/EnglishPal
1
0
Fork 0
Code Pull Requests Activity

fix

Bug555-chenshiying
陳詩穎 2024-06-25 02:34:59 +08:00
parent a49019eb78
commit 6733ed9f86
1 changed files with 70 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
app/templates/userpage_get.html
View File

@ -108,7 +108,7 @@
<p><b id="question">{{ today_article['question'] }}</b></p><br/>
<script type="text/javascript">
function toggle_visibility(id) { {# https://css-tricks.com/snippets/javascript/showhide-element/#}
function toggle_visibility(id) {
const e = document.getElementById(id);
if (e.style.display === 'block')
e.style.display = 'none';
@ -195,55 +195,11 @@
{% endfor %}
{% endif %}
<script type="text/javascript">
window.onload = function () { // 页面加载时执行
const settings = {
// initialize settings from localStorage
highlightChecked: localStorage.getItem('highlightChecked') !== 'false', // localStorage stores strings, default to true. same below
readChecked: localStorage.getItem('readChecked') !== 'false',
chooseChecked: localStorage.getItem('chooseChecked') !== 'false',
rangeValue: localStorage.getItem('rangeValue') || '1',
selectedWords: localStorage.getItem('selectedWords') || ''
};
const elements = {
highlightCheckbox: document.querySelector('#highlightCheckbox'),
readCheckbox: document.querySelector('#readCheckbox'),
chooseCheckbox: document.querySelector('#chooseCheckbox'),
rangeComponent: document.querySelector('#rangeComponent'),
rangeValueDisplay: document.querySelector('#rangeValue'),
selectedWordsInput: document.querySelector('#selected-words')
};
// 应用设置到页面元素
elements.highlightCheckbox.checked = settings.highlightChecked;
elements.readCheckbox.checked = settings.readChecked;
elements.chooseCheckbox.checked = settings.chooseChecked;
elements.rangeComponent.value = settings.rangeValue;
elements.rangeValueDisplay.textContent = `${settings.rangeValue}x`;
elements.selectedWordsInput.value = settings.selectedWords;
// 刷新页面或进入页面时判断，若不是首篇文章，则上一篇按钮可见
if (sessionStorage.getItem('pre_page_button') !== 'display' && sessionStorage.getItem('pre_page_button')) {
$('#load_pre_article').show();
}
// 事件监听器
elements.selectedWordsInput.addEventListener('input', () => {
localStorage.setItem('selectedWords', elements.selectedWordsInput.value);
});
elements.rangeComponent.addEventListener('input', () => {
const rangeValue = elements.rangeComponent.value;
elements.rangeValueDisplay.textContent = `${rangeValue}x`;
localStorage.setItem('rangeValue', rangeValue);
});
};
function clearSelectedWords() {
localStorage.removeItem('selectedWords');
document.querySelector('#selected-words').value = '';
}
function load_next_article() {
$("#load_next_article").prop("disabled", true)
$.ajax({
@ -295,7 +251,6 @@
}, 2000);
}
<!-- 检查是否存在上一篇或下一篇，不存在则对应按钮隐藏-->
function check_pre(visited_articles) {
if ((visited_articles == '') || (visited_articles['index'] <= 0)) {
$('#load_pre_article').hide();
@ -321,13 +276,74 @@
$('#read_all').show();
}
}
function longPolling() {
$.ajax({
url: '/get_next_article/{{username}}', // 这里的URL根据需要更改
dataType: 'json',
success: function(data) {
if (data['today_article']) {
update(data['today_article']);
check_pre(data['visited_articles']);
check_next(data['result_of_generate_article']);
toggleHighlighting();
}
// 发起下一次Long Polling请求
longPolling();
},
error: function() {
// 处理错误情况
// 发起下一次Long Polling请求
longPolling();
},
timeout: 30000 // 设置超时时间，单位为毫秒
});
}
window.onload = function () { // 页面加载时执行
longPolling();
const settings = {
// initialize settings from localStorage
highlightChecked: localStorage.getItem('highlightChecked') !== 'false', // localStorage stores strings, default to true. same below
readChecked: localStorage.getItem('readChecked') !== 'false',
chooseChecked: localStorage.getItem('chooseChecked') !== 'false',
rangeValue: localStorage.getItem('rangeValue') || '1',
selectedWords: localStorage.getItem('selectedWords') || ''
};
const elements = {
highlightCheckbox: document.querySelector('#highlightCheckbox'),
readCheckbox: document.querySelector('#readCheckbox'),
chooseCheckbox: document.querySelector('#chooseCheckbox'),
rangeComponent: document.querySelector('#rangeComponent'),
rangeValueDisplay: document.querySelector('#rangeValue'),
selectedWordsInput: document.querySelector('#selected-words')
};
// 应用设置到页面元素
elements.highlightCheckbox.checked = settings.highlightChecked;
elements.readCheckbox.checked = settings.readChecked;
elements.chooseCheckbox.checked = settings.chooseChecked;
elements.rangeComponent.value = settings.rangeValue;
elements.rangeValueDisplay.textContent = `${settings.rangeValue}x`;
elements.selectedWordsInput.value = settings.selectedWords;
// 刷新页面或进入页面时判断，若不是首篇文章，则上一篇按钮可见
if (sessionStorage.getItem('pre_page_button') !== 'display' && sessionStorage.getItem('pre_page_button')) {
$('#load_pre_article').show();
}
// 事件监听器
elements.selectedWordsInput.addEventListener('input', () => {
localStorage.setItem('selectedWords', elements.selectedWordsInput.value);
});
elements.rangeComponent.addEventListener('input', () => {
const rangeValue = elements.rangeComponent.value;
elements.rangeValueDisplay.textContent = `${rangeValue}x`;
localStorage.setItem('rangeValue', rangeValue);
});
};
</script>
</body>
<style>
mark {
color: #{{ yml['highlight']['color'] }};
background-color: rgba(0, 0, 0, 0);
}
</style>
</html>