From 109f778c9742f92abab8e677dbcba5890dbf4a45 Mon Sep 17 00:00:00 2001 From: Joshua Hawkins Date: Thu, 11 Jun 2020 09:52:51 -0400 Subject: [PATCH 1/3] Add an example with keyboard navigation --- examples/keyboard_navigation.html | 146 ++++++++++++++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 examples/keyboard_navigation.html diff --git a/examples/keyboard_navigation.html b/examples/keyboard_navigation.html new file mode 100644 index 00000000..1fa15158 --- /dev/null +++ b/examples/keyboard_navigation.html @@ -0,0 +1,146 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From b1dd8eb1781a137a13394953708fa63e7453fbe2 Mon Sep 17 00:00:00 2001 From: Joshua Hawkins Date: Fri, 12 Jun 2020 13:49:43 -0400 Subject: [PATCH 2/3] Scroll ahead by a few columns in all directions --- examples/keyboard_navigation.html | 94 ++++++++++++++++++------------- 1 file changed, 54 insertions(+), 40 deletions(-) diff --git a/examples/keyboard_navigation.html b/examples/keyboard_navigation.html index 1fa15158..425cd6da 100644 --- a/examples/keyboard_navigation.html +++ b/examples/keyboard_navigation.html @@ -34,7 +34,6 @@ - - From 3074a556c7b23efdb39e3cb65939541a18fd1d88 Mon Sep 17 00:00:00 2001 From: Joshua Hawkins Date: Fri, 12 Jun 2020 21:03:53 -0400 Subject: [PATCH 3/3] Begin porting to spreadsheet.md --- examples/spreadsheet.md | 87 ++++++++++++++++++++++++++++++++++++----- 1 file changed, 77 insertions(+), 10 deletions(-) diff --git a/examples/spreadsheet.md b/examples/spreadsheet.md index de9cb93b..96ed96da 100644 --- a/examples/spreadsheet.md +++ b/examples/spreadsheet.md @@ -140,11 +140,24 @@ function compile(input) { ## User Interaction ```javascript -table.addStyleListener(() => { - for (const td of table.querySelectorAll("td")) { +let xIndex = 0; +let yIndex = 0; + +const updateFocus = () => { + const tds = table.querySelectorAll("regular-table tbody tr td"); + for (const td of tds) { td.setAttribute("contenteditable", true); + const meta = table.getMeta(td); + if (meta.x === xIndex && meta.y === yIndex) { + td.focus(); + } else { + // console.error("blur here?"); + // td.blur(); + } } -}); +}; + +table.addStyleListener(updateFocus); table.draw(); ``` @@ -181,7 +194,7 @@ table.addEventListener("keypress", (event) => { if (event.keyCode === 13) { event.preventDefault(); write(target); - increment(target); + step(target, 0, 1); } }); @@ -191,20 +204,74 @@ table.addEventListener("keyup", (event) => { highlight(target); } }); + +table.addEventListener("keydown", (event) => { + const target = document.activeElement; + switch (event.keyCode) { + // left arrow + case 37: + step(target, -1, 0); + break; + // up arrow + case 38: + step(target, 0, -1); + break; + // right arrow + case 39: + step(target, 1, 0); + break; + // down arrow + case 40: + step(target, 0, 1); + break; + } +}); ``` This also makes use of `increment()`, which uses some simple metadata-math to look up the cell in the next row of this column, and `focus()` it. ```javascript -function increment(active_cell) { +// TODO split function +function step(active_cell, dx, dy) { + // TODO - this shouldn't be! + const scrollStep = 2; // if scroll * 2 > num rows or columns theres a problem const meta = table.getMeta(active_cell); - const rows = Array.from(table.querySelectorAll("tbody tr")); - const next_row = rows[meta.y - meta.y0 + 1]; - if (next_row) { - const td = next_row.children[meta.x + 1]; - td.focus(); + + if (meta.x + dx < NUM_COLUMNS && 0 <= meta.x + dx) { + xIndex = meta.x + dx; + } + if (dx !== 0) { + // scroll x axis if necessary + const columns = table.querySelectorAll("regular-table tbody tr:first-child td"); + if (meta.x0 + columns.length <= xIndex + scrollStep) { + table.scrollTo(meta.x0 + 2, meta.y0, NUM_COLUMNS, NUM_ROWS); + } else if (xIndex - scrollStep < meta.x0) { + if (0 < meta.x0 - 1) { + table.scrollTo(meta.x0 - 1, meta.y0, NUM_COLUMNS, NUM_ROWS); + } else { + table.scrollTo(0, meta.y0, NUM_COLUMNS, NUM_ROWS); + } + } + } + + if (meta.y + dy < NUM_ROWS && 0 <= meta.y + dy) { + yIndex = meta.y + dy; + } + if (dy !== 0) { + // scroll y axis if necessary + const rows = table.querySelectorAll("regular-table tbody tr"); + if (meta.y0 + rows.length <= yIndex + scrollStep) { + table.scrollTo(meta.x0, meta.y0 + 1, NUM_COLUMNS, NUM_ROWS); + } else if (yIndex - scrollStep + 2 < meta.y0) { + if (0 < meta.y0 - 1) { + table.scrollTo(meta.x0, meta.y0 - 1, NUM_COLUMNS, NUM_ROWS); + } else { + table.scrollTo(meta.x0, 0, NUM_COLUMNS, NUM_ROWS); + } + } } + updateFocus(); } ```