Changes for page CLB Search Component

Summary

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

Details

Page properties

Content

...	...	@@ -15,15 +15,18 @@
15	15	<style>
16	16	${this.styles}
17	17	</style>
18		- ${this.template}
	18	+ ${this.html}
19	19	`;
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,22 +43,23 @@
43	43	}
44	44
45	45	connectedCallback() {
46		- // this.attachShadow({ mode: 'open' });
47	47	super.connectedCallback();
48	48	this.render();
49		- this.$('#search').addEventListener('click', () => this.handleSearch());
50		- this.$('#prev').addEventListener('click', () => {
51		- if(this.offset > 0) {
52		- this.offset--;
53		- this.handleSearch();
54		- }
55		- });
56		- this.$('#next').addEventListener('click', () => {
57		- this.offset++;
58		- this.handleSearch();
59		- });
	51	+ const searchInput = this.$('input[type="text"]');
	52	+ this.$('#search').addEventListener('click', this.handleSearch);
	53	+ this.$('#prev').addEventListener('click', this.handlePrevPage);
	54	+ this.$('#next').addEventListener('click', this.handleNextPage);
	55	+ searchInput.addEventListener('keypress', this.handleKeyPress);
	56	+ searchInput.focus();
60	60	}
61	61
	59	+ disconnectedCallback() {
	60	+ this.$('#search').removeEventListener('click', this.handleSearch);
	61	+ this.$('#prev').removeEventListener('click', this.handlePrevPage);
	62	+ this.$('#next').removeEventListener('click', this.handleNextPage);
	63	+ this.$('input[type="text"]').addEventListener('keypress', this.handleKeyPress);
	64	+ }
	65	+
62	62	get styles() {
63	63	return `
64	64	input[type="text"] {
...	...	@@ -66,6 +66,16 @@
66	66	}
67	67	`
68	68	}
	73	+ handlePrevPage = () => {
	74	+ if(this.offset > 0) {
	75	+ this.offset--;
	76	+ this.handleSearch();
	77	+ }
	78	+ }
	79	+ handleNextPage = () => {
	80	+ this.offset++;
	81	+ this.handleSearch();
	82	+ }
69	69
70	70	handleSearch = () => {
71	71	const value = this.$('input[type="text"]').value;
...	...	@@ -74,6 +74,11 @@
74	74	.then(this.renderResults);
75	75	}
76	76
	91	+ handleKeyPress = (e) => {
	92	+ if(e.code === 'Enter') {
	93	+ this.handleSearch();
	94	+ }
	95	+ }
77	77
78	78	get html() {
79	79	return `
...	...	@@ -93,7 +93,7 @@
93	93	const { title_, spaces, doccontent_en } = results[i];
94	94	const elt = document.createElement('clb-search-result');
95	95	elt.setAttribute('data-title', title_);
96		- elt.setAttribute('data-href', spaces.join('/'));
	115	+ elt.setAttribute('data-spaces', spaces);
97	97	elt.innerHTML = doccontent_en;
98	98	resultsContainer.appendChild(elt);
99	99	}
...	...	@@ -115,8 +115,8 @@
115	115	return this.getAttribute('data-title');
116	116	}
117	117
118		- get hrefAttr() {
119		- return this.getAttribute('data-href');
	137	+ get spacesAttr() {
	138	+ return this.getAttribute('data-spaces');
120	120	}
121	121
122	122	get styles() {
...	...	@@ -129,7 +129,7 @@
129	129	get html() {
130	130	return `
131	131	<div>
132		- <a href=${this.hrefAttr}>${this.titleAttr}</a>
	151	+ <a href="/bin/view/${this.spacesAttr.join("/")}>${this.titleAttr}</a>
133	133	<div>
134	134	<slot></slot>
135	135	</div>