Skip to content

Commit

Permalink
Revert "refactoring part 1"
Browse files Browse the repository at this point in the history 
This reverts commit e94e121.
  • Loading branch information
@n1crack
n1crack committed Jan 30, 2024
1 parent e94e121 commit 4b5f8bb
Show file tree
Hide file tree
Showing 31 changed files with 345 additions and 327 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,6 @@
</head>
<body>
<div id="app"></div>
<script type="module" src="./examples/main.js"></script>
<script type="module" src="./src/main.js"></script>
</body>
</html>
4 changes: 2 additions & 2 deletions examples/App.vue → src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@

<script setup>
import { ref } from 'vue';
import { FEATURES, FEATURE_ALL_NAMES } from '../src/components/features.js';
import { FEATURES, FEATURE_ALL_NAMES } from './components/features.js';
/** @type {import('./utils/ajax.js').RequestConfig} */
const request = {
// ----- CHANGE ME! -----
// [REQUIRED] Url for development server endpoint
baseUrl: "http://vuefinder.ozdemir.be.test/vuefinder",
baseUrl: "http://localhost:8005/",
// ----- CHANGE ME! -----
// Additional headers & params & body
Expand Down
4 changes: 2 additions & 2 deletions src/components/ActionMessage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default {
on: {type: String, required: true},
},
setup(props, {emit, slots}) {
const app = inject('VueFinder');
const emitter = inject('emitter');
const shown = ref(false);
const {t} = inject('i18n');
Expand All @@ -29,7 +29,7 @@ export default {
};
onMounted(() => {
app.emitter.on(props.on, handleEvent);
emitter.on(props.on, handleEvent);
});
onUnmounted(() => {
Expand Down
34 changes: 20 additions & 14 deletions src/components/Breadcrumb.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,26 @@
<svg
@dragover="handleDragOver($event)"
@drop="handleDropZone($event)"
@click="!isGoUpAvailable() || app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: data.adapter, path:breadcrumb[breadcrumb.length-2]?.path ?? (adapter + '://')}} )"
@click="!isGoUpAvailable() || emitter.emit('vf-fetch', {params:{q: 'index', adapter: data.adapter, path:breadcrumb[breadcrumb.length-2]?.path ?? (adapter + '://')}} )"
class="h-6 w-6 p-0.5 rounded"
:class="isGoUpAvailable() ? 'text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer' : 'text-gray-400 dark:text-neutral-500'"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</span>
<span :aria-label="t('Refresh')" data-microtip-position="bottom-right" role="tooltip" v-if="!app.loading">
<svg @click="app.emitter.emit('vf-fetch',{params:{q: 'index', adapter: data.adapter, path: data.dirname}} );" class="h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer" xmlns="http://www.w3.org/2000/svg" viewBox="-40 -40 580 580" fill="currentColor">
<span :aria-label="t('Refresh')" data-microtip-position="bottom-right" role="tooltip" v-if="!isLoading()">
<svg @click="emitter.emit('vf-fetch',{params:{q: 'index', adapter: data.adapter, path: data.dirname}} );" class="h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer" xmlns="http://www.w3.org/2000/svg" viewBox="-40 -40 580 580" fill="currentColor">
<path d="M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z"></path>
</svg>
</span>
<span :aria-label="t('Cancel')" data-microtip-position="bottom-right" role="tooltip" v-else>
<svg @click="app.emitter.emit('vf-fetch-abort')" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer">
<svg @click="emitter.emit('vf-fetch-abort')" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</span>

<div v-if="!searchMode" class="group flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full" @click.self="enterSearchMode">
<svg @click="app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: data.adapter}})"
<svg @click="emitter.emit('vf-fetch', {params:{q: 'index', adapter: data.adapter}})"
class="h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-gray-800 cursor-pointer"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
Expand All @@ -32,11 +32,11 @@
<div class="flex leading-5">
<div v-for="(item, index) in breadcrumb" :key="index">
<span class="text-neutral-300 dark:text-gray-600 mx-0.5">/</span>
<span class="px-1.5 py-1 text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer" :title="item.basename" @click="app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: data.adapter, path:item.path}})">{{ item.name }}</span>
<span class="px-1.5 py-1 text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer" :title="item.basename" @click="emitter.emit('vf-fetch', {params:{q: 'index', adapter: data.adapter, path:item.path}})">{{ item.name }}</span>
</div>
</div>

<svg class="animate-spin p-1 h-6 w-6 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" v-if="app.loading">
<svg class="animate-spin p-1 h-6 w-6 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" v-if="isLoading()">
<circle class="opacity-25 stroke-blue-900 dark:stroke-blue-100" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
Expand Down Expand Up @@ -81,20 +81,24 @@ import {inject, nextTick, ref, watch} from 'vue';
import useDebouncedRef from '../composables/useDebouncedRef.js';
import {FEATURES} from "./features.js";
const app = inject('VueFinder');
const emitter = inject('emitter');
const adapter = inject('adapter');
const dirname = ref(null);
const breadcrumb = ref([]);
const searchMode = ref(false);
const searchInput = ref(null);
/** @type {import('vue').Ref<String[]>} */
const features = inject('features');
const props = defineProps({
data: Object
});
const {t} = inject('i18n');
const loadingState= inject('loadingState');
app.emitter.on('vf-explorer-update', () => {
emitter.on('vf-explorer-update', () => {
let items = [], links = [];
dirname.value = props.data.dirname ?? (adapter.value + '://');
Expand Down Expand Up @@ -129,12 +133,12 @@ const exitSearchMode = () => {
query.value = '';
}
app.emitter.on('vf-search-exit', () => {
emitter.on('vf-search-exit', () => {
exitSearchMode();
});
const enterSearchMode = () => {
if (!app.features.includes(FEATURES.SEARCH)) {
if (!features.value.includes(FEATURES.SEARCH)) {
return;
}
searchMode.value = true;
Expand All @@ -143,9 +147,11 @@ const enterSearchMode = () => {
const query = useDebouncedRef('', 400);
const isLoading = () => loadingState.value;
watch(query, newQuery => {
app.emitter.emit('vf-toast-clear');
app.emitter.emit('vf-search-query', {newQuery});
emitter.emit('vf-toast-clear');
emitter.emit('vf-search-query', {newQuery});
});
const isGoUpAvailable = () => {
Expand All @@ -161,7 +167,7 @@ const handleDropZone = (e) => {
return;
}
app.emitter.emit('vf-modal-show', {
emitter.emit('vf-modal-show', {
type: 'move',
items: {from: draggedItems, to: breadcrumb.value[breadcrumb.value.length - 2] ?? {path: (adapter.value + '://')}}
});
Expand Down
56 changes: 31 additions & 25 deletions src/components/ContextMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,15 @@ export default {
import {computed, inject, nextTick, reactive, ref} from 'vue';
import {FEATURES} from "./features.js";
const app = inject('VueFinder');
const emitter = inject('emitter');
const contextmenu = ref(null);
const root = inject('root');
/** @type {import('../utils/ajax.js').Requester} */
const requester = inject('requester');
/** @type {import('vue').Ref<String[]>} */
const features = inject('features');
const props = defineProps({
current: Object
});
Expand All @@ -35,12 +41,12 @@ const context = reactive({
});
const filteredItems = computed(() => {
return context.items.filter(item => item.key == null || app.features.includes(item.key))
return context.items.filter(item => item.key == null || features.value.includes(item.key))
});
const selectedItems = ref([]);
app.emitter.on('vf-context-selected', (items) => {
emitter.on('vf-context-selected', (items) => {
selectedItems.value = items;
})
const {t} = inject('i18n')
Expand All @@ -50,106 +56,106 @@ const menuItems = {
key: FEATURES.NEW_FOLDER,
title: () => t('New Folder'),
action: () => {
app.emitter.emit('vf-modal-show', {type:'new-folder'});
emitter.emit('vf-modal-show', {type:'new-folder'});
},
},
delete: {
key: FEATURES.DELETE,
title: () => t('Delete'),
action: () => {
app.emitter.emit('vf-modal-show', {type:'delete', items: selectedItems});
emitter.emit('vf-modal-show', {type:'delete', items: selectedItems});
},
},
refresh: {
title: () => t('Refresh'),
action: () => {
app.emitter.emit('vf-fetch',{params:{q: 'index', adapter: props.current.adapter, path: props.current.dirname}} );
emitter.emit('vf-fetch',{params:{q: 'index', adapter: props.current.adapter, path: props.current.dirname}} );
},
},
preview: {
key: FEATURES.PREVIEW,
title: () => t('Preview'),
action: () => {
app.emitter.emit('vf-modal-show', {type:'preview', adapter:props.current.adapter, item: selectedItems.value[0]});
emitter.emit('vf-modal-show', {type:'preview', adapter:props.current.adapter, item: selectedItems.value[0]});
},
},
open: {
title: () => t('Open'),
action: () => {
app.emitter.emit('vf-search-exit');
app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: props.current.adapter, path:selectedItems.value[0].path}});
emitter.emit('vf-search-exit');
emitter.emit('vf-fetch', {params:{q: 'index', adapter: props.current.adapter, path:selectedItems.value[0].path}});
},
},
openDir: {
title: () => t('Open containing folder'),
action: () => {
app.emitter.emit('vf-search-exit');
app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: props.current.adapter, path: (selectedItems.value[0].dir)}});
emitter.emit('vf-search-exit');
emitter.emit('vf-fetch', {params:{q: 'index', adapter: props.current.adapter, path: (selectedItems.value[0].dir)}});
},
},
download: {
key: FEATURES.DOWNLOAD,
title: () => t('Download'),
action: () => {
const url = app.requester.getDownloadUrl(props.current.adapter, selectedItems.value[0]);
app.emitter.emit('vf-download', url);
const url = requester.getDownloadUrl(props.current.adapter, selectedItems.value[0]);
emitter.emit('vf-download', url);
},
},
archive: {
key: FEATURES.ARCHIVE,
title: () => t('Archive'),
action: () => {
app.emitter.emit('vf-modal-show', {type:'archive', items: selectedItems});
emitter.emit('vf-modal-show', {type:'archive', items: selectedItems});
},
},
unarchive: {
key: FEATURES.UNARCHIVE,
title: () => t('Unarchive'),
action: () => {
app.emitter.emit('vf-modal-show', {type:'unarchive', items: selectedItems});
emitter.emit('vf-modal-show', {type:'unarchive', items: selectedItems});
},
},
rename: {
key: FEATURES.RENAME,
title: () => t('Rename'),
action: () => {
app.emitter.emit('vf-modal-show', {type:'rename', items: selectedItems});
emitter.emit('vf-modal-show', {type:'rename', items: selectedItems});
},
}
};
const run = (item) =>{
app.emitter.emit('vf-contextmenu-hide');
emitter.emit('vf-contextmenu-hide');
item.action();
};
const searchQuery = ref('');
app.emitter.on('vf-search-query', ({newQuery}) => {
emitter.on('vf-search-query', ({newQuery}) => {
searchQuery.value = newQuery;
});
app.emitter.on('vf-contextmenu-show', ({event, area, items, target = null}) => {
emitter.on('vf-contextmenu-show', ({event, area, items, target = null}) => {
context.items = [];
if (searchQuery.value) {
if (target) {
context.items.push(menuItems.openDir);
app.emitter.emit('vf-context-selected', [target]);
emitter.emit('vf-context-selected', [target]);
// console.log('search item selected');
} else {
return;
}
} else if (!target && !searchQuery.value) {
context.items.push(menuItems.refresh);
context.items.push(menuItems.newfolder);
app.emitter.emit('vf-context-selected', []);
emitter.emit('vf-context-selected', []);
// console.log('no files selected');
} else if (items.length > 1 && items.some(el => el.path === target.path)) {
context.items.push(menuItems.refresh);
context.items.push(menuItems.archive);
context.items.push(menuItems.delete);
app.emitter.emit('vf-context-selected', items);
emitter.emit('vf-context-selected', items);
// console.log(items.length + ' selected (more than 1 item.)');
} else {
if (target.type == 'dir') {
Expand All @@ -166,21 +172,21 @@ app.emitter.on('vf-contextmenu-show', ({event, area, items, target = null}) =>
context.items.push(menuItems.archive);
}
context.items.push(menuItems.delete);
app.emitter.emit('vf-context-selected', [target]);
emitter.emit('vf-context-selected', [target]);
// console.log(target.type + ' is selected');
}
showContextMenu(event, area)
})
app.emitter.on('vf-contextmenu-hide', () => {
emitter.on('vf-contextmenu-hide', () => {
context.active = false;
})
const showContextMenu = (event, area) => {
context.active = true;
nextTick(() => {
const rootBbox = app.root.getBoundingClientRect();
const rootBbox = root.value.getBoundingClientRect();
const areaContainer = area.getBoundingClientRect();
let left = event.pageX - rootBbox.left;
Expand Down
26 changes: 0 additions & 26 deletions src/components/Downloader.vue
View file

This file was deleted.

Loading

0 comments on commit 4b5f8bb

Please sign in to comment.