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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
package reading.component.index
import scala.util.Random
import rx._
import scalacss.Defaults._
import scalacss.ScalatagsCss._
import scalatags.JsDom.all._
import reading.component.index.style.{ Books => BooksStyle }
import reading.component.widget.AnimateMethod
import reading.models.{ Book, Filter }
import reading.Route
import reading.utils.RxUtils._
object Books {
val componentId = s"books${Random.nextInt}"
def apply(
books: Rx[Seq[Book]],
filters: Var[Set[Filter]],
detail: Var[Option[Book]],
search: Var[String],
showFiltersMenu: Var[Boolean]
)(
implicit
ctx: Ctx.Owner
): Frag = {
val searchedBooks: Rx[Seq[Book]] = Rx(Book.filter(books(), search()))
if (detail.now.isEmpty) AnimateMethod.fadeIn(id = componentId)
div(
BooksStyle.booksParent,
div(
id := componentId,
BooksStyle.render,
BooksStyle.books,
Header(searchedBooks, filters, detail, search, showFiltersMenu),
div(
BooksStyle.listParent,
Rx {
div(
BooksStyle.list,
searchedBooks().sorted.map { book =>
div(
BooksStyle.book,
a(
href := Rx(Route.url(Route.Books(filters = filters(), detail = Some(book)))),
onclick := (() => {
Route.push(Route.Books(filters.now, Some(book)))
AnimateMethod.fadeOut(
id = componentId,
onEnd = detail() = Some(book)
)
}),
img(
BooksStyle.cover,
src := s"cover/${book.title}.jpg",
alt := s"${book.title}, ${book.author}"
)
)
)
}
)
}
)
),
Rx {
detail() match {
case Some(book) =>
BookDetail(filters, detail, search, book, componentId, onClose = {
closeDetail(filters, detail)
Route.push(Route.Books(filters.now, None))
})
case None =>
span("")
}
}
)
}
def closeDetail(filters: Var[Set[Filter]], detail: Var[Option[Book]]): Unit =
AnimateMethod.fadeOut(BookDetail.componentId, onEnd = {
detail() = None
AnimateMethod.fadeIn(componentId)
})
}
|
