Add emoji preview, autocomplete and loading

pradoslaw · Dec 5, 2023 · c4a52cd · c4a52cd
1 parent d3fbb6d
commit c4a52cd
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 7 deletions.
diff --git a/resources/js/components/forms/editor.vue b/resources/js/components/forms/editor.vue
@@ -7,7 +7,7 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
 import {Emit, Prop, Ref, Watch} from "vue-property-decorator";
-import {CodeBlockLanguages, Editor4Play, EditorState} from "@riddled/4play";
+import {CodeBlockLanguages, Editor4Play, EditorState, Emojis, EmojiUrl} from "@riddled/4play";
 
 @Component
 export default class VueEditor extends Vue {
@@ -18,6 +18,10 @@ export default class VueEditor extends Vue {
   readonly placeholder!: string;
   @Prop()
   readonly autocompleteSource!: Function
+  @Prop()
+  readonly emojiUrl!: EmojiUrl
+  @Prop()
+  readonly emojis!: Emojis
 
   @Ref('view')
   readonly view!: HTMLElement;
@@ -33,6 +37,8 @@ export default class VueEditor extends Vue {
       username => this.autocompleteSource(username),
       'Zwykły tekst',
       this.codeBlockLanguages(),
+      this.emojiUrl,
+      this.emojis,
     );
   }
 

diff --git a/resources/js/components/forms/emoji-picker.vue b/resources/js/components/forms/emoji-picker.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="emoji-picker" v-on-clickaway="blur">
     <div class="card card-body">
-      <div style="display:flex; flex-direction:column;">
+      <div style="display:flex; flex-direction:column;" v-if="complete">
         <div class="emoji-grid">
           <div class="emoji-scroll" @mouseleave="mouseLeave">
             <div class="category" v-for="category in emojis.categories">
@@ -44,24 +44,41 @@
           </button>
         </div>
       </div>
+      <div class="loading" v-else>
+        Ładowanie...
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import {mixin as clickAway} from 'vue-clickaway';
 
+function onIdle(callback) {
+  if ("requestIdleCallback" in window) {
+    window.requestIdleCallback(callback);
+  } else {
+    setTimeout(callback, 500);
+  }
+}
+
 export default {
   mixins: [clickAway],
   props: {
     emojis: {require: true},
   },
   data() {
     return {
+      complete: false,
       searchPhrase: '',
       emoji: null,
     };
   },
+  mounted() {
+    onIdle(() => {
+      this.complete = true;
+    });
+  },
   methods: {
     select(emoji) {
       this.$emit('input', emoji);
@@ -107,8 +124,12 @@ export default {
       this.emoji = null;
     },
     isDesktop() {
-      const style = window.getComputedStyle(this.$refs["close-button"]);
-      return style.display === 'none';
+      const closeButton = this.$refs["close-button"];
+      if (closeButton) {
+        const style = window.getComputedStyle(closeButton);
+        return style.display === 'none';
+      }
+      return false;
     }
   },
   computed: {

diff --git a/resources/js/components/forms/help.vue b/resources/js/components/forms/help.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="markdown-help">
     <div class="card card-info">
-      <div class="card-header">Pomoc <span class="card-version">1.16.5</span></div>
+      <div class="card-header">Pomoc <span class="card-version">1.16.6</span></div>
       <div class="card-body">
         <div class="row">
           <div class="col-md-6">

diff --git a/resources/js/components/forms/markdown.vue b/resources/js/components/forms/markdown.vue
@@ -26,6 +26,8 @@
             placeholder="Kliknij, aby dodać treść..."
             :autocompleteSource="autocomplete"
             v-paste:success="addAsset"
+            :emojiUrl="emojiUrl"
+            :emojis="emojisProperty"
             @submit="save"
             @cancel="cancel"
             @state="updateState"/>
@@ -35,7 +37,7 @@
 
       <div v-show="isPreview" v-html="previewHtml" class="preview post-content"/>
 
-      <div v-if="emojiPickerOpen" class="emoji-picker-container">
+      <div v-show="emojiPickerOpen" class="emoji-picker-container">
         <div class="triangle"/>
         <vue-emoji-picker
           ref="emoji-picker"
@@ -96,7 +98,7 @@
 </template>
 
 <script lang="ts">
-import {Asset, Emojis} from '@/types/models';
+import {Asset, Emoji, Emojis} from '@/types/models';
 import {EditorState, link} from "@riddled/4play/index.js";
 import axios from 'axios';
 import Prism from 'prismjs';
@@ -467,6 +469,28 @@ export default class VueMarkdown extends Vue {
     return false;
   }
 
+  emojiUrl(emojiName: string): string | null {
+    const emoticon = this.emojis?.emoticons[emojiName];
+    if (emoticon) {
+      return 'https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/svg/' + emoticon.unified + '.svg'
+    }
+    return null;
+  }
+
+  get emojisProperty() {
+    if (!this.emojis) {
+      return {};
+    }
+    return Object.fromEntries(Object
+      .values(this.emojis?.emoticons)
+      .map((emoji: Emoji) => {
+        return [
+          ':' + emoji.id + ':',
+          emoji.name
+        ]
+      }));
+  }
+
   focus() {
     this.editor.focus();
   }

diff --git a/resources/sass/components/forms/_emoji-picker.scss b/resources/sass/components/forms/_emoji-picker.scss
@@ -162,6 +162,11 @@
           }
         }
       }
+
+      .loading {
+        padding: 1.75rem;
+        text-align: center;
+      }
     }
   }
 }