Wiki source code of CLB Search Component

Version 7.21 by bougault on 2023/01/13 14:33

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