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