mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-05 18:23:48 +00:00
Add Gallery
This commit is contained in:
Miloš Holba
6
public/phpinfo.php
Normal file
6
public/phpinfo.php
Normal file
@@ -0,0 +1,6 @@
|
||||
<?php
|
||||
|
||||
// Show all information, defaults to INFO_ALL
|
||||
phpinfo();
|
||||
|
||||
?>
|
||||
138
resources/js/components/FilesView/DesktopMediaPreviewMenu.vue
Normal file
138
resources/js/components/FilesView/DesktopMediaPreviewMenu.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div v-if="showMenu" class="menu-wrapper">
|
||||
<div class="item-list">
|
||||
<li @click="renameItem">
|
||||
<p><edit-2-icon class="icon" size="19" /> Rename</p>
|
||||
</li>
|
||||
<li @click="moveItem">
|
||||
<corner-down-right-icon class="icon" size="19" />
|
||||
<p>Move</p>
|
||||
</li>
|
||||
<li @click="deleteItem">
|
||||
<trash-2-icon class="icon" size="19" />
|
||||
<p>Delete</p>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { events } from "@/bus";
|
||||
import ToolbarButton from "@/components/FilesView/ToolbarButton";
|
||||
import { Trash2Icon, Edit2Icon, CornerDownRightIcon } from "vue-feather-icons";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ToolbarButton,
|
||||
Trash2Icon,
|
||||
Edit2Icon,
|
||||
CornerDownRightIcon,
|
||||
},
|
||||
props: ["fileInfoDetail"],
|
||||
data() {
|
||||
return {
|
||||
showMenu: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
events.$on("desktopMediaMenu:show", () => {
|
||||
this.showMenu = !this.showMenu;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
deleteItem() {
|
||||
this.$store.dispatch("deleteItem", this.fileInfoDetail);
|
||||
},
|
||||
moveItem() {
|
||||
// Open move item popup
|
||||
events.$emit("popup:open", { name: "move", item: this.fileInfoDetail });
|
||||
},
|
||||
renameItem() {
|
||||
let itemName = prompt(
|
||||
this.$t("popup_rename.title"),
|
||||
this.fileInfoDetail.name
|
||||
);
|
||||
|
||||
if (itemName && itemName !== "") {
|
||||
let item = {
|
||||
unique_id: this.fileInfoDetail.unique_id,
|
||||
type: this.fileInfoDetail.type,
|
||||
name: itemName,
|
||||
};
|
||||
|
||||
this.$store.dispatch("renameItem", item);
|
||||
|
||||
// Change item name if is mobile device or prompted
|
||||
if (this.$isMobile()) {
|
||||
events.$emit("change:name", item);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/vue-file-manager/_variables";
|
||||
@import "@assets/vue-file-manager/_mixins";
|
||||
|
||||
.menu-wrapper {
|
||||
width: 250px;
|
||||
position: absolute;
|
||||
top: 7%;
|
||||
z-index: 2;
|
||||
@include widget-card();
|
||||
padding: 0px;
|
||||
}
|
||||
.item-list {
|
||||
list-style: none;
|
||||
color: $text;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
.icon {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
@include font-size(16);
|
||||
}
|
||||
&:hover {
|
||||
background-color: $light_background;
|
||||
color: $theme !important;
|
||||
p,
|
||||
.icon {
|
||||
color: $theme;
|
||||
stroke: $theme !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-list {
|
||||
&:first-child() {
|
||||
border-top-left-radius: 8px !important;
|
||||
border-top-right-radius: 8px !important;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.menu-wrapper {
|
||||
background-color: $dark_mode_foreground;
|
||||
}
|
||||
.item-list {
|
||||
color: $dark_mode_text_primary;
|
||||
li:hover {
|
||||
background-color: rgba($theme, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
resources/js/components/FilesView/FileFullPreview.vue
Normal file
60
resources/js/components/FilesView/FileFullPreview.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="file-full-preview-wrapper" v-if="showFullPreview">
|
||||
<MediaFullPreview v-if="isMedia" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { events } from "@/bus";
|
||||
import { mapGetters } from "vuex";
|
||||
|
||||
import MediaFullPreview from "@/components/FilesView/MediaFullPreview";
|
||||
|
||||
export default {
|
||||
components: { MediaFullPreview },
|
||||
data() {
|
||||
return {
|
||||
showFullPreview: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["fileInfoDetail"]),
|
||||
isMedia() {
|
||||
return this.fileInfoDetail === "image" || "video";
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
events.$on("fileFullPreview:show", () => {
|
||||
this.showFullPreview = true;
|
||||
});
|
||||
events.$on("fileFullPreview:hide", () => {
|
||||
this.showFullPreview = false;
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/vue-file-manager/_variables";
|
||||
|
||||
.file-full-preview-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 7;
|
||||
background-color: $light-background;
|
||||
}
|
||||
.container {
|
||||
max-width: 888px;
|
||||
height: 100%;
|
||||
padding-top: 20px;
|
||||
padding: 10px;
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.file-full-preview-wrapper {
|
||||
background-color: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
399
resources/js/components/FilesView/MediaFullPreview.vue
Normal file
399
resources/js/components/FilesView/MediaFullPreview.vue
Normal file
@@ -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