Changes for page CLB Search Component

Summary

• Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

...	...	@@ -1,157 +7,4 @@
1		-{{html clean="false"}}
2		-<script>
3		-class ClbComponent extends HTMLElement {
4		- constructor() {
5		- super();
6		- }
7	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>
	2	+{{html clean="false"}}
156	156	<clb-simplified-search></clb-simplified-search>
157	157	{{/html}}