Emoji feature done! (well enough) + some fixes

src/routes/_actions/emoji.js

@@ -32,11 +32,15 @@ export async function setupCustomEmojiForInstance (instanceName) {
 
 export function insertEmoji (realm, emoji) {
   const emojiText = emoji.unicode || `:${emoji.name}:`
-  const { composeSelectionStart } = store.get()
-  const idx = composeSelectionStart || 0
-  const oldText = store.getComposeData(realm, 'text') || ''
-  const pre = oldText.substring(0, idx)
-  const post = oldText.substring(idx)
-  const newText = `${pre}${emojiText} ${post}`
-  store.setComposeData(realm, { text: newText })
+  if (window.location.pathname.startsWith('/statuses/')) {
+    window.fediloveEvents.onEmojiPicked(emojiText);
+  } else {
+    const { composeSelectionStart } = store.get()
+    const idx = composeSelectionStart || 0
+    const oldText = store.getComposeData(realm, 'text') || ''
+    const pre = oldText.substring(0, idx)
+    const post = oldText.substring(idx)
+    const newText = `${pre}${emojiText} ${post}`
+    store.setComposeData(realm, { text: newText })
+  }
 }

src/routes/_components/dialog/components/EmojiDialog.html

@@ -10,7 +10,7 @@
       ref:picker
       locale={emojiPickerLocale}
       data-source={emojiPickerDataSource}
-      class={darkMode ? 'dark' : 'light'}
+      class="light"
       on:emoji-click="onEmojiSelected(event)"
       on:keydown="onPickerKeydown(event)"
     ></emoji-picker>

src/routes/_database/timelines/insertion.js

@@ -118,13 +118,6 @@ export async function insertTimelineItems (instanceName, timeline, timelineItems
     return insertTimelineNotifications(instanceName, timeline, timelineItems)
   } else if (timeline.startsWith('status/') || timeline.startsWith('/statuses/')) {
     const statusId = timeline.split('/').slice(-1)[0]
-    var _this = setInterval(function() {
-        const elem = $('div.the-list > div.list-item > article.status-in-own-thread');
-        if ( elem.length > 0 && elem.is(':visible') ) {
-            clearInterval(_this);
-            setTimeout(function() { window.fediloveEvents.onMessagesLoaded(); }, 250);
-        }
-    }, 100);
     return insertStatusThread(instanceName, statusId, timelineItems)
   } else {
     return insertTimelineStatuses(instanceName, timeline, timelineItems)

src/routes/_layout.html

@@ -3,7 +3,14 @@
 <div id="chat-compose-global" style="visibility: collapse">
   <table class="compose"><tbody>
     <tr>
-    <td><div id="tools-placeholder"></div></td>
+    <td>
+      <IconButton
+        className="emoji"
+        label="{intl.addEmoji}"
+        href="#fa-smile"
+        on:click="onEmojiClick()"
+      />
+    </td>
     <td>
       <textarea type="text" placeholder="Send your message"></textarea>
     </td>
@@ -35,11 +42,14 @@
 <script>
   import { store } from './_store/store'
   import { observe } from 'svelte-extras'
+  import { importShowEmojiDialog } from './_components/dialog/asyncDialogs/importShowEmojiDialog'
+  import { updateCustomEmojiForInstance } from './_actions/emoji'
 
   export default {
     components: {
       Nav: './_components/Nav.html',
-      InformationalFooter: './_components/InformationalFooter.html'
+      InformationalFooter: './_components/InformationalFooter.html',
+      IconButton: './_components/IconButton.html'
     },
     oncreate () {
       if (process.browser && process.env.NODE_ENV !== 'production') {
@@ -57,7 +67,16 @@
       infiniteScrollPage: ({ $isUserLoggedIn, page }) => $isUserLoggedIn && !page.startsWith('settings')
     },
     methods: {
-      observe
+      observe,
+      async onEmojiClick () {
+        const { realm } = this.get()
+        const { currentInstance } = this.store.get()
+        const [showEmojiDialog] = await Promise.all([
+          importShowEmojiDialog(),
+          updateCustomEmojiForInstance(currentInstance)
+        ])
+        showEmojiDialog(realm)
+      }
     }
   }
 </script>

src/scss/themes/ozark.scss

@@ -119,6 +119,12 @@ div.main-content.chat {
     display: none;
   }
 }
+div.main-content.direct {
+  div.timeline-slot-reveal-container {
+    visibility: collapse;
+    display: none;
+  }
+}
 
 div.timeline > div.the-list {
   div.list-item {

static/fedilove-no-react.js

@@ -96,12 +96,6 @@ var fediloveUI = {
                 clearInterval(_this);
             }
         }, 150);
-    },
-    paintToolbarCompose: function() {
-        if (fediloveData.toolbarElement != null) {
-            console.log(fediloveData.toolbarElement);
-            $('#chat-compose-global #tools-placeholder').html(fediloveData.toolbarElement);
-        }
     }
 };
 
@@ -119,26 +113,17 @@ var fediloveApi = {
         return parts[parts.length-1];
     }
 };
+var fediloveReact = {};
 var fediloveFunctions = {};
 var fediloveData = {
-    currentChat: null,
-    toolbarFilled: false,
-    toolbarElement: null
+    currentChat: null
 };
 var fediloveEvents = {
-    onMessagesLoaded: function () {
-        if (fediloveData.toolbarFilled) return true;
-
-        fediloveData.toolbarFilled = true;
-
-        // click on the reply button on the highlighted message (only once, save state)
-        $('div.the-list > div.list-item > article.status-in-own-thread > div.status-toolbar > button.status-toolbar-reply-button').click();
-
-        // load the highlighted message compose tools on our custom compose bar to re-use functionality
-        setTimeout(function() {
-            fediloveData.toolbarElement = $('div.the-list > div.list-item > article.status-in-own-thread > div.status-article-compose-box div.compose-box-toolbar').clone();
-            fediloveUI.paintToolbarCompose();
-        }, 500);
+    onEmojiPicked: function(emoji) {
+        var $txt = $("#chat-compose-global textarea");
+        var caretPos = $txt[0].selectionStart;
+        var textAreaTxt = $txt.val();
+        $txt.val(textAreaTxt.substring(0, caretPos) + emoji + textAreaTxt.substring(caretPos));
     },
     onNewNotification: function (dataItems) {
         if (window.location.pathname.startsWith('/statuses/')) {
@@ -162,7 +147,6 @@ function fedilove_customization() {
     {
         $('div.main-content').addClass('chat');
         document.querySelector('#chat-compose-global').style = '';
-        fediloveUI.paintToolbarCompose();
 
         // add some animations
         var style = document.createElement('style');
@@ -214,10 +198,11 @@ function fedilove_customization() {
             makeMessageUIModifications(localStorage.store_userAccountId);
         }
     }
+    else if (window.location.pathname == '/direct') {
+        $('div.main-content').addClass('direct');
+    }
     else if (window.location.pathname.startsWith('/notifications/mentions')) {
         $('nav.notification-filters li > a.focus-fix').attr('onclick', 'return false;');
-    } else {
-        fediloveData.toolbarFilled = false;
     }
 }