| ... |
... |
@@ -15,7 +15,7 @@ |
| 15 |
15 |
<style> |
| 16 |
16 |
${this.styles} |
| 17 |
17 |
</style> |
| 18 |
|
- ${this.html} |
|
18 |
+ ${this.template} |
| 19 |
19 |
`; |
| 20 |
20 |
return template; |
| 21 |
21 |
} |
| ... |
... |
@@ -46,17 +46,19 @@ |
| 46 |
46 |
// this.attachShadow({ mode: 'open' }); |
| 47 |
47 |
super.connectedCallback(); |
| 48 |
48 |
this.render(); |
| 49 |
|
- this.$('#search').addEventListener('click', this.handleSearch); |
| 50 |
|
- this.$('#prev').addEventListener('click', this.handlePrevPage); |
| 51 |
|
- this.$('#next').addEventListener('click', this.handleNextPage; |
|
49 |
+ this.$('#search').addEventListener('click', () => this.handleSearch()); |
|
50 |
+ this.$('#prev').addEventListener('click', () => { |
|
51 |
+ if(this.offset > 0) { |
|
52 |
+ this.offset--; |
|
53 |
+ this.handleSearch(); |
|
54 |
+ } |
|
55 |
+ }); |
|
56 |
+ this.$('#next').addEventListener('click', () => { |
|
57 |
+ this.offset++; |
|
58 |
+ this.handleSearch(); |
|
59 |
+ }); |
| 52 |
52 |
} |
| 53 |
53 |
|
| 54 |
|
- disconnectedCallback() { |
| 55 |
|
- this.$('#search').removeEventListener('click', this.handleSearch; |
| 56 |
|
- this.$('#prev').removeEventListener('click', this.handlePrevPage); |
| 57 |
|
- this.$('#next').removeEventListener('click', this.handleNextPage); |
| 58 |
|
- } |
| 59 |
|
- |
| 60 |
60 |
get styles() { |
| 61 |
61 |
return ` |
| 62 |
62 |
input[type="text"] { |
| ... |
... |
@@ -64,16 +64,6 @@ |
| 64 |
64 |
} |
| 65 |
65 |
` |
| 66 |
66 |
} |
| 67 |
|
- handlePrevPage = () => { |
| 68 |
|
- if(this.offset > 0) { |
| 69 |
|
- this.offset--; |
| 70 |
|
- this.handleSearch(); |
| 71 |
|
- } |
| 72 |
|
- } |
| 73 |
|
- handleNextPage = () => { |
| 74 |
|
- this.offset++; |
| 75 |
|
- this.handleSearch(); |
| 76 |
|
- } |
| 77 |
77 |
|
| 78 |
78 |
handleSearch = () => { |
| 79 |
79 |
const value = this.$('input[type="text"]').value; |