1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
import { h, withVar, mount, Html, Rx } from 'lib/rx'
import * as Book from 'book'
import * as Modal from 'view/components/modal'
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)
})))
])
)
}
interface ViewBookParams {
book: Book.Book
onSelect: (book: Book.Book) => void
}
function viewBook({ book, onSelect }: ViewBookParams): Html {
return h('button',
{ className: 'g-Book' },
h('img',
{ src: book.cover,
className: 'g-Book__Image',
onclick: () => onSelect(book)
}
)
)
}
interface BookDetailModalParams {
book: Book.Book
onClose: () => void
}
function bookDetailModal({ book, onClose }: BookDetailModalParams): Html {
return Modal.view({
header: h('div',
h('div', { className: 'g-BookDetail__Title' }, `${book.title}, ${book.date}`),
book.subtitle && h('div', { className: 'g-BookDetail__Subtitle' }, book.subtitle)
),
body: h('div',
{ className: 'g-BookDetail' },
h('img', { src: book.cover }),
h('div',
h('dl',
metadata('Auteur', book.authors),
metadata('Genre', book.genres)
),
book.summary && book.summary
.split('\n')
.map(str => str.trim())
.filter(str => str != '')
.map(str => h('p', str))
)
),
onClose
})
}
function metadata(term: string, descriptions: Array<string>): Html {
return h('div',
h('dt', term, descriptions.length > 1 && 's', ' :'),
h('dd', ' ', descriptions.join(', '))
)
}
|
