Changes for page CLB Search Component

Summary

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

Details

Page properties

Content

...	...	@@ -14,14 +14,6 @@
14	14	template.innerHTML = htmlString;
15	15	return template;
16	16	}
17		-
18		- $(selector) {
19		- return this.shadowRoot.querySelector(selector);
20		- }
21		-
22		- $$(selector) {
23		- return this.shadowRoot.querySelectorAll(selector);
24		- }
25	25	}
26	26
27	27	customElements.define('clb-simplified-search',
...	...	@@ -36,41 +36,34 @@
36	36	// this.attachShadow({ mode: 'open' });
37	37	super.connectedCallback();
38	38	this.render();
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		- });
	31	+ this.searchButton.addEventListener('click', () => this.handleSearch());
50	50	}
51	51
52	52
53		- handleSearch = () => {
54		- const value = this.$('input[type="text"]').value;
55		- fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
56		- .then(res => res.json())
57		- .then(this.renderResults);
	35	+ handleSearch() {
	36	+ fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
	37	+ .then(res => res.json())
	38	+ .then(this.renderResults);
58	58	}
59	59
	41	+ get searchInput() {
	42	+ return this.shadowRoot.querySelector('input[type="text"]');
	43	+ }
60	60
	45	+ get searchButton() {
	46	+ return this.shadowRoot.querySelector('button');
	47	+ }
	48	+
61	61	get searchInputTemplate() {
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		- `);
	50	+ return this.createTemplate('<div><input type="text"><button>Search</button><div id="results"></div></div>');
70	70	}
71	71
	53	+ resultsContainer = () => {
	54	+ return this.shadowRoot.querySelector('#results');
	55	+ }
	56	+
72	72	renderResults = (results) => {
73		- const resultsContainer = this.$('#results');
	58	+ const resultsContainer = this.shadowRoot.querySelector('#results');
74	74	resultsContainer.replaceChildren();
75	75	for(let i = 0, j = results.length; i < j; i++) {
76	76	const { title_, spaces, doccontent_en } = results[i];