-
Notifications
You must be signed in to change notification settings - Fork 170
/
BooksList.js
85 lines (68 loc) · 1.96 KB
/
BooksList.js
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
const {CollectionView, Composite, ImageView, TextView, contentView} = require('tabris');
const books = require('./books');
module.exports = class BooksList extends CollectionView {
constructor(properties) {
super(Object.assign({id: 'booksList', cellHeight: 72}, properties));
this._books = books.filter(this.filter);
this.itemCount = this.books.length;
}
get books() {
return this._books;
}
set filter(filter) {
this._filter = filter;
}
get filter() {
return this._filter || (() => true);
}
createCell() {
super.createCell();
return new BookCell();
}
updateCell(view, index) {
super.updateCell(view, index);
Object.assign(view, {book: books[index]});
}
};
class BookCell extends Composite {
constructor(properties) {
super(Object.assign({highlightOnTouch: true}, properties));
this._createUI();
this._applyLayout();
this._applyStyles();
this.onTap(this._showBookDetailsPage);
}
set book(book) {
this._book = book;
this.find('#image').first().image = book.image;
this.find('#titleLabel').first().text = book.title;
this.find('#authorLabel').first().text = book.author;
}
get book() {
return this._book;
}
_showBookDetailsPage() {
const BookDetailsPage = require('./BookDetailsPage');
new BookDetailsPage({title: this.book.title, book: this.book}).appendTo(contentView.find('NavigationView').first());
}
_createUI() {
this.append(
new ImageView({id: 'image'}),
new TextView({id: 'titleLabel', markupEnabled: true}),
new TextView({id: 'authorLabel'})
);
}
_applyLayout() {
this.apply({
'#image': {left: 16, centerY: 0, width: 32, height: 48, scaleMode: 'fit'},
'#titleLabel': {left: 64, right: 16, top: 16},
'#authorLabel': {left: 64, right: 16, top: 'prev() 4'}
});
}
_applyStyles() {
this.apply({
'#titleLabel': {textColor: '#4a4a4a'},
'#authorLabel': {textColor: '#7b7b7b'}
});
}
}