mirror of
https://github.com/MisskeyIO/misskey
synced 2024-12-17 16:18:23 +09:00
wip
This commit is contained in:
parent
0b1bcf614b
commit
8056497809
@ -9,6 +9,7 @@
|
||||
<textarea :class="{ with: (files.length != 0 || poll) }"
|
||||
ref="text" v-model="text" :disabled="posting"
|
||||
@keydown="onKeydown" @paste="onPaste" :placeholder="placeholder"
|
||||
v-autocomplete
|
||||
></textarea>
|
||||
<div class="medias" :class="{ with: poll }" v-show="files.length != 0">
|
||||
<x-draggable :list="files" :options="{ animation: 150 }">
|
||||
@ -38,7 +39,6 @@
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import * as XDraggable from 'vuedraggable';
|
||||
import Autocomplete from '../../scripts/autocomplete';
|
||||
import getKao from '../../../common/scripts/get-kao';
|
||||
|
||||
export default Vue.extend({
|
||||
@ -96,9 +96,6 @@ export default Vue.extend({
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.autocomplete = new Autocomplete(this.$refs.text);
|
||||
this.autocomplete.attach();
|
||||
|
||||
// 書きかけの投稿を復元
|
||||
const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId];
|
||||
if (draft) {
|
||||
|
@ -1,5 +1,18 @@
|
||||
import getCaretCoordinates from 'textarea-caret';
|
||||
import * as riot from 'riot';
|
||||
import * as getCaretCoordinates from 'textarea-caret';
|
||||
import MkAutocomplete from '../components/autocomplete.vue';
|
||||
|
||||
export default {
|
||||
bind(el, binding, vn) {
|
||||
const self = el._userPreviewDirective_ = {} as any;
|
||||
self.x = new Autocomplete(el);
|
||||
self.x.attach();
|
||||
},
|
||||
|
||||
unbind(el, binding, vn) {
|
||||
const self = el._userPreviewDirective_;
|
||||
self.x.close();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* オートコンプリートを管理するクラス。
|
||||
@ -65,7 +78,15 @@ class Autocomplete {
|
||||
this.close();
|
||||
|
||||
// サジェスト要素作成
|
||||
const tag = document.createElement('mk-autocomplete-suggestion');
|
||||
this.suggestion = new MkAutocomplete({
|
||||
propsData: {
|
||||
textarea: this.textarea,
|
||||
complete: this.complete,
|
||||
close: this.close,
|
||||
type: type,
|
||||
q: q
|
||||
}
|
||||
}).$mount();
|
||||
|
||||
// ~ サジェストを表示すべき位置を計算 ~
|
||||
|
||||
@ -76,20 +97,11 @@ class Autocomplete {
|
||||
const x = rect.left + window.pageXOffset + caretPosition.left;
|
||||
const y = rect.top + window.pageYOffset + caretPosition.top;
|
||||
|
||||
tag.style.left = x + 'px';
|
||||
tag.style.top = y + 'px';
|
||||
this.suggestion.$el.style.left = x + 'px';
|
||||
this.suggestion.$el.style.top = y + 'px';
|
||||
|
||||
// 要素追加
|
||||
const el = document.body.appendChild(tag);
|
||||
|
||||
// マウント
|
||||
this.suggestion = (riot as any).mount(el, {
|
||||
textarea: this.textarea,
|
||||
complete: this.complete,
|
||||
close: this.close,
|
||||
type: type,
|
||||
q: q
|
||||
})[0];
|
||||
document.body.appendChild(this.suggestion.$el);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -98,7 +110,7 @@ class Autocomplete {
|
||||
private close() {
|
||||
if (this.suggestion == null) return;
|
||||
|
||||
this.suggestion.unmount();
|
||||
this.suggestion.$destroy();
|
||||
this.suggestion = null;
|
||||
|
||||
this.textarea.focus();
|
||||
@ -128,5 +140,3 @@ class Autocomplete {
|
||||
this.textarea.setSelectionRange(pos, pos);
|
||||
}
|
||||
}
|
||||
|
||||
export default Autocomplete;
|
@ -1,6 +1,8 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
import userPreview from './user-preview';
|
||||
import autocomplete from './autocomplete';
|
||||
|
||||
Vue.directive('userPreview', userPreview);
|
||||
Vue.directive('user-preview', userPreview);
|
||||
Vue.directive('autocomplete', autocomplete);
|
||||
|
Loading…
Reference in New Issue
Block a user