Wiki source code of CLB Search Component

Version 7.5 by bougault on 2023/01/13 13:44

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();
	39	this.searchButton.addEventListener('click', () => this.handleSearch());
	40	}
	41
	42
7.4	43	handleSearch = () => {
7.1	44	fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
7.4	45	.then(res => res.json())
	46	.then(this.renderResults);
	47
1.1	48	}
	49
	50	get searchInput() {
7.4	51	return this.$('input[type="text"]');
1.1	52	}
	53
	54	get searchButton() {
7.5	55	return this.$('#search');
1.1	56	}
	57
7.4	58
1.1	59	get searchInputTemplate() {
7.4	60	return this.createTemplate(`
	61	<div>
	62	<input type="text"><button id="search">Search</button>
	63	<div id="results"></div>
	64	<button id="prev">prev</button>
	65	<button id="next">next</button>
	66	</div>
	67	`);
1.1	68	}
	69
7.4	70	renderResults(results) {
	71	const resultsContainer = this.$('#results');
1.1	72	resultsContainer.replaceChildren();
	73	for(let i = 0, j = results.length; i < j; i++) {
	74	const { title_, spaces, doccontent_en } = results[i];
	75	const elt = document.createElement('clb-search-result');
	76	elt.setAttribute('data-title', title_);
	77	elt.setAttribute('data-href', spaces.join('/'));
	78	elt.innerHTML = doccontent_en;
	79	resultsContainer.appendChild(elt);
	80	}
	81	}
	82
	83	render() {
	84	this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
	85	}
	86	}
	87	);
	88
	89	customElements.define('clb-search-result',
	90	class extends ClbComponent {
	91	constructor() {
	92	super();
	93	}
	94
	95	get titleAttr() {
	96	return this.getAttribute('data-title');
	97	}
	98
	99	get hrefAttr() {
	100	return this.getAttribute('data-href');
	101	}
	102
	103	get resultTemplate() {
	104	return this.createTemplate(`
	105	<div>
	106	<a href=${this.hrefAttr}>${this.titleAttr}</a>
	107	<div>
	108	<slot></slot>
	109	</div>
	110	</div>
	111	`);
	112	}
	113	connectedCallback() {
	114	this.attachShadow({ mode: 'open' });
	115	this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
	116	}
	117	}
	118	);
3.1	119	</script>
7.2	120	<clb-simplified-search></clb-simplified-search>
3.1	121	{{/html}}