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.33 by bougault on 2023/01/17 09:41
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 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 searchInput.focus();
57 }
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
66 get styles() {
67 return `
68 input[type="text"] {
69 display: block;
70 width: 100%;
71 height: 36px;
72 padding: 6px 12px;
73 font-size: 16px;
74 line-height: 1.428571429;
75 color: #555555;
76 background-color: #fff;
77 background-image: none;
78 border: 1px solid #ccc;
79 border-radius: 4px;
80 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
81 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
82 -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
83 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
84 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
85 }
86
87 `
88 }
89 handlePrevPage = () => {
90 if(this.offset > 0) {
91 this.offset--;
92 this.handleSearch();
93 }
94 }
95 handleNextPage = () => {
96 this.offset++;
97 this.handleSearch();
98 }
99
100 handleSearch = () => {
101 const value = this.$('input[type="text"]').value;
102 fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
103 .then(res => res.json())
104 .then(this.renderResults);
105 }
106
107 handleKeyPress = (e) => {
108 if(e.code === 'Enter') {
109 this.handleSearch();
110 }
111 }
112
113 get html() {
114 return `
115 <div>
116 <input type="text"><button id="search">Search</button>
117 <div id="results"></div>
118 <button id="prev">prev</button>
119 <button id="next">next</button>
120 </div>
121 `;
122 }
123
124 renderResults = (results) => {
125 const resultsContainer = this.$('#results');
126 resultsContainer.replaceChildren();
127 for(let i = 0, j = results.length; i < j; i++) {
128 const { title_, spaces, doccontent_en } = results[i];
129 const elt = document.createElement('clb-search-result');
130 elt.setAttribute('data-title', title_);
131 elt.setAttribute('data-href', spaces.join('/'));
132 elt.innerHTML = doccontent_en;
133 resultsContainer.appendChild(elt);
134 }
135 }
136
137 render() {
138 this.shadowRoot.appendChild(this.template.content.cloneNode(true));
139 }
140 }
141 );
142
143 customElements.define('clb-search-result',
144 class extends ClbComponent {
145 constructor() {
146 super();
147 }
148
149 get titleAttr() {
150 return this.getAttribute('data-title');
151 }
152
153 get hrefAttr() {
154 return this.getAttribute('data-href');
155 }
156
157 get styles() {
158 return `
159 a {
160 color: var(--color-brand-primary);
161 }
162 `;
163 }
164 get html() {
165 return `
166 <div>
167 <a href="/bin/view/${this.hrefAttr}">${this.titleAttr}</a>
168 <div>
169 <slot></slot>
170 </div>
171 </div> `
172 }
173
174 connectedCallback() {
175 this.attachShadow({ mode: 'open' });
176 this.shadowRoot.appendChild(this.template.content.cloneNode(true));
177 }
178
179 }
180 );
181 </script>
182 <clb-simplified-search></clb-simplified-search>
183 {{/html}}