forked from FoundKeyGang/FoundKey
Merge branch 'master' into develop
This commit is contained in:
commit
4a6722b9e9
2 changed files with 52 additions and 3 deletions
|
@ -5,7 +5,13 @@
|
||||||
|
|
||||||
<p :class="$style.fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
|
<p :class="$style.fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
|
||||||
<div :class="$style.stream" v-if="!fetching && images.length > 0">
|
<div :class="$style.stream" v-if="!fetching && images.length > 0">
|
||||||
<div v-for="image in images" :class="$style.img" :style="`background-image: url(${image.thumbnailUrl || image.url})`"></div>
|
<div v-for="image in images"
|
||||||
|
:class="$style.img"
|
||||||
|
:style="`background-image: url(${image.thumbnailUrl || image.url})`"
|
||||||
|
draggable="true"
|
||||||
|
@dragstart="onDragstart(image, $event)"
|
||||||
|
@dragend="onDragend"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<p :class="$style.empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p>
|
<p :class="$style.empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p>
|
||||||
</mk-widget-container>
|
</mk-widget-container>
|
||||||
|
@ -31,6 +37,7 @@ export default define({
|
||||||
connection: null
|
connection: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.connection = this.$root.stream.useSharedConnection('main');
|
this.connection = this.$root.stream.useSharedConnection('main');
|
||||||
|
|
||||||
|
@ -44,9 +51,11 @@ export default define({
|
||||||
this.fetching = false;
|
this.fetching = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
this.connection.dispose();
|
this.connection.dispose();
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
onDriveFileCreated(file) {
|
onDriveFileCreated(file) {
|
||||||
if (/^image\/.+$/.test(file.type)) {
|
if (/^image\/.+$/.test(file.type)) {
|
||||||
|
@ -54,6 +63,7 @@ export default define({
|
||||||
if (this.images.length > 9) this.images.pop();
|
if (this.images.length > 9) this.images.pop();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
func() {
|
func() {
|
||||||
if (this.props.design == 2) {
|
if (this.props.design == 2) {
|
||||||
this.props.design = 0;
|
this.props.design = 0;
|
||||||
|
@ -62,7 +72,16 @@ export default define({
|
||||||
}
|
}
|
||||||
|
|
||||||
this.save();
|
this.save();
|
||||||
}
|
},
|
||||||
|
|
||||||
|
onDragstart(file, e) {
|
||||||
|
e.dataTransfer.effectAllowed = 'move';
|
||||||
|
e.dataTransfer.setData('mk_drive_file', JSON.stringify(file));
|
||||||
|
},
|
||||||
|
|
||||||
|
onDragend(e) {
|
||||||
|
this.browser.isDragSource = false;
|
||||||
|
},
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -3,7 +3,10 @@
|
||||||
<mk-widget-container :show-header="props.design == 0">
|
<mk-widget-container :show-header="props.design == 0">
|
||||||
<template slot="header"><fa icon="pencil-alt"/>{{ $t('title') }}</template>
|
<template slot="header"><fa icon="pencil-alt"/>{{ $t('title') }}</template>
|
||||||
|
|
||||||
<div class="lhcuptdmcdkfwmipgazeawoiuxpzaclc-body">
|
<div class="lhcuptdmcdkfwmipgazeawoiuxpzaclc-body"
|
||||||
|
@dragover.stop="onDragover"
|
||||||
|
@drop.stop="onDrop"
|
||||||
|
>
|
||||||
<div class="textarea">
|
<div class="textarea">
|
||||||
<textarea
|
<textarea
|
||||||
:disabled="posting"
|
:disabled="posting"
|
||||||
|
@ -130,6 +133,33 @@ export default define({
|
||||||
(this.$refs.uploader as any).upload(file);
|
(this.$refs.uploader as any).upload(file);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onDragover(e) {
|
||||||
|
const isFile = e.dataTransfer.items[0].kind == 'file';
|
||||||
|
const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
|
||||||
|
if (isFile || isDriveFile) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onDrop(e): void {
|
||||||
|
// ファイルだったら
|
||||||
|
if (e.dataTransfer.files.length > 0) {
|
||||||
|
e.preventDefault();
|
||||||
|
Array.from(e.dataTransfer.files).forEach(this.upload);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//#region ドライブのファイル
|
||||||
|
const driveFile = e.dataTransfer.getData('mk_drive_file');
|
||||||
|
if (driveFile != null && driveFile != '') {
|
||||||
|
const file = JSON.parse(driveFile);
|
||||||
|
this.files.push(file);
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
//#endregion
|
||||||
|
},
|
||||||
|
|
||||||
async emoji() {
|
async emoji() {
|
||||||
const Picker = await import('../components/emoji-picker-dialog.vue').then(m => m.default);
|
const Picker = await import('../components/emoji-picker-dialog.vue').then(m => m.default);
|
||||||
const button = this.$refs.emoji;
|
const button = this.$refs.emoji;
|
||||||
|
|
Loading…
Reference in a new issue