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',
...	...	@@ -30,7 +30,6 @@
30	30	constructor() {
31	31	super();
32	32	this.results = [];
33		- this.offset = 0;
34	34	}
35	35
36	36	connectedCallback() {
...	...	@@ -37,41 +37,34 @@
37	37	// this.attachShadow({ mode: 'open' });
38	38	super.connectedCallback();
39	39	this.render();
40		- this.$('#search').addEventListener('click', () => this.handleSearch());
41		- this.$('#prev').addEventListener('click', () => {
42		- if(this.offset > 0) {
43		- this.offset--;
44		- this.handleSearch();
45		- }
46		- });
47		- this.$('#next').addEventListener('click', () => {
48		- this.offset++;
49		- this.handleSearch();
50		- });
	31	+ this.searchButton.addEventListener('click', () => this.handleSearch());
51	51	}
52	52
53	53
54		- handleSearch = () => {
55		- const value = this.$('input[type="text"]').value;
56		- fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
57		- .then(res => res.json())
58		- .then(this.renderResults);
	35	+ handleSearch() {
	36	+ fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
	37	+ .then(res => res.json())
	38	+ .then(this.renderResults);
59	59	}
60	60
	41	+ get searchInput() {
	42	+ return this.shadowRoot.querySelector('input[type="text"]');
	43	+ }
61	61
	45	+ get searchButton() {
	46	+ return this.shadowRoot.querySelector('button');
	47	+ }
	48	+
62	62	get searchInputTemplate() {
63		- return this.createTemplate(`
64		- <div>
65		- <input type="text"><button id="search">Search</button>
66		- <div id="results"></div>
67		- <button id="prev">prev</button>
68		- <button id="next">next</button>
69		- </div>
70		- `);
	50	+ return this.createTemplate('<div><input type="text"><button>Search</button><div id="results"></div></div>');
71	71	}
72	72
	53	+ resultsContainer = () => {
	54	+ return this.shadowRoot.querySelector('#results');
	55	+ }
	56	+
73	73	renderResults = (results) => {
74		- const resultsContainer = this.$('#results');
	58	+ const resultsContainer = this.shadowRoot.querySelector('#results');
75	75	resultsContainer.replaceChildren();
76	76	for(let i = 0, j = results.length; i < j; i++) {
77	77	const { title_, spaces, doccontent_en } = results[i];