Wiki source code of CLB Search Component

Version 7.8 by bougault on 2023/01/13 13:51

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