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

Summary

Details

Page properties
Content
... ... @@ -9,17 +9,18 @@
9 9   this.attachShadow({ mode: 'open'});
10 10   }
11 11  
12 - createTemplate(htmlString) {
12 + get template() {
13 13   const template = document.createElement('template');
14 14   template.innerHTML = `
15 15   <style>
16 16   ${this.styles}
17 17   </style>
18 - ${htmlString}
18 + ${this.html}
19 19   `;
20 20   return template;
21 21   }
22 22  
23 +
23 23   get styles() {
24 24   return ``;
25 25   }
... ... @@ -74,8 +74,8 @@
74 74   }
75 75  
76 76  
77 - get searchInputTemplate() {
78 - return this.createTemplate(`
78 + get html() {
79 + return `
79 79   <div>
80 80   <input type="text"><button id="search">Search</button>
81 81   <div id="results"></div>
... ... @@ -82,7 +82,7 @@
82 82   <button id="prev">prev</button>
83 83   <button id="next">next</button>
84 84   </div>
85 - `);
86 + `;
86 86   }
87 87  
88 88   renderResults = (results) => {
... ... @@ -99,7 +99,7 @@
99 99   }
100 100  
101 101   render() {
102 - this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
103 + this.shadowRoot.appendChild(this.template.content.cloneNode(true));
103 103   }
104 104   }
105 105  );
... ... @@ -125,20 +125,19 @@
125 125   }
126 126   `;
127 127   }
128 -
129 - get resultTemplate() {
130 - return this.createTemplate(`
129 + get html() {
130 + return `
131 131   <div>
132 132   <a href=${this.hrefAttr}>${this.titleAttr}</a>
133 133   <div>
134 134   <slot></slot>
135 135   </div>
136 - </div>
137 - `);
136 + </div> `
138 138   }
138 +
139 139   connectedCallback() {
140 140   this.attachShadow({ mode: 'open' });
141 - this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
141 + this.shadowRoot.appendChild(this.template.content.cloneNode(true));
142 142   }
143 143   }
144 144  );