therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

cleanup and appropriation for new emoji-input component API, styles updates

Browse source
This commit is contained in:
Henry Jameson 2019-07-28 16:07:01 +03:00
parent 4c78fdb393
commit 03c2f29b0a
22 changed files with 153 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/emoji-input/emoji-input.js
View file

@ -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'
}
}
}

54
src/components/emoji-input/emoji-input.vue
View file

@ -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 {

33
src/components/emoji-picker/emoji-picker.js
View file

@ -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
}
}
}

57
src/components/emoji-picker/emoji-picker.vue
View file

@ -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
src/components/post_status_form/post_status_form.js
View file

@ -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 () {

2
src/components/post_status_form/post_status_form.vue
View file

@ -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