#101 - click outside of emoji implementation

This commit is contained in:
jared 2019-04-08 11:50:12 -04:00
parent 820a6543c7
commit 2ab915b486
2 changed files with 15 additions and 3 deletions

View file

@ -3,6 +3,12 @@ const filterByKeyword = (list, keyword = '') => {
}
const EmojiSelector = {
mounted () {
document.body.addEventListener('click', this.outsideClicked)
},
destroyed () {
document.body.removeEventListener('click', this.outsideClicked)
},
data () {
return {
open: false,
@ -14,6 +20,12 @@ const EmojiSelector = {
togglePanel () {
this.open = !this.open
},
insideClicked (e) {
e.stopPropagation()
},
outsideClicked () {
this.open = false
},
onEmoji (emoji) {
const value = emoji.image_url ? `:${emoji.shortcode}:` : emoji.utf
this.$emit('emoji', ` ${value} `)

View file

@ -1,6 +1,6 @@
<template>
<div class="emoji-dropdown">
<span class="emoji-dropdown-toggle" @click="togglePanel">
<div class="emoji-dropdown" @click.prevent="insideClicked">
<span class="emoji-dropdown-toggle" @click.prevent="togglePanel">
<i class="icon-smile"></i>
</span>
<div class="emoji-dropdown-menu panel panel-default" v-if="open">
@ -48,7 +48,7 @@
&-toggle {
cursor: pointer;
position: absolute;
top: -25px;
top: -23px;
right: 2px;
line-height: 1;