From 2ab915b48680b3c176a201700b2dd7e859329b05 Mon Sep 17 00:00:00 2001
From: jared <jaredrmain@gmail.com>
Date: Mon, 8 Apr 2019 11:50:12 -0400
Subject: [PATCH] #101 - click outside of emoji implementation
---
src/components/emoji-selector/emoji-selector.js | 12 ++++++++++++
src/components/emoji-selector/emoji-selector.vue | 6 +++---
2 files changed, 15 insertions(+), 3 deletions(-)
diff --git a/src/components/emoji-selector/emoji-selector.js b/src/components/emoji-selector/emoji-selector.js
index 6d45df1f..969b880b 100644
--- a/src/components/emoji-selector/emoji-selector.js
+++ b/src/components/emoji-selector/emoji-selector.js
@@ -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} `)
diff --git a/src/components/emoji-selector/emoji-selector.vue b/src/components/emoji-selector/emoji-selector.vue
index d5d63543..98d2642e 100644
--- a/src/components/emoji-selector/emoji-selector.vue
+++ b/src/components/emoji-selector/emoji-selector.vue
@@ -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;