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


Wiki source code of CLB Search Component

Version 7.24 by bougault on 2023/01/13 14:35
Show last authors
1 {{html clean="false"}}
2 <script>
3 class ClbComponent extends HTMLElement {
4 constructor() {
5 super();
6 }
7
8 connectedCallback() {
9 this.attachShadow({ mode: 'open'});
10 }
11
12 get template() {
13 const template = document.createElement('template');
14 template.innerHTML = `
15 <style>
16 ${this.styles}
17 </style>
18 ${this.html}
19 `;
20 return template;
21 }
22
23 get styles() {
24 return '';
25 }
26
27 get html() {
28 return '';
29 }
30 $(selector) {
31 return this.shadowRoot.querySelector(selector);
32 }
33
34 $$(selector) {
35 return this.shadowRoot.querySelectorAll(selector);
36 }
37 }
38
39 customElements.define('clb-simplified-search',
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=';
42 constructor() {
43 super();
44 this.results = [];
45 this.offset = 0;
46 }
47
48 connectedCallback() {
49 super.connectedCallback();
50 this.render();
51 this.$('#search').addEventListener('click', this.handleSearch);
52 this.$('#prev').addEventListener('click', this.handlePrevPage);
53 this.$('#next').addEventListener('click', this.handleNextPage);
54 this.$('input[type="text"]').focus();
55 }
56
57 disconnectedCallback() {
58 this.$('#search').removeEventListener('click', this.handleSearch);
59 this.$('#prev').removeEventListener('click', this.handlePrevPage);
60 this.$('#next').removeEventListener('click', this.handleNextPage);
61 }
62
63 get styles() {
64 return `
65 input[type="text"] {
66 border: 1px solid red;
67 }
68 `
69 }
70 handlePrevPage = () => {
71 if(this.offset > 0) {
72 this.offset--;
73 this.handleSearch();
74 }
75 }
76 handleNextPage = () => {
77 this.offset++;
78 this.handleSearch();
79 }
80
81 handleSearch = () => {
82 const value = this.$('input[type="text"]').value;
83 fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
84 .then(res => res.json())
85 .then(this.renderResults);
86 }
87
88
89 get html() {
90 return `
91 <div>
92 <input type="text"><button id="search">Search</button>
93 <div id="results"></div>
94 <button id="prev">prev</button>
95 <button id="next">next</button>
96 </div>
97 `;
98 }
99
100 renderResults = (results) => {
101 const resultsContainer = this.$('#results');
102 resultsContainer.replaceChildren();
103 for(let i = 0, j = results.length; i < j; i++) {
104 const { title_, spaces, doccontent_en } = results[i];
105 const elt = document.createElement('clb-search-result');
106 elt.setAttribute('data-title', title_);
107 elt.setAttribute('data-href', spaces.join('/'));
108 elt.innerHTML = doccontent_en;
109 resultsContainer.appendChild(elt);
110 }
111 }
112
113 render() {
114 this.shadowRoot.appendChild(this.template.content.cloneNode(true));
115 }
116 }
117 );
118
119 customElements.define('clb-search-result',
120 class extends ClbComponent {
121 constructor() {
122 super();
123 }
124
125 get titleAttr() {
126 return this.getAttribute('data-title');
127 }
128
129 get hrefAttr() {
130 return this.getAttribute('data-href');
131 }
132
133 get styles() {
134 return `
135 a {
136 color: var(--color-brand-primary);
137 }
138 `;
139 }
140 get html() {
141 return `
142 <div>
143 <a href=${this.hrefAttr}>${this.titleAttr}</a>
144 <div>
145 <slot></slot>
146 </div>
147 </div> `
148 }
149
150 connectedCallback() {
151 this.attachShadow({ mode: 'open' });
152 this.shadowRoot.appendChild(this.template.content.cloneNode(true));
153 }
154 }
155 );
156 </script>
157 <clb-simplified-search></clb-simplified-search>
158 {{/html}}