mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 16:22:14 +00:00
upload request prototype UI
This commit is contained in:
Čarodej
@@ -1,40 +1,52 @@
|
||||
<template>
|
||||
<div v-if="currentFile" class="absolute lg:top-[66px] top-[56px] left-0 right-0 bottom-0 select-none">
|
||||
|
||||
<!--Arrow navigation-->
|
||||
<div v-if="currentFile" class="absolute top-[56px] left-0 right-0 bottom-0 select-none lg:top-[66px]">
|
||||
<!--Arrow navigation-->
|
||||
<div v-if="!$isMobile() && files.length > 1" class="">
|
||||
<div @click.prevent="prev" class="fixed top-1/2 left-0 p-3 cursor-pointer z-20">
|
||||
<div @click.prevent="prev" class="fixed top-1/2 left-0 z-20 cursor-pointer p-3">
|
||||
<chevron-left-icon size="20" />
|
||||
</div>
|
||||
|
||||
<div @click.prevent="next" class="fixed top-1/2 right-0 p-3 cursor-pointer z-20">
|
||||
<div @click.prevent="next" class="fixed top-1/2 right-0 z-20 cursor-pointer p-3">
|
||||
<chevron-right-icon size="20" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Desktop preview-->
|
||||
<div v-if="!$isMobile() && (isAudio || isImage || isVideo || isPDF)" class="w-full h-full flex justify-center items-center">
|
||||
|
||||
<!--Show PDF-->
|
||||
<div
|
||||
v-if="!$isMobile() && (isAudio || isImage || isVideo || isPDF)"
|
||||
class="flex h-full w-full items-center justify-center"
|
||||
>
|
||||
<!--Show PDF-->
|
||||
<PdfFile v-if="isPDF" :file="currentFile" />
|
||||
|
||||
<!--Show Audio, Video and Image-->
|
||||
<div class="w-full h-full flex items-center justify-center">
|
||||
<Audio v-if="isAudio" :file="currentFile"/>
|
||||
<Video v-if="isVideo" :file="currentFile" class="max-w-[1080px] max-h-full self-center mx-auto" />
|
||||
<ImageFile v-if="isImage" :file="currentFile" class="max-w-[100%] max-h-[100%] self-center mx-auto" />
|
||||
<div class="flex h-full w-full items-center justify-center">
|
||||
<Audio v-if="isAudio" :file="currentFile" />
|
||||
<Video v-if="isVideo" :file="currentFile" class="mx-auto max-h-full max-w-[1080px] self-center" />
|
||||
<ImageFile v-if="isImage" :file="currentFile" class="mx-auto max-h-[100%] max-w-[100%] self-center" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Mobile Preview-->
|
||||
<div v-if="$isMobile() && (isAudio || isImage || isVideo || isPDF)" @scroll="checkGroupInView" id="group-box" ref="scrollBox" class="flex gap-6 snap-x snap-mandatory overflow-x-auto h-full">
|
||||
<div v-for="(file, i) in files" :key="i" :id="`group-${file.data.id}`" class="w-screen h-full flex items-center justify-center snap-center shrink-0 relative">
|
||||
<ImageFile v-if="isImage" :file="file" class="max-w-[100%] max-h-[100%] self-center mx-auto"/>
|
||||
<Audio v-if="isAudio" :file="file"/>
|
||||
<!--Mobile Preview-->
|
||||
<div
|
||||
v-if="$isMobile() && (isAudio || isImage || isVideo || isPDF)"
|
||||
@scroll="checkGroupInView"
|
||||
id="group-box"
|
||||
ref="scrollBox"
|
||||
class="flex h-full snap-x snap-mandatory gap-6 overflow-x-auto"
|
||||
>
|
||||
<div
|
||||
v-for="(file, i) in files"
|
||||
:key="i"
|
||||
:id="`group-${file.data.id}`"
|
||||
class="relative flex h-full w-screen shrink-0 snap-center items-center justify-center"
|
||||
>
|
||||
<ImageFile v-if="isImage" :file="file" class="mx-auto max-h-[100%] max-w-[100%] self-center" />
|
||||
<Audio v-if="isAudio" :file="file" />
|
||||
<Video v-if="isVideo" :file="file" />
|
||||
<PdfFile v-if="isPDF" :file="file" />
|
||||
</div>
|
||||
</div>
|
||||
<PdfFile v-if="isPDF" :file="file" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -111,29 +123,29 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
checkGroupInView: _.debounce(function () {
|
||||
this.files.forEach((file, index) => {
|
||||
let element = document.getElementById(`group-${file.data.id}`).getBoundingClientRect()
|
||||
let scrollBox = document.getElementById('group-box').getBoundingClientRect()
|
||||
checkGroupInView: _.debounce(function () {
|
||||
this.files.forEach((file, index) => {
|
||||
let element = document.getElementById(`group-${file.data.id}`).getBoundingClientRect()
|
||||
let scrollBox = document.getElementById('group-box').getBoundingClientRect()
|
||||
|
||||
// Get video
|
||||
const video = document.querySelector(`#group-${file.data.id} video`);
|
||||
// Get video
|
||||
const video = document.querySelector(`#group-${file.data.id} video`)
|
||||
|
||||
// Pause video when playing
|
||||
if (video && !video.paused) {
|
||||
video.pause()
|
||||
}
|
||||
// Pause video when playing
|
||||
if (video && !video.paused) {
|
||||
video.pause()
|
||||
}
|
||||
|
||||
// Check if the group is in the viewport of group-box
|
||||
if (element.left === scrollBox.left) {
|
||||
this.currentIndex = index
|
||||
}
|
||||
})
|
||||
}, 100),
|
||||
// Check if the group is in the viewport of group-box
|
||||
if (element.left === scrollBox.left) {
|
||||
this.currentIndex = index
|
||||
}
|
||||
})
|
||||
}, 100),
|
||||
getFilesForView() {
|
||||
let requestedFile = this.clipboard[0]
|
||||
|
||||
this.entries.map(element => {
|
||||
this.entries.map((element) => {
|
||||
if (requestedFile.data.attributes.mimetype === 'pdf') {
|
||||
if (element.data.attributes.mimetype === 'pdf') this.files.push(element)
|
||||
} else {
|
||||
@@ -143,18 +155,18 @@ export default {
|
||||
|
||||
this.files.forEach((element, index) => {
|
||||
if (element.data.id === this.clipboard[0].data.id) {
|
||||
this.currentIndex = index
|
||||
this.currentIndex = index
|
||||
}
|
||||
})
|
||||
|
||||
// Scroll to the selected item
|
||||
if (this.$isMobile()) {
|
||||
this.$nextTick(() => {
|
||||
let element = document.getElementById(`group-${this.files[this.currentIndex].data.id}`)
|
||||
// Scroll to the selected item
|
||||
if (this.$isMobile()) {
|
||||
this.$nextTick(() => {
|
||||
let element = document.getElementById(`group-${this.files[this.currentIndex].data.id}`)
|
||||
|
||||
this.$refs.scrollBox.scrollLeft = element.getBoundingClientRect().left
|
||||
})
|
||||
}
|
||||
this.$refs.scrollBox.scrollLeft = element.getBoundingClientRect().left
|
||||
})
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if (!this.files.length > 1) return
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div v-if="currentFile" class="items-center px-3.5 py-4 lg:grid lg:grid-cols-3 lg:py-3 select-none">
|
||||
<div v-if="currentFile" class="select-none items-center px-3.5 py-4 lg:grid lg:grid-cols-3 lg:py-3">
|
||||
<div class="flex items-center justify-between lg:w-auto lg:justify-start">
|
||||
<!--Close icon-->
|
||||
<div @click="closeFullPreview" class="order-last -m-3 cursor-pointer p-3 lg:order-none">
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<audio :class="{ 'file-shadow': !$isMobile() }" class="file audio" :src="file.data.attributes.file_url" controls></audio>
|
||||
<audio
|
||||
:class="{ 'file-shadow': !$isMobile() }"
|
||||
class="file audio"
|
||||
:src="file.data.attributes.file_url"
|
||||
controls
|
||||
></audio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -31,9 +31,7 @@ export default {
|
||||
components: {
|
||||
pdf,
|
||||
},
|
||||
props: [
|
||||
'file',
|
||||
],
|
||||
props: ['file'],
|
||||
watch: {
|
||||
file() {
|
||||
this.getPdf()
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<video
|
||||
:src="file.data.attributes.file_url"
|
||||
class="video"
|
||||
:class="{ 'file-shadow': !$isMobile() }"
|
||||
controlsList="nodownload"
|
||||
disablePictureInPicture
|
||||
playsinline
|
||||
controls
|
||||
/>
|
||||
<video
|
||||
:src="file.data.attributes.file_url"
|
||||
class="video"
|
||||
:class="{ 'file-shadow': !$isMobile() }"
|
||||
controlsList="nodownload"
|
||||
disablePictureInPicture
|
||||
playsinline
|
||||
controls
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user