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 11:37:17 +02:00
parent 9f7553edbc
commit 993552efe5
1 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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(() => {
<div class="xp-seg gruen" :style="{ width: pct(fortschritt.absolviert - fortschritt.verstanden) }"></div>
</div>
<div class="fokus-body">
<div class="fokus-col left">
<div ref="guideEl" class="fokus-col left">
<div class="markdown" v-html="renderMarkdown(baustein.md)"></div>
</div>
<div class="fokus-col right">