Wiki source code of CLB Search Component

Version 7.35 by bougault on 2023/01/17 09:50

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.25	51	const searchInput = this.$('input[type="text"]');
7.20	52	this.$('#search').addEventListener('click', this.handleSearch);
	53	this.$('#prev').addEventListener('click', this.handlePrevPage);
7.22	54	this.$('#next').addEventListener('click', this.handleNextPage);
7.25	55	searchInput.addEventListener('keypress', this.handleKeyPress);
7.27	56	searchInput.focus();
1.1	57	}
	58
7.20	59	disconnectedCallback() {
7.22	60	this.$('#search').removeEventListener('click', this.handleSearch);
7.20	61	this.$('#prev').removeEventListener('click', this.handlePrevPage);
	62	this.$('#next').removeEventListener('click', this.handleNextPage);
7.25	63	this.$('input[type="text"]').addEventListener('keypress', this.handleKeyPress);
7.20	64	}
	65
7.15	66	get styles() {
	67	return `
7.16	68	input[type="text"] {
7.33	69	display: block;
	70	width: 100%;
7.35	71	box-sizing: border-box;
7.33	72	padding: 6px 12px;
	73	font-size: 16px;
	74	line-height: 1.428571429;
	75	color: #555555;
	76	background-color: #fff;
	77	background-image: none;
	78	border: 1px solid #ccc;
	79	border-radius: 4px;
	80	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	81	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	82	-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	83	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	84	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
7.15	85	}
7.33	86
7.15	87	`
	88	}
7.20	89	handlePrevPage = () => {
	90	if(this.offset > 0) {
	91	this.offset--;
	92	this.handleSearch();
	93	}
	94	}
	95	handleNextPage = () => {
	96	this.offset++;
	97	this.handleSearch();
	98	}
1.1	99
7.4	100	handleSearch = () => {
7.7	101	const value = this.$('input[type="text"]').value;
7.12	102	fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
7.4	103	.then(res => res.json())
	104	.then(this.renderResults);
1.1	105	}
	106
7.25	107	handleKeyPress = (e) => {
7.27	108	if(e.code === 'Enter') {
	109	this.handleSearch();
	110	}
7.25	111	}
1.1	112
7.18	113	get html() {
	114	return `
7.4	115	<div>
	116	<input type="text"><button id="search">Search</button>
	117	<div id="results"></div>
	118	<button id="prev">prev</button>
	119	<button id="next">next</button>
	120	</div>
7.18	121	`;
1.1	122	}
	123
7.6	124	renderResults = (results) => {
7.4	125	const resultsContainer = this.$('#results');
1.1	126	resultsContainer.replaceChildren();
	127	for(let i = 0, j = results.length; i < j; i++) {
	128	const { title_, spaces, doccontent_en } = results[i];
	129	const elt = document.createElement('clb-search-result');
	130	elt.setAttribute('data-title', title_);
7.31	131	elt.setAttribute('data-href', spaces.join('/'));
1.1	132	elt.innerHTML = doccontent_en;
	133	resultsContainer.appendChild(elt);
	134	}
	135	}
	136
	137	render() {
7.18	138	this.shadowRoot.appendChild(this.template.content.cloneNode(true));
1.1	139	}
	140	}
	141	);
	142
	143	customElements.define('clb-search-result',
	144	class extends ClbComponent {
	145	constructor() {
	146	super();
	147	}
	148
	149	get titleAttr() {
	150	return this.getAttribute('data-title');
	151	}
	152
7.31	153	get hrefAttr() {
	154	return this.getAttribute('data-href');
1.1	155	}
	156
7.17	157	get styles() {
	158	return `
	159	a {
	160	color: var(--color-brand-primary);
	161	}
	162	`;
	163	}
7.18	164	get html() {
	165	return `
1.1	166	<div>
7.31	167	<a href="/bin/view/${this.hrefAttr}">${this.titleAttr}</a>
1.1	168	<div>
	169	<slot></slot>
	170	</div>
7.18	171	</div> `
1.1	172	}
7.18	173
1.1	174	connectedCallback() {
	175	this.attachShadow({ mode: 'open' });
7.18	176	this.shadowRoot.appendChild(this.template.content.cloneNode(true));
1.1	177	}
7.32	178
1.1	179	}
	180	);
3.1	181	</script>
7.2	182	<clb-simplified-search></clb-simplified-search>
3.1	183	{{/html}}