More language choosing
This commit is contained in:
a
parent
243e9d30f0
commit
c031a92b79
3 changed files with 46 additions and 130 deletions
|
|
@ -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>
|
||||
|
||||
|
|
@ -1,79 +1,18 @@
|
|||
<script lang="ts">
|
||||
import LanguageOption from "./LanguageOption.svelte";
|
||||
import { slide } from "svelte/transition";
|
||||
import Select from "svelte-select";
|
||||
export let langs: Array<Language>;
|
||||
export let selectedValue: Language;
|
||||
|
||||
export let languages: Array<Language>;
|
||||
export let default_language: Language;
|
||||
|
||||
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;
|
||||
const getLabel = (o: Language) => o.name;
|
||||
const itemFilter = (label: string, filterText: string) =>
|
||||
label.toLowerCase().startsWith(filterText.toLowerCase());
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.langs {
|
||||
max-height: 60vh;
|
||||
width: 100%;
|
||||
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>
|
||||
<Select
|
||||
items={langs}
|
||||
getOptionLabel={getLabel}
|
||||
getSelectionLabel={getLabel}
|
||||
optionIdentifier="code"
|
||||
{itemFilter}
|
||||
isClearable={false}
|
||||
bind:selectedValue />
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
con.setEnabledCallback = (v) => (isON = v);
|
||||
Communicator.getEnabled().then((v) => (isON = v));
|
||||
let enabled: boolean;
|
||||
$: console.log(enabled);
|
||||
$: if (enabled !== undefined) Communicator.setEnabled(enabled);
|
||||
|
||||
const langPromise = Communicator.getLanguages();
|
||||
|
||||
const handleClick = () => {
|
||||
isON = !isON;
|
||||
Communicator.setEnabled(isON);
|
||||
};
|
||||
let srcLang: Language;
|
||||
let dstLang: Language;
|
||||
langPromise.then((langs) => {
|
||||
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
|
||||
languages={langs}
|
||||
default_language={langs.find((l) => l.code == 'de') || langs[0]} />
|
||||
<LanguageSelection {langs} bind:selectedValue={srcLang} />
|
||||
To
|
||||
<LanguageSelection
|
||||
languages={langs}
|
||||
default_language={langs.find((l) => l.code == 'en') || langs[0]} />
|
||||
<LanguageSelection {langs} bind:selectedValue={dstLang} />
|
||||
{/await}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue