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

Summary

Details

Page properties
Content
... ... @@ -9,21 +9,12 @@
9 9   this.attachShadow({ mode: 'open'});
10 10   }
11 11  
12 - get template() {
12 + createTemplate(htmlString) {
13 13   const template = document.createElement('template');
14 - template.innerHTML = `
15 - <style>
16 - ${this.styles}
17 - </style>
18 - ${this.template}
19 - `;
14 + template.innerHTML = htmlString;
20 20   return template;
21 21   }
22 22  
23 -
24 - get styles() {
25 - return ``;
26 - }
27 27   $(selector) {
28 28   return this.shadowRoot.querySelector(selector);
29 29   }
... ... @@ -35,7 +35,7 @@
35 35  
36 36  customElements.define('clb-simplified-search',
37 37   class extends ClbComponent {
38 - searchBaseUrl = '/bin/get/XWiki/SuggestSolrService?outputSyntax=plain&media=json&nb=10&query=q%3D%22__INPUT__%22~100%0Afq%3Dtype%3ADOCUMENT%0Afq%3Dspace%3ACollabs.*&input=';
29 + searchBaseUrl = 'https://wiki-dev.ebrains.eu/bin/get/XWiki/SuggestSolrService?outputSyntax=plain&media=json&nb=10&offset=0&query=q%3D%22__INPUT__%22~100%0Afq%3Dtype%3ADOCUMENT%0Afq%3Dspace%3ACollabs.*&input=';
39 39   constructor() {
40 40   super();
41 41   this.results = [];
... ... @@ -59,13 +59,6 @@
59 59   });
60 60   }
61 61  
62 - get styles() {
63 - return `
64 - input[type="text"] {
65 - border: 1px solid red;
66 - }
67 - `
68 - }
69 69  
70 70   handleSearch = () => {
71 71   const value = this.$('input[type="text"]').value;
... ... @@ -75,8 +75,8 @@
75 75   }
76 76  
77 77  
78 - get html() {
79 - return `
62 + get searchInputTemplate() {
63 + return this.createTemplate(`
80 80   <div>
81 81   <input type="text"><button id="search">Search</button>
82 82   <div id="results"></div>
... ... @@ -83,7 +83,7 @@
83 83   <button id="prev">prev</button>
84 84   <button id="next">next</button>
85 85   </div>
86 - `;
70 + `);
87 87   }
88 88  
89 89   renderResults = (results) => {
... ... @@ -100,7 +100,7 @@
100 100   }
101 101  
102 102   render() {
103 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
87 + this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
104 104   }
105 105   }
106 106  );
... ... @@ -119,26 +119,19 @@
119 119   return this.getAttribute('data-href');
120 120   }
121 121  
122 - get styles() {
123 - return `
124 - a {
125 - color: var(--color-brand-primary);
126 - }
127 - `;
128 - }
129 - get html() {
130 - return `
106 + get resultTemplate() {
107 + return this.createTemplate(`
131 131   <div>
132 132   <a href=${this.hrefAttr}>${this.titleAttr}</a>
133 133   <div>
134 134   <slot></slot>
135 135   </div>
136 - </div> `
113 + </div>
114 + `);
137 137   }
138 -
139 139   connectedCallback() {
140 140   this.attachShadow({ mode: 'open' });
141 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
118 + this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
142 142   }
143 143   }
144 144  );