#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) {
const newValue = this.value.substr(0, this.caret) + emoji + this.value.substr(this.caret)
this.$refs.input.focus()
this.$emit('input', newValue)
this.caret += emoji.length
setTimeout(() => {

View file

@ -92,6 +92,10 @@
&-search {
padding: 5px;
input {
width: 100%;
}
}
&-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 ScopeSelector from '../scope_selector/scope_selector.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 Completion from '../../services/completion/completion.js'
import { take, filter, reject, map, uniqBy } from 'lodash'
@ -32,7 +33,8 @@ const PostStatusForm = {
components: {
MediaUpload,
ScopeSelector,
EmojiInput
EmojiInput,
EmojiSelector
},
mounted () {
this.resize(this.$refs.textarea)
@ -233,6 +235,29 @@ const PostStatusForm = {
onKeydown (e) {
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}}) {
this.caret = selectionStart
},

View file

@ -20,6 +20,7 @@
v-model="newStatus.spoilerText"
classname="form-control"
/>
<div class="status-input-wrapper">
<textarea
ref="textarea"
@click="setCaret"
@ -39,6 +40,8 @@
:disabled="posting"
>
</textarea>
<EmojiSelector @emoji="onEmoji" />
</div>
<div class="visibility-tray">
<span class="text-format" v-if="formattingOptionsEnabled">
<label for="post-content-type" class="select">
@ -179,6 +182,13 @@
}
}
.status-input-wrapper {
display: flex;
position: relative;
width: 100%;
flex-direction: column;
}
.attachments {
padding: 0 0.5em;