Changes for page CLB Search Component
Last modified by bougault on 2023/01/17 11:42
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -15,18 +15,15 @@ 15 15 <style> 16 16 ${this.styles} 17 17 </style> 18 - ${this. html}18 + ${this.template} 19 19 `; 20 20 return template; 21 21 } 22 22 23 + 23 23 get styles() { 24 - return '';25 + return ``; 25 25 } 26 - 27 - get html() { 28 - return ''; 29 - } 30 30 $(selector) { 31 31 return this.shadowRoot.querySelector(selector); 32 32 } ... ... @@ -46,23 +46,22 @@ 46 46 } 47 47 48 48 connectedCallback() { 46 + // this.attachShadow({ mode: 'open' }); 49 49 super.connectedCallback(); 50 50 this.render(); 51 - const searchInput = this.$('input[type="text"]'); 52 - this.$('#search').addEventListener('click', this.handleSearch); 53 - this.$('#prev').addEventListener('click', this.handlePrevPage); 54 - this.$('#next').addEventListener('click', this.handleNextPage); 55 - searchInput.addEventListener('keypress', this.handleKeyPress); 56 - 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 + }); 57 57 } 58 58 59 - disconnectedCallback() { 60 - this.$('#search').removeEventListener('click', this.handleSearch); 61 - this.$('#prev').removeEventListener('click', this.handlePrevPage); 62 - this.$('#next').removeEventListener('click', this.handleNextPage); 63 - this.$('input[type="text"]').addEventListener('keypress', this.handleKeyPress); 64 - } 65 - 66 66 get styles() { 67 67 return ` 68 68 input[type="text"] { ... ... @@ -70,16 +70,6 @@ 70 70 } 71 71 ` 72 72 } 73 - handlePrevPage = () => { 74 - if(this.offset > 0) { 75 - this.offset--; 76 - this.handleSearch(); 77 - } 78 - } 79 - handleNextPage = () => { 80 - this.offset++; 81 - this.handleSearch(); 82 - } 83 83 84 84 handleSearch = () => { 85 85 const value = this.$('input[type="text"]').value; ... ... @@ -88,9 +88,6 @@ 88 88 .then(this.renderResults); 89 89 } 90 90 91 - handleKeyPress = (e) => { 92 - console.log(e.keyCode); 93 - } 94 94 95 95 get html() { 96 96 return `