Changes for page CLB Search Component

Summary

• Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

...	...	@@ -20,10 +20,13 @@
20	20	return template;
21	21	}
22	22
23		-
24	24	get styles() {
25		- return ``;
	24	+ return '';
26	26	}
	26	+
	27	+ get html() {
	28	+ return '';
	29	+ }
27	27	$(selector) {
28	28	return this.shadowRoot.querySelector(selector);
29	29	}
...	...	@@ -43,18 +43,21 @@
43	43	}
44	44
45	45	connectedCallback() {
46		- // this.attachShadow({ mode: 'open' });
47	47	super.connectedCallback();
48	48	this.render();
	51	+ const searchInput = this.$('input[type="text"]');
49	49	this.$('#search').addEventListener('click', this.handleSearch);
50	50	this.$('#prev').addEventListener('click', this.handlePrevPage);
51		- this.$('#next').addEventListener('click', this.handleNextPage;
	54	+ this.$('#next').addEventListener('click', this.handleNextPage);
	55	+ searchInput.addEventListener('keypress', this.handleKeyPress);
	56	+ searchInput.focus();
52	52	}
53	53
54	54	disconnectedCallback() {
55		- this.$('#search').removeEventListener('click', this.handleSearch;
	60	+ this.$('#search').removeEventListener('click', this.handleSearch);
56	56	this.$('#prev').removeEventListener('click', this.handlePrevPage);
57	57	this.$('#next').removeEventListener('click', this.handleNextPage);
	63	+ this.$('input[type="text"]').addEventListener('keypress', this.handleKeyPress);
58	58	}
59	59
60	60	get styles() {
...	...	@@ -82,6 +82,11 @@
82	82	.then(this.renderResults);
83	83	}
84	84
	91	+ handleKeyPress = (e) => {
	92	+ if(e.code === 'Enter') {
	93	+ this.handleSearch();
	94	+ }
	95	+ }
85	85
86	86	get html() {
87	87	return `
...	...	@@ -101,7 +101,7 @@
101	101	const { title_, spaces, doccontent_en } = results[i];
102	102	const elt = document.createElement('clb-search-result');
103	103	elt.setAttribute('data-title', title_);
104		- elt.setAttribute('data-href', spaces.join('/'));
	115	+ elt.setAttribute('data-spaces', spaces);
105	105	elt.innerHTML = doccontent_en;
106	106	resultsContainer.appendChild(elt);
107	107	}
...	...	@@ -123,8 +123,8 @@
123	123	return this.getAttribute('data-title');
124	124	}
125	125
126		- get hrefAttr() {
127		- return this.getAttribute('data-href');
	137	+ get spacesAttr() {
	138	+ return this.getAttribute('data-spaces');
128	128	}
129	129
130	130	get styles() {
...	...	@@ -137,7 +137,7 @@
137	137	get html() {
138	138	return `
139	139	<div>
140		- <a href=${this.hrefAttr}>${this.titleAttr}</a>
	151	+ <a href="/bin/view/${this.spacesAttr.join("/")}>${this.titleAttr}</a>
141	141	<div>
142	142	<slot></slot>
143	143	</div>