#101 - bind outside click, add emoji to post status form

This commit is contained in:
jared 2019-04-08 12:02:50 -04:00
parent 2ab915b486
commit 885f4c9924
4 changed files with 59 additions and 21 deletions

View File

@ -108,7 +108,6 @@ const EmojiInput = {
}, },
onEmoji (emoji) { onEmoji (emoji) {
const newValue = this.value.substr(0, this.caret) + emoji + this.value.substr(this.caret) const newValue = this.value.substr(0, this.caret) + emoji + this.value.substr(this.caret)
this.$refs.input.focus()
this.$emit('input', newValue) this.$emit('input', newValue)
this.caret += emoji.length this.caret += emoji.length
setTimeout(() => { setTimeout(() => {

View File

@ -92,6 +92,10 @@
&-search { &-search {
padding: 5px; padding: 5px;
input {
width: 100%;
}
} }
&-groups { &-groups {

View File

@ -2,6 +2,7 @@ import statusPoster from '../../services/status_poster/status_poster.service.js'
import MediaUpload from '../media_upload/media_upload.vue' import MediaUpload from '../media_upload/media_upload.vue'
import ScopeSelector from '../scope_selector/scope_selector.vue' import ScopeSelector from '../scope_selector/scope_selector.vue'
import EmojiInput from '../emoji-input/emoji-input.vue' import EmojiInput from '../emoji-input/emoji-input.vue'
import EmojiSelector from '../emoji-selector/emoji-selector.vue'
import fileTypeService from '../../services/file_type/file_type.service.js' import fileTypeService from '../../services/file_type/file_type.service.js'
import Completion from '../../services/completion/completion.js' import Completion from '../../services/completion/completion.js'
import { take, filter, reject, map, uniqBy } from 'lodash' import { take, filter, reject, map, uniqBy } from 'lodash'
@ -32,7 +33,8 @@ const PostStatusForm = {
components: { components: {
MediaUpload, MediaUpload,
ScopeSelector, ScopeSelector,
EmojiInput EmojiInput,
EmojiSelector
}, },
mounted () { mounted () {
this.resize(this.$refs.textarea) this.resize(this.$refs.textarea)
@ -233,6 +235,29 @@ const PostStatusForm = {
onKeydown (e) { onKeydown (e) {
e.stopPropagation() e.stopPropagation()
}, },
onEmoji (emoji) {
const newValue = this.newStatus.status.substr(0, this.caret) + emoji + this.newStatus.status.substr(this.caret)
this.newStatus.status = newValue
this.caret += emoji.length
setTimeout(() => {
this.updateCaretPos()
})
},
updateCaretPos () {
const elem = this.$refs.textarea
if (elem.createTextRange) {
const range = elem.createTextRange()
range.move('character', this.caret)
range.select()
} else {
if (elem.selectionStart) {
elem.focus()
elem.setSelectionRange(this.caret, this.caret)
} else {
elem.focus()
}
}
},
setCaret ({target: {selectionStart}}) { setCaret ({target: {selectionStart}}) {
this.caret = selectionStart this.caret = selectionStart
}, },

View File

@ -20,25 +20,28 @@
v-model="newStatus.spoilerText" v-model="newStatus.spoilerText"
classname="form-control" classname="form-control"
/> />
<textarea <div class="status-input-wrapper">
ref="textarea" <textarea
@click="setCaret" ref="textarea"
@keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control" @click="setCaret"
@keydown="onKeydown" @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control"
@keydown.down="cycleForward" @keydown="onKeydown"
@keydown.up="cycleBackward" @keydown.down="cycleForward"
@keydown.shift.tab="cycleBackward" @keydown.up="cycleBackward"
@keydown.tab="cycleForward" @keydown.shift.tab="cycleBackward"
@keydown.enter="replaceCandidate" @keydown.tab="cycleForward"
@keydown.meta.enter="postStatus(newStatus)" @keydown.enter="replaceCandidate"
@keyup.ctrl.enter="postStatus(newStatus)" @keydown.meta.enter="postStatus(newStatus)"
@drop="fileDrop" @keyup.ctrl.enter="postStatus(newStatus)"
@dragover.prevent="fileDrag" @drop="fileDrop"
@input="resize" @dragover.prevent="fileDrag"
@paste="paste" @input="resize"
:disabled="posting" @paste="paste"
> :disabled="posting"
</textarea> >
</textarea>
<EmojiSelector @emoji="onEmoji" />
</div>
<div class="visibility-tray"> <div class="visibility-tray">
<span class="text-format" v-if="formattingOptionsEnabled"> <span class="text-format" v-if="formattingOptionsEnabled">
<label for="post-content-type" class="select"> <label for="post-content-type" class="select">
@ -179,6 +182,13 @@
} }
} }
.status-input-wrapper {
display: flex;
position: relative;
width: 100%;
flex-direction: column;
}
.attachments { .attachments {
padding: 0 0.5em; padding: 0 0.5em;