frontend: design prototype

1 files changed, 67 insertions, 0 deletions

diff --git a/static/widgets/search/index.js b/static/widgets/search/index.js
new file mode 100644
index 0000000..324141b
--- /dev/null
+++ b/static/widgets/search/index.js
@@ -0,0 +1,67 @@
+import * as sfw from 'sfw';
+const { Div, Input, Button } = sfw.element.native;
+
+import icons from '../../icons/index.js';
+
+const css = await sfw.css(import.meta.url, './index.css');
+
+export default class Search extends sfw.element.Container {
+	#container
+	#search
+
+	constructor() {
+		super({ css });
+
+		this.onsubmit = () => {}
+		this.onhide = () => {}
+
+		this.onclick = (e) => e.stopPropagation();
+		this.hide = () => {
+			this.#container.classList.remove('visible');
+			document.removeEventListener('click', this.hide);
+			this.onhide();
+		};
+
+		this.body.append(
+			this.#container = Div.new({
+				id: 'container',
+				children: [
+					Div.new({ innerText: 'Search', id: 'title' }),
+					Div.new({
+						id: 'search-box',
+						children: [
+							this.#search = Input.new({
+								type: 'search',
+								onsearch: () => this.submit(),
+								onkeydown: (event) => {
+									if (event.key === 'Enter') {
+										this.submit();
+									}
+								}
+							}),
+							Button.new({
+								children: [ icons.search ],
+								onclick: () => this.submit(),
+							}),
+						]
+					})
+				]
+			})
+		);
+	}
+
+	submit() {
+		this.onsubmit(this.#search.value);
+		this.#search.blur();
+		this.hide();
+	}
+
+	toggle() {
+		this.#container.classList.toggle('visible');
+
+		if (this.#container.classList.contains('visible')) {
+			this.#search.focus()
+			document.addEventListener('click', this.hide)
+		}
+	}
+}