Fixed input binding

This commit is contained in:
Simon Cambier
2022-04-20 08:12:48 +02:00
parent d5f7382a98
commit 035d4ff957
4 changed files with 26 additions and 23 deletions

View File

@@ -2,11 +2,10 @@
import { debounce } from "obsidian"
import { createEventDispatcher, onMount, tick } from "svelte"
export let debouncedValue: string
export let value = ''
const dispatch = createEventDispatcher()
let elInput: HTMLInputElement
let inputValue: string
const dispatch = createEventDispatcher()
onMount(async () => {
await tick()
@@ -15,7 +14,9 @@ onMount(async () => {
elInput.select()
})
const debouncedOnInput = debounce(() => (debouncedValue = inputValue), 100)
const debouncedOnInput = debounce(() => {
dispatch("input", value)
}, 100)
function moveNoteSelection(ev: KeyboardEvent): void {
switch (ev.key) {
@@ -47,10 +48,10 @@ function moveNoteSelection(ev: KeyboardEvent): void {
}
}
</script>
{inputValue} - {debouncedValue}
<input
bind:value
bind:this={elInput}
bind:value={inputValue}
on:input={debouncedOnInput}
on:keydown={moveNoteSelection}
type="text"

View File

@@ -94,7 +94,7 @@ function openSelection(): void {
<div class="modal-title">Omnisearch - File</div>
<CmpInput
bind:debouncedValue={searchQuery}
on:input={(e) => (searchQuery = e.detail)}
on:enter={openSelection}
on:arrow-up={() => moveIndex(-1)}
on:arrow-down={() => moveIndex(1)}

View File

@@ -1,3 +1,7 @@
<script lang="ts" context="module">
let lastSearch = ""
</script>
<script lang="ts">
import { TFile } from "obsidian"
import { onMount, tick } from "svelte"
@@ -7,18 +11,18 @@ import type { ResultNote } from "./globals"
import { OmnisearchModal } from "./modal"
import { openNote } from "./notes"
import { getSuggestions } from "./search"
import { lastSearch, modal, plugin } from "./stores"
import { modal, plugin } from "./stores"
import { loopIndex } from "./utils"
let selectedIndex = 0
let searchQuery: string
let resultNotes: ResultNote[] = []
$: selectedNote = resultNotes[selectedIndex]!
$: selectedNote = resultNotes[selectedIndex]
$: {
if (searchQuery) {
resultNotes = getSuggestions(searchQuery)
$lastSearch = searchQuery
lastSearch = searchQuery
}
selectedIndex = 0
scrollIntoView()
@@ -26,7 +30,7 @@ $: {
onMount(async () => {
await tick()
searchQuery = $lastSearch
searchQuery = lastSearch
})
async function createOrOpenNote(item: ResultNote): Promise<void> {
@@ -47,22 +51,26 @@ async function createOrOpenNote(item: ResultNote): Promise<void> {
}
function onClick() {
if (!selectedNote) return
openNote(selectedNote)
$modal.close()
}
function onInputEnter(): void {
// console.log(event.detail)
if (!selectedNote) return
openNote(selectedNote)
$modal.close()
}
function onInputCtrlEnter(): void {
if (!selectedNote) return
openNote(selectedNote, true)
$modal.close()
}
function onInputShiftEnter(): void {
if (!selectedNote) return
createOrOpenNote(selectedNote)
$modal.close()
}
@@ -83,20 +91,21 @@ function moveIndex(dir: 1 | -1): void {
}
function scrollIntoView(): void {
if (selectedNote) {
tick().then(() => {
tick().then(() => {
if (selectedNote) {
const elem = document.querySelector(
`[data-note-id="${selectedNote.path}"]`
)
elem?.scrollIntoView({ behavior: "auto", block: "nearest" })
})
}
}
})
}
</script>
<div class="modal-title">Omnisearch - Vault</div>
<CmpInput
bind:debouncedValue={searchQuery}
value={lastSearch}
on:input={(e) => (searchQuery = e.detail)}
on:enter={onInputEnter}
on:shift-enter={onInputShiftEnter}
on:ctrl-enter={onInputCtrlEnter}

View File

@@ -27,11 +27,6 @@ function createIndexedNotes() {
}
}
/**
* If this field is set, the search will be limited to the given file
*/
// export const inFileSearch = writable<TFile | null>(null)
/**
* A reference to the plugin instance
*/
@@ -46,5 +41,3 @@ export const modal = writable<OmnisearchModal>()
* The entire list of indexed notes, constantly kept up-to-date.
*/
export const indexedNotes = createIndexedNotes()
export const lastSearch = writable('')