cleanup and appropriation for new emoji-input component API, styles updates
This commit is contained in:
Henry Jameson
parent
4c78fdb393
commit
03c2f29b0a
22 changed files with 153 additions and 89 deletions
|
|
@ -190,7 +190,7 @@ const getStaticEmoji = async ({ store }) => {
|
|||
imageUrl: false,
|
||||
replacement: values[key]
|
||||
}
|
||||
})
|
||||
}).sort((a, b) => a.displayText - b.displayText)
|
||||
store.dispatch('setInstanceOption', { name: 'emoji', value: emoji })
|
||||
} else {
|
||||
throw (res)
|
||||
|
|
@ -209,14 +209,16 @@ const getCustomEmoji = async ({ store }) => {
|
|||
if (res.ok) {
|
||||
const result = await res.json()
|
||||
const values = Array.isArray(result) ? Object.assign({}, ...result) : result
|
||||
const emoji = Object.keys(values).map((key) => {
|
||||
const imageUrl = values[key].image_url
|
||||
const emoji = Object.entries(values).map(([key, value]) => {
|
||||
const imageUrl = value.image_url
|
||||
return {
|
||||
displayText: key,
|
||||
imageUrl: imageUrl ? store.state.instance.server + imageUrl : values[key],
|
||||
imageUrl: imageUrl ? store.state.instance.server + imageUrl : value,
|
||||
tags: imageUrl ? value.tags.sort((a, b) => a > b ? 1 : 0) : ['utf'],
|
||||
replacement: `:${key}: `
|
||||
}
|
||||
})
|
||||
// Technically could use tags but those are kinda useless right now, should have been "pack" field, that would be more useful
|
||||
}).sort((a, b) => a.displayText.toLowerCase() > b.displayText.toLowerCase() ? 1 : 0)
|
||||
store.dispatch('setInstanceOption', { name: 'customEmoji', value: emoji })
|
||||
store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: true })
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -53,6 +53,11 @@ const EmojiInput = {
|
|||
*/
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
emojiPicker: {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -61,7 +66,8 @@ const EmojiInput = {
|
|||
highlighted: 0,
|
||||
caret: 0,
|
||||
focused: false,
|
||||
blurTimeout: null
|
||||
blurTimeout: null,
|
||||
showPicker: false,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -83,12 +89,15 @@ const EmojiInput = {
|
|||
highlighted: index === this.highlighted
|
||||
}))
|
||||
},
|
||||
showPopup () {
|
||||
showSuggestions () {
|
||||
return this.focused && this.suggestions && this.suggestions.length > 0
|
||||
},
|
||||
textAtCaret () {
|
||||
return (this.wordAtCaret || {}).word || ''
|
||||
},
|
||||
pickerIconBottom () {
|
||||
return this.input && this.input.tag === 'textarea'
|
||||
},
|
||||
wordAtCaret () {
|
||||
if (this.value && this.caret) {
|
||||
const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
|
||||
|
|
@ -124,11 +133,22 @@ const EmojiInput = {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
togglePicker () {
|
||||
this.showPicker = !this.showPicker
|
||||
},
|
||||
replace (replacement) {
|
||||
const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
|
||||
this.$emit('input', newValue)
|
||||
this.caret = 0
|
||||
},
|
||||
insert (insertion) {
|
||||
const newValue = [
|
||||
this.value.substring(0, this.caret),
|
||||
insertion,
|
||||
this.value.substring(this.caret)
|
||||
].join('')
|
||||
this.$emit('input', newValue)
|
||||
},
|
||||
replaceText (e, suggestion) {
|
||||
const len = this.suggestions.length || 0
|
||||
if (this.textAtCaret.length === 1) { return }
|
||||
|
|
@ -195,6 +215,7 @@ const EmojiInput = {
|
|||
this.blurTimeout = null
|
||||
}
|
||||
|
||||
this.showPicker = false
|
||||
this.focused = true
|
||||
this.setCaret(e)
|
||||
this.resize()
|
||||
|
|
@ -231,6 +252,7 @@ const EmojiInput = {
|
|||
}
|
||||
},
|
||||
onInput (e) {
|
||||
this.showPicker = false
|
||||
this.setCaret(e)
|
||||
this.$emit('input', e.target.value)
|
||||
},
|
||||
|
|
@ -239,6 +261,9 @@ const EmojiInput = {
|
|||
this.resize()
|
||||
this.$emit('input', e.target.value)
|
||||
},
|
||||
onClickOutside () {
|
||||
this.showPicker = false
|
||||
},
|
||||
setCaret ({ target: { selectionStart } }) {
|
||||
this.caret = selectionStart
|
||||
},
|
||||
|
|
@ -247,6 +272,7 @@ const EmojiInput = {
|
|||
if (!panel) return
|
||||
const { offsetHeight, offsetTop } = this.input.elm
|
||||
this.$refs.panel.style.top = (offsetTop + offsetHeight) + 'px'
|
||||
this.$refs.picker.$el.style.top = (offsetTop + offsetHeight) + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,29 @@
|
|||
<template>
|
||||
<div class="emoji-input">
|
||||
<div
|
||||
class="emoji-input"
|
||||
v-click-outside="onClickOutside"
|
||||
>
|
||||
<slot />
|
||||
<template v-if="emojiPicker">
|
||||
<div
|
||||
@click.prevent="togglePicker"
|
||||
class="emoji-picker-icon"
|
||||
:class="pickerIconBottom ? 'picker-icon-bottom': 'picker-icon-right'"
|
||||
>
|
||||
<i class="icon-smile"></i>
|
||||
</div>
|
||||
<EmojiPicker
|
||||
v-if="emojiPicker"
|
||||
:class="{ hide: !showPicker }"
|
||||
ref="picker"
|
||||
class="emoji-picker-panel"
|
||||
@emoji="insert"
|
||||
/>
|
||||
</template>
|
||||
<div
|
||||
ref="panel"
|
||||
class="autocomplete-panel"
|
||||
:class="{ hide: !showPopup }"
|
||||
:class="{ hide: !showSuggestions }"
|
||||
>
|
||||
<div class="autocomplete-panel-body">
|
||||
<div
|
||||
|
|
@ -39,6 +58,37 @@
|
|||
.emoji-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.emoji-picker-icon {
|
||||
position: absolute;
|
||||
margin: 0 .25em;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover i {
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
|
||||
&.picker-icon-bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
&.picker-icon-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.emoji-picker-panel {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
margin-top: 2px;
|
||||
|
||||
&.hide {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
&-panel {
|
||||
|
|
|
|||
|
|
@ -1,33 +1,17 @@
|
|||
const filterByKeyword = (list, keyword = '') => {
|
||||
return list.filter(x => x.shortcode.indexOf(keyword) !== -1)
|
||||
return list.filter(x => x.displayText.includes(keyword))
|
||||
}
|
||||
|
||||
const EmojiPicker = {
|
||||
mounted () {
|
||||
document.body.addEventListener('click', this.outsideClicked)
|
||||
},
|
||||
destroyed () {
|
||||
document.body.removeEventListener('click', this.outsideClicked)
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
open: false,
|
||||
keyword: '',
|
||||
activeGroup: 'standard'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
togglePanel () {
|
||||
this.open = !this.open
|
||||
},
|
||||
insideClicked (e) {
|
||||
e.stopPropagation()
|
||||
},
|
||||
outsideClicked () {
|
||||
this.open = false
|
||||
},
|
||||
onEmoji (emoji) {
|
||||
const value = emoji.image_url ? `:${emoji.shortcode}:` : emoji.utf
|
||||
const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
|
||||
this.$emit('emoji', ` ${value} `)
|
||||
this.open = false
|
||||
},
|
||||
|
|
@ -51,20 +35,17 @@ const EmojiPicker = {
|
|||
const standardEmojis = this.$store.state.instance.emoji || []
|
||||
const customEmojis = this.$store.state.instance.customEmoji || []
|
||||
return {
|
||||
standard: {
|
||||
text: 'Standard',
|
||||
icon: 'icon-star',
|
||||
emojis: filterByKeyword(standardEmojis, this.keyword)
|
||||
},
|
||||
custom: {
|
||||
text: 'Custom',
|
||||
icon: 'icon-picture',
|
||||
emojis: filterByKeyword(customEmojis, this.keyword)
|
||||
},
|
||||
standard: {
|
||||
text: 'Standard',
|
||||
icon: 'icon-star',
|
||||
emojis: filterByKeyword(standardEmojis, this.keyword)
|
||||
}
|
||||
}
|
||||
},
|
||||
serverUrl () {
|
||||
return this.$store.state.instance.server
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,31 @@
|
|||
<template>
|
||||
<div class="emoji-dropdown" @click.prevent="insideClicked">
|
||||
<span class="emoji-dropdown-toggle" @click.prevent="togglePanel">
|
||||
<i class="icon-smile"></i>
|
||||
<div class="emoji-dropdown-menu panel panel-default">
|
||||
<div class="panel-heading emoji-tabs">
|
||||
<span class="emoji-tabs-item" :class="{'active': activeGroup === key}" v-for="(value, key) in emojis" :key="key" :title="value.text" @click.prevent="highlight(key)">
|
||||
<i :class="value.icon"></i>
|
||||
</span>
|
||||
<div class="emoji-dropdown-menu panel panel-default" v-if="open">
|
||||
<div class="panel-heading emoji-tabs">
|
||||
<span class="emoji-tabs-item" :class="{'active': activeGroup === key}" v-for="(value, key) in emojis" :key="key" :title="value.text" @click.prevent="highlight(key)">
|
||||
<i :class="value.icon"></i>
|
||||
</div>
|
||||
<div class="panel-body emoji-dropdown-menu-content">
|
||||
<div class="emoji-search">
|
||||
<input type="text" class="form-control" v-model="keyword" />
|
||||
</div>
|
||||
<div class="emoji-groups" ref="emoji-groups" @scroll="scrolledGroup">
|
||||
<div v-for="(value, key) in emojis" :key="key" class="emoji-group">
|
||||
<h6 class="emoji-group-title" :ref="'group-' + key">{{value.text}}</h6>
|
||||
<span
|
||||
v-for="emoji in value.emojis"
|
||||
:key="key + emoji.displayText"
|
||||
:title="emoji.displayText"
|
||||
class="emoji-item"
|
||||
@click="onEmoji(emoji)"
|
||||
>
|
||||
<span v-if="!emoji.imageUrl">{{emoji.replacement}}</span>
|
||||
<img :src="emoji.imageUrl" v-else>
|
||||
</span>
|
||||
</div>
|
||||
<div class="panel-body emoji-dropdown-menu-content">
|
||||
<div class="emoji-search">
|
||||
<input type="text" class="form-control" v-model="keyword" />
|
||||
</div>
|
||||
<div class="emoji-groups" ref="emoji-groups" @scroll="scrolledGroup">
|
||||
<div v-for="(value, key) in emojis" :key="key" class="emoji-group">
|
||||
<h6 class="emoji-group-title" :ref="'group-' + key">{{value.text}}</h6>
|
||||
<span
|
||||
v-for="emoji in value.emojis"
|
||||
:key="key + emoji.shortcode"
|
||||
:title="emoji.shortcode"
|
||||
class="emoji-item"
|
||||
@click="onEmoji(emoji)"
|
||||
>
|
||||
<span v-if="!emoji.image_url">{{emoji.utf}}</span>
|
||||
<img :src="serverUrl + emoji.image_url" v-else>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./emoji-picker.js"></script>
|
||||
|
|
@ -119,14 +114,14 @@
|
|||
}
|
||||
|
||||
&-item {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
font-size: 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import statusPoster from '../../services/status_poster/status_poster.service.js'
|
|||
import MediaUpload from '../media_upload/media_upload.vue'
|
||||
import ScopeSelector from '../scope_selector/scope_selector.vue'
|
||||
import EmojiInput from '../emoji-input/emoji-input.vue'
|
||||
import EmojiPicker from '../emoji-picker/emoji-picker.vue'
|
||||
import PollForm from '../poll/poll_form.vue'
|
||||
import StickerPicker from '../sticker_picker/sticker_picker.vue'
|
||||
import fileTypeService from '../../services/file_type/file_type.service.js'
|
||||
|
|
@ -37,7 +36,6 @@ const PostStatusForm = {
|
|||
EmojiInput,
|
||||
PollForm,
|
||||
StickerPicker,
|
||||
EmojiSelector,
|
||||
ScopeSelector
|
||||
},
|
||||
mounted () {
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@
|
|||
<EmojiInput
|
||||
v-if="newStatus.spoilerText || alwaysShowSubject"
|
||||
v-model="newStatus.spoilerText"
|
||||
emojiPicker
|
||||
:suggest="emojiSuggestor"
|
||||
class="form-control"
|
||||
>
|
||||
|
|
@ -75,6 +76,7 @@
|
|||
<EmojiInput
|
||||
v-model="newStatus.status"
|
||||
:suggest="emojiUserSuggestor"
|
||||
emojiPicker
|
||||
class="form-control main-input"
|
||||
>
|
||||
<textarea
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue