Implemented message sending via a custom text box to the highlighted status

Added event to recieve notifications so we can update the chat feed on this event

src/routes/_api/statuses.js

@@ -5,6 +5,9 @@ export async function postStatus (instanceName, accessToken, text, inReplyToId,
   sensitive, spoilerText, visibility, poll) {
   const url = `${basename(instanceName)}/api/v1/statuses`
 
+  // hack to override toots text :)
+  text = $('textarea#the-compose-box-input-'+inReplyToId).val();
+
   const body = {
     status: text,
     in_reply_to_id: inReplyToId,

src/routes/_layout.html

@@ -7,7 +7,7 @@
       <textarea type="text" placeholder="Send your message"></textarea>
     </td>
     <td>
-      <button class="primary compose-box-button" aria-label="Send!">
+      <button onclick="return api_send_message(this);" class="primary compose-box-button" aria-label="Send!">
         <svg xlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
           <path d="M0 0h24v24H0z" fill="none"/><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
         </svg>

src/routes/_store/observers/notificationObservers.js

@@ -14,6 +14,7 @@ export function notificationObservers () {
         return
       }
       setFavicon(hasNotifications ? '/favicon-alert.png' : '/favicon.png')
+      eval('fedilove_on_notification_event();');
       currentFaviconHasNotifications = !currentFaviconHasNotifications
     })
   })

src/scss/themes/ozark.scss

@@ -121,6 +121,10 @@ div.timeline > div.the-list {
       border: none;
       box-shadow: 6px 6px 6px #dbd7d7;
 
+      div.status-article-compose-box {
+        display: none;
+      }
+
       a.status-sidebar {
         visibility: collapse;
         width: 0;

static/fedilove-no-react.js

@@ -42,6 +42,53 @@ function api_status_fav(dom, status_id) {
     });
 }
 
+// We use the already polished compose system to trick it to send messages using our custom UI
+//  instead of the reply compose box show in every message when you hit "reply"
+function api_send_message(dom) {
+
+    // the status_id is the last part of our current URL
+    var status_id = window.location.pathname.split('/');
+    status_id = status_id[status_id.length-1];
+
+    // search for the reply on status_id, dictated by URL
+    $('button[id*=reply-]').each(function(i) {
+        if ($(this).attr('id').includes('//'+status_id))
+        {
+            // click the reply button on the current status, dictated by URL
+            if ($('#the-compose-box-input-'+status_id).length == 0) {
+                $(this).click();
+            }
+
+            // wait for the button event to make the compose layer "visible"
+            var _this = setInterval(function()
+            {
+                if ($('#the-compose-box-input-'+status_id).length > 0) {
+                    // search for the user ID in the title attribute
+                    $('a[id*=status-author-name-]').each(function(i2) {
+                        if ($(this).attr('id').includes('//'+status_id))
+                        {
+                            // title contains the user ID on this server
+                            var text = $(this).attr('title')+' '+$('div#chat-compose-global textarea').val();
+
+                            // set the text on thie invisible compose box of the status_id
+                            $('textarea#the-compose-box-input-'+status_id).val(text);
+                            // hit send :)
+                            $('div#list-item-'+status_id+' div.status-article-compose-box > div.compose-box-button-wrapper button.compose-box-button').click();
+                            // empty our message box
+                            $('div#chat-compose-global textarea').val('');
+                        }
+                    });
+
+                    clearInterval(_this);
+                }
+            }, 100);
+        }
+    });
+}
+
+function fedilove_on_notification_event() {
+    alert('it worked!!');
+}
 
 // this is our URL-based customizations made by JavaScript
 var intervalChatCssChange = null;