diff --git a/src/js/account.js b/src/js/account.js index 622981073..2b90df04d 100644 --- a/src/js/account.js +++ b/src/js/account.js @@ -158,9 +158,15 @@ export function getDataAndInit() { let filteredResults = []; let visibleTableLines = 0; -function loadMoreLines() { +function loadMoreLines(lineIndex) { if (filteredResults == [] || filteredResults.length == 0) return; - for (let i = visibleTableLines; i < visibleTableLines + 10; i++) { + let newVisibleLines; + if (lineIndex && lineIndex > visibleTableLines) { + newVisibleLines = Math.ceil(lineIndex / 10) * 10; + } else { + newVisibleLines = visibleTableLines + 10; + } + for (let i = visibleTableLines; i < newVisibleLines; i++) { const result = filteredResults[i]; if (result == undefined) continue; let withpunc = ""; @@ -265,7 +271,7 @@ function loadMoreLines() { } $(".pageAccount .history table tbody").append(` - + ${pb} ${result.wpm.toFixed(2)} ${raw} @@ -279,7 +285,7 @@ function loadMoreLines() { ${moment(result.timestamp).format("DD MMM YYYY
HH:mm")} `); } - visibleTableLines += 10; + visibleTableLines = newVisibleLines; if (visibleTableLines >= filteredResults.length) { $(".pageAccount .loadMoreButton").addClass("hidden"); } else { @@ -817,6 +823,21 @@ $(".pageAccount .loadMoreButton").click((e) => { loadMoreLines(); }); +$(".pageAccount #accountHistoryChart").click((e) => { + let activeElement = ChartController.accountHistory.getElementAtEvent(e); + if (activeElement == [] || activeElement.length == 0) return; + let index = activeElement[0]._index; + loadMoreLines(index); + $([document.documentElement, document.body]).animate( + { + scrollTop: $(`#result-${index}`).offset().top, + }, + 500 + ); + $(".result-row").removeClass("active"); + $(`#result-${index}`).addClass("active"); +}); + $(document).on("click", ".pageAccount .miniResultChartButton", (event) => { console.log("updating"); let filteredId = $(event.currentTarget).attr("filteredResultsId"); diff --git a/src/sass/style.scss b/src/sass/style.scss index 2a172b679..243d36056 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -3268,6 +3268,10 @@ key { } &.history { + .active { + background: var(--main-color); + color: var(--bg-color); + } .loadMoreButton { background: rgba(0, 0, 0, 0.1); color: var(--text-color); @@ -3388,12 +3392,11 @@ key { #resultEditTags { transition: 0.25s; - } - - #resultEditTags:hover { - cursor: pointer; - color: var(--text-color); - opacity: 1 !important; + &:hover { + cursor: pointer; + color: var(--text-color); + opacity: 1 !important; + } } }