Merge branch 'vue3compat-emoji-input' into 'develop'

Refactor EmojiInput for better vue3 compatibility

See merge request pleroma/pleroma-fe!1382
This commit is contained in:
HJ 2021-05-31 11:17:42 +00:00
commit 7bd18cda64
2 changed files with 31 additions and 30 deletions

View File

@ -57,6 +57,7 @@ const EmojiInput = {
required: true, required: true,
type: Function type: Function
}, },
// TODO VUE3: change to modelValue, change 'input' event to 'input'
value: { value: {
/** /**
* Used for v-model * Used for v-model
@ -143,32 +144,31 @@ const EmojiInput = {
} }
}, },
mounted () { mounted () {
const slots = this.$slots.default const { root } = this.$refs
if (!slots || slots.length === 0) return const input = root.querySelector('.emoji-input > input') || root.querySelector('.emoji-input > textarea')
const input = slots.find(slot => ['input', 'textarea'].includes(slot.tag))
if (!input) return if (!input) return
this.input = input this.input = input
this.resize() this.resize()
input.elm.addEventListener('blur', this.onBlur) input.addEventListener('blur', this.onBlur)
input.elm.addEventListener('focus', this.onFocus) input.addEventListener('focus', this.onFocus)
input.elm.addEventListener('paste', this.onPaste) input.addEventListener('paste', this.onPaste)
input.elm.addEventListener('keyup', this.onKeyUp) input.addEventListener('keyup', this.onKeyUp)
input.elm.addEventListener('keydown', this.onKeyDown) input.addEventListener('keydown', this.onKeyDown)
input.elm.addEventListener('click', this.onClickInput) input.addEventListener('click', this.onClickInput)
input.elm.addEventListener('transitionend', this.onTransition) input.addEventListener('transitionend', this.onTransition)
input.elm.addEventListener('input', this.onInput) input.addEventListener('input', this.onInput)
}, },
unmounted () { unmounted () {
const { input } = this const { input } = this
if (input) { if (input) {
input.elm.removeEventListener('blur', this.onBlur) input.removeEventListener('blur', this.onBlur)
input.elm.removeEventListener('focus', this.onFocus) input.removeEventListener('focus', this.onFocus)
input.elm.removeEventListener('paste', this.onPaste) input.removeEventListener('paste', this.onPaste)
input.elm.removeEventListener('keyup', this.onKeyUp) input.removeEventListener('keyup', this.onKeyUp)
input.elm.removeEventListener('keydown', this.onKeyDown) input.removeEventListener('keydown', this.onKeyDown)
input.elm.removeEventListener('click', this.onClickInput) input.removeEventListener('click', this.onClickInput)
input.elm.removeEventListener('transitionend', this.onTransition) input.removeEventListener('transitionend', this.onTransition)
input.elm.removeEventListener('input', this.onInput) input.removeEventListener('input', this.onInput)
} }
}, },
watch: { watch: {
@ -216,7 +216,7 @@ const EmojiInput = {
}, 0) }, 0)
}, },
togglePicker () { togglePicker () {
this.input.elm.focus() this.input.focus()
this.showPicker = !this.showPicker this.showPicker = !this.showPicker
if (this.showPicker) { if (this.showPicker) {
this.scrollIntoView() this.scrollIntoView()
@ -262,13 +262,13 @@ const EmojiInput = {
this.$emit('input', newValue) this.$emit('input', newValue)
const position = this.caret + (insertion + spaceAfter + spaceBefore).length const position = this.caret + (insertion + spaceAfter + spaceBefore).length
if (!keepOpen) { if (!keepOpen) {
this.input.elm.focus() this.input.focus()
} }
this.$nextTick(function () { this.$nextTick(function () {
// Re-focus inputbox after clicking suggestion // Re-focus inputbox after clicking suggestion
// Set selection right after the replacement instead of the very end // Set selection right after the replacement instead of the very end
this.input.elm.setSelectionRange(position, position) this.input.setSelectionRange(position, position)
this.caret = position this.caret = position
}) })
}, },
@ -285,9 +285,9 @@ const EmojiInput = {
this.$nextTick(function () { this.$nextTick(function () {
// Re-focus inputbox after clicking suggestion // Re-focus inputbox after clicking suggestion
this.input.elm.focus() this.input.focus()
// Set selection right after the replacement instead of the very end // Set selection right after the replacement instead of the very end
this.input.elm.setSelectionRange(position, position) this.input.setSelectionRange(position, position)
this.caret = position this.caret = position
}) })
e.preventDefault() e.preventDefault()
@ -349,7 +349,7 @@ const EmojiInput = {
} }
this.$nextTick(() => { this.$nextTick(() => {
const { offsetHeight } = this.input.elm const { offsetHeight } = this.input
const { picker } = this.$refs const { picker } = this.$refs
const pickerBottom = picker.$el.getBoundingClientRect().bottom const pickerBottom = picker.$el.getBoundingClientRect().bottom
if (pickerBottom > window.innerHeight) { if (pickerBottom > window.innerHeight) {
@ -414,8 +414,8 @@ const EmojiInput = {
// Scroll the input element to the position of the cursor // Scroll the input element to the position of the cursor
this.$nextTick(() => { this.$nextTick(() => {
this.input.elm.blur() this.input.blur()
this.input.elm.focus() this.input.focus()
}) })
} }
// Disable suggestions hotkeys if suggestions are hidden // Disable suggestions hotkeys if suggestions are hidden
@ -444,7 +444,7 @@ const EmojiInput = {
// de-focuses the element (i.e. default browser behavior) // de-focuses the element (i.e. default browser behavior)
if (key === 'Escape') { if (key === 'Escape') {
if (!this.temporarilyHideSuggestions) { if (!this.temporarilyHideSuggestions) {
this.input.elm.focus() this.input.focus()
} }
} }
@ -480,7 +480,7 @@ const EmojiInput = {
if (!panel) return if (!panel) return
const picker = this.$refs.picker.$el const picker = this.$refs.picker.$el
const panelBody = this.$refs['panel-body'] const panelBody = this.$refs['panel-body']
const { offsetHeight, offsetTop } = this.input.elm const { offsetHeight, offsetTop } = this.input
const offsetBottom = offsetTop + offsetHeight const offsetBottom = offsetTop + offsetHeight
this.setPlacement(panelBody, panel, offsetBottom) this.setPlacement(panelBody, panel, offsetBottom)
@ -494,7 +494,7 @@ const EmojiInput = {
if (this.placement === 'top' || (this.placement === 'auto' && this.overflowsBottom(container))) { if (this.placement === 'top' || (this.placement === 'auto' && this.overflowsBottom(container))) {
target.style.top = 'auto' target.style.top = 'auto'
target.style.bottom = this.input.elm.offsetHeight + 'px' target.style.bottom = this.input.offsetHeight + 'px'
} }
}, },
overflowsBottom (el) { overflowsBottom (el) {

View File

@ -3,6 +3,7 @@
v-click-outside="onClickOutside" v-click-outside="onClickOutside"
class="emoji-input" class="emoji-input"
:class="{ 'with-picker': !hideEmojiButton }" :class="{ 'with-picker': !hideEmojiButton }"
ref='root'
> >
<slot /> <slot />
<template v-if="enableEmojiPicker"> <template v-if="enableEmojiPicker">