forked from mrlan/EnglishPal
				
			refactor: Add comments & optimize code
							parent
							
								
									2966a8162f
								
							
						
					
					
						commit
						83491ce28c
					
				| 
						 | 
				
			
			@ -1,4 +1,5 @@
 | 
			
		|||
let isRead = localStorage.getItem('readChecked') !== 'false';
 | 
			
		||||
// initialize from localStorage
 | 
			
		||||
let isRead = localStorage.getItem('readChecked') !== 'false';  // default to true
 | 
			
		||||
let isChoose = localStorage.getItem('chooseChecked') !== 'false';
 | 
			
		||||
 | 
			
		||||
function getWord() {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,4 +1,4 @@
 | 
			
		|||
let isHighlight = localStorage.getItem('highlightChecked') !== 'false';
 | 
			
		||||
let isHighlight = localStorage.getItem('highlightChecked') !== 'false'; // default to true
 | 
			
		||||
 | 
			
		||||
function cancelBtnHandler() {
 | 
			
		||||
    cancelHighlighting();
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -54,18 +54,20 @@
 | 
			
		|||
        {% endfor %}
 | 
			
		||||
    {% endif %}
 | 
			
		||||
<script type="text/javascript">
 | 
			
		||||
    window.onload = function() {
 | 
			
		||||
        document.getElementById('article').value = localStorage.getItem('article') || '';
 | 
			
		||||
    }
 | 
			
		||||
    document.getElementById('article').addEventListener('input', saveArticle);
 | 
			
		||||
    // IIFE, avoid polluting the global scope
 | 
			
		||||
    (function() {
 | 
			
		||||
        const articleInput = document.querySelector('#article');
 | 
			
		||||
        articleInput.value = localStorage.getItem('article') || '';
 | 
			
		||||
 | 
			
		||||
    function saveArticle() {
 | 
			
		||||
        localStorage.setItem('article', document.getElementById('article').value);
 | 
			
		||||
    }
 | 
			
		||||
        articleInput.addEventListener('input', function() {
 | 
			
		||||
            localStorage.setItem('article', articleInput.value);
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
    function clearArticle() {
 | 
			
		||||
        window.clearArticle = function() {
 | 
			
		||||
            localStorage.removeItem('article');
 | 
			
		||||
    }
 | 
			
		||||
            articleInput.value = '';
 | 
			
		||||
        };
 | 
			
		||||
    })();
 | 
			
		||||
 | 
			
		||||
</script>
 | 
			
		||||
</body>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -117,7 +117,7 @@
 | 
			
		|||
            <div class="sliderValue">
 | 
			
		||||
                <span id="rangeValue">1×</span>
 | 
			
		||||
            </div>
 | 
			
		||||
            <input type="range" id="rangeComponent" min="0.5" max="2" value="1" step="0.25" onchange="saveRangeValue()" />
 | 
			
		||||
            <input type="range" id="rangeComponent" min="0.5" max="2" value="1" step="0.25" />
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <p><b>收集生词吧</b> (可以在正文中划词,也可以复制黏贴)</p>
 | 
			
		||||
| 
						 | 
				
			
			@ -174,40 +174,53 @@
 | 
			
		|||
{% endif %}
 | 
			
		||||
<script type="text/javascript">
 | 
			
		||||
    window.onload = function () { // 页面加载时执行
 | 
			
		||||
        const highlightChecked = localStorage.getItem('highlightChecked') !== 'false';
 | 
			
		||||
        const readChecked = localStorage.getItem('readChecked') !== 'false';
 | 
			
		||||
        const chooseChecked = localStorage.getItem('chooseChecked') !== 'false';
 | 
			
		||||
        const rangeValue = localStorage.getItem('rangeValue') || '1';
 | 
			
		||||
        const selectedWords = localStorage.getItem('selectedWords') || '';
 | 
			
		||||
        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') || ''
 | 
			
		||||
        };
 | 
			
		||||
 | 
			
		||||
        document.getElementById('highlightCheckbox').checked = highlightChecked;
 | 
			
		||||
        document.getElementById('readCheckbox').checked = readChecked;
 | 
			
		||||
        document.getElementById('chooseCheckbox').checked = chooseChecked;
 | 
			
		||||
        document.getElementById('rangeComponent').value = rangeValue;
 | 
			
		||||
        document.getElementById('rangeValue').innerHTML = rangeValue + 'x';
 | 
			
		||||
        document.getElementById('selected-words').value = 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')){
 | 
			
		||||
        if (sessionStorage.getItem('pre_page_button') !== 'display' && sessionStorage.getItem('pre_page_button')) {
 | 
			
		||||
            $('#load_pre_article').show();
 | 
			
		||||
        }
 | 
			
		||||
     };
 | 
			
		||||
    document.getElementById('selected-words').addEventListener('input', saveSelectedWords);
 | 
			
		||||
 | 
			
		||||
    function saveSelectedWords() {
 | 
			
		||||
        let selectedWordsTextarea = document.getElementById('selected-words');
 | 
			
		||||
        localStorage.setItem('selectedWords', selectedWordsTextarea.value);
 | 
			
		||||
    }
 | 
			
		||||
        // 事件监听器
 | 
			
		||||
        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 saveRangeValue() {
 | 
			
		||||
        const rangeValue = document.getElementById('rangeComponent').value;
 | 
			
		||||
        document.getElementById('rangeValue').textContent = rangeValue;
 | 
			
		||||
        localStorage.setItem('rangeValue', rangeValue);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    function load_next_article(){
 | 
			
		||||
        $.ajax({
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue