mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-12-15 07:08:56 +09:00
wip
This commit is contained in:
parent
0b1bcf614b
commit
8056497809
@ -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) {
|
||||||
|
@ -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;
|
|
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user