Wiki source code of CLB Search Component

Version 7.18 by bougault on 2023/01/13 14:17

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