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.25
edited by bougault
on 2023/01/13 14:37
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,24 +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.html}
19 - `;
14 + template.innerHTML = htmlString;
20 20   return template;
21 21   }
22 22  
23 - get styles() {
24 - return '';
25 - }
26 -
27 - get html() {
28 - return '';
29 - }
30 30   $(selector) {
31 31   return this.shadowRoot.querySelector(selector);
32 32   }
... ... @@ -38,7 +38,7 @@
38 38  
39 39  customElements.define('clb-simplified-search',
40 40   class extends ClbComponent {
41 - 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=';
42 42   constructor() {
43 43   super();
44 44   this.results = [];
... ... @@ -46,41 +46,23 @@
46 46   }
47 47  
48 48   connectedCallback() {
37 + // 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 -
40 + this.$('#search').addEventListener('click', () => this.handleSearch());
41 + this.$('#prev').addEventListener('click', () => {
42 + if(this.offset > 0) {
43 + this.offset--;
44 + this.handleSearch();
45 + }
46 + });
47 + this.$('#next').addEventListener('click', () => {
48 + this.offset++;
49 + this.handleSearch();
50 + });
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 65  
66 - get styles() {
67 - return `
68 - input[type="text"] {
69 - border: 1px solid red;
70 - }
71 - `
72 - }
73 - handlePrevPage = () => {
74 - if(this.offset > 0) {
75 - this.offset--;
76 - this.handleSearch();
77 - }
78 - }
79 - handleNextPage = () => {
80 - this.offset++;
81 - this.handleSearch();
82 - }
83 -
84 84   handleSearch = () => {
85 85   const value = this.$('input[type="text"]').value;
86 86   fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
... ... @@ -88,12 +88,9 @@
88 88   .then(this.renderResults);
89 89   }
90 90  
91 - handleKeyPress = (e) => {
92 - console.log(e.keyCode);
93 - }
94 94  
95 - get html() {
96 - return `
62 + get searchInputTemplate() {
63 + return this.createTemplate(`
97 97   <div>
98 98   <input type="text"><button id="search">Search</button>
99 99   <div id="results"></div>
... ... @@ -100,7 +100,7 @@
100 100   <button id="prev">prev</button>
101 101   <button id="next">next</button>
102 102   </div>
103 - `;
70 + `);
104 104   }
105 105  
106 106   renderResults = (results) => {
... ... @@ -117,7 +117,7 @@
117 117   }
118 118  
119 119   render() {
120 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
87 + this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
121 121   }
122 122   }
123 123  );
... ... @@ -136,26 +136,19 @@
136 136   return this.getAttribute('data-href');
137 137   }
138 138  
139 - get styles() {
140 - return `
141 - a {
142 - color: var(--color-brand-primary);
143 - }
144 - `;
145 - }
146 - get html() {
147 - return `
106 + get resultTemplate() {
107 + return this.createTemplate(`
148 148   <div>
149 149   <a href=${this.hrefAttr}>${this.titleAttr}</a>
150 150   <div>
151 151   <slot></slot>
152 152   </div>
153 - </div> `
113 + </div>
114 + `);
154 154   }
155 -
156 156   connectedCallback() {
157 157   this.attachShadow({ mode: 'open' });
158 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
118 + this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
159 159   }
160 160   }
161 161  );