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	}
...	...	@@ -45,9 +45,12 @@
45	45	connectedCallback() {
46	46	super.connectedCallback();
47	47	this.render();
	51	+ const searchInput = this.$('input[type="text"]');
48	48	this.$('#search').addEventListener('click', this.handleSearch);
49	49	this.$('#prev').addEventListener('click', this.handlePrevPage);
50	50	this.$('#next').addEventListener('click', this.handleNextPage);
	55	+ searchInput.addEventListener('keypress', this.handleKeyPress);
	56	+ searchInput.focus();
51	51	}
52	52
53	53	disconnectedCallback() {
...	...	@@ -54,13 +54,30 @@
54	54	this.$('#search').removeEventListener('click', this.handleSearch);
55	55	this.$('#prev').removeEventListener('click', this.handlePrevPage);
56	56	this.$('#next').removeEventListener('click', this.handleNextPage);
	63	+ this.$('input[type="text"]').addEventListener('keypress', this.handleKeyPress);
57	57	}
58	58
59	59	get styles() {
60	60	return `
61	61	input[type="text"] {
62		- border: 1px solid red;
	69	+ display: block;
	70	+ width: 100%;
	71	+ height: 36px;
	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;
63	63	}
	86	+
64	64	`
65	65	}
66	66	handlePrevPage = () => {
...	...	@@ -81,6 +81,11 @@
81	81	.then(this.renderResults);
82	82	}
83	83
	107	+ handleKeyPress = (e) => {
	108	+ if(e.code === 'Enter') {
	109	+ this.handleSearch();
	110	+ }
	111	+ }
84	84
85	85	get html() {
86	86	return `
...	...	@@ -136,7 +136,7 @@
136	136	get html() {
137	137	return `
138	138	<div>
139		- <a href=${this.hrefAttr}>${this.titleAttr}</a>
	167	+ <a href="/bin/view/${this.hrefAttr}">${this.titleAttr}</a>
140	140	<div>
141	141	<slot></slot>
142	142	</div>
...	...	@@ -147,6 +147,7 @@
147	147	this.attachShadow({ mode: 'open' });
148	148	this.shadowRoot.appendChild(this.template.content.cloneNode(true));
149	149	}
	178	+
150	150	}
151	151	);
152	152	</script>