Wiki source code of CLB Search Component

Version 7.13 by bougault on 2023/01/13 14:10

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