Wiki source code of CLB Search Component

Version 7.24 by bougault on 2023/01/13 14:35

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