|
6
|
1 import { SlTextarea, setBasePath } from "@shoelace-style/shoelace";
|
|
|
2 import "@shoelace-style/shoelace/dist/themes/light.css";
|
|
|
3 import { LitElement, PropertyValueMap, css, html } from "lit";
|
|
|
4 import { customElement, queryAsync, state } from "lit/decorators.js";
|
|
|
5 import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
|
|
6 setBasePath("@fs/opt/node_modules/@shoelace-style/shoelace/dist");
|
|
|
7
|
|
|
8 @customElement("sco-search-page")
|
|
|
9 export class ScoSearchPage extends LitElement {
|
|
|
10 static styles = [
|
|
|
11 css`
|
|
|
12 :host {
|
|
|
13 display: flex;
|
|
|
14 flex-direction: column;
|
|
|
15 height: 100vh;
|
|
|
16 }
|
|
|
17 form {
|
|
|
18 display: flex;
|
|
|
19 flex-direction: row;
|
|
|
20 align-items: flex-end;
|
|
|
21
|
|
|
22 margin: 0 10% 0 100px;
|
|
|
23 }
|
|
|
24 sl-textarea {
|
|
|
25 width: 100%;
|
|
|
26 }
|
|
|
27 :host > * {
|
|
|
28 padding: 5px;
|
|
|
29 }
|
|
|
30 section#results {
|
|
|
31 background-color: #ffffffde;
|
|
|
32 flex-grow: 1;
|
|
|
33 display: flex;
|
|
|
34 flex-direction: column;
|
|
|
35 overflow: hidden;
|
|
|
36 margin-bottom: 15px;
|
|
|
37 margin-left: 110px;
|
|
|
38 }
|
|
|
39 img.bot {
|
|
|
40 width: 237px;
|
|
|
41 position: absolute;
|
|
|
42 left: -33px;
|
|
|
43 top: -22px;
|
|
|
44 z-index: -1;
|
|
|
45 }
|
|
8
|
46 dt {
|
|
|
47 color: blue;
|
|
|
48 }
|
|
|
49 dd {
|
|
|
50 margin-bottom: 25px;
|
|
|
51 }
|
|
6
|
52 `,
|
|
|
53 ];
|
|
|
54 @state() query: string = "climate";
|
|
|
55 @state() results: Object[] = [];
|
|
|
56 @state() queryError: string = "";
|
|
|
57 @queryAsync("sl-textarea") queryEl?: Promise<SlTextarea>;
|
|
|
58 protected async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
|
|
|
59 super.firstUpdated(_changedProperties);
|
|
|
60
|
|
|
61 await this.pressingEnterSubmitsForm();
|
|
|
62
|
|
|
63 this.queryParamToProperty();
|
|
|
64
|
|
|
65 window.addEventListener("popstate", (event) => {
|
|
|
66 this.queryParamToProperty();
|
|
|
67 });
|
|
|
68
|
|
|
69 this.submit().catch(console.error);
|
|
|
70 }
|
|
|
71
|
|
|
72 private async pressingEnterSubmitsForm() {
|
|
|
73 const ta = (await this.queryEl)?.shadowRoot?.querySelector("textarea");
|
|
|
74 ta?.addEventListener("keydown", (event: KeyboardEvent) => {
|
|
|
75 if (event.code == "Enter" && !event.shiftKey) {
|
|
|
76 event.preventDefault();
|
|
|
77 this.submit();
|
|
|
78 }
|
|
|
79 });
|
|
|
80 }
|
|
|
81
|
|
|
82 private queryParamToProperty() {
|
|
|
83 const urlParams = new URLSearchParams(window.location.search);
|
|
|
84 const qParam = urlParams.get("q");
|
|
|
85
|
|
|
86 if (qParam) {
|
|
|
87 this.query = qParam;
|
|
|
88 }
|
|
|
89 }
|
|
|
90
|
|
|
91 private async propertyToQueryParam() {
|
|
|
92 const currentUrl = new URL(window.location.href);
|
|
|
93
|
|
|
94 const q = await this.getCurrentQuery();
|
|
|
95 if (currentUrl.searchParams.get("q") !== q) {
|
|
|
96 currentUrl.searchParams.set("q", q);
|
|
|
97
|
|
|
98 const newUrl = currentUrl.toString();
|
|
|
99
|
|
|
100 history.pushState({}, document.title, newUrl);
|
|
|
101 }
|
|
|
102 }
|
|
|
103
|
|
|
104 render() {
|
|
|
105 return html`
|
|
|
106 <section id="query">
|
|
|
107 <img class="bot" src="sco-bot.jpg" />
|
|
|
108 <form>
|
|
|
109 <sl-textarea .value=${this.query} rows="1" resize="auto" label="Query" enterkeyhint="search" autocapitalize="off" autofocus="true"></sl-textarea>
|
|
|
110 <sl-button variant="primary" @click=${this.submit}>Submit</sl-button>
|
|
|
111 <div>${this.queryError}</div>
|
|
|
112 </form>
|
|
|
113 </section>
|
|
|
114 <section id="results">
|
|
8
|
115 <dl>
|
|
|
116 ${this.results.map(
|
|
|
117 (r) =>
|
|
|
118 html`<dt>${r.title}</dt>
|
|
|
119 <dd>${unsafeHTML(r.snippetHtml)}</dd>`
|
|
|
120 )}
|
|
|
121 </dl>
|
|
6
|
122 <div>Matching results: ${this.results.length}</div>
|
|
|
123 </section>
|
|
|
124 `;
|
|
|
125 }
|
|
|
126
|
|
|
127 async getCurrentQuery(): Promise<string> {
|
|
|
128 return (await this.queryEl)!.value || "";
|
|
|
129 }
|
|
|
130
|
|
|
131 async submit() {
|
|
|
132 await this.propertyToQueryParam();
|
|
|
133
|
|
|
134 this.results = [];
|
|
|
135
|
|
|
136 const sentQ = await this.getCurrentQuery();
|
|
|
137
|
|
8
|
138 const resp = await fetch("query?" + new URLSearchParams({ q: sentQ }));
|
|
|
139 if (sentQ != (await this.getCurrentQuery())) {
|
|
|
140 // old result- ignore
|
|
|
141 return;
|
|
|
142 }
|
|
|
143 this.results = (await resp.json()).results;
|
|
6
|
144 this.requestUpdate();
|
|
|
145 }
|
|
|
146 }
|
