35 lines
796 B
TypeScript
35 lines
796 B
TypeScript
|
import { onMounted, onUnmounted, ref } from 'vue'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Composable for image overlay functionality with M key toggle
|
||
|
|
* Used in the main app layout for keyboard handling
|
||
|
|
*/
|
||
|
|
export function useImageOverlay() {
|
||
|
|
const showImageOverlay = ref(false)
|
||
|
|
|
||
|
|
const toggleImageOverlay = () => {
|
||
|
|
showImageOverlay.value = !showImageOverlay.value
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
||
|
|
// Toggle image overlay with 'M' key (case-insensitive)
|
||
|
|
if (event.key.toLowerCase() === 'm') {
|
||
|
|
event.preventDefault()
|
||
|
|
toggleImageOverlay()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
window.addEventListener('keydown', handleKeyDown)
|
||
|
|
})
|
||
|
|
|
||
|
|
onUnmounted(() => {
|
||
|
|
window.removeEventListener('keydown', handleKeyDown)
|
||
|
|
})
|
||
|
|
|
||
|
|
return {
|
||
|
|
showImageOverlay,
|
||
|
|
toggleImageOverlay,
|
||
|
|
}
|
||
|
|
}
|