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>
<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%">

View file

@ -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();

View file

@ -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 }">