2020-10-17 13:12:00 +02:00
|
|
|
import { Ref, ref } from 'vue';
|
2018-02-21 22:13:38 +01:00
|
|
|
import * as getCaretCoordinates from 'textarea-caret';
|
2018-10-14 09:56:19 +02:00
|
|
|
import { toASCII } from 'punycode';
|
2021-03-23 09:30:14 +01:00
|
|
|
import { popup } from '@client/os';
|
2020-10-17 13:12:00 +02:00
|
|
|
|
|
|
|
export class Autocomplete {
|
|
|
|
private suggestion: {
|
|
|
|
x: Ref<number>;
|
|
|
|
y: Ref<number>;
|
|
|
|
q: Ref<string>;
|
|
|
|
close: Function;
|
|
|
|
};
|
2017-11-13 10:05:35 +01:00
|
|
|
private textarea: any;
|
2018-02-25 05:05:55 +01:00
|
|
|
private vm: any;
|
2018-02-25 09:38:16 +01:00
|
|
|
private currentType: string;
|
2018-12-16 00:45:10 +01:00
|
|
|
private opts: {
|
|
|
|
model: string;
|
|
|
|
};
|
2018-12-19 16:02:28 +01:00
|
|
|
private opening: boolean;
|
2018-02-25 05:05:55 +01:00
|
|
|
|
|
|
|
private get text(): string {
|
2018-12-16 00:45:10 +01:00
|
|
|
return this.vm[this.opts.model];
|
2018-02-25 05:05:55 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
private set text(text: string) {
|
2018-12-16 00:45:10 +01:00
|
|
|
this.vm[this.opts.model] = text;
|
2018-02-25 05:05:55 +01:00
|
|
|
}
|
2017-02-18 09:18:31 +01:00
|
|
|
|
|
|
|
/**
|
|
|
|
* 対象のテキストエリアを与えてインスタンスを初期化します。
|
|
|
|
*/
|
2018-12-16 00:45:10 +01:00
|
|
|
constructor(textarea, vm, opts) {
|
2018-02-24 17:55:49 +01:00
|
|
|
//#region BIND
|
|
|
|
this.onInput = this.onInput.bind(this);
|
2017-02-19 00:09:55 +01:00
|
|
|
this.complete = this.complete.bind(this);
|
2018-02-24 17:55:49 +01:00
|
|
|
this.close = this.close.bind(this);
|
|
|
|
//#endregion
|
2017-02-19 00:09:55 +01:00
|
|
|
|
2017-02-18 09:18:31 +01:00
|
|
|
this.suggestion = null;
|
|
|
|
this.textarea = textarea;
|
2018-02-25 05:05:55 +01:00
|
|
|
this.vm = vm;
|
2018-12-16 00:45:10 +01:00
|
|
|
this.opts = opts;
|
2018-12-19 16:02:28 +01:00
|
|
|
this.opening = false;
|
2020-10-17 13:12:00 +02:00
|
|
|
|
|
|
|
this.attach();
|
2017-02-18 09:18:31 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* このインスタンスにあるテキストエリアの入力のキャプチャを開始します。
|
|
|
|
*/
|
2017-11-13 10:05:35 +01:00
|
|
|
public attach() {
|
2017-02-18 09:18:31 +01:00
|
|
|
this.textarea.addEventListener('input', this.onInput);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* このインスタンスにあるテキストエリアの入力のキャプチャを解除します。
|
|
|
|
*/
|
2017-11-13 10:05:35 +01:00
|
|
|
public detach() {
|
2017-02-18 09:18:31 +01:00
|
|
|
this.textarea.removeEventListener('input', this.onInput);
|
|
|
|
this.close();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2017-11-13 10:05:35 +01:00
|
|
|
* テキスト入力時
|
2017-02-18 09:18:31 +01:00
|
|
|
*/
|
2017-11-13 10:05:35 +01:00
|
|
|
private onInput() {
|
2018-07-18 00:19:24 +02:00
|
|
|
const caretPos = this.textarea.selectionStart;
|
2018-07-28 00:38:29 +02:00
|
|
|
const text = this.text.substr(0, caretPos).split('\n').pop();
|
2017-02-18 09:18:31 +01:00
|
|
|
|
|
|
|
const mentionIndex = text.lastIndexOf('@');
|
2018-07-18 00:19:24 +02:00
|
|
|
const hashtagIndex = text.lastIndexOf('#');
|
2018-02-24 17:55:49 +01:00
|
|
|
const emojiIndex = text.lastIndexOf(':');
|
|
|
|
|
2018-07-28 00:38:29 +02:00
|
|
|
const max = Math.max(
|
|
|
|
mentionIndex,
|
|
|
|
hashtagIndex,
|
|
|
|
emojiIndex);
|
2018-07-18 00:19:24 +02:00
|
|
|
|
2018-07-28 00:38:29 +02:00
|
|
|
if (max == -1) {
|
2018-07-20 20:15:31 +02:00
|
|
|
this.close();
|
|
|
|
return;
|
|
|
|
}
|
2018-07-18 00:19:24 +02:00
|
|
|
|
2018-07-28 00:38:29 +02:00
|
|
|
const isMention = mentionIndex != -1;
|
|
|
|
const isHashtag = hashtagIndex != -1;
|
|
|
|
const isEmoji = emojiIndex != -1;
|
2018-07-18 00:19:24 +02:00
|
|
|
|
2018-02-25 09:38:16 +01:00
|
|
|
let opened = false;
|
|
|
|
|
2018-07-18 00:19:24 +02:00
|
|
|
if (isMention) {
|
2018-02-24 17:55:49 +01:00
|
|
|
const username = text.substr(mentionIndex + 1);
|
2018-03-29 07:48:47 +02:00
|
|
|
if (username != '' && username.match(/^[a-zA-Z0-9_]+$/)) {
|
2018-02-25 09:38:16 +01:00
|
|
|
this.open('user', username);
|
|
|
|
opened = true;
|
2020-01-31 23:38:40 +01:00
|
|
|
} else if (username === '') {
|
|
|
|
this.open('user', null);
|
|
|
|
opened = true;
|
2018-02-25 09:38:16 +01:00
|
|
|
}
|
2018-02-24 17:55:49 +01:00
|
|
|
}
|
|
|
|
|
2019-05-05 02:27:55 +02:00
|
|
|
if (isHashtag && !opened) {
|
2018-07-18 00:19:24 +02:00
|
|
|
const hashtag = text.substr(hashtagIndex + 1);
|
2018-07-28 00:38:29 +02:00
|
|
|
if (!hashtag.includes(' ')) {
|
2018-07-18 00:19:24 +02:00
|
|
|
this.open('hashtag', hashtag);
|
|
|
|
opened = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-05-05 02:27:55 +02:00
|
|
|
if (isEmoji && !opened) {
|
2018-02-24 17:55:49 +01:00
|
|
|
const emoji = text.substr(emojiIndex + 1);
|
2018-11-05 18:05:16 +01:00
|
|
|
if (!emoji.includes(' ')) {
|
2018-02-25 09:38:16 +01:00
|
|
|
this.open('emoji', emoji);
|
|
|
|
opened = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!opened) {
|
|
|
|
this.close();
|
2018-02-24 17:55:49 +01:00
|
|
|
}
|
2017-02-18 09:18:31 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2017-11-13 10:05:35 +01:00
|
|
|
* サジェストを提示します。
|
2017-02-18 09:18:31 +01:00
|
|
|
*/
|
2020-01-31 23:38:40 +01:00
|
|
|
private async open(type: string, q: string) {
|
2018-02-25 09:38:16 +01:00
|
|
|
if (type != this.currentType) {
|
|
|
|
this.close();
|
|
|
|
}
|
2018-12-19 16:02:28 +01:00
|
|
|
if (this.opening) return;
|
|
|
|
this.opening = true;
|
2018-02-25 09:38:16 +01:00
|
|
|
this.currentType = type;
|
2017-02-18 09:18:31 +01:00
|
|
|
|
2018-02-24 18:57:19 +01:00
|
|
|
//#region サジェストを表示すべき位置を計算
|
|
|
|
const caretPosition = getCaretCoordinates(this.textarea, this.textarea.selectionStart);
|
|
|
|
|
|
|
|
const rect = this.textarea.getBoundingClientRect();
|
|
|
|
|
|
|
|
const x = rect.left + caretPosition.left - this.textarea.scrollLeft;
|
|
|
|
const y = rect.top + caretPosition.top - this.textarea.scrollTop;
|
|
|
|
//#endregion
|
|
|
|
|
2018-02-25 09:38:16 +01:00
|
|
|
if (this.suggestion) {
|
2020-10-17 13:12:00 +02:00
|
|
|
this.suggestion.x.value = x;
|
|
|
|
this.suggestion.y.value = y;
|
|
|
|
this.suggestion.q.value = q;
|
2018-12-19 16:02:28 +01:00
|
|
|
|
|
|
|
this.opening = false;
|
2018-02-25 09:38:16 +01:00
|
|
|
} else {
|
2020-10-17 13:12:00 +02:00
|
|
|
const _x = ref(x);
|
|
|
|
const _y = ref(y);
|
|
|
|
const _q = ref(q);
|
|
|
|
|
2021-03-23 09:30:14 +01:00
|
|
|
const { dispose } = await popup(import('@client/components/autocomplete.vue'), {
|
2020-10-17 13:12:00 +02:00
|
|
|
textarea: this.textarea,
|
|
|
|
close: this.close,
|
|
|
|
type: type,
|
|
|
|
q: _q,
|
|
|
|
x: _x,
|
|
|
|
y: _y,
|
|
|
|
}, {
|
|
|
|
done: (res) => {
|
|
|
|
this.complete(res);
|
2018-02-25 09:38:16 +01:00
|
|
|
}
|
2020-10-17 13:12:00 +02:00
|
|
|
});
|
2018-02-25 09:38:16 +01:00
|
|
|
|
2020-10-17 13:12:00 +02:00
|
|
|
this.suggestion = {
|
|
|
|
q: _q,
|
|
|
|
x: _x,
|
|
|
|
y: _y,
|
|
|
|
close: () => dispose(),
|
|
|
|
};
|
2018-12-19 16:02:28 +01:00
|
|
|
|
|
|
|
this.opening = false;
|
2018-02-25 09:38:16 +01:00
|
|
|
}
|
2017-02-18 09:18:31 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2017-11-13 10:05:35 +01:00
|
|
|
* サジェストを閉じます。
|
2017-02-18 09:18:31 +01:00
|
|
|
*/
|
2017-11-13 10:05:35 +01:00
|
|
|
private close() {
|
2017-02-18 23:24:31 +01:00
|
|
|
if (this.suggestion == null) return;
|
2017-02-18 09:18:31 +01:00
|
|
|
|
2020-10-17 13:12:00 +02:00
|
|
|
this.suggestion.close();
|
2017-02-18 09:18:31 +01:00
|
|
|
this.suggestion = null;
|
|
|
|
|
|
|
|
this.textarea.focus();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2017-11-13 10:05:35 +01:00
|
|
|
* オートコンプリートする
|
2017-02-18 09:18:31 +01:00
|
|
|
*/
|
2020-10-17 13:12:00 +02:00
|
|
|
private complete({ type, value }) {
|
2017-02-18 09:18:31 +01:00
|
|
|
this.close();
|
|
|
|
|
|
|
|
const caret = this.textarea.selectionStart;
|
|
|
|
|
2018-02-24 17:55:49 +01:00
|
|
|
if (type == 'user') {
|
2018-02-25 05:05:55 +01:00
|
|
|
const source = this.text;
|
2017-02-18 09:18:31 +01:00
|
|
|
|
2018-02-24 17:55:49 +01:00
|
|
|
const before = source.substr(0, caret);
|
|
|
|
const trimmedBefore = before.substring(0, before.lastIndexOf('@'));
|
|
|
|
const after = source.substr(caret);
|
2017-02-18 09:18:31 +01:00
|
|
|
|
2018-10-14 09:56:19 +02:00
|
|
|
const acct = value.host === null ? value.username : `${value.username}@${toASCII(value.host)}`;
|
2018-07-24 17:51:30 +02:00
|
|
|
|
2018-02-24 17:55:49 +01:00
|
|
|
// 挿入
|
2018-09-01 16:12:51 +02:00
|
|
|
this.text = `${trimmedBefore}@${acct} ${after}`;
|
2018-02-24 17:55:49 +01:00
|
|
|
|
|
|
|
// キャレットを戻す
|
2018-02-25 05:31:02 +01:00
|
|
|
this.vm.$nextTick(() => {
|
|
|
|
this.textarea.focus();
|
2018-07-24 17:51:30 +02:00
|
|
|
const pos = trimmedBefore.length + (acct.length + 2);
|
2018-02-25 05:31:02 +01:00
|
|
|
this.textarea.setSelectionRange(pos, pos);
|
|
|
|
});
|
2018-07-18 00:19:24 +02:00
|
|
|
} else if (type == 'hashtag') {
|
|
|
|
const source = this.text;
|
|
|
|
|
|
|
|
const before = source.substr(0, caret);
|
|
|
|
const trimmedBefore = before.substring(0, before.lastIndexOf('#'));
|
|
|
|
const after = source.substr(caret);
|
|
|
|
|
|
|
|
// 挿入
|
2018-09-01 16:12:51 +02:00
|
|
|
this.text = `${trimmedBefore}#${value} ${after}`;
|
2018-07-18 00:19:24 +02:00
|
|
|
|
|
|
|
// キャレットを戻す
|
|
|
|
this.vm.$nextTick(() => {
|
|
|
|
this.textarea.focus();
|
|
|
|
const pos = trimmedBefore.length + (value.length + 2);
|
|
|
|
this.textarea.setSelectionRange(pos, pos);
|
|
|
|
});
|
2018-02-24 17:55:49 +01:00
|
|
|
} else if (type == 'emoji') {
|
2018-02-25 05:05:55 +01:00
|
|
|
const source = this.text;
|
2018-02-24 17:55:49 +01:00
|
|
|
|
|
|
|
const before = source.substr(0, caret);
|
|
|
|
const trimmedBefore = before.substring(0, before.lastIndexOf(':'));
|
|
|
|
const after = source.substr(caret);
|
|
|
|
|
|
|
|
// 挿入
|
2018-02-25 05:05:55 +01:00
|
|
|
this.text = trimmedBefore + value + after;
|
2018-02-24 17:55:49 +01:00
|
|
|
|
|
|
|
// キャレットを戻す
|
2018-02-25 05:31:02 +01:00
|
|
|
this.vm.$nextTick(() => {
|
|
|
|
this.textarea.focus();
|
2019-09-21 14:33:01 +02:00
|
|
|
const pos = trimmedBefore.length + value.length;
|
2018-02-25 05:31:02 +01:00
|
|
|
this.textarea.setSelectionRange(pos, pos);
|
|
|
|
});
|
2018-02-24 17:55:49 +01:00
|
|
|
}
|
2017-02-18 09:18:31 +01:00
|
|
|
}
|
|
|
|
}
|