xlmnxp/extractify.zip
1
0
Fork 0
mirror of https://github.com/xlmnxp/extractify.zip.git synced 2024-11-23 09:03:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

move folders to folders view; fix some bugs

Browse Source
This commit is contained in:
Salem Yaslem 2024-11-04 13:07:23 +03:00
parent dac3982370
commit 249cc552ec
5 changed files with 89 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
app.vue
View File

@ -1,6 +1,4 @@
<script setup lang="ts">
import { getElementInfo } from "moveable";
import { VueSelecto } from "vue3-selecto";
import { useDisplay } from 'vuetify/lib/framework.mjs';
import { HistoryManager } from './composables/history-manager';
import { FilesManager, supportedExtensions, imageExtensions } from './composables/files-manager';
@ -66,13 +64,6 @@ watchEffect(async () => {
const file = filesManager.getFile(selectedPath.value);
filesGridList.value = file?.content;
console.log("Selected file", file);
selectedList.value = [];
for (const selectedElement of document.querySelectorAll(".selectable.selected")) {
selectedElement.classList.remove("selected");
}
// Update to handle both video and image files
if (videoExtensions.includes(filesManager.getFile(selectedPath.value)?.extension?.toLowerCase()) ||
imageExtensions.includes(filesManager.getFile(selectedPath.value)?.extension?.toLowerCase())) {
@ -80,30 +71,6 @@ watchEffect(async () => {
}
})
const dragContainer = document.querySelector(".select-area");
function onSelectStart(e: any) {
e.added.forEach((el: any) => {
el.classList.add("selected");
selectedList.value = [...selectedList.value, el?.__vnode?.ctx?.props?.value];
});
e.removed.forEach((el: any) => {
el.classList.remove("selected");
selectedList.value = selectedList.value.filter((value: string) => value != el?.__vnode?.ctx?.props?.value)
});
}
function onSelectEnd(e: any) {
e.afterAdded.forEach((el: any) => {
el.classList.add("selected");
selectedList.value = [...selectedList.value, el?.__vnode?.ctx?.props?.value];
});
e.afterRemoved.forEach((el: any) => {
el.classList.remove("selected");
selectedList.value = selectedList.value.filter((value: string) => value != el?.__vnode?.ctx?.props?.value)
});
}
// step up from current path
function stepUp(path: string) {
const pathArray = path.split("/");
@ -135,9 +102,8 @@ function stepUp(path: string) {
</div>
</v-footer>
</v-navigation-drawer>
<v-main class="select-area" style="height: 100dvh;">
<v-main style="height: 100dvh;">
<v-toolbar class="px-5" height="auto">
<v-row align="center" justify="center">
<v-col cols="12" lg="2" md="12" style="display: inline-flex;">
<v-btn title="Back" aria-label="Back" icon="mdi-arrow-left" :disabled="!history.hasUndo.value"
@ -173,32 +139,7 @@ function stepUp(path: string) {
</v-toolbar>
<v-container>
<template v-if="filesManager.getFile(selectedPath)?.isFolder">
<v-list :selected="[selectedPath]" style="height: calc(100vh - 120px);">
<v-row no-gutters>
<v-col cols="6" lg="2" md="3" sm="6" v-for="file of filesGridList" style="text-align: center;">
<v-list-item class="position-relative ma-2 pa-5 selectable" active-color="light-blue-darken-4"
:value="file.path" rounded @click="selectedPath = file.path">
<v-menu v-if="!file.isFolder">
<template v-slot:activator="{ props }">
<v-btn class="position-absolute" style="right: 0; top: 0;" icon="mdi-dots-vertical" variant="text"
v-bind="props"></v-btn>
</template>
<v-list>
<v-list-item title="Download" aria-label="Download" icon="mdi-download"
@click="filesManager.downloadFile(file.path)">
<template v-slot:prepend>
<v-icon icon="mdi-download"></v-icon>
</template>
</v-list-item>
</v-list>
</v-menu>
<file-logo class="mb-2" :file="file" :key="file.path" />
<p>{{ file.name }}</p>
</v-list-item>
</v-col>
</v-row>
</v-list>
<FolderViewer :filesManager="filesManager" :filesGridList="filesGridList" :selectedList="selectedList"></FolderViewer>
</template>
<template
v-if="!filesManager.getFile(selectedPath)?.isFolder && videoExtensions.includes(filesManager.getFile(selectedPath)?.extension)">
@ -234,17 +175,14 @@ function stepUp(path: string) {
</v-card-text>
<!-- file input -->
<v-file-input class="mx-5" v-model="files" :accept="supportedExtensions.map(extension => `.${extension}`).join(',')"
label="or select a file..." variant="outlined"></v-file-input>
<v-file-input class="mx-5" v-model="files"
:accept="supportedExtensions.map(extension => `.${extension}`).join(',')" label="or select a file..."
variant="outlined"></v-file-input>
</v-card>
</v-col>
</v-row>
</template>
</v-container>
<VueSelecto :selectableTargets="['.selectable']" :dragContainer="dragContainer" :hitRate="0"
:selectFromInside="false" :toggleContinueSelect="'ctrl'" @select="onSelectStart" @selectStart="onSelectStart"
:get-element-rect="getElementInfo" @selectEnd="onSelectEnd" :select-by-click="false" />
</v-main>
<v-dialog v-model="loadingModel" persistent width="auto">
<v-card>

79
components/folder-viewer.vue Normal file
View File

@ -0,0 +1,79 @@
<script lang="ts" setup>
import { getElementInfo } from "moveable";
import { VueSelecto } from "vue3-selecto";
import { FilesManager } from '~/composables/files-manager';
import { iFile } from '~/composables/worker/7zip-manager';
interface Props {
filesManager: FilesManager;
filesGridList: iFile[];
selectedList: Ref<string[]>
};
const { filesManager, filesGridList, selectedList } = defineProps<Props>();
const selectedPath = useSelectedPath();
const dragContainer = document.querySelector(".select-area");
function onSelectStart(e: any) {
e.added.forEach((el: any) => {
el.classList.add("selected");
selectedList.value = [...selectedList.value, el?.__vnode?.ctx?.props?.value];
});
e.removed.forEach((el: any) => {
el.classList.remove("selected");
selectedList.value = selectedList.value.filter((value: string) => value != el?.__vnode?.ctx?.props?.value)
});
}
function onSelectEnd(e: any) {
e.afterAdded.forEach((el: any) => {
el.classList.add("selected");
selectedList.value = [...selectedList.value, el?.__vnode?.ctx?.props?.value];
});
e.afterRemoved.forEach((el: any) => {
el.classList.remove("selected");
selectedList.value = selectedList.value.filter((value: string) => value != el?.__vnode?.ctx?.props?.value)
});
}
watchEffect(() => {
selectedList.value = [];
for (const selectedElement of document.querySelectorAll(".selectable.selected")) {
selectedElement.classList.remove("selected");
}
})
</script>
<template>
<v-list class="select-area" :selected="[selectedPath]" style="height: calc(100vh - 120px);">
<v-row no-gutters>
<v-col cols="6" lg="2" md="3" sm="6" v-for="file of filesGridList" style="text-align: center;">
<v-list-item class="position-relative ma-2 pa-5 selectable" active-color="light-blue-darken-4"
:value="file.path" rounded @click="selectedPath = file.path">
<v-menu v-if="!file.isFolder">
<template v-slot:activator="{ props }">
<v-btn class="position-absolute" style="right: 0; top: 0;" icon="mdi-dots-vertical"
variant="text" v-bind="props"></v-btn>
</template>
<v-list>
<v-list-item title="Download" aria-label="Download" icon="mdi-download"
@click="filesManager.downloadFile(file.path)">
<template v-slot:prepend>
<v-icon icon="mdi-download"></v-icon>
</template>
</v-list-item>
</v-list>
</v-menu>
<file-logo class="mb-2" :file="file" :key="file.path" />
<p>{{ file.name }}</p>
</v-list-item>
</v-col>
</v-row>
<VueSelecto :selectableTargets="['.selectable']" :dragContainer="dragContainer" :hitRate="0"
:selectFromInside="false" :toggleContinueSelect="'ctrl'" @select="onSelectStart" @selectStart="onSelectStart"
:get-element-rect="getElementInfo" @selectEnd="onSelectEnd" :select-by-click="false" />
</v-list>
</template>

2
components/ImageViewer.vue → components/image-viewer.vue
View File

@ -1,4 +1,4 @@
<script setup lang="ts">
<script lang="ts" setup>
const props = defineProps<{
src: string;
}>();

2
components/text-editor.vue
View File

@ -2,7 +2,6 @@
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
import { ref, onMounted } from 'vue'
import { FilesManager } from '~/composables/files-manager';
// @ts-ignore
import { iFile } from '~/composables/worker/7zip-manager';
interface Props {
@ -18,6 +17,7 @@ let { file, filesManager } = defineProps<Props>()
onMounted(async () => {
const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
if(!file) return;
let fileContent = await filesManager.getFileContent(file.path);
monaco.editor.create(editor.value, {
value: fileContent?.toString()!,

3
composables/worker/7zip-manager.ts
View File

@ -166,9 +166,10 @@ export class SevenZipManager {
async getFileContent(file: iFile, encoding: "utf8" | "binary" = "utf8") {
if (!this.sevenZip) return;
file = typeof file === "string" ? JSON.parse(file) : file;
if (!file) return;
// extract file from archive
this.execute(['x', '-y', this.archiveName, file.path.substring(1)]);
this.execute(['x', '-y', this.archiveName, file?.path.substring(1)]);
this.sevenZip.FS.chmod(file.path, 0o777);
// get file buffer