137 lines
3.8 KiB
Vue
137 lines
3.8 KiB
Vue
<template>
|
|
<div class="carousel" ref="fileCarousel">
|
|
<a-page-header :style="{ visibility: idle ? 'hidden' : 'visible' }">
|
|
<template #extra>
|
|
<a-button type="text" class="action-button" :onclick="toggle" :icon="h(isFullscreen? FullscreenExitOutlined: FullscreenOutlined)" />
|
|
<a-button type="text" class="action-button" :onclick="redirectBack" :icon="h(CloseOutlined)" />
|
|
</template>
|
|
</a-page-header>
|
|
<a-row class="slider">
|
|
<a-col :span="2" class="centered-vertically">
|
|
<div class="custom-slick-arrow slick-arrow slick-prev centered" @click="next(-1)" style="left: 10px; z-index: 1">
|
|
<LeftOutlined v-show="!idle" />
|
|
</div>
|
|
</a-col>
|
|
<a-col :span="20" class="centered">
|
|
<FileViewer v-if="!documentStore.loading" :visibleImg="visible" @visibleImg="setVisible" :type="fileType"></FileViewer>
|
|
</a-col>
|
|
<a-col :span="2" class="centered-vertically right">
|
|
<div class="custom-slick-arrow slick-arrow slick-prev centered" @click="next(1)" style="right: 10px">
|
|
<RightOutlined v-show="!idle" />
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { h, ref, watchEffect } from 'vue'
|
|
import { useDocumentStore } from '@/stores/documents'
|
|
import { useIdle, useFullscreen } from '@vueuse/core'
|
|
import { LeftOutlined, RightOutlined, FullscreenOutlined, FullscreenExitOutlined, CloseOutlined } from '@ant-design/icons-vue';
|
|
import { getFileType } from '@/utils'
|
|
import Router from '@/router/index';
|
|
import FileViewer from './FileViewer.vue';
|
|
|
|
const fileCarousel = ref<HTMLElement | null>(null)
|
|
const { isFullscreen, toggle } = useFullscreen(fileCarousel)
|
|
const visible = ref<boolean>(false);
|
|
const documentStore = useDocumentStore()
|
|
const fileType = ref<string| undefined>(undefined);
|
|
watchEffect(() => {
|
|
if(documentStore.mainDocument[0] && documentStore.mainDocument[0].type === 'file'){
|
|
const fileExt = documentStore.mainDocument[0].ext
|
|
fileType.value = getFileType(fileExt)
|
|
}
|
|
})
|
|
function setVisible(value: boolean) {
|
|
visible.value = value;
|
|
}
|
|
|
|
const { idle } = useIdle(2000)
|
|
|
|
function redirectBack() {
|
|
const currentPath = Router.currentRoute.value.path;
|
|
const pathParts = currentPath.split('/').filter(part => part); // Remove empty parts
|
|
// Ensure there's always at least one part in the path
|
|
if (pathParts.length <= 1) {
|
|
// If it's empty, set it to the base URL
|
|
pathParts[0] = '/';
|
|
} else {
|
|
pathParts.pop();
|
|
}
|
|
const newPath = pathParts.join('/');
|
|
Router.push(newPath);
|
|
}
|
|
function next(direction: number){
|
|
const path = decodeURIComponent(new String(Router.currentRoute.value.path) as string)
|
|
const name = documentStore.getNextDocumentInRoute(direction, path)
|
|
let nextFileLocation : string[] | string = path.split('/')
|
|
nextFileLocation.pop()
|
|
nextFileLocation.push(name)
|
|
nextFileLocation = nextFileLocation.join('/')
|
|
Router.push(nextFileLocation)
|
|
}
|
|
|
|
|
|
</script>
|
|
<style scoped>
|
|
:deep(.slick-arrow.custom-slick-arrow) {
|
|
width: 60px;
|
|
height: 60px;
|
|
font-size: 60px;
|
|
color: var(--primary-color);
|
|
transition: ease-in all 0.3s;
|
|
opacity: 0.3;
|
|
z-index: 1;
|
|
}
|
|
|
|
:deep(.slick-arrow.custom-slick-arrow:before) {
|
|
display: none;
|
|
}
|
|
|
|
:deep(.slick-arrow.custom-slick-arrow:hover) {
|
|
color: var(--primary-color);
|
|
opacity: 1;
|
|
}
|
|
|
|
.slider {
|
|
height: 80vh;
|
|
background-color: inherit;
|
|
}
|
|
|
|
.centered {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.centered-vertically {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.right {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.action-button {
|
|
padding: 0;
|
|
font-size: 1.5em;
|
|
opacity: 0.5;
|
|
color: var(--secondary-color);
|
|
|
|
&:hover {
|
|
color: var(--blue-color);
|
|
}
|
|
}
|
|
|
|
.ant-page-header {
|
|
padding: 0;
|
|
}
|
|
.carousel{
|
|
margin: 0;
|
|
height: inherit;
|
|
background-color: var(--table-background);
|
|
}
|
|
</style>
|