Changes for page CLB Search Component

Summary

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

Details

Page properties

Content

...	...	@@ -1,155 +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		-
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>
	2	+{{html clean="false"}}
154	154	<clb-simplified-search></clb-simplified-search>
155	155	{{/html}}