Fix #1141
This commit is contained in:
parent
f01693d08d
commit
493dfd2118
|
@ -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%">
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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 }">
|
||||||
|
|
Loading…
Reference in New Issue