wip

src/web/app/desktop/views/components/post-form.vue

@@ -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) {

src/web/app/desktop/views/directives/autocomplete.ts

@@ -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();
 
 		// サジェスト要素作成
-		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';
+		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() {
 		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;

src/web/app/desktop/views/directives/index.ts

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