Emoji picker inserts emojis and can be closed

resources/js/components/forms/editor.vue

@@ -63,11 +63,11 @@ export default class VueEditor extends Vue {
     }
   }
 
-  insertImage(href, title) {
+  insertImage(href: string, title: string) {
     this.editor!.insertImage(href, title);
   }
 
-  insertLink(href, title) {
+  insertLink(href: string, title: string) {
     this.editor!.insertLink(href, title);
   }
 
@@ -87,35 +87,35 @@ export default class VueEditor extends Vue {
     this.editor!.putStrikeThrough();
   }
 
-  insertBlockQuote(placeholder) {
+  insertBlockQuote(placeholder: string) {
     this.editor!.putBlockQuote(placeholder);
   }
 
-  makeLink(placeholder) {
+  makeLink(placeholder: string) {
     this.editor!.putLink(placeholder);
   }
 
-  makeImage(placeholder) {
+  makeImage(placeholder: string) {
     this.editor!.putImage(placeholder);
   }
 
-  makeKeyNotation(key) {
+  makeKeyNotation(key: string) {
     this.editor!.putKey(key);
   }
 
-  appendBlockQuote(content) {
+  appendBlockQuote(content: string) {
     this.editor!.appendBlockQuote(content);
   }
 
-  appendUserMention(username) {
+  appendUserMention(username: string) {
     this.editor!.appendUserMention(username);
   }
 
-  insertListOrdered(placeholder) {
+  insertListOrdered(placeholder: string) {
     this.editor!.putListOrdered(placeholder);
   }
 
-  insertListUnordered(placeholder) {
+  insertListUnordered(placeholder: string) {
     this.editor!.putListUnordered(placeholder);
   }
 
@@ -131,10 +131,14 @@ export default class VueEditor extends Vue {
     this.editor!.indentLess();
   }
 
-  addTable(header, placeholder) {
+  addTable(header: string, placeholder: string) {
     this.editor!.putTable(index => header + ' ' + (index + 1), placeholder);
   }
 
+  insertEmoji(emojiName: string) {
+    this.editor!.insertEmoji(emojiName);
+  }
+
   focus() {
     this.editor!.focus();
   }

resources/js/components/forms/emoji-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="emoji-picker">
+  <div class="emoji-picker" v-on-clickaway="blur">
     <div class="card card-body">
       <div style="display:flex; flex-direction:column;">
         <div class="emoji-grid">
@@ -15,7 +15,8 @@
                     :src="url(emojis.emoticons[code])"
                     :title="emojis.emoticons[code].name"
                     :alt="emojis.emoticons[code].native"
-                    @mouseover="mouseOver(emojis.emoticons[code])"/>
+                    @mouseover="mouseOver(emojis.emoticons[code])"
+                    @click="select(code)"/>
                 </template>
               </div>
             </div>
@@ -37,7 +38,7 @@
 
         <div class="search-box">
           <input class="form-control" v-model="searchPhrase" placeholder="Wyszukaj emoji..."/>
-          <button class="btn btn-primary" type="button">
+          <button class="btn btn-primary" type="button" ref="close-button" @click="close">
             <i class="fas fa-times"/>
             Zamknij
           </button>
@@ -48,7 +49,10 @@
 </template>
 
 <script>
+import {mixin as clickAway} from 'vue-clickaway';
+
 export default {
+  mixins: [clickAway],
   props: {
     emojis: {require: true},
   },
@@ -59,6 +63,17 @@ export default {
     };
   },
   methods: {
+    select(emoji) {
+      this.$emit('input', emoji);
+    },
+    blur(blurEvent) {
+      if (this.isDesktop()) {
+        this.$emit('blur', blurEvent);
+      }
+    },
+    close(closeEvent) {
+      this.$emit('close', closeEvent);
+    },
     url(emoji) {
       return 'https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/svg/' + emoji.unified + '.svg';
     },
@@ -76,6 +91,9 @@ export default {
       }
       return false;
     },
+    clearSearchPhrase() {
+      this.searchPhrase = '';
+    },
     keywords(emoji) {
       if (emoji) {
         return emoji.keywords.map(keyword => '"' + keyword + '"').join(", ");
@@ -87,6 +105,10 @@ export default {
     },
     mouseLeave() {
       this.emoji = null;
+    },
+    isDesktop() {
+      const style = window.getComputedStyle(this.$refs["close-button"]);
+      return style.display === 'none';
     }
   },
   computed: {

resources/js/components/forms/markdown.vue

@@ -35,9 +35,14 @@
 
       <div v-show="isPreview" v-html="previewHtml" class="preview post-content"/>
 
-      <div class="emoji-picker-container">
+      <div v-if="emojiPickerOpen" class="emoji-picker-container">
         <div class="triangle"/>
-        <vue-emoji-picker :emojis="emojis"/>
+        <vue-emoji-picker
+          ref="emoji-picker"
+          :emojis="emojis"
+          @input="insertEmoji"
+          @blur="blurEmojiPicker"
+          @close="closeEmojiPicker"/>
       </div>
     </div>
 
@@ -132,6 +137,7 @@ export default class VueMarkdown extends Vue {
   isProcessing = false;
   progress = 0;
   tabs: string[] = [CONTENT, PREVIEW];
+  emojiPickerOpen = false;
   buttons = {
     bold: {
       click: this.makeBold,
@@ -232,8 +238,7 @@ export default class VueMarkdown extends Vue {
       icon: 'fa-indent'
     },
     insertEmoji: {
-      click: () => {
-      },
+      click: this.toggleEmojiPicker,
       can: false,
       title: 'Dodaj emotikonę',
       break: 'Dodanie tutaj emotikony mogłoby spowodować uszkodzenie składni',
@@ -247,6 +252,9 @@ export default class VueMarkdown extends Vue {
   @Ref('search')
   readonly search!: HTMLInputElement;
 
+  @Ref('emoji-picker')
+  readonly emojiPicker!: any;
+
   @Prop()
   value!: string;
 
@@ -298,9 +306,9 @@ export default class VueMarkdown extends Vue {
 
   insertAssetAtCaret(asset: Asset) {
     if (isImage(asset.name!)) {
-      this.editor.insertImage(asset.url, asset.name);
+      this.editor.insertImage(asset.url, asset.name!);
     } else {
-      this.editor.insertLink(asset.url, asset.name);
+      this.editor.insertLink(asset.url, asset.name!);
     }
   }
 
@@ -326,7 +334,7 @@ export default class VueMarkdown extends Vue {
     this.buttons.key.can = state.canKey;
     this.buttons.indentMore.can = state.canIndent;
     this.buttons.indentLess.can = state.canIndent;
-    this.buttons.insertEmoji.can = true;
+    this.buttons.insertEmoji.can = state.canEmoji;
   }
 
   autocomplete(nick: string) {
@@ -413,6 +421,10 @@ export default class VueMarkdown extends Vue {
     this.editor.indentLess()
   }
 
+  insertEmoji(emoji: string) {
+    this.editor.insertEmoji(emoji);
+  }
+
   appendBlockQuote(username: string, postId: number, content: string) {
     const title = username + ' napisał(a)';
     const href = '/Forum/' + postId;
@@ -424,6 +436,37 @@ export default class VueMarkdown extends Vue {
     this.editor.appendUserMention(username);
   }
 
+  toggleEmojiPicker() {
+    this.emojiPickerOpen = !this.emojiPickerOpen;
+    this.$nextTick(() => {
+      if (this.emojiPicker) {
+        this.emojiPicker.clearSearchPhrase();
+      }
+    });
+  }
+
+  blurEmojiPicker(event: Event) {
+    if (!this.isEmojiToggleControl(event.target as HTMLElement)) {
+      this.closeEmojiPicker();
+    }
+  }
+
+  closeEmojiPicker() {
+    this.emojiPickerOpen = false;
+  }
+
+  isEmojiToggleControl(element: HTMLElement) {
+    if (element.title === 'Dodaj emotikonę') {
+      return true;
+    }
+    if (element.parentElement) {
+      if (element.parentElement.title === 'Dodaj emotikonę') {
+        return true;
+      }
+    }
+    return false;
+  }
+
   focus() {
     this.editor.focus();
   }