marek/creator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
team3
2026-06-18 12:50:01 +02:00
parent 3df5976d3d
commit d8932c90d6
4 changed files with 100 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/components/BausteinFokus.vue
View File

@@ -19,20 +19,41 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
const emit = defineEmits(['close', 'prev', 'next', 'statusChanged'])
const guideEl = ref(null) // linke Guide-Spalte (Scroll-Ziel für ↑/↓)
const guideEl = ref(null) // linke Guide-Spalte (Scroll-Ziel für ALT+↑/↓)
const rightEl = ref(null) // rechte Spalte (Prüfungs-Panel mit Eingabefeld)
// 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
if (e.key === 'ArrowLeft') { e.preventDefault(); if (props.hasPrev) emit('prev') }
else if (e.key === 'ArrowRight') { e.preventDefault(); if (props.hasNext) emit('next') }
// ALT ist der Modifier der Fokus-Ansicht. Plain Pfeile bleiben Browser-Standard.
// ALT+←/→ blättert Baustein, ALT+↑/↓ scrollt den Guide. Ein reiner ALT-Tipp
// (drücken+loslassen ohne andere Taste) toggelt den Fokus aufs Eingabefeld.
let altAlone = false
function onKeyDown(e) {
if (e.key === 'Alt') { altAlone = true; e.preventDefault(); return } // unterdrückt Firefox-Menüleiste
if (e.ctrlKey || e.metaKey || !e.altKey) return // plain/andere → normal
altAlone = false // ALT+irgendwas = kein Lone-Tap
if (e.key === 'ArrowLeft') { e.preventDefault(); if (!e.repeat && props.hasPrev) emit('prev') }
else if (e.key === 'ArrowRight') { e.preventDefault(); if (!e.repeat && 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))
function onKeyUp(e) {
if (e.key === 'Alt') { e.preventDefault(); if (altAlone) { altAlone = false; toggleInput() } }
}
function resetAlt() { altAlone = false } // Fenster-Blur (ALT+Tab) → kein falscher Tipp
function toggleInput() {
const el = rightEl.value?.querySelector('textarea')
if (!el) return
document.activeElement === el ? el.blur() : el.focus()
}
onMounted(() => {
window.addEventListener('keydown', onKeyDown)
window.addEventListener('keyup', onKeyUp)
window.addEventListener('blur', resetAlt)
})
onUnmounted(() => {
window.removeEventListener('keydown', onKeyDown)
window.removeEventListener('keyup', onKeyUp)
window.removeEventListener('blur', resetAlt)
})
const pct = (n) => (100 * n / (props.fortschritt.total || 1)) + '%'
@@ -69,7 +90,7 @@ const standFarbe = computed(() => {
<div ref="guideEl" class="fokus-col left">
<div class="markdown" v-html="renderMarkdown(baustein.md)"></div>
</div>
<div class="fokus-col right">
<div ref="rightEl" class="fokus-col right">
<BausteinPanel
mode="full"
:key="baustein.title + '|' + tab"