1
1
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-15 07:08:56 +09:00
This commit is contained in:
syuilo 2018-02-22 06:13:38 +09:00
parent 0b1bcf614b
commit 8056497809
3 changed files with 31 additions and 22 deletions

View File

@ -9,6 +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
></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 }">
@ -38,7 +39,6 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import * as XDraggable from 'vuedraggable'; import * as XDraggable from 'vuedraggable';
import Autocomplete from '../../scripts/autocomplete';
import getKao from '../../../common/scripts/get-kao'; import getKao from '../../../common/scripts/get-kao';
export default Vue.extend({ export default Vue.extend({
@ -96,9 +96,6 @@ export default Vue.extend({
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.autocomplete = new Autocomplete(this.$refs.text);
this.autocomplete.attach();
// 稿 // 稿
const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId]; const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId];
if (draft) { if (draft) {

View File

@ -1,5 +1,18 @@
import getCaretCoordinates from 'textarea-caret'; import * as getCaretCoordinates from 'textarea-caret';
import * as riot from 'riot'; 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(); 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 x = rect.left + window.pageXOffset + caretPosition.left;
const y = rect.top + window.pageYOffset + caretPosition.top; const y = rect.top + window.pageYOffset + caretPosition.top;
tag.style.left = x + 'px'; this.suggestion.$el.style.left = x + 'px';
tag.style.top = y + 'px'; this.suggestion.$el.style.top = y + 'px';
// 要素追加 // 要素追加
const el = document.body.appendChild(tag); document.body.appendChild(this.suggestion.$el);
// マウント
this.suggestion = (riot as any).mount(el, {
textarea: this.textarea,
complete: this.complete,
close: this.close,
type: type,
q: q
})[0];
} }
/** /**
@ -98,7 +110,7 @@ class Autocomplete {
private close() { private close() {
if (this.suggestion == null) return; if (this.suggestion == null) return;
this.suggestion.unmount(); this.suggestion.$destroy();
this.suggestion = null; this.suggestion = null;
this.textarea.focus(); this.textarea.focus();
@ -128,5 +140,3 @@ class Autocomplete {
this.textarea.setSelectionRange(pos, pos); this.textarea.setSelectionRange(pos, pos);
} }
} }
export default Autocomplete;

View File

@ -1,6 +1,8 @@
import Vue from 'vue'; import Vue from 'vue';
import userPreview from './user-preview'; import userPreview from './user-preview';
import autocomplete from './autocomplete';
Vue.directive('userPreview', userPreview); Vue.directive('userPreview', userPreview);
Vue.directive('user-preview', userPreview); Vue.directive('user-preview', userPreview);
Vue.directive('autocomplete', autocomplete);