145 lines
3.0 KiB
Vue
145 lines
3.0 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<Transition name="pdf-overlay">
|
|
<div
|
|
v-if="isOpen"
|
|
class="pdf-reader"
|
|
@keydown.escape="close"
|
|
tabindex="0"
|
|
ref="overlayRef"
|
|
>
|
|
<!-- Top bar -->
|
|
<div class="pdf-bar">
|
|
<div class="pdf-bar-title">
|
|
<div class="i-lucide-book-open h-4 w-4 text-accent" />
|
|
<span>{{ bpContent?.pdf.barTitle }}</span>
|
|
</div>
|
|
<button class="pdf-close" @click="close" aria-label="Fermer">
|
|
<div class="i-lucide-x h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- PDF embed -->
|
|
<div class="pdf-viewport">
|
|
<iframe
|
|
:src="pdfUrl"
|
|
class="pdf-frame"
|
|
:title="bpContent?.pdf.iframeTitle"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{ modelValue: boolean }>()
|
|
const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
|
|
|
|
const { data: bpContent } = await usePageContent('book-player')
|
|
|
|
const overlayRef = ref<HTMLElement>()
|
|
|
|
const isOpen = computed({
|
|
get: () => props.modelValue,
|
|
set: (v) => emit('update:modelValue', v),
|
|
})
|
|
|
|
const pdfUrl = '/pdf/une-economie-du-don.pdf'
|
|
|
|
function close() {
|
|
isOpen.value = false
|
|
}
|
|
|
|
watch(isOpen, (open) => {
|
|
if (open) {
|
|
nextTick(() => overlayRef.value?.focus())
|
|
}
|
|
if (import.meta.client) {
|
|
document.body.style.overflow = open ? 'hidden' : ''
|
|
}
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (import.meta.client) document.body.style.overflow = ''
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pdf-reader {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 60;
|
|
background: hsl(20 8% 4%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
outline: none;
|
|
}
|
|
|
|
.pdf-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.75rem 1.25rem;
|
|
background: hsl(20 8% 6% / 0.95);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid hsl(20 8% 14%);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.pdf-bar-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
font-family: var(--font-display, 'Syne', sans-serif);
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: white;
|
|
}
|
|
|
|
.pdf-close {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
border-radius: 50%;
|
|
background: hsl(20 8% 10%);
|
|
color: hsl(20 8% 55%);
|
|
border: 1px solid hsl(20 8% 18%);
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.pdf-close:hover {
|
|
background: hsl(12 76% 48% / 0.2);
|
|
color: white;
|
|
border-color: hsl(12 76% 48% / 0.3);
|
|
}
|
|
|
|
.pdf-viewport {
|
|
flex: 1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pdf-frame {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background: white;
|
|
}
|
|
|
|
/* Overlay transitions */
|
|
.pdf-overlay-enter-active {
|
|
animation: pdf-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
.pdf-overlay-leave-active {
|
|
animation: pdf-enter 0.3s cubic-bezier(0.7, 0, 0.84, 0) reverse both;
|
|
}
|
|
@keyframes pdf-enter {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|