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,26 +46,24 @@ 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 52 this.$('#search').addEventListener('click', this.handleSearch); 53 53 this.$('#prev').addEventListener('click', this.handlePrevPage); 54 - this.$('#next').addEventListener('click', this.handleNextPage); 55 - searchInput.addEventListener('keypress', this.handleKeyPress); 56 - searchInput.focus(); 51 + this.$('#next').addEventListener('click', this.handleNextPage; 57 57 } 58 58 59 59 disconnectedCallback() { 60 - this.$('#search').removeEventListener('click', this.handleSearch );55 + this.$('#search').removeEventListener('click', this.handleSearch; 61 61 this.$('#prev').removeEventListener('click', this.handlePrevPage); 62 62 this.$('#next').removeEventListener('click', this.handleNextPage); 63 - this.$('input[type="text"]').addEventListener('keypress', this.handleKeyPress); 64 64 } 65 65 66 66 get styles() { 67 67 return ` 68 68 input[type="text"] { 63 + border: 1px solid red; 69 69 } 70 70 ` 71 71 } ... ... @@ -87,11 +87,6 @@ 87 87 .then(this.renderResults); 88 88 } 89 89 90 - handleKeyPress = (e) => { 91 - if(e.code === 'Enter') { 92 - this.handleSearch(); 93 - } 94 - } 95 95 96 96 get html() { 97 97 return ` ... ... @@ -147,7 +147,7 @@ 147 147 get html() { 148 148 return ` 149 149 <div> 150 - <a href= "/bin/view/${this.hrefAttr}">${this.titleAttr}</a>140 + <a href=${this.hrefAttr}>${this.titleAttr}</a> 151 151 <div> 152 152 <slot></slot> 153 153 </div> ... ... @@ -158,7 +158,6 @@ 158 158 this.attachShadow({ mode: 'open' }); 159 159 this.shadowRoot.appendChild(this.template.content.cloneNode(true)); 160 160 } 161 - 162 162 } 163 163 ); 164 164 </script>