diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/app/common/views/widgets/photo-stream.vue | 23 | ||||
| -rw-r--r-- | src/client/app/desktop/views/widgets/post-form.vue | 32 |
2 files changed, 52 insertions, 3 deletions
diff --git a/src/client/app/common/views/widgets/photo-stream.vue b/src/client/app/common/views/widgets/photo-stream.vue index 72658707c2..202633a3f0 100644 --- a/src/client/app/common/views/widgets/photo-stream.vue +++ b/src/client/app/common/views/widgets/photo-stream.vue @@ -5,7 +5,13 @@ <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 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> <p :class="$style.empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p> </mk-widget-container> @@ -31,6 +37,7 @@ export default define({ connection: null }; }, + mounted() { this.connection = this.$root.stream.useSharedConnection('main'); @@ -44,9 +51,11 @@ export default define({ this.fetching = false; }); }, + beforeDestroy() { this.connection.dispose(); }, + methods: { onDriveFileCreated(file) { if (/^image\/.+$/.test(file.type)) { @@ -54,6 +63,7 @@ export default define({ if (this.images.length > 9) this.images.pop(); } }, + func() { if (this.props.design == 2) { this.props.design = 0; @@ -62,7 +72,16 @@ export default define({ } 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> diff --git a/src/client/app/desktop/views/widgets/post-form.vue b/src/client/app/desktop/views/widgets/post-form.vue index 2e382dbe66..36cf30bbe7 100644 --- a/src/client/app/desktop/views/widgets/post-form.vue +++ b/src/client/app/desktop/views/widgets/post-form.vue @@ -3,7 +3,10 @@ <mk-widget-container :show-header="props.design == 0"> <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"> <textarea :disabled="posting" @@ -130,6 +133,33 @@ export default define({ (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() { const Picker = await import('../components/emoji-picker-dialog.vue').then(m => m.default); const button = this.$refs.emoji; |