diff options
Diffstat (limited to 'src/web')
4 files changed, 42 insertions, 29 deletions
diff --git a/src/web/app/common/views/components/autocomplete.vue b/src/web/app/common/views/components/autocomplete.vue index 1980804927..b068ecc4fa 100644 --- a/src/web/app/common/views/components/autocomplete.vue +++ b/src/web/app/common/views/components/autocomplete.vue @@ -22,7 +22,7 @@ import * as pictograph from 'pictograph'; import contains from '../../../common/scripts/contains'; export default Vue.extend({ - props: ['type', 'q', 'textarea', 'complete', 'close'], + props: ['type', 'q', 'textarea', 'complete', 'close', 'x', 'y'], data() { return { fetching: true, @@ -37,6 +37,27 @@ export default Vue.extend({ return (this.$refs.suggests as Element).children; } }, + updated() { + //#region 位置調整 + const margin = 32; + + if (this.x + this.$el.offsetWidth > window.innerWidth - margin) { + this.$el.style.left = (this.x - this.$el.offsetWidth) + 'px'; + this.$el.style.marginLeft = '-16px'; + } else { + this.$el.style.left = this.x + 'px'; + this.$el.style.marginLeft = '0'; + } + + if (this.y + this.$el.offsetHeight > window.innerHeight - margin) { + this.$el.style.top = (this.y - this.$el.offsetHeight) + 'px'; + this.$el.style.marginTop = '0'; + } else { + this.$el.style.top = this.y + 'px'; + this.$el.style.marginTop = 'calc(1em + 8px)'; + } + //#endregion + }, mounted() { this.textarea.addEventListener('keydown', this.onKeydown); @@ -136,7 +157,7 @@ export default Vue.extend({ <style lang="stylus" scoped> .mk-autocomplete - position absolute + position fixed z-index 65535 margin-top calc(1em + 8px) overflow hidden diff --git a/src/web/app/common/views/components/messaging-room.form.vue b/src/web/app/common/views/components/messaging-room.form.vue index aa07217b32..adc3372bed 100644 --- a/src/web/app/common/views/components/messaging-room.form.vue +++ b/src/web/app/common/views/components/messaging-room.form.vue @@ -1,6 +1,6 @@ <template> <div class="mk-messaging-form"> - <textarea v-model="text" @keypress="onKeypress" @paste="onPaste" placeholder="%i18n:common.input-message-here%" v-autocomplete></textarea> + <textarea v-model="text" ref="textarea" @keypress="onKeypress" @paste="onPaste" placeholder="%i18n:common.input-message-here%" v-autocomplete></textarea> <div class="file" v-if="file">{{ file.name }}</div> <mk-uploader ref="uploader"/> <button class="send" @click="send" :disabled="sending" title="%i18n:common.send%"> @@ -18,6 +18,8 @@ <script lang="ts"> import Vue from 'vue'; +import * as autosize from 'autosize'; + export default Vue.extend({ props: ['user'], data() { @@ -27,6 +29,9 @@ export default Vue.extend({ sending: false }; }, + mounted() { + autosize(this.$refs.textarea); + }, methods: { onPaste(e) { const data = e.clipboardData; @@ -93,6 +98,7 @@ export default Vue.extend({ height 64px margin 0 padding 8px + resize none font-size 1em color #000 outline none diff --git a/src/web/app/common/views/components/messaging-room.vue b/src/web/app/common/views/components/messaging-room.vue index 7af6b3fae3..310b56f6fc 100644 --- a/src/web/app/common/views/components/messaging-room.vue +++ b/src/web/app/common/views/components/messaging-room.vue @@ -16,7 +16,6 @@ </div> <footer> <div ref="notifications" class="notifications"></div> - <div class="grippie" title="%i18n:common.tags.mk-messaging-room.resize-form%"></div> <x-form :user="user"/> </footer> </div> @@ -316,16 +315,4 @@ export default Vue.extend({ line-height 32px font-size 16px - > .grippie - height 10px - margin-top -10px - background transparent - cursor ns-resize - - &:hover - //background rgba(0, 0, 0, 0.1) - - &:active - //background rgba(0, 0, 0, 0.2) - </style> diff --git a/src/web/app/common/views/directives/autocomplete.ts b/src/web/app/common/views/directives/autocomplete.ts index bd9c9cb611..4d6ba41df1 100644 --- a/src/web/app/common/views/directives/autocomplete.ts +++ b/src/web/app/common/views/directives/autocomplete.ts @@ -82,6 +82,15 @@ class Autocomplete { // 既に開いているサジェストは閉じる this.close(); + //#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 + // サジェスト要素作成 this.suggestion = new MkAutocomplete({ propsData: { @@ -89,22 +98,12 @@ class Autocomplete { complete: this.complete, close: this.close, type: type, - q: q + q: q, + x, + y } }).$mount(); - //#region サジェストを表示すべき位置を計算 - const caretPosition = getCaretCoordinates(this.textarea, this.textarea.selectionStart); - - const rect = this.textarea.getBoundingClientRect(); - - const x = rect.left + window.pageXOffset + caretPosition.left - this.textarea.scrollLeft; - const y = rect.top + window.pageYOffset + caretPosition.top - this.textarea.scrollTop; - //#endregion - - this.suggestion.$el.style.left = x + 'px'; - this.suggestion.$el.style.top = y + 'px'; - // 要素追加 document.body.appendChild(this.suggestion.$el); } |