-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
Play.vue
64 lines (57 loc) · 1.88 KB
/
Play.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<script setup lang="ts">
import { ref, computed } from 'vue'
import { isPrintMode, showEditor, windowSize, isScreenVertical, slideScale } from '../state'
import { next, prev, currentRoute, clicks, clicksElements, useSwipeControls } from '../logic/nav'
import { registerShotcuts } from '../logic/shortcuts'
import Controls from './Controls.vue'
import SlideContainer from './SlideContainer.vue'
import Editor from './Editor.vue'
import NavControls from './NavControls.vue'
registerShotcuts()
const root = ref<HTMLDivElement>()
function onClick(e: MouseEvent) {
if (showEditor.value)
return
if ((e.target as HTMLElement)?.id === 'slide-container') {
// click right to next, left to previouse
if ((e.screenX / window.innerWidth) > 0.6)
next()
else
prev()
}
}
useSwipeControls(root)
const presistNav = computed(() => isScreenVertical.value || showEditor.value)
</script>
<template>
<div id="page-root" ref="root" class="grid grid-cols-[1fr,max-content]">
<SlideContainer
v-model:clicks="clicks"
v-model:clicks-elements="clicksElements"
class="w-full h-full bg-black"
:width="isPrintMode ? windowSize.width.value : undefined"
:route="currentRoute"
:clicks-disabled="false"
:scale="slideScale"
@click="onClick"
>
<template #controls>
<div
class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
:class="presistNav ? 'opacity-100 right-0' : 'oapcity-0 p-2'"
>
<NavControls
class="m-auto"
:class="presistNav
? 'text-white bg-transparent'
: 'rounded-md bg-main shadow dark:(border border-gray-400 border-opacity-10)'"
/>
</div>
</template>
</SlideContainer>
<template v-if="__DEV__">
<Editor v-if="showEditor" />
</template>
</div>
<Controls />
</template>