Wiki source code of CLB Search Component

Version 7.10 by bougault on 2023/01/13 14:05

version	line-number	content
4.1	1	{{html clean="false"}}
3.1	2	<script>
1.1	3	class ClbComponent extends HTMLElement {
	4	constructor() {
	5	super();
	6	}
	7
	8	connectedCallback() {
	9	this.attachShadow({ mode: 'open'});
	10	}
	11
	12	createTemplate(htmlString) {
	13	const template = document.createElement('template');
	14	template.innerHTML = htmlString;
	15	return template;
	16	}
7.4	17
	18	$(selector) {
	19	return this.shadowRoot.querySelector(selector);
	20	}
	21
	22	$$(selector) {
	23	return this.shadowRoot.querySelectorAll(selector);
	24	}
1.1	25	}
	26
	27	customElements.define('clb-simplified-search',
	28	class extends ClbComponent {
7.10	29	searchBaseUrl = '/bin/get/XWiki/SuggestSolrService?outputSyntax=plain&media=json&nb=10&offset=0&query=q%3D%22__INPUT__%22~100%0Afq%3Dtype%3ADOCUMENT%0Afq%3Dspace%3ACollabs.*&input=';
1.1	30	constructor() {
	31	super();
	32	this.results = [];
7.9	33	this.offset = 0;
1.1	34	}
	35
	36	connectedCallback() {
	37	// this.attachShadow({ mode: 'open' });
	38	super.connectedCallback();
	39	this.render();
7.7	40	this.$('#search').addEventListener('click', () => this.handleSearch());
	41	this.$('#prev').addEventListener('click', () => {
	42	if(this.offset > 0) {
	43	this.offset--;
	44	this.handleSearch();
	45	}
	46	});
	47	this.$('#next').addEventListener('click', () => {
	48	this.offset++;
	49	this.handleSearch();
	50	});
1.1	51	}
	52
	53
7.4	54	handleSearch = () => {
7.7	55	const value = this.$('input[type="text"]').value;
7.10	56	fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}&nb=10`)
7.4	57	.then(res => res.json())
	58	.then(this.renderResults);
1.1	59	}
	60
	61
	62	get searchInputTemplate() {
7.4	63	return this.createTemplate(`
	64	<div>
	65	<input type="text"><button id="search">Search</button>
	66	<div id="results"></div>
	67	<button id="prev">prev</button>
	68	<button id="next">next</button>
	69	</div>
	70	`);
1.1	71	}
	72
7.6	73	renderResults = (results) => {
7.4	74	const resultsContainer = this.$('#results');
1.1	75	resultsContainer.replaceChildren();
	76	for(let i = 0, j = results.length; i < j; i++) {
	77	const { title_, spaces, doccontent_en } = results[i];
	78	const elt = document.createElement('clb-search-result');
	79	elt.setAttribute('data-title', title_);
	80	elt.setAttribute('data-href', spaces.join('/'));
	81	elt.innerHTML = doccontent_en;
	82	resultsContainer.appendChild(elt);
	83	}
	84	}
	85
	86	render() {
	87	this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
	88	}
	89	}
	90	);
	91
	92	customElements.define('clb-search-result',
	93	class extends ClbComponent {
	94	constructor() {
	95	super();
	96	}
	97
	98	get titleAttr() {
	99	return this.getAttribute('data-title');
	100	}
	101
	102	get hrefAttr() {
	103	return this.getAttribute('data-href');
	104	}
	105
	106	get resultTemplate() {
	107	return this.createTemplate(`
	108	<div>
	109	<a href=${this.hrefAttr}>${this.titleAttr}</a>
	110	<div>
	111	<slot></slot>
	112	</div>
	113	</div>
	114	`);
	115	}
	116	connectedCallback() {
	117	this.attachShadow({ mode: 'open' });
	118	this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
	119	}
	120	}
	121	);
3.1	122	</script>
7.2	123	<clb-simplified-search></clb-simplified-search>
3.1	124	{{/html}}