diff --git a/frontend/src/components/BausteinFokus.vue b/frontend/src/components/BausteinFokus.vue index c08ea83..51279e2 100644 --- a/frontend/src/components/BausteinFokus.vue +++ b/frontend/src/components/BausteinFokus.vue @@ -15,17 +15,21 @@ const props = defineProps({ fortschritt: { type: Object, default: () => ({ total: 0, absolviert: 0, verstanden: 0, gemeistert: 0 }) }, }) -import { computed, onMounted, onUnmounted } from 'vue' +import { computed, onMounted, onUnmounted, ref } from 'vue' const emit = defineEmits(['close', 'prev', 'next', 'statusChanged']) -// ←/→ blättern zum vorigen/nächsten Baustein — außer beim Tippen in Feldern. +const guideEl = ref(null) // linke Guide-Spalte (Scroll-Ziel für ↑/↓) + +// Die Fokus-Ansicht besitzt die Pfeiltasten — auch bei fokussiertem Eingabefeld. +// ←/→ blättern Baustein, ↑/↓ scrollen den Guide; Browser-Default wird unterdrückt. +// ALT/Strg/Meta ignorieren (ALT+1/2/3 gehören dem Panel). function onKey(e) { if (e.altKey || e.ctrlKey || e.metaKey) return - const el = document.activeElement - if (el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable)) return - if (e.key === 'ArrowLeft' && props.hasPrev) { e.preventDefault(); emit('prev') } - else if (e.key === 'ArrowRight' && props.hasNext) { e.preventDefault(); emit('next') } + if (e.key === 'ArrowLeft') { e.preventDefault(); if (props.hasPrev) emit('prev') } + else if (e.key === 'ArrowRight') { e.preventDefault(); if (props.hasNext) emit('next') } + else if (e.key === 'ArrowUp') { e.preventDefault(); guideEl.value?.scrollBy(0, -120) } + else if (e.key === 'ArrowDown') { e.preventDefault(); guideEl.value?.scrollBy(0, 120) } } onMounted(() => window.addEventListener('keydown', onKey)) onUnmounted(() => window.removeEventListener('keydown', onKey)) @@ -62,7 +66,7 @@ const standFarbe = computed(() => {
-
+