Loading and emoji preview

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, EmojiUrl} from "@riddled/4play";
 
 @Component
 export default class VueEditor extends Vue {
@@ -18,6 +18,8 @@ export default class VueEditor extends Vue {
   readonly placeholder!: string;
   @Prop()
   readonly autocompleteSource!: Function
+  @Prop()
+  readonly emojiUrl!: EmojiUrl
 
   @Ref('view')
   readonly view!: HTMLElement;
@@ -33,6 +35,7 @@ export default class VueEditor extends Vue {
       username => this.autocompleteSource(username),
       'Zwykły tekst',
       this.codeBlockLanguages(),
+      this.emojiUrl,
     );
   }
 

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: {

resources/js/components/forms/markdown.vue

@@ -26,6 +26,7 @@
             placeholder="Kliknij, aby dodać treść..."
             :autocompleteSource="autocomplete"
             v-paste:success="addAsset"
+            :emojiUrl="emojiUrl"
             @submit="save"
             @cancel="cancel"
             @state="updateState"/>
@@ -35,7 +36,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"
@@ -467,6 +468,14 @@ export default class VueMarkdown extends Vue {
     return false;
   }
 
+  emojiUrl(emojiName: string) {
+    const emoticon = this.emojis?.emoticons[emojiName];
+    if (emoticon) {
+      return 'https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/svg/' + emoticon.unified + '.svg'
+    }
+    return '';
+  }
+
   focus() {
     this.editor.focus();
   }

resources/sass/components/forms/_emoji-picker.scss

@@ -162,6 +162,11 @@
           }
         }
       }
+
+      .loading {
+        padding: 1.75rem;
+        text-align: center;
+      }
     }
   }
 }