diff --git a/app.py b/app.py index b55ca18..3ade04a 100755 --- a/app.py +++ b/app.py @@ -157,4 +157,4 @@ def dcard_dev(): if __name__ == "__main__": - app.run(debug=False, port=4998, host='0.0.0.0', threaded=True) + app.run(debug=True, port=4998, host='0.0.0.0', threaded=True) diff --git a/static/css/main.css b/static/css/main.css index ebde5f4..3480344 100755 --- a/static/css/main.css +++ b/static/css/main.css @@ -70,6 +70,32 @@ html { box-shadow: 0px 5px 20px rgba(0, 0, 0, .3); } +#idfEditor { + display: block; + position: fixed; + background-color: #FFF; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 653px; + height: 600px; + border: lightgray; + border-width: 1px; + border-style: solid; + border-radius: 20px; + padding: 26px; + z-index: 99; + box-shadow: 0px 5px 20px rgba(0, 0, 0, .3); +} + +#ieTableContainer { + position: relative; + height: 77%; + overflow: auto; + overflow-y: auto; + transition-duration: 0.5s; +} + #sweContainer { position: relative; height: 77%; diff --git a/static/js/dcard.js b/static/js/dcard.js index 9be574c..836ebab 100644 --- a/static/js/dcard.js +++ b/static/js/dcard.js @@ -16,7 +16,28 @@ function init() { }) }) changeData(1) - return + $('#idfEditorLayer').click(function(e) { + if ($('#idfEditorLayer').is(e.target)) { + hideIdfEditor() + } + }) +} + +function scrollIdfList() { + let targetWord = $('#idfTarget').val() + let wordList = $("#ieContainer").find("tr").slice(1).map((_, a) => { return $($(a).find("td")[0]).html() }).get() + console.log({ "targetWord": targetWord, 'list': wordList }) + if (targetWord != '') { + if (wordList.indexOf(targetWord) >= 0) { + + } else { + wordList.push(targetWord) + $('#ieContainer').find('tbody').append($('').attr('class', 'w3-display-container').append($('').attr('style', 'vertical-align: middle;').append(targetWord)).append($('').attr('class', 'w3-right-align').attr('style', 'vertical-align: middle;').append($('').attr('type', 'number').val(Object.keys(idfTable).indexOf(targetWord) < 0 ? 0 : idfTable[targetWord])))) + } + console.log($($('#ieContainer').children('tbody').find('tr')[[wordList.indexOf(targetWord)]]).position()) + $("#ieTableContainer").scrollTop($($('#ieContainer').children('tbody').find('tr')[[wordList.indexOf(targetWord)]]).position().top - 50) + } + $('#newStopWord').val('') } function changeData(num) { @@ -44,6 +65,85 @@ function changeData(num) { } } +function showIdfEditor() { + $(window).unbind('keydown') + $(window).keydown(function(event) { + if (event.keyCode == 13) { + scrollIdfList() + } + }) + $('#ieContainer').empty().append( + $('').append($('') + .append($('') + .attr('style', 'position: sticky; top: 0; background: white;') + .append('單詞')) + .append($('')) + .append($('').attr('class', 'w3-right-align') + .attr('style', 'position: sticky; top: 0; background: white;') + .append('單詞頻率') + ) + ) + ) + .append($('')) + for (word of Object.entries(idfTable).sort((a, b) => { return (b[1] - a[1]) }).map((a) => { return a[0] }).slice(0, 1000)) { + $('#ieContainer').find('tbody') + .append($('') + .attr('class', 'w3-display-container') + .append($('') + .attr('style', 'vertical-align: middle;') + .append(word)) + .append($('') + .attr('class', 'w3-right-align') + .append($(' + +
+ + + +
+ + + +