IAM21 instance, do not create collab nor modify a team, your changes will be lost


Changes for page CLB Search Component

Last modified by bougault on 2023/01/17 11:42
From version 7.34
edited by bougault
on 2023/01/17 09:49
Change comment: There is no comment for this version
To version 7.22
edited by bougault
on 2023/01/13 14:33
Change comment: There is no comment for this version

Summary

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   }
... ... @@ -48,12 +48,9 @@
48 48   connectedCallback() {
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 54   this.$('#next').addEventListener('click', this.handleNextPage);
55 - searchInput.addEventListener('keypress', this.handleKeyPress);
56 - searchInput.focus();
57 57   }
58 58  
59 59   disconnectedCallback() {
... ... @@ -60,29 +60,13 @@
60 60   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"] {
69 - display: block;
70 - width: 100%;
71 - padding: 6px 12px;
72 - font-size: 16px;
73 - line-height: 1.428571429;
74 - color: #555555;
75 - background-color: #fff;
76 - background-image: none;
77 - border: 1px solid #ccc;
78 - border-radius: 4px;
79 - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
80 - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
81 - -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
82 - -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
83 - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
62 + border: 1px solid red;
84 84   }
85 -
86 86   `
87 87   }
88 88   handlePrevPage = () => {
... ... @@ -103,11 +103,6 @@
103 103   .then(this.renderResults);
104 104   }
105 105  
106 - handleKeyPress = (e) => {
107 - if(e.code === 'Enter') {
108 - this.handleSearch();
109 - }
110 - }
111 111  
112 112   get html() {
113 113   return `
... ... @@ -163,7 +163,7 @@
163 163   get html() {
164 164   return `
165 165   <div>
166 - <a href="/bin/view/${this.hrefAttr}">${this.titleAttr}</a>
139 + <a href=${this.hrefAttr}>${this.titleAttr}</a>
167 167   <div>
168 168   <slot></slot>
169 169   </div>
... ... @@ -174,7 +174,6 @@
174 174   this.attachShadow({ mode: 'open' });
175 175   this.shadowRoot.appendChild(this.template.content.cloneNode(true));
176 176   }
177 -
178 178   }
179 179  );
180 180  </script>