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
-
... ... @@ -20,13 +20,10 @@ 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 - searchInput.focus(); 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,11 +88,6 @@ 88 88 .then(this.renderResults); 89 89 } 90 90 91 - handleKeyPress = (e) => { 92 - if(e.code === 'Enter') { 93 - this.handleSearch(); 94 - } 95 - } 96 96 97 97 get html() { 98 98 return ` ... ... @@ -148,7 +148,7 @@ 148 148 get html() { 149 149 return ` 150 150 <div> 151 - <a href= "/bin/view/${this.hrefAttr}">${this.titleAttr}</a>132 + <a href=${this.hrefAttr}>${this.titleAttr}</a> 152 152 <div> 153 153 <slot></slot> 154 154 </div> ... ... @@ -159,7 +159,6 @@ 159 159 this.attachShadow({ mode: 'open' }); 160 160 this.shadowRoot.appendChild(this.template.content.cloneNode(true)); 161 161 } 162 - 163 163 } 164 164 ); 165 165 </script>