Skip to content

Commit 0e878f0

Browse files
alexusmaialexusmai
committed
Code editor, audio/video player, image cropper, zip
1 parent 821cc40 commit 0e878f0

28 files changed

+1273
-453
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"dependencies": {
2121
"axios": "^0.18.0",
2222
"codemirror": "^5.41.0",
23+
"cropperjs": "^1.4.3",
2324
"plyr": "^3.4.7",
2425
"vue": "^2.5.17",
2526
"vue-codemirror": "^4.0.5",

‎src/components/blocks/ContextMenu.vue

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
2-
<div class="fm-context-menu"
3-
tabindex="-1"
4-
ref="contextMenu"
2+
<div ref="contextMenu"
53
v-if="menuVisible"
64
v-bind:style="menuStyle"
7-
v-on:blur="closeMenu">
5+
v-on:blur="closeMenu"
6+
class="fm-context-menu"
7+
tabindex="-1">
88
<ul v-for="(group, index) in menu"
99
v-bind:key="`g-${index}`"
1010
class="list-unstyled">
@@ -23,11 +23,13 @@
2323
/* eslint-disable no-param-reassign */
2424
import EventBus from './../../eventBus';
2525
import translate from '../../mixins/translate';
26-
import contextMenu from './../../mixins/context-menu';
26+
import contextMenu from './mixins/contextMenu';
27+
import contextMenuRules from './mixins/contextMenuRules';
28+
import contextMenuActions from './mixins/contextMenuActions';
2729
2830
export default {
2931
name: 'ContextMenu',
30-
mixins: [translate, contextMenu],
32+
mixins: [translate, contextMenu, contextMenuRules, contextMenuActions],
3133
data() {
3234
return {
3335
menuVisible: false,

‎src/components/blocks/mixins/contextMenu.js

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import { apiURL } from '../../../http/helper';
2+
3+
export default {
4+
computed: {
5+
/**
6+
* Selected disk
7+
* @returns {*}
8+
*/
9+
selectedDisk() {
10+
return this.$store.getters['fm/selectedDisk'];
11+
},
12+
13+
/**
14+
* Selected items
15+
* @returns {*}
16+
*/
17+
selectedItems() {
18+
return this.$store.getters['fm/selectedItems'];
19+
},
20+
21+
/**
22+
* Driver for selected disk
23+
* @returns {*}
24+
*/
25+
selectedDiskDriver() {
26+
return this.$store.state.fm.disks[this.selectedDisk].driver;
27+
},
28+
29+
/**
30+
* Multi selection
31+
* @returns {boolean}
32+
*/
33+
multiSelect() {
34+
return this.$store.getters['fm/selectedItems'].length > 1;
35+
},
36+
37+
/**
38+
* First item type - dir or file
39+
* @returns {*}
40+
*/
41+
firstItemType() {
42+
return this.$store.getters['fm/selectedItems'][0].type;
43+
},
44+
},
45+
methods: {
46+
/**
47+
* Can we show this item?
48+
* @param extension
49+
* @returns {boolean}
50+
*/
51+
canView(extension) {
52+
// extension not found
53+
if (!extension) return false;
54+
55+
return this.$store.state.fm.settings.imageExtensions.includes(extension.toLowerCase());
56+
},
57+
58+
/**
59+
* Can we edit this file in the code editor?
60+
* @param extension
61+
* @returns {boolean}
62+
*/
63+
canEdit(extension) {
64+
// extension not found
65+
if (!extension) return false;
66+
67+
return Object.keys(this.$store.state.fm.settings.textExtensions)
68+
.includes(extension.toLowerCase());
69+
},
70+
71+
/**
72+
* Can we play this audio file?
73+
* @param extension
74+
* @returns {boolean}
75+
*/
76+
canAudioPlay(extension) {
77+
// extension not found
78+
if (!extension) return false;
79+
80+
return this.$store.state.fm.settings.audioExtensions.includes(extension.toLowerCase());
81+
},
82+
83+
/**
84+
* Can we play this video file?
85+
* @param extension
86+
* @returns {boolean}
87+
*/
88+
canVideoPlay(extension) {
89+
// extension not found
90+
if (!extension) return false;
91+
92+
return this.$store.state.fm.settings.videoExtensions.includes(extension.toLowerCase());
93+
},
94+
95+
/**
96+
* Zip archive or not
97+
* @param extension
98+
* @returns {boolean}
99+
*/
100+
isZip(extension) {
101+
// extension not found
102+
if (!extension) return false;
103+
104+
return extension.toLowerCase() === 'zip';
105+
},
106+
107+
/**
108+
* Generate link for downloading selected file
109+
* @returns {string}
110+
*/
111+
downloadLink() {
112+
return `${apiURL()}download?disk=${this.selectedDisk}&path=${encodeURIComponent(this.selectedItems[0].path)}`;
113+
},
114+
},
115+
};

‎src/components/blocks/mixins/contextMenuActions.js

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
/**
2+
* Context menu actions
3+
* {name}Action
4+
*/
5+
export default {
6+
methods: {
7+
/**
8+
* Open folder
9+
*/
10+
openAction() {
11+
// select directory
12+
this.$store.dispatch(`fm/${this.$store.state.fm.activeManager}/selectDirectory`, {
13+
path: this.selectedItems[0].path,
14+
history: true,
15+
});
16+
},
17+
18+
/**
19+
* Play music or video
20+
*/
21+
audioPlayAction() {
22+
// show player modal
23+
this.$store.commit('fm/modal/setModalState', {
24+
modalName: 'AudioPlayer',
25+
show: true,
26+
});
27+
},
28+
29+
/**
30+
* Play music or video
31+
*/
32+
videoPlayAction() {
33+
// show player modal
34+
this.$store.commit('fm/modal/setModalState', {
35+
modalName: 'VideoPlayer',
36+
show: true,
37+
});
38+
},
39+
40+
/**
41+
* View file
42+
*/
43+
viewAction() {
44+
// show image
45+
this.$store.commit('fm/modal/setModalState', {
46+
modalName: 'Preview',
47+
show: true,
48+
});
49+
},
50+
51+
/**
52+
* Edit file
53+
*/
54+
editAction() {
55+
// show text file
56+
this.$store.commit('fm/modal/setModalState', {
57+
modalName: 'TextEdit',
58+
show: true,
59+
});
60+
},
61+
62+
/**
63+
* Select file
64+
*/
65+
selectAction() {
66+
// file callback
67+
this.$store.dispatch('fm/url', {
68+
disk: this.selectedDisk,
69+
path: this.selectedItems[0].path,
70+
});
71+
},
72+
73+
/**
74+
* Download file
75+
*/
76+
downloadAction() {
77+
// download file
78+
const tempLink = document.createElement('a');
79+
tempLink.style.display = 'none';
80+
tempLink.href = this.downloadLink();
81+
tempLink.setAttribute('download', this.selectedItems[0].basename);
82+
tempLink.setAttribute('target', '_blank');
83+
document.body.appendChild(tempLink);
84+
// click link
85+
tempLink.click();
86+
// remove link
87+
document.body.removeChild(tempLink);
88+
},
89+
90+
/**
91+
* Copy selected items
92+
*/
93+
copyAction() {
94+
// add selected items to the clipboard
95+
this.$store.dispatch('fm/toClipboard', 'copy');
96+
},
97+
98+
/**
99+
* Cut selected items
100+
*/
101+
cutAction() {
102+
// add selected items to the clipboard
103+
this.$store.dispatch('fm/toClipboard', 'cut');
104+
},
105+
106+
/**
107+
* Rename selected item
108+
*/
109+
renameAction() {
110+
// show modal - rename
111+
this.$store.commit('fm/modal/setModalState', {
112+
modalName: 'Rename',
113+
show: true,
114+
});
115+
},
116+
117+
/**
118+
* Paste copied or cut items
119+
*/
120+
pasteAction() {
121+
// paste items in the selected folder
122+
this.$store.dispatch('fm/paste');
123+
},
124+
125+
/**
126+
* Zip selected files
127+
*/
128+
zipAction() {
129+
// show modal - Zip
130+
this.$store.commit('fm/modal/setModalState', {
131+
modalName: 'Zip',
132+
show: true,
133+
});
134+
},
135+
136+
/**
137+
* Unzip selected archive
138+
*/
139+
unzipAction() {
140+
// show modal - Unzip
141+
this.$store.commit('fm/modal/setModalState', {
142+
modalName: 'Unzip',
143+
show: true,
144+
});
145+
},
146+
147+
/**
148+
* Delete selected items
149+
*/
150+
deleteAction() {
151+
// show modal - delete
152+
this.$store.commit('fm/modal/setModalState', {
153+
modalName: 'Delete',
154+
show: true,
155+
});
156+
},
157+
158+
/**
159+
* Show properties for selected items
160+
*/
161+
propertiesAction() {
162+
// show modal - properties
163+
this.$store.commit('fm/modal/setModalState', {
164+
modalName: 'Properties',
165+
show: true,
166+
});
167+
},
168+
},
169+
};

0 commit comments

Comments
 (0)