Go to previous or next book with left and right

1 files changed, 52 insertions, 10 deletions

diff --git a/src/view/books.ts b/src/view/books.ts
index 7cb3cc1..5ec019a 100644
--- a/src/view/books.ts
+++ b/src/view/books.ts
@@ -6,18 +6,56 @@ export function view(books: Rx<Array<Book.Book>>): Html {
   return h('div',
     { className: 'g-Books' },
     withVar<Book.Book | undefined>(undefined, (focusBook, updateFocusBook) => [
-      focusBook.map(book => book && bookDetailModal({
-        book,
-        onClose: () => updateFocusBook(_ => undefined)
-      })),
-      books.map(bs => bs.map(book => viewBook({
-        book,
-        onSelect: (book) => updateFocusBook(_ => book)
-      })))
+      books.map(bs => [
+        focusBook.map(book => {
+          if (book !== undefined) {
+            let onKeyup = keyupHandler({ 
+              books: bs, 
+              book,
+              onUpdate: (book: Book.Book) => updateFocusBook(_ => book)
+            })
+
+            return bookDetailModal({
+              book,
+              onClose: () => updateFocusBook(_ => undefined),
+              onmount: () => addEventListener('keyup', onKeyup),
+              onunmount: () => removeEventListener('keyup', onKeyup)
+            })
+          }
+        }),
+        bs.map(book => viewBook({
+          book,
+          onSelect: (book) => updateFocusBook(_ => book)
+        }))
+      ])
     ])
   )
 }
 
+interface KeyupHandlerParams {
+  books: Array<Book.Book>
+  book: Book.Book
+  onUpdate: (book: Book.Book) => void
+}
+
+function keyupHandler({ books, book, onUpdate }: KeyupHandlerParams): ((e: KeyboardEvent) => void) {
+  return (e: KeyboardEvent) => {
+    if (e.key === 'ArrowLeft') {
+      const indexedBooks = books.map((b, i) => ({ b, i }))
+      const focus = indexedBooks.find(({ b }) => b == book)
+      if (focus !== undefined && focus.i > 0) {
+        onUpdate(books[focus.i - 1])
+      }
+    } else if (e.key === 'ArrowRight') {
+      const indexedBooks = books.map((b, i) => ({ b, i }))
+      const focus = indexedBooks.find(({ b }) => b == book)
+      if (focus !== undefined && focus.i < books.length - 1) {
+        onUpdate(books[focus.i + 1])
+      }
+    }
+  }
+}
+
 interface ViewBookParams {
   book: Book.Book
   onSelect: (book: Book.Book) => void
@@ -38,9 +76,11 @@ function viewBook({ book, onSelect }: ViewBookParams): Html {
 interface BookDetailModalParams {
   book: Book.Book
   onClose: () => void
+  onmount: () => void
+  onunmount: () => void
 }
 
-function bookDetailModal({ book, onClose }: BookDetailModalParams): Html {
+function bookDetailModal({ book, onClose, onmount, onunmount }: BookDetailModalParams): Html {
   return Modal.view({
     header: h('div',
       h('div', { className: 'g-BookDetail__Title' }, `${book.title}, ${book.date}`),
@@ -61,7 +101,9 @@ function bookDetailModal({ book, onClose }: BookDetailModalParams): Html {
           .map(str => h('p', str))
       )
     ),
-    onClose
+    onClose,
+    onmount,
+    onunmount
   })
 }