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