More language choosing

src/frontend/popup/LanguageOption.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from "svelte";
-	export let language: Language;
-	const dispatch = createEventDispatcher();
-
-	const clicked = () => {
-		dispatch("languageSelected", {
-			language: language,
-		});
-	};
-
-	const onKeyDown = (e: KeyboardEvent) => {
-		if (e.code == "Enter") {
-			clicked();
-		}
-	};
-</script>
-
-<style>
-	button {
-		margin: 0;
-		border-radius: 0;
-		border: solid gray 1px;
-		display: block;
-		padding: 1em 0.5ch;
-		width: 100%;
-	}
-
-	button:focus,
-	button:hover {
-		background-color: red;
-	}
-</style>
-
-<button on:click={clicked} on:keydown={onKeyDown}>{language.name}</button>
-

src/frontend/popup/LanguageSelection.svelte

@@ -1,79 +1,18 @@
 <script lang="ts">
-	import LanguageOption from "./LanguageOption.svelte";
+	import Select from "svelte-select";
-	import { slide } from "svelte/transition";
+	export let langs: Array<Language>;
+	export let selectedValue: Language;
 
-	export let languages: Array<Language>;
+	const getLabel = (o: Language) => o.name;
-	export let default_language: Language;
+	const itemFilter = (label: string, filterText: string) =>
-
+		label.toLowerCase().startsWith(filterText.toLowerCase());
-	const onBlur = (e: FocusEvent) => {
-		//Selected one of the child elements, possibly with tabindex
-		if (
-			e.relatedTarget instanceof HTMLElement &&
-			lang_list.contains(e.relatedTarget)
-		)
-			return;
-		focused = false;
-	};
-	setTimeout(() => console.log(window.innerWidth, window.innerHeight), 1000);
-
-	const languageSelectedEvent = (e: any) => {
-		const lang = e.detail?.language;
-		if (lang) {
-			current_lang = lang;
-		}
-		input.focus();
-		input.blur();
-	};
-
-	let langSearch = "";
-	$: if (!focused) langSearch = "";
-	$: searched_langs = languages.filter((l) =>
-		l.name.toLowerCase().startsWith(langSearch.toLowerCase())
-	);
-
-	let input: HTMLInputElement;
-	let lang_list: HTMLDivElement;
-	let current_lang = default_language;
-	let focused = false;
 </script>
 
-<style>
+<Select
-	.container {
+	items={langs}
-		width: 100%;
+	getOptionLabel={getLabel}
-		position: relative;
+	getSelectionLabel={getLabel}
-	}
+	optionIdentifier="code"
-	.langs {
+	{itemFilter}
-		max-height: 60vh;
+	isClearable={false}
-		width: 100%;
+	bind:selectedValue />
-		overflow-y: scroll;
-		position: absolute;
-		z-index: 999;
-		background-color: lightpink;
-	}
-
-	input {
-		width: 100%;
-	}
-</style>
-
-<div class="container">
-	<input
-		placeholder={current_lang.name}
-		bind:this={input}
-		bind:value={langSearch}
-		on:focus={() => (focused = true)}
-		on:blur={onBlur} />
-	{#if focused}
-		<div
-			aria-label="Language list"
-			bind:this={lang_list}
-			class="langs"
-			transition:slide={{ duration: 600 }}>
-			{#each searched_langs as l}
-				<LanguageOption
-					language={l}
-					on:languageSelected={languageSelectedEvent} />
-			{/each}
-		</div>
-	{/if}
-</div>

src/frontend/popup/Popup.svelte

@@ -1,43 +1,56 @@
 <script lang="ts">
 	import { Communicator } from "../../communication";
 	import LanguageSelection from "./LanguageSelection.svelte";
-	import Select from "svelte-select";
 
-	let isON = false;
+	Communicator.getEnabled().then((v) => (enabled = v));
 
-	const con = new Communicator();
+	let enabled: boolean;
-	con.setEnabledCallback = (v) => (isON = v);
+	$: console.log(enabled);
-	Communicator.getEnabled().then((v) => (isON = v));
+	$: if (enabled !== undefined) Communicator.setEnabled(enabled);
 
 	const langPromise = Communicator.getLanguages();
-
+	let srcLang: Language;
-	const handleClick = () => {
+	let dstLang: Language;
-		isON = !isON;
+	langPromise.then((langs) => {
-		Communicator.setEnabled(isON);
+		srcLang = langs[0];
-	};
+		dstLang = langs[0];
+	});
 </script>
 
 <style lang="scss">
 	#container {
-		//display: flex;
 		width: 387px;
 		height: 600px;
 	}
-	button {
+	label {
+		display: block;
 		width: 100%;
+		text-align: center;
+		cursor: pointer;
+		border: 1px solid #d8dbdf;
+	}
+	label:hover {
+		border-color: #b2b8bf;
+	}
+	label {
+		background-color: red;
+	}
+	.enabled {
+		background-color: green;
 	}
 </style>
 
 <div id="container">
-	<button on:click={handleClick}>{isON ? 'ON' : 'OFF'}</button>
+
+	<label class:enabled>
+		<input type="checkbox" bind:checked={enabled} />
+		{enabled ? 'ON' : 'OFF'}
+	</label>
+
 	{#await langPromise then langs}
 		Translate from
-		<LanguageSelection
+		<LanguageSelection {langs} bind:selectedValue={srcLang} />
-			languages={langs}
-			default_language={langs.find((l) => l.code == 'de') || langs[0]} />
 		To
-		<LanguageSelection
+		<LanguageSelection {langs} bind:selectedValue={dstLang} />
-			languages={langs}
-			default_language={langs.find((l) => l.code == 'en') || langs[0]} />
 	{/await}
 </div>