Sharkey/src/web/app/common/views/components/messaging-room.form.vue

304 lines
6 KiB
Vue
Raw Normal View History

2018-02-13 08:56:11 +02:00
<template>
2018-02-26 21:36:16 +02:00
<div class="mk-messaging-form"
2018-02-26 23:25:17 +02:00
@dragover.stop="onDragover"
@drop.stop="onDrop"
2018-02-26 21:36:16 +02:00
>
2018-02-25 06:05:55 +02:00
<textarea
v-model="text"
ref="textarea"
@keypress="onKeypress"
@paste="onPaste"
placeholder="%i18n:common.input-message-here%"
v-autocomplete="'text'"
></textarea>
2018-02-26 19:10:52 +02:00
<div class="file" @click="file = null" v-if="file">{{ file.name }}</div>
<mk-uploader ref="uploader" @uploaded="onUploaded"/>
<button class="send" @click="send" :disabled="!canSend || sending" title="%i18n:common.send%">
2018-02-13 08:56:11 +02:00
<template v-if="!sending">%fa:paper-plane%</template><template v-if="sending">%fa:spinner .spin%</template>
</button>
2018-02-26 19:10:52 +02:00
<button class="attach-from-local" @click="chooseFile" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
2018-02-13 08:56:11 +02:00
%fa:upload%
</button>
2018-02-22 14:15:24 +02:00
<button class="attach-from-drive" @click="chooseFileFromDrive" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
2018-02-13 08:56:11 +02:00
%fa:R folder-open%
</button>
2018-02-26 19:10:52 +02:00
<input ref="file" type="file" @change="onChangeFile"/>
2018-02-13 08:56:11 +02:00
</div>
</template>
<script lang="ts">
import Vue from 'vue';
2018-02-24 19:57:19 +02:00
import * as autosize from 'autosize';
2018-02-13 08:56:11 +02:00
export default Vue.extend({
props: ['user'],
data() {
return {
text: null,
2018-02-18 16:51:41 +02:00
file: null,
2018-02-13 08:56:11 +02:00
sending: false
};
},
2018-02-25 15:56:23 +02:00
computed: {
draftId(): string {
return this.user.id;
2018-02-26 19:10:52 +02:00
},
canSend(): boolean {
return (this.text != null && this.text != '') || this.file != null;
2018-02-26 21:36:16 +02:00
},
room(): any {
return this.$parent;
2018-02-25 15:56:23 +02:00
}
},
watch: {
text() {
this.saveDraft();
},
file() {
this.saveDraft();
2018-02-26 21:36:16 +02:00
if (this.room.isBottom()) {
this.room.scrollToBottom();
}
2018-02-25 15:56:23 +02:00
}
},
2018-02-24 19:57:19 +02:00
mounted() {
autosize(this.$refs.textarea);
2018-02-25 15:56:23 +02:00
// 書きかけの投稿を復元
const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[this.draftId];
if (draft) {
this.text = draft.data.text;
this.file = draft.data.file;
}
2018-02-24 19:57:19 +02:00
},
2018-02-13 08:56:11 +02:00
methods: {
onPaste(e) {
const data = e.clipboardData;
const items = data.items;
2018-02-26 21:36:16 +02:00
if (items.length == 1) {
if (items[0].kind == 'file') {
this.upload(items[0].getAsFile());
}
} else {
if (items[0].kind == 'file') {
alert('メッセージに添付できるのはひとつのファイルのみです');
}
}
},
onDragover(e) {
2018-02-26 23:25:17 +02:00
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';
}
2018-02-26 21:36:16 +02:00
},
onDrop(e): void {
// ファイルだったら
if (e.dataTransfer.files.length == 1) {
2018-02-26 23:25:17 +02:00
e.preventDefault();
2018-02-26 21:36:16 +02:00
this.upload(e.dataTransfer.files[0]);
return;
} else if (e.dataTransfer.files.length > 1) {
2018-02-26 23:25:17 +02:00
e.preventDefault();
2018-02-26 21:36:16 +02:00
alert('メッセージに添付できるのはひとつのファイルのみです');
return;
}
2018-02-26 23:25:17 +02:00
//#region ドライブのファイル
const driveFile = e.dataTransfer.getData('mk_drive_file');
if (driveFile != null && driveFile != '') {
this.file = JSON.parse(driveFile);
e.preventDefault();
2018-02-13 08:56:11 +02:00
}
2018-02-26 23:25:17 +02:00
//#endregion
2018-02-13 08:56:11 +02:00
},
onKeypress(e) {
if ((e.which == 10 || e.which == 13) && e.ctrlKey) {
this.send();
}
},
chooseFile() {
(this.$refs.file as any).click();
},
chooseFileFromDrive() {
2018-02-18 16:51:41 +02:00
(this as any).apis.chooseDriveFile({
multiple: false
}).then(file => {
this.file = file;
2018-02-13 08:56:11 +02:00
});
},
2018-02-26 19:10:52 +02:00
onChangeFile() {
this.upload((this.$refs.file as any).files[0]);
},
upload(file) {
(this.$refs.uploader as any).upload(file);
},
onUploaded(file) {
this.file = file;
2018-02-18 16:56:25 +02:00
},
2018-02-18 16:51:41 +02:00
2018-02-13 08:56:11 +02:00
send() {
this.sending = true;
2018-02-18 05:35:18 +02:00
(this as any).api('messaging/messages/create', {
2018-02-13 08:56:11 +02:00
user_id: this.user.id,
2018-02-26 19:10:52 +02:00
text: this.text ? this.text : undefined,
file_id: this.file ? this.file.id : undefined
2018-02-13 08:56:11 +02:00
}).then(message => {
this.clear();
}).catch(err => {
console.error(err);
}).then(() => {
this.sending = false;
});
},
clear() {
this.text = '';
2018-02-18 16:56:25 +02:00
this.file = null;
2018-02-25 15:56:23 +02:00
this.deleteDraft();
},
saveDraft() {
const data = JSON.parse(localStorage.getItem('message_drafts') || '{}');
data[this.draftId] = {
updated_at: new Date(),
data: {
text: this.text,
file: this.file
}
}
localStorage.setItem('message_drafts', JSON.stringify(data));
},
deleteDraft() {
const data = JSON.parse(localStorage.getItem('message_drafts') || '{}');
delete data[this.draftId];
localStorage.setItem('message_drafts', JSON.stringify(data));
},
2018-02-13 08:56:11 +02:00
}
});
</script>
<style lang="stylus" scoped>
.mk-messaging-form
> textarea
cursor auto
display block
width 100%
min-width 100%
max-width 100%
height 64px
margin 0
padding 8px
2018-02-24 19:57:19 +02:00
resize none
2018-02-13 08:56:11 +02:00
font-size 1em
color #000
outline none
border none
border-top solid 1px #eee
border-radius 0
box-shadow none
background transparent
2018-02-26 19:10:52 +02:00
> .file
padding 8px
color #444
background #eee
cursor pointer
2018-02-13 08:56:11 +02:00
> .send
position absolute
bottom 0
right 0
margin 0
padding 10px 14px
font-size 1em
color #aaa
transition color 0.1s ease
&:hover
color $theme-color
&:active
color darken($theme-color, 10%)
transition color 0s ease
.files
display block
margin 0
padding 0 8px
list-style none
&:after
content ''
display block
clear both
> li
display block
float left
margin 4px
padding 0
width 64px
height 64px
background-color #eee
background-repeat no-repeat
background-position center center
background-size cover
cursor move
&:hover
> .remove
display block
> .remove
display none
position absolute
right -6px
top -6px
margin 0
padding 0
background transparent
outline none
border none
border-radius 0
box-shadow none
cursor pointer
.attach-from-local
.attach-from-drive
margin 0
padding 10px 14px
font-size 1em
font-weight normal
text-decoration none
color #aaa
transition color 0.1s ease
&:hover
color $theme-color
&:active
color darken($theme-color, 10%)
transition color 0s ease
input[type=file]
display none
</style>