From: Benjamin Auder Date: Tue, 18 Feb 2020 20:57:25 +0000 (+0100) Subject: Fix scrolling to current move in MovesList X-Git-Url: https://git.auder.net/variants/current/doc/css/scripts/app_dev.php?a=commitdiff_plain;h=c6b8d37f7bd48c1e04061da787855ebd57326fa5;p=vchess.git Fix scrolling to current move in MovesList --- diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue index aa12969a..30ed2338 100644 --- a/client/src/components/MoveList.vue +++ b/client/src/components/MoveList.vue @@ -3,31 +3,6 @@ import { store } from "@/store"; export default { name: "my-move-list", props: ["moves", "cursor", "score", "message", "firstNum"], - watch: { - cursor: function(newCursor) { - if (window.innerWidth <= 767) return; //scrolling would hide chessboard - // Count grouped moves until the cursor (if multi-moves): - let groupsCount = -1; - let curCol = undefined; - for (let i = 0; i < newCursor; i++) { - const m = this.moves[i]; - if (m.color != curCol) { - groupsCount++; - curCol = m.color; - } - } - // $nextTick to wait for table > tr to be rendered - this.$nextTick(() => { - let rows = document.querySelectorAll("#movesList tr"); - if (rows.length > 0) { - rows[Math.floor(Math.max(groupsCount, 0) / 2)].scrollIntoView({ - behavior: "auto", - block: "nearest" - }); - } - }); - } - }, render(h) { if (this.moves.length == 0) return h("div"); let tableContent = []; @@ -108,6 +83,31 @@ export default { ); return h("div", {}, rootElements); }, + watch: { + cursor: function(newCursor) { + if (window.innerWidth <= 767) return; //scrolling would hide chessboard + // Count grouped moves until the cursor (if multi-moves): + let groupsCount = 0; + let curCol = undefined; + for (let i = 0; i < newCursor; i++) { + const m = this.moves[i]; + if (m.color != curCol) { + groupsCount++; + curCol = m.color; + } + } + // $nextTick to wait for table > tr to be rendered + this.$nextTick(() => { + let rows = document.querySelectorAll("#movesList tr"); + if (rows.length > 0) { + rows[Math.floor(groupsCount / 2)].scrollIntoView({ + behavior: "auto", + block: "nearest" + }); + } + }); + } + }, methods: { gotoMove: function(index) { this.$emit("goto-move", index);