Failed to execute template. Cause: [Access denied when checking [script] access to [xwiki:Collaboratory.UX.HbpSkin.WebHome] for user [xwiki:XWiki.Admin]]. Click on this message for details.

CLB Search Component - HBP Wiki

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.16
edited by bougault
on 2023/01/13 14:12
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -9,24 +9,20 @@
9 9   this.attachShadow({ mode: 'open'});
10 10   }
11 11  
12 - get template() {
12 + createTemplate(htmlString) {
13 13   const template = document.createElement('template');
14 14   template.innerHTML = `
15 15   <style>
16 16   ${this.styles}
17 17   </style>
18 - ${this.html}
18 + ${htmlString}
19 19   `;
20 20   return template;
21 21   }
22 22  
23 23   get styles() {
24 - return '';
24 + return ``;
25 25   }
26 -
27 - get html() {
28 - return '';
29 - }
30 30   $(selector) {
31 31   return this.shadowRoot.querySelector(selector);
32 32   }
... ... @@ -46,55 +46,29 @@
46 46   }
47 47  
48 48   connectedCallback() {
45 + // 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();
48 + this.$('#search').addEventListener('click', () => this.handleSearch());
49 + this.$('#prev').addEventListener('click', () => {
50 + if(this.offset > 0) {
51 + this.offset--;
52 + this.handleSearch();
53 + }
54 + });
55 + this.$('#next').addEventListener('click', () => {
56 + this.offset++;
57 + this.handleSearch();
58 + });
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"] {
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;
64 + border: 1px solid red;
84 84   }
85 -
86 86   `
87 87   }
88 - handlePrevPage = () => {
89 - if(this.offset > 0) {
90 - this.offset--;
91 - this.handleSearch();
92 - }
93 - }
94 - handleNextPage = () => {
95 - this.offset++;
96 - this.handleSearch();
97 - }
98 98  
99 99   handleSearch = () => {
100 100   const value = this.$('input[type="text"]').value;
... ... @@ -103,14 +103,9 @@
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 - get html() {
113 - return `
77 + get searchInputTemplate() {
78 + return this.createTemplate(`
114 114   <div>
115 115   <input type="text"><button id="search">Search</button>
116 116   <div id="results"></div>
... ... @@ -117,7 +117,7 @@
117 117   <button id="prev">prev</button>
118 118   <button id="next">next</button>
119 119   </div>
120 - `;
85 + `);
121 121   }
122 122  
123 123   renderResults = (results) => {
... ... @@ -134,7 +134,7 @@
134 134   }
135 135  
136 136   render() {
137 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
102 + this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
138 138   }
139 139   }
140 140  );
... ... @@ -153,28 +153,20 @@
153 153   return this.getAttribute('data-href');
154 154   }
155 155  
156 - get styles() {
157 - return `
158 - a {
159 - color: var(--color-brand-primary);
160 - }
161 - `;
162 - }
163 - get html() {
164 - return `
121 + get resultTemplate() {
122 + return this.createTemplate(`
165 165   <div>
166 - <a href="/bin/view/${this.hrefAttr}">${this.titleAttr}</a>
124 + <a href=${this.hrefAttr}>${this.titleAttr}</a>
167 167   <div>
168 168   <slot></slot>
169 169   </div>
170 - </div> `
128 + </div>
129 + `);
171 171   }
172 -
173 173   connectedCallback() {
174 174   this.attachShadow({ mode: 'open' });
175 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
133 + this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
176 176   }
177 -
178 178   }
179 179  );
180 180  </script>