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

View File

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