jsAPI flow for sidebar fixes #38 (#246)

* jsAPI flow for sidebar, initial button conversion * Convert remaining things to jsapi in newmodmail * remove the need for tbnewthings in newmm * tab height new modmail ... * Update extension/data/modules/oldreddit.js Co-Authored-By: George <georgej1088@gmail.com> * remove unneeded css property * remove legacy error handling * Nothing to see here! (literally) Co-authored-by: George
toolbox-team · Mar 10, 2020 · d22812f · d22812f
1 parent bc42b6a
commit d22812f
Show file tree

Hide file tree

Showing 11 changed files with 146 additions and 299 deletions.
diff --git a/extension/data/modules/historybutton.js b/extension/data/modules/historybutton.js
@@ -59,25 +59,6 @@ function historybutton () {
         });
     };
 
-    self.attachToModmail = function () {
-        const $body = $('body');
-        $body.find('.Thread__message').not('.tb-history').each(function () {
-            const $this = $(this);
-            if ($this.find('.tb-attr').length === 0) {
-                $this.addClass('tb-history').find('.Message__divider').eq(0).after('<span class="tb-attr"></span>');
-            }
-            const $tbAttrs = $this.find('.tb-attr');
-            const UserButtonHTMLnewMM = '<span class="tb-history-button" >&nbsp;<a href="javascript:;" class="user-history-button tb-bracket-button" title="view & analyze user\'s submission and comment history">H</a></span>';
-            $tbAttrs.append(UserButtonHTMLnewMM);
-        });
-
-        const userButtonHTMLside = '<span class="tb-attr-history InfoBar__recent"><span class="tb-history-button"><a href="javascript:;" class="user-history-button tb-bracket-button modmail-sidebar" title="view & analyze user\'s submission and comment history">User History</a></span></span>';
-
-        const $sidebar = $body.find('.ThreadViewer__infobar');
-
-        $sidebar.find('.tb-recents').not('.tb-history').addClass('tb-history').append(userButtonHTMLside);
-    };
-
     self.runJsAPI = function () {
         self.log('run');
 
@@ -132,40 +113,14 @@ function historybutton () {
             if (modSubCheck) {
                 self.log('passed');
 
-                if (TBCore.isNewModmail) {
-                    setTimeout(() => {
-                        self.attachToModmail();
-                    }, 750);
-                } else {
-                    self.log('not new modmail');
-                    self.runJsAPI();
-                }
-
-                // NER support.
-                window.addEventListener('TBNewThings', () => {
-                    self.attachToModmail();
-                });
+                self.runJsAPI();
 
                 $body.on('click', '.user-history-button, #tb-user-history', function (event) {
                     const $this = $(this);
                     const $target = $(event.currentTarget);
-                    let author;
-                    if ($body.find('.ThreadViewer').length > 0) {
-                        if ($this.hasClass('modmail-sidebar')) {
-                            author = $('.InfoBar__username').text();
-                        } else {
-                            author = $(this).closest('.Message__header').find('.Message__author').text().substring(2);
-                        }
-                    } else {
-                        author = $target.attr('data-author');
-                    }
+                    const author = $target.attr('data-author');
                     const thisSubreddit = $target.attr('data-subreddit');
 
-                    if ($target.attr('id') === 'tb-user-history') {
-                        event.pageY -= 600;
-                        event.pageX += 200;
-                    }
-
                     const positions = TBui.drawPosition(event);
 
                     const subreddits = {submissions: {}, comments: {}},

diff --git a/extension/data/modules/macros.js b/extension/data/modules/macros.js
@@ -167,11 +167,16 @@ function modmacros () {
                 }
             });
         }
-        setTimeout(() => {
-            if (TBCore.isNewMMThread) {
-                addNewMMMacro();
-            }
-        }, 1000);
+
+        if (TBCore.isNewModmail) {
+            window.addEventListener('TBNewPage', event => {
+                if (event.detail.pageType === 'modmailConversation') {
+                    setTimeout(() => {
+                        addNewMMMacro();
+                    }, 1000);
+                }
+            });
+        }
 
         if (!TBCore.isNewModmail && !TBCore.isOldReddit) {
             $('body').on('click', 'button:contains("Reply")', function () {
@@ -230,15 +235,6 @@ function modmacros () {
             }
         });
 
-        // NER support.
-        window.addEventListener('TBNewThings', () => {
-            if (TBCore.isNewModmail) {
-                setTimeout(() => {
-                    addNewMMMacro();
-                }, 1000);
-            }
-        });
-
         function editMacro (dropdown, info, macro, topLevel) {
         // get some placement variables
             const remove = macro.remove,

diff --git a/extension/data/modules/modbutton.js b/extension/data/modules/modbutton.js
@@ -47,17 +47,6 @@ function modbutton () {
     const $body = $('body'),
           titleText = 'Perform various mod actions on this user';
 
-    // need this for RES NER support
-    self.run = function () {
-        if ($body.find('.ThreadViewer').length > 0) {
-            const modButtonHTMLside = `<span class="tb-attr-history InfoBar__recent"><span class="tb-history-button"><a href="javascript:;" class="global-mod-button tb-bracket-button modmail-sidebar" title="Perform actions on users">${self.buttonName}</a></span></span>`;
-
-            const $sidebar = $body.find('.ThreadViewer__infobar');
-
-            $sidebar.find('.tb-recents').not('.tb-modbutton').addClass('tb-modbutton').append(modButtonHTMLside);
-        }
-    };
-
     self.runRedesign = function () {
         // Not a mod, don't bother.
         if (TBCore.mySubs.length < 1) {
@@ -67,6 +56,11 @@ function modbutton () {
 
         TB.listener.on('author', e => {
             const $target = $(e.target);
+
+            // As the modbutton is already accessible in the sidebar and not needed for mods we don't show it in modmail threads.
+            if (e.detail.type === 'TBmodmailCommentAuthor') {
+                return;
+            }
             if ($target.closest('.tb-thing').length || !onlyshowInhover || TBCore.isOldReddit) {
                 const subreddit = e.detail.data.subreddit.name;
                 const author = e.detail.data.author;
@@ -80,7 +74,7 @@ function modbutton () {
                     parentID = 'unknown';
                 }
                 requestAnimationFrame(() => {
-                    $target.append(`<a href="javascript:;" title="${titleText}" data-subreddit="${subreddit}" data-author="${author}" data-parentID="${parentID}" class="global-mod-button tb-bracket-button">${self.buttonName}</a>`);
+                    $target.append(`<a href="javascript:;" title="${titleText}" data-subreddit="${subreddit}" data-author="${author}" data-parentID="${parentID}" class="global-mod-button tb-bracket-button">M</a>`);
                 });
             }
         });
@@ -136,12 +130,6 @@ function modbutton () {
     };
 
     self.init = function () {
-        if (TBCore.isNewModmail) {
-            self.buttonName = 'Mod Button';
-        } else {
-            self.buttonName = 'M';
-        }
-
         self.saveButton = 'Save';
         self.OTHER = 'other-sub';
 
@@ -155,26 +143,12 @@ function modbutton () {
 
         TBCore.getModSubs(() => {
         // it's Go Time™!
-
-            // Unless it is new modmail...
-            if (TBCore.isNewModmail) {
-                setTimeout(() => {
-                    self.run();
-                }, 750);
-            } else {
-                self.runRedesign();
-            }
-        });
-
-        // NER support.
-        window.addEventListener('TBNewThings', () => {
-            self.run();
+            self.runRedesign();
         });
 
         async function openModPopup (event, info) {
             const benbutton = event.target; // huehuehue
             const $benbutton = $(benbutton);
-            $benbutton.text('loading...');
             self.log('displaying mod button popup');
 
             const lastaction = self.setting('lastAction');
@@ -187,8 +161,7 @@ function modbutton () {
 
             // no user?
             if (!user) {
-                $benbutton.text('error');
-                $benbutton.css('color', 'red');
+                TB.ui.textFeedback('No user', TB.ui.FEEDBACK_NEGATIVE);
                 // abort
                 return;
             }
@@ -424,9 +397,6 @@ function modbutton () {
                 }
             });
 
-            // reset button name.
-            $benbutton.text(self.buttonName);
-
             // 'cancel' button clicked
             $popup.on('click', '.close', () => {
                 $popup.remove();

diff --git a/extension/data/modules/newmodmailpro.js b/extension/data/modules/newmodmailpro.js
@@ -74,12 +74,12 @@ function newmodmailpro () {
               showModmailPreview = self.setting('showModmailPreview');
 
         if (noReplyAsSelf) {
-            switchAwayFromReplyAsSelf();
-            window.addEventListener('TBNewThings', () => {
-                switchAwayFromReplyAsSelf();
-                setTimeout(() => {
-                    switchAwayFromReplyAsSelf();
-                }, 1000);
+            window.addEventListener('TBNewPage', event => {
+                if (event.detail.pageType === 'modmailConversation') {
+                    setTimeout(() => {
+                        switchAwayFromReplyAsSelf();
+                    }, 1000);
+                }
             });
         }
 

diff --git a/extension/data/modules/oldreddit.js b/extension/data/modules/oldreddit.js
@@ -24,6 +24,12 @@ function oldReddit () {
         }
     }
 
+    /**
+     * Handles `thing` items as they become visible in the viewport.
+     * @function
+     * @param {IntersectionObserverEntry[]} entries
+     * @param {IntersectionObserver} observer
+     */
     function handleThing (entries, observer) {
         entries.forEach(entry => {
             // The observer fires for everything on page load.
@@ -149,6 +155,82 @@ function oldReddit () {
         });
     }
 
+    function newModmailConversationAuthors () {
+        const $body = $('body');
+        const subreddit = $body.find('.ThreadTitle__community').text();
+        $body.find('.Thread__message:not(.tb-seen)').each(function () {
+            const $this = $(this);
+            $this.addClass('tb-seen');
+            const $jsApiThingPlaceholder = $(`
+                <span class="tb-jsapi-container">
+                    <span data-name="toolbox"></span>
+                </span>
+            `).insertAfter($this.find('.Message__divider').eq(0));
+            const jsApiThingPlaceholder = $jsApiThingPlaceholder[0];
+
+            const author = $this.find('.Message__header .Message__author').text().substring(2);
+            const idDetails = $this.find('.m-link').attr('href').match(/\/mail\/.*?\/(.*?)\/(.*?)$/i);
+
+            const detailObject = {
+                type: 'TBmodmailCommentAuthor',
+                data: {
+                    author,
+                    post: {
+                        id: idDetails[1],
+                    },
+                    comment: {
+                        id: idDetails[2],
+                    },
+                    subreddit: {
+                        name: subreddit,
+                    },
+                },
+            };
+
+            dispatchApiEvent(jsApiThingPlaceholder, detailObject);
+        });
+    }
+
+    /**
+     * Makes sure to fire a jsAPI `TBuserHovercard` event for new modmail sidebar instances.
+     * @function
+     */
+    function newModmailSidebar () {
+        setTimeout(() => {
+            const $body = $('body');
+            if ($body.find('.ThreadViewer').length) {
+                $body.find('.ThreadViewer__infobar:not(.tb-seen), .ThreadViewerHeader__infobar:not(.tb-seen)').each(function () {
+                    const $infobar = $(this);
+                    $infobar.addClass('tb-seen');
+                    const info = TBCore.getThingInfo(this, true);
+                    const $jsApiThingPlaceholder = $(`
+                        <div class="tb-jsapi-container InfoBar__recents">
+                            <div class="InfoBar__recentsTitle">Toolbox functions:</div>
+                            <span data-name="toolbox"></span>
+                        </div>
+                    `).appendTo($infobar);
+
+                    const jsApiThingPlaceholder = $jsApiThingPlaceholder[0];
+
+                    const detailObject = {
+                        type: 'TBuserHovercard',
+                        data: {
+                            user: {
+                                username: info.user,
+                            },
+                            contextID: info.id,
+                            subreddit: {
+                                name: info.subreddit,
+                            },
+                        },
+                    };
+
+                    dispatchApiEvent(jsApiThingPlaceholder, detailObject);
+                });
+            }
+        }, 500);
+    }
+
     self.init = function () {
         // Looks like we are on old reddit. Activate!
         if (TBCore.isOldReddit) {
@@ -160,6 +242,29 @@ function oldReddit () {
                 });
             }, 500);
         }
+
+        if (TBCore.isNewModmail) {
+            const $body = $('body');
+
+            $body.on('click', '.icon-user', () => {
+                setTimeout(() => {
+                    newModmailSidebar();
+                }, 500);
+            });
+
+            $body.on('click', '.Thread__grouped', () => {
+                setTimeout(() => {
+                    newModmailConversationAuthors();
+                }, 500);
+            });
+
+            window.addEventListener('TBNewPage', event => {
+                if (event.detail.pageType === 'modmailConversation') {
+                    newModmailSidebar();
+                    newModmailConversationAuthors();
+                }
+            });
+        }
     };
 }