Wiki source code of CLB Search Component

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