This commit is contained in:
syuilo 2018-02-25 13:05:55 +09:00
parent f01693d08d
commit 493dfd2118
3 changed files with 29 additions and 9 deletions

View File

@ -1,6 +1,13 @@
<template> <template>
<div class="mk-messaging-form"> <div class="mk-messaging-form">
<textarea v-model="text" ref="textarea" @keypress="onKeypress" @paste="onPaste" placeholder="%i18n:common.input-message-here%" v-autocomplete></textarea> <textarea
v-model="text"
ref="textarea"
@keypress="onKeypress"
@paste="onPaste"
placeholder="%i18n:common.input-message-here%"
v-autocomplete="'text'"
></textarea>
<div class="file" v-if="file">{{ file.name }}</div> <div class="file" v-if="file">{{ file.name }}</div>
<mk-uploader ref="uploader"/> <mk-uploader ref="uploader"/>
<button class="send" @click="send" :disabled="sending" title="%i18n:common.send%"> <button class="send" @click="send" :disabled="sending" title="%i18n:common.send%">

View File

@ -4,8 +4,9 @@ import MkAutocomplete from '../components/autocomplete.vue';
export default { export default {
bind(el, binding, vn) { bind(el, binding, vn) {
const self = el._autoCompleteDirective_ = {} as any; const self = el._autoCompleteDirective_ = {} as any;
self.x = new Autocomplete(el); self.x = new Autocomplete(el, vn.context, binding.value);
self.x.attach(); self.x.attach();
console.log(vn.context);
}, },
unbind(el, binding, vn) { unbind(el, binding, vn) {
@ -20,11 +21,21 @@ export default {
class Autocomplete { class Autocomplete {
private suggestion: any; private suggestion: any;
private textarea: any; private textarea: any;
private vm: any;
private model: any;
private get text(): string {
return this.vm[this.model];
}
private set text(text: string) {
this.vm[this.model] = text;
}
/** /**
* *
*/ */
constructor(textarea) { constructor(textarea, vm, model) {
//#region BIND //#region BIND
this.onInput = this.onInput.bind(this); this.onInput = this.onInput.bind(this);
this.complete = this.complete.bind(this); this.complete = this.complete.bind(this);
@ -33,6 +44,8 @@ class Autocomplete {
this.suggestion = null; this.suggestion = null;
this.textarea = textarea; this.textarea = textarea;
this.vm = vm;
this.model = model;
} }
/** /**
@ -57,7 +70,7 @@ class Autocomplete {
this.close(); this.close();
const caret = this.textarea.selectionStart; const caret = this.textarea.selectionStart;
const text = this.textarea.value.substr(0, caret); const text = this.text.substr(0, caret);
const mentionIndex = text.lastIndexOf('@'); const mentionIndex = text.lastIndexOf('@');
const emojiIndex = text.lastIndexOf(':'); const emojiIndex = text.lastIndexOf(':');
@ -129,28 +142,28 @@ class Autocomplete {
const caret = this.textarea.selectionStart; const caret = this.textarea.selectionStart;
if (type == 'user') { if (type == 'user') {
const source = this.textarea.value; const source = this.text;
const before = source.substr(0, caret); const before = source.substr(0, caret);
const trimmedBefore = before.substring(0, before.lastIndexOf('@')); const trimmedBefore = before.substring(0, before.lastIndexOf('@'));
const after = source.substr(caret); const after = source.substr(caret);
// 挿入 // 挿入
this.textarea.value = trimmedBefore + '@' + value.username + ' ' + after; this.text = trimmedBefore + '@' + value.username + ' ' + after;
// キャレットを戻す // キャレットを戻す
this.textarea.focus(); this.textarea.focus();
const pos = caret + value.username.length; const pos = caret + value.username.length;
this.textarea.setSelectionRange(pos, pos); this.textarea.setSelectionRange(pos, pos);
} else if (type == 'emoji') { } else if (type == 'emoji') {
const source = this.textarea.value; const source = this.text;
const before = source.substr(0, caret); const before = source.substr(0, caret);
const trimmedBefore = before.substring(0, before.lastIndexOf(':')); const trimmedBefore = before.substring(0, before.lastIndexOf(':'));
const after = source.substr(caret); const after = source.substr(caret);
// 挿入 // 挿入
this.textarea.value = trimmedBefore + value + after; this.text = trimmedBefore + value + after;
// キャレットを戻す // キャレットを戻す
this.textarea.focus(); this.textarea.focus();

View File

@ -9,7 +9,7 @@
<textarea :class="{ with: (files.length != 0 || poll) }" <textarea :class="{ with: (files.length != 0 || poll) }"
ref="text" v-model="text" :disabled="posting" ref="text" v-model="text" :disabled="posting"
@keydown="onKeydown" @paste="onPaste" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" :placeholder="placeholder"
v-autocomplete v-autocomplete="'text'"
></textarea> ></textarea>
<div class="medias" :class="{ with: poll }" v-show="files.length != 0"> <div class="medias" :class="{ with: poll }" v-show="files.length != 0">
<x-draggable :list="files" :options="{ animation: 150 }"> <x-draggable :list="files" :options="{ animation: 150 }">