akkoma-fe/src/components/emoji-input/emoji-input.js

188 lines
5 KiB
JavaScript
Raw Normal View History

2019-03-26 02:38:15 +00:00
import Completion from '../../services/completion/completion.js'
import { take } from 'lodash'
2019-03-26 02:38:15 +00:00
const EmojiInput = {
props: [
'placeholder',
'suggest',
'value',
'type',
'classname'
2019-03-26 02:38:15 +00:00
],
data () {
return {
input: undefined,
2019-03-26 02:38:15 +00:00
highlighted: 0,
caret: 0,
focused: false,
popupOptions: {
placement: 'bottom-start',
trigger: 'hover',
// See: https://github.com/RobinCK/vue-popper/issues/63
'delay-on-mouse-over': 9999999,
'delay-on-mouse-out': 9999999,
modifiers: {
arrow: { enabled: true },
offset: { offset: '0, 5px' }
}
}
2019-03-26 02:38:15 +00:00
}
},
computed: {
suggestions () {
const firstchar = this.textAtCaret.charAt(0)
if (this.textAtCaret === firstchar) { return [] }
const matchedSuggestions = this.suggest(this.textAtCaret)
if (matchedSuggestions.length <= 0) {
return []
2019-03-26 02:38:15 +00:00
}
return take(matchedSuggestions, 5)
2019-06-08 14:15:42 +00:00
.map(({ imageUrl, ...rest }, index) => ({
...rest,
// eslint-disable-next-line camelcase
img: imageUrl || '',
highlighted: index === this.highlighted
}))
},
showPopup () {
return this.focused && this.suggestions && this.suggestions.length > 0
2019-03-26 02:38:15 +00:00
},
textAtCaret () {
return (this.wordAtCaret || {}).word || ''
},
wordAtCaret () {
if (this.value && this.caret) {
const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
return word
}
}
},
mounted () {
const slots = this.$slots.default
if (!slots || slots.length === 0) return
const input = slots.find(slot => ['input', 'textarea'].includes(slot.tag))
if (!input) return
this.input = input
this.resize()
2019-06-09 17:40:46 +00:00
input.elm.addEventListener('transitionend', this.onTransition)
input.elm.addEventListener('blur', this.onBlur)
input.elm.addEventListener('focus', this.onFocus)
input.elm.addEventListener('paste', this.onPaste)
input.elm.addEventListener('keyup', this.onKeyUp)
input.elm.addEventListener('keydown', this.onKeyDown)
},
unmounted () {
const { input } = this
if (input) {
2019-06-09 17:40:46 +00:00
input.elm.removeEventListener('transitionend', this.onTransition)
input.elm.removeEventListener('blur', this.onBlur)
input.elm.removeEventListener('focus', this.onFocus)
input.elm.removeEventListener('paste', this.onPaste)
input.elm.removeEventListener('keyup', this.onKeyUp)
input.elm.removeEventListener('keydown', this.onKeyDown)
2019-03-26 02:38:15 +00:00
}
},
methods: {
replace (replacement) {
const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
this.$emit('input', newValue)
this.caret = 0
},
2019-06-09 17:40:46 +00:00
replaceText (e) {
const len = this.suggestions.length || 0
if (this.textAtCaret.length === 1) { return }
2019-03-26 02:38:15 +00:00
if (len > 0) {
const suggestion = this.suggestions[this.highlighted]
const replacement = suggestion.replacement
2019-03-26 02:38:15 +00:00
const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
this.$emit('input', newValue)
this.caret = 0
this.highlighted = 0
2019-06-09 17:40:46 +00:00
e.preventDefault()
2019-03-26 02:38:15 +00:00
}
},
2019-06-09 17:40:46 +00:00
cycleBackward (e) {
2019-03-26 02:38:15 +00:00
const len = this.suggestions.length || 0
if (len > 0) {
this.highlighted -= 1
if (this.highlighted < 0) {
this.highlighted = this.suggestions.length - 1
}
e.preventDefault()
2019-03-26 02:38:15 +00:00
} else {
this.highlighted = 0
}
},
2019-06-09 17:40:46 +00:00
cycleForward (e) {
2019-03-26 02:38:15 +00:00
const len = this.suggestions.length || 0
if (len > 0) {
this.highlighted += 1
if (this.highlighted >= len) {
this.highlighted = 0
}
e.preventDefault()
2019-03-26 02:38:15 +00:00
} else {
this.highlighted = 0
}
},
2019-06-09 17:40:46 +00:00
onTransition (e) {
this.resize(e)
},
onBlur (e) {
this.focused = false
this.setCaret(e)
this.resize(e)
},
onFocus (e) {
this.focused = true
this.setCaret(e)
this.resize(e)
},
onKeyUp (e) {
this.setCaret(e)
this.resize(e)
},
onPaste (e) {
this.setCaret(e)
this.resize(e)
},
onKeyDown (e) {
this.setCaret(e)
this.resize(e)
const { ctrlKey, shiftKey, key } = e
if (key === 'Tab') {
if (shiftKey) {
2019-06-09 17:40:46 +00:00
this.cycleBackward(e)
} else {
2019-06-09 17:40:46 +00:00
this.cycleForward(e)
}
}
if (key === 'ArrowUp') {
2019-06-09 17:40:46 +00:00
this.cycleBackward(e)
} else if (key === 'ArrowDown') {
2019-06-09 17:40:46 +00:00
this.cycleForward(e)
}
if (key === 'Enter') {
if (!ctrlKey) {
2019-06-09 17:40:46 +00:00
this.replaceText(e)
}
}
2019-03-26 02:38:15 +00:00
},
onInput (e) {
this.$emit('input', e.target.value)
},
setCaret ({ target: { selectionStart, value } }) {
2019-03-26 02:38:15 +00:00
this.caret = selectionStart
},
resize () {
const { panel } = this.$refs
if (!panel) return
const { offsetHeight, offsetTop } = this.input.elm
this.$refs.panel.style.top = (offsetTop + offsetHeight) + 'px'
2019-03-26 02:38:15 +00:00
}
}
}
export default EmojiInput