diff options
Diffstat (limited to 'src/web')
| -rw-r--r-- | src/web/app/common/views/components/messaging-room.form.vue | 9 | ||||
| -rw-r--r-- | src/web/app/common/views/directives/autocomplete.ts | 27 | ||||
| -rw-r--r-- | src/web/app/desktop/views/components/post-form.vue | 2 |
3 files changed, 29 insertions, 9 deletions
diff --git a/src/web/app/common/views/components/messaging-room.form.vue b/src/web/app/common/views/components/messaging-room.form.vue index adc3372bed..670040a574 100644 --- a/src/web/app/common/views/components/messaging-room.form.vue +++ b/src/web/app/common/views/components/messaging-room.form.vue @@ -1,6 +1,13 @@ <template> <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> <mk-uploader ref="uploader"/> <button class="send" @click="send" :disabled="sending" title="%i18n:common.send%"> diff --git a/src/web/app/common/views/directives/autocomplete.ts b/src/web/app/common/views/directives/autocomplete.ts index 4d6ba41df1..7d04026f8b 100644 --- a/src/web/app/common/views/directives/autocomplete.ts +++ b/src/web/app/common/views/directives/autocomplete.ts @@ -4,8 +4,9 @@ import MkAutocomplete from '../components/autocomplete.vue'; export default { bind(el, binding, vn) { const self = el._autoCompleteDirective_ = {} as any; - self.x = new Autocomplete(el); + self.x = new Autocomplete(el, vn.context, binding.value); self.x.attach(); + console.log(vn.context); }, unbind(el, binding, vn) { @@ -20,11 +21,21 @@ export default { class Autocomplete { private suggestion: 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 this.onInput = this.onInput.bind(this); this.complete = this.complete.bind(this); @@ -33,6 +44,8 @@ class Autocomplete { this.suggestion = null; this.textarea = textarea; + this.vm = vm; + this.model = model; } /** @@ -57,7 +70,7 @@ class Autocomplete { this.close(); 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 emojiIndex = text.lastIndexOf(':'); @@ -129,28 +142,28 @@ class Autocomplete { const caret = this.textarea.selectionStart; if (type == 'user') { - const source = this.textarea.value; + const source = this.text; const before = source.substr(0, caret); const trimmedBefore = before.substring(0, before.lastIndexOf('@')); const after = source.substr(caret); // 挿入 - this.textarea.value = trimmedBefore + '@' + value.username + ' ' + after; + this.text = trimmedBefore + '@' + value.username + ' ' + after; // キャレットを戻す this.textarea.focus(); const pos = caret + value.username.length; this.textarea.setSelectionRange(pos, pos); } else if (type == 'emoji') { - const source = this.textarea.value; + const source = this.text; const before = source.substr(0, caret); const trimmedBefore = before.substring(0, before.lastIndexOf(':')); const after = source.substr(caret); // 挿入 - this.textarea.value = trimmedBefore + value + after; + this.text = trimmedBefore + value + after; // キャレットを戻す this.textarea.focus(); diff --git a/src/web/app/desktop/views/components/post-form.vue b/src/web/app/desktop/views/components/post-form.vue index d38ed9a046..ecb686a109 100644 --- a/src/web/app/desktop/views/components/post-form.vue +++ b/src/web/app/desktop/views/components/post-form.vue @@ -9,7 +9,7 @@ <textarea :class="{ with: (files.length != 0 || poll) }" ref="text" v-model="text" :disabled="posting" @keydown="onKeydown" @paste="onPaste" :placeholder="placeholder" - v-autocomplete + v-autocomplete="'text'" ></textarea> <div class="medias" :class="{ with: poll }" v-show="files.length != 0"> <x-draggable :list="files" :options="{ animation: 150 }"> |