PLG_Development/PLG-MuDiCS
3
0
Fork 0
mirror of https://codeberg.org/PLG-Development/PLG-MuDiCS synced 2026-07-06 00:47:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(control): add enter action to TextInput

Browse Source
This commit is contained in:
E44
2025-11-23 00:26:40 +01:00
parent 9c5212dbac
commit 7488492190
3 changed files with 58 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
control/frontend/src/components/FileView.svelte
+19 -17
View File
@@ -52,6 +52,21 @@
popup_content.open = false;
}
async function create_new_folder() {
for (const display_id of $selected_display_ids) {
const display = get_display_by_id(display_id, $displays);
if (!display) continue;
const path_data = get_longest_existing_path_and_needed_parts(
$current_file_path,
display_id,
$all_files
);
await create_folders(display.ip, path_data.existing, [...path_data.needed, current_name]);
}
await update_current_folder_on_selected_displays();
popup_close_function();
}
const show_new_folder_popup = () => {
current_name = '';
current_valid = false;
@@ -115,25 +130,12 @@
return [false, 'Name bereits verwendet'];
return [true, 'Gültiger Name'];
}}
enter_mode="submit"
enter_function={create_new_folder}
/>
<div class="flex flex-row justify-end gap-2">
<Button
className="px-4 font-bold"
click_function={async () => {
for (const display_id of $selected_display_ids) {
const display = get_display_by_id(display_id, $displays);
if (!display) continue;
const path_data = get_longest_existing_path_and_needed_parts(
$current_file_path,
display_id,
$all_files
);
await create_folders(display.ip, path_data.existing, [...path_data.needed, current_name]);
}
await update_current_folder_on_selected_displays();
popup_close_function();
}}
disabled={!current_valid}>Neuen Ordner erstellen</Button
<Button className="px-4 font-bold" click_function={create_new_folder} disabled={!current_valid}
>Neuen Ordner erstellen</Button
>
</div>
{/snippet}
control/frontend/src/components/TextInput.svelte
+30 -1
View File
@@ -12,7 +12,9 @@
title,
placeholder = '',
is_valid_function = null,
focused_on_start = false
focused_on_start = false,
enter_mode = 'none',
enter_function = null
} = $props<{
current_value: string;
current_valid: boolean;
@@ -22,6 +24,8 @@
placeholder?: string;
is_valid_function?: ((input: string) => [boolean, string]) | null;
focused_on_start?: boolean;
enter_mode?: 'none' | 'focus_next' | 'submit';
enter_function?: (() => void) | null;
}>();
let focus_bg = get_shifted_color(bg, 100);
@@ -42,6 +46,30 @@
return 'inset-ring-2 inset-ring-red-400';
}
}
function focus_next_element() {
const focusable = Array.from(document.querySelectorAll<HTMLElement>('input')).filter(
(el) => !el.hasAttribute('disabled')
);
const index = focusable.indexOf(input_element);
if (index !== -1 && index < focusable.length - 1) {
focusable[index + 1].focus();
}
}
function handle_keydown(event: KeyboardEvent) {
if (event.key !== 'Enter') return;
if (enter_mode === 'focus_next') {
event.preventDefault();
focus_next_element();
} else if (enter_mode === 'submit' && enter_function) {
event.preventDefault();
enter_function();
}
}
onMount(() => {
validate_input();
if (focused_on_start && input_element) input_element.focus();
@@ -70,6 +98,7 @@
bind:this={input_element}
bind:value={current_value}
bind:focused
onkeydown={handle_keydown}
type="text"
oninput={validate_input}
class="{bg} focus:{focus_bg} outline-none py-2 px-3 rounded-xl transition-all duration-100 {get_highlighting_string()}"