fixed some bugs, added spam mode, minor collateral fixes

This commit is contained in:
Henry Jameson 2019-09-08 15:51:17 +03:00
parent db086fe1fd
commit 14df84d89b
9 changed files with 69 additions and 24 deletions

View file

@ -77,7 +77,9 @@ const EmojiInput = {
caret: 0, caret: 0,
focused: false, focused: false,
blurTimeout: null, blurTimeout: null,
showPicker: false showPicker: false,
spamMode: false,
disableClickOutside: false
} }
}, },
components: { components: {
@ -100,7 +102,7 @@ const EmojiInput = {
})) }))
}, },
showSuggestions () { showSuggestions () {
return this.focused && this.suggestions && this.suggestions.length > 0 return this.focused && this.suggestions && this.suggestions.length > 0 && !this.showPicker
}, },
textAtCaret () { textAtCaret () {
return (this.wordAtCaret || {}).word || '' return (this.wordAtCaret || {}).word || ''
@ -142,6 +144,13 @@ const EmojiInput = {
methods: { methods: {
triggerShowPicker () { triggerShowPicker () {
this.showPicker = true this.showPicker = true
// This temporarily disables "click outside" handler
// since external trigger also means click originates
// from outside, thus preventing picker from opening
this.disableClickOutside = true
setTimeout(() => {
this.disableClickOutside = false
}, 0)
}, },
togglePicker () { togglePicker () {
this.showPicker = !this.showPicker this.showPicker = !this.showPicker
@ -151,12 +160,13 @@ const EmojiInput = {
this.$emit('input', newValue) this.$emit('input', newValue)
this.caret = 0 this.caret = 0
}, },
insert (insertion) { insert ({ insertion, spamMode }) {
const newValue = [ const newValue = [
this.value.substring(0, this.caret), this.value.substring(0, this.caret),
insertion, insertion,
this.value.substring(this.caret) this.value.substring(this.caret)
].join('') ].join('')
this.spamMode = spamMode
this.$emit('input', newValue) this.$emit('input', newValue)
const position = this.caret + insertion.length const position = this.caret + insertion.length
@ -191,7 +201,7 @@ const EmojiInput = {
}, },
cycleBackward (e) { cycleBackward (e) {
const len = this.suggestions.length || 0 const len = this.suggestions.length || 0
if (len > 0) { if (len > 1) {
this.highlighted -= 1 this.highlighted -= 1
if (this.highlighted < 0) { if (this.highlighted < 0) {
this.highlighted = this.suggestions.length - 1 this.highlighted = this.suggestions.length - 1
@ -203,7 +213,7 @@ const EmojiInput = {
}, },
cycleForward (e) { cycleForward (e) {
const len = this.suggestions.length || 0 const len = this.suggestions.length || 0
if (len > 0) { if (len > 1) {
this.highlighted += 1 this.highlighted += 1
if (this.highlighted >= len) { if (this.highlighted >= len) {
this.highlighted = 0 this.highlighted = 0
@ -234,7 +244,10 @@ const EmojiInput = {
this.blurTimeout = null this.blurTimeout = null
} }
console.log(this.spamMode)
if (!this.spamMode) {
this.showPicker = false this.showPicker = false
}
this.focused = true this.focused = true
this.setCaret(e) this.setCaret(e)
this.resize() this.resize()
@ -280,7 +293,8 @@ const EmojiInput = {
this.resize() this.resize()
this.$emit('input', e.target.value) this.$emit('input', e.target.value)
}, },
onClickOutside () { onClickOutside (e) {
if (this.disableClickOutside) return
this.showPicker = false this.showPicker = false
}, },
onStickerUploaded (e) { onStickerUploaded (e) {

View file

@ -13,9 +13,11 @@ const EmojiPicker = {
}, },
data () { data () {
return { return {
labelKey: String(Math.random() * 100000),
keyword: '', keyword: '',
activeGroup: 'custom', activeGroup: 'custom',
showingStickers: false showingStickers: false,
spamMode: false
} }
}, },
components: { components: {
@ -24,8 +26,7 @@ const EmojiPicker = {
methods: { methods: {
onEmoji (emoji) { onEmoji (emoji) {
const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
this.$emit('emoji', ` ${value} `) this.$emit('emoji', { insertion: ` ${value} `, spamMode: this.spamMode })
this.open = false
}, },
highlight (key) { highlight (key) {
const ref = this.$refs['group-' + key] const ref = this.$refs['group-' + key]

View file

@ -10,29 +10,48 @@
margin: 0 !important; margin: 0 !important;
z-index: 1; z-index: 1;
.panel-body { .spam-mode {
padding: 7px;
line-height: normal;
}
.spam-mode-label {
padding: 7px;
}
.heading {
display: flex;
height: 32px;
padding: 10px 7px 5px;
}
.content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 1 0; flex: 1 1 0;
min-height: 0px; min-height: 0px;
} }
.emoji-tabs {
flex-grow: 1;
}
.additional-tabs { .additional-tabs {
border-left: 1px solid; border-left: 1px solid;
border-left-color: $fallback--icon; border-left-color: $fallback--icon;
border-left-color: var(--icon, $fallback--icon); border-left-color: var(--icon, $fallback--icon);
padding-left: 5px; padding-left: 7px;
flex: 0 0 0; flex: 0 0 0;
} }
.emoji-tabs {
flex: 1 1 0;
}
.additional-tabs, .additional-tabs,
.emoji-tabs { .emoji-tabs {
display: block;
min-width: 0;
flex-basis: auto;
flex-shrink: 1;
&-item { &-item {
padding: 0 5px; padding: 0 7px;
cursor: pointer; cursor: pointer;
font-size: 24px; font-size: 24px;

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="emoji-picker panel panel-default"> <div class="emoji-picker panel panel-default panel-body">
<div class="panel-heading"> <div class="heading">
<span class="emoji-tabs"> <span class="emoji-tabs">
<span <span
v-for="group in emojis" v-for="group in emojis"
@ -30,7 +30,7 @@
</span> </span>
</span> </span>
</div> </div>
<div class="panel-body"> <div class="content">
<div <div
class="emoji-content" class="emoji-content"
:class="{hidden: showingStickers}" :class="{hidden: showingStickers}"
@ -74,6 +74,16 @@
</span> </span>
</div> </div>
</div> </div>
<div
class="spam-mode"
>
<input
:id="labelKey + 'spam-mode'"
v-model="spamMode"
type="checkbox"
>
<label class="spam-mode-label" :for="labelKey + 'spam-mode'">{{ $t('emoji.spam') }}</label>
</div>
</div> </div>
<div <div
v-if="showingStickers" v-if="showingStickers"

View file

@ -282,7 +282,7 @@ const PostStatusForm = {
target.style.height = null target.style.height = null
} }
}, },
showEmoji () { showEmojiPicker () {
this.$refs['textarea'].focus() this.$refs['textarea'].focus()
this.$refs['emoji-input'].triggerShowPicker() this.$refs['emoji-input'].triggerShowPicker()
}, },

View file

@ -170,7 +170,7 @@
<i <i
:title="$t('emoji.add_emoji')" :title="$t('emoji.add_emoji')"
class="icon-smile btn btn-default" class="icon-smile btn btn-default"
@click.stop.prevent="showEmoji" @click="showEmojiPicker"
/> />
</div> </div>
<div <div

View file

@ -413,7 +413,7 @@
v-if="replying" v-if="replying"
class="container" class="container"
> >
<post-status-form <PostStatusForm
class="reply-body" class="reply-body"
:reply-to="status.id" :reply-to="status.id"
:attentions="status.attentions" :attentions="status.attentions"

View file

@ -11,7 +11,7 @@
rounded="top" rounded="top"
/> />
<div class="panel-footer"> <div class="panel-footer">
<post-status-form v-if="user" /> <PostStatusForm v-if="user" />
</div> </div>
</div> </div>
<auth-form <auth-form

View file

@ -109,6 +109,7 @@
"emoji": { "emoji": {
"stickers": "Stickers", "stickers": "Stickers",
"emoji": "Emoji", "emoji": "Emoji",
"spam": "Keep open after adding emoji",
"search_emoji": "Search for an emoji", "search_emoji": "Search for an emoji",
"add_emoji": "Insert emoji", "add_emoji": "Insert emoji",
"custom": "Custom emoji", "custom": "Custom emoji",