mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 02:50:39 +00:00
Add Gallery
This commit is contained in:
Miloš Holba
@@ -0,0 +1,399 @@
|
||||
<template>
|
||||
<div class="media-full-preview" @keydown.esc="closeFullPreview">
|
||||
<div class="navigation-panel">
|
||||
<div class="name-wrapper">
|
||||
<div @click="closeFullPreview" class="icon-close">×</div>
|
||||
<div class="name">
|
||||
<p>{{ formatedName }}</p>
|
||||
|
||||
<p class="file-count">
|
||||
({{
|
||||
this.currentIndex +
|
||||
1 +
|
||||
" " +
|
||||
$t("pronouns.of") +
|
||||
" " +
|
||||
this.sliderFile.length
|
||||
}})
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="fast-menu" @click="menuOpen()">
|
||||
<p>...</p>
|
||||
<DesktopMediaPreviewMenu :fileInfoDetail="this.fileInfoDetail" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="created_at-wrapper">
|
||||
<p>{{ currentFile.filesize }}, {{ currentFile.created_at }}</p>
|
||||
</div>
|
||||
<div class="navigation-icons">
|
||||
<ToolbarButton
|
||||
source="download"
|
||||
@click.native="downloadItem"
|
||||
:action="$t('actions.download')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
v-if="!$isThisLocation(['public'])"
|
||||
source="share"
|
||||
:class="{ 'is-inactive': canShareInView }"
|
||||
:action="$t('actions.share')"
|
||||
@click.native="shareItem"
|
||||
/>
|
||||
<ToolbarButton
|
||||
v-if="this.fileInfoDetail.type === 'image'"
|
||||
source="print"
|
||||
:action="$t('actions.print')"
|
||||
@click.native="printMethod()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="file-wrapper-preview" v-for="i in [currentIndex]" :key="i">
|
||||
<div class="file-wrapper">
|
||||
<img
|
||||
v-if="fileInfoDetail.type === 'image' && currentFile.thumbnail"
|
||||
class="file"
|
||||
id="image"
|
||||
:src="currentFile.thumbnail"
|
||||
:style="{ width: sizeWidth, height: sizeHeight }"
|
||||
v-on:load="onLoaded"
|
||||
v-show="loaded"
|
||||
/>
|
||||
<video
|
||||
v-if="fileInfoDetail.type === 'video' && currentFile.file_url"
|
||||
:src="currentFile.file_url"
|
||||
class="file"
|
||||
:style="{ width: sizeWidth, height: sizeHeight }"
|
||||
controlsList="nodownload"
|
||||
disablePictureInPicture
|
||||
playsinline
|
||||
controls
|
||||
/>
|
||||
<spinner v-if="!loaded && fileInfoDetail.type === 'image'" />
|
||||
</div>
|
||||
</div>
|
||||
<a class="prev" @click.prevent="prev" href="#">❮ </a>
|
||||
<a class="next" @click.prevent="next" href="#">❯ </a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { events } from "@/bus";
|
||||
import { mapGetters } from "vuex";
|
||||
import ToolbarButton from "@/components/FilesView/ToolbarButton";
|
||||
import DesktopMediaPreviewMenu from "@/components/FilesView/DesktopMediaPreviewMenu";
|
||||
import Spinner from "@/components/FilesView/Spinner";
|
||||
|
||||
export default {
|
||||
components: { ToolbarButton, DesktopMediaPreviewMenu, Spinner },
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 1,
|
||||
sliderFile: [],
|
||||
loaded: false,
|
||||
sizeWidth: "",
|
||||
sizeHeight: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["fileInfoDetail", "data"]),
|
||||
|
||||
currentFile: function () {
|
||||
return this.sliderFile[
|
||||
Math.abs(this.currentIndex) % this.sliderFile.length
|
||||
];
|
||||
},
|
||||
formatedName() {
|
||||
let name = this.currentFile.name;
|
||||
if (name.lastIndexOf(".") > -1) {
|
||||
return _.truncate(name.substring(0, name.lastIndexOf(".")), {
|
||||
length: 20,
|
||||
});
|
||||
} else {
|
||||
return _.truncate(name, {
|
||||
length: 20,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
canShareInView() {
|
||||
return !this.$isThisLocation([
|
||||
"base",
|
||||
"participant_uploads",
|
||||
"latest",
|
||||
"shared",
|
||||
"public",
|
||||
]);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.filteredFiles();
|
||||
this.imageSizing();
|
||||
},
|
||||
watch: {
|
||||
currentFile() {
|
||||
this.$store.commit("GET_FILEINFO_DETAIL", this.currentFile);
|
||||
},
|
||||
fileInfoDetail() {
|
||||
if (!this.fileInfoDetail) {
|
||||
if (this.data.length == 0) {
|
||||
events.$emit("fileFullPreview:hide");
|
||||
} else {
|
||||
this.currentIndex = this.currentIndex - 1;
|
||||
this.$store.commit("GET_FILEINFO_DETAIL", this.currentFile);
|
||||
this.sliderFile = [];
|
||||
this.filteredFiles();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
imageSizing() {
|
||||
if (this.$isMobile()) {
|
||||
this.sizeWidth = "100%";
|
||||
this.sizeHeight = "auto";
|
||||
} else {
|
||||
this.sizeWidth = "auto";
|
||||
this.sizeHeight = "100%";
|
||||
}
|
||||
},
|
||||
menuOpen() {
|
||||
if (this.$isMobile()) {
|
||||
events.$emit("mobileMenu:show", "showFromMediaPreview");
|
||||
} else {
|
||||
events.$emit("desktopMediaMenu:show");
|
||||
}
|
||||
},
|
||||
closeFullPreview() {
|
||||
events.$emit("fileFullPreview:hide");
|
||||
},
|
||||
printMethod() {
|
||||
var tab = document.getElementById("image");
|
||||
var win = window.open("", "", "height=700,width=700");
|
||||
win.document.write(tab.outerHTML);
|
||||
win.document.close();
|
||||
win.print();
|
||||
},
|
||||
filteredFiles() {
|
||||
this.data.forEach((element) => {
|
||||
if (element.type == this.fileInfoDetail.type) {
|
||||
this.sliderFile.push(element);
|
||||
}
|
||||
});
|
||||
this.choseActiveFile();
|
||||
},
|
||||
onLoaded() {
|
||||
this.loaded = true;
|
||||
},
|
||||
choseActiveFile() {
|
||||
this.sliderFile.forEach((element, index) => {
|
||||
if (element.unique_id == this.fileInfoDetail.unique_id) {
|
||||
this.currentIndex = index;
|
||||
}
|
||||
});
|
||||
},
|
||||
downloadItem() {
|
||||
// Download file
|
||||
this.$downloadFile(
|
||||
this.currentFile.file_url,
|
||||
this.currentFile.name + "." + this.currentFile.mimetype
|
||||
);
|
||||
},
|
||||
|
||||
next: function () {
|
||||
this.currentIndex += 1;
|
||||
if (this.currentIndex > this.sliderFile.length - 1) {
|
||||
this.currentIndex = 0;
|
||||
}
|
||||
},
|
||||
prev: function () {
|
||||
this.currentIndex -= 1;
|
||||
if (this.currentIndex < 0) {
|
||||
this.currentIndex = this.sliderFile.length - 1;
|
||||
}
|
||||
},
|
||||
|
||||
shareItem() {
|
||||
if (this.fileInfoDetail.shared) {
|
||||
events.$emit("popup:open", {
|
||||
name: "share-edit",
|
||||
item: this.currentFile,
|
||||
});
|
||||
} else {
|
||||
events.$emit("popup:open", {
|
||||
name: "share-create",
|
||||
item: this.currentFile,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/vue-file-manager/_variables";
|
||||
@import "@assets/vue-file-manager/_mixins";
|
||||
|
||||
.media-full-preview {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.name-wrapper {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include font-size(15);
|
||||
font-weight: 700;
|
||||
.name {
|
||||
display: flex;
|
||||
}
|
||||
.icon-close {
|
||||
@include font-size(15);
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
color: $text;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fast-menu {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
p {
|
||||
margin-top: -10px;
|
||||
}
|
||||
p:hover {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 420px) and (max-width: 750px) {
|
||||
.name-wrapper {
|
||||
width: 67%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 430px) {
|
||||
.name-wrapper {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.created_at-wrapper {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include font-size(11);
|
||||
}
|
||||
@media (max-width: 750px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-icons {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
& > * {
|
||||
margin-left: 5px;
|
||||
}
|
||||
@media (max-width: 430px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-panel {
|
||||
width: 100%;
|
||||
height: 7%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
justify-content: space-between;
|
||||
background-color: $light-background;
|
||||
color: $text;
|
||||
.icon-close {
|
||||
color: $text;
|
||||
@include font-size(21);
|
||||
&:hover {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-wrapper-preview {
|
||||
width: 100%;
|
||||
height: 93%;
|
||||
padding: 30px 0px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.file-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.file {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prev,
|
||||
.next {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 40px;
|
||||
height: 40;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: white;
|
||||
padding: 8px;
|
||||
color: $text;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
// border-radius: 0 4px 4px 0;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
}
|
||||
.next {
|
||||
right: 0;
|
||||
}
|
||||
.prev {
|
||||
left: 0;
|
||||
}
|
||||
.prev:hover,
|
||||
.next:hover {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.navigation-panel {
|
||||
background-color: $dark_mode_foreground;
|
||||
color: $light-text;
|
||||
.icon-close {
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
.prev,
|
||||
.next {
|
||||
color: $light-text;
|
||||
background-color: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user