|
|
@@ -13,7 +13,10 @@
|
|
|
let translations = []
|
|
|
let selected_item
|
|
|
let persian
|
|
|
+ let selected = -1
|
|
|
+ let shown_element
|
|
|
$: if (term.length > 1) {
|
|
|
+ selected = -1
|
|
|
persian = is_persian(term)
|
|
|
const normalized = persian ? term.replace(/([\u064B-\u0655])/g, '') : term
|
|
|
const uri = encodeURI(`a/${normalized}`)
|
|
|
@@ -34,11 +37,22 @@
|
|
|
const uri = encodeURI(`g/${selected_item}`)
|
|
|
const res = await fetch(uri)
|
|
|
translations = await res.json()
|
|
|
+ shown_element.scrollIntoView()
|
|
|
}
|
|
|
function is_persian (string) {
|
|
|
const regex = /[\u0622\u0627\u0628\u067E\u062A-\u0632\u0686\u0698\u0633-\u063A\u0641\u0642\u06A9\u06AF\u0644-\u0648\u06CC]/
|
|
|
return regex.test(string)
|
|
|
}
|
|
|
+ const key = e => {
|
|
|
+ if (e.key === 'ArrowDown') selected += 1
|
|
|
+ else if (e.key === 'ArrowUp') selected -= 1
|
|
|
+ else if (e.key === 'Enter') show_lemma(lemmas[selected].id)
|
|
|
+ else return
|
|
|
+ if (selected > lemmas.length-1) selected = 0
|
|
|
+ if (selected < 0) selected = lemmas.length -1
|
|
|
+ e.preventDefault();
|
|
|
+
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
@@ -76,12 +90,13 @@ ul li::before {
|
|
|
</p>
|
|
|
<div class="columns is-centered">
|
|
|
<div class="column is-half">
|
|
|
- <input class="input is-large" type="text" placeholder="suchen …" bind:value={term}>
|
|
|
+ <input class="input is-large" type="text" placeholder="suchen …"
|
|
|
+ bind:value={term} on:keydown={key}>
|
|
|
</div>
|
|
|
</div>
|
|
|
{#if lemmas<1}
|
|
|
<p class="is-size-5 has-text-left-mobile">
|
|
|
- Aktuell sind {stats.lemmas} Einträge und {stats.translations} Übersetzungen in der Datenbank
|
|
|
+ Aktuell sind {stats.lemmas.toLocaleString('de-DE')} Einträge und {stats.translations.toLocaleString('de-DE')} Übersetzungen in der Datenbank
|
|
|
</p>
|
|
|
<p class="is-size-5 has-text-right-mobile">
|
|
|
فرهنگ فارسی - آلمانی
|
|
|
@@ -100,13 +115,13 @@ ul li::before {
|
|
|
{#if lemmas.length > 0}
|
|
|
<div class="columns is-centered">
|
|
|
<div class="column is-half">
|
|
|
- {#each lemmas as l}
|
|
|
+ {#each lemmas as l,i}
|
|
|
<div class={`card ${persian ? 'has-text-right':''}`}>
|
|
|
- <header class="card-header">
|
|
|
+ <header class={selected === i ? "card-header has-background-grey-light":'card-header'}>
|
|
|
<p class="card-header-title" style="cursor: pointer" on:click={()=>show_lemma(l.id)}>{l.lemma}</p>
|
|
|
</header>
|
|
|
{#if l.id === selected_item}
|
|
|
- <div class="card-content">
|
|
|
+ <div class="card-content" bind:this={shown_element}>
|
|
|
<div class="content">
|
|
|
<ul style={persian ? 'margin-left:0; margin-right:1em':''}>
|
|
|
{#each translations as t}
|
burningTyger