Move hash based actions to be event triggered (#395)

* Move hash based actions to be event triggered * refreshUrlContext -> refreshPathContext
toolbox-team · Oct 13, 2020 · ed6cd24 · ed6cd24
1 parent 1cbda59
commit ed6cd24
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 49 deletions.
diff --git a/extension/data/modules/modbar.js b/extension/data/modules/modbar.js
@@ -494,40 +494,34 @@ function modbar () {
             $(`.tb-personal-settings .tb-window-wrapper .tb-window-tab.${module}`).show();
         }
 
-        function checkHash () {
-            if (window.location.hash) {
-                let module = TBHelpers.getHashParameter('tbsettings'),
-                    setting = TBHelpers.getHashParameter('setting');
-
+        window.addEventListener('TBHashParams', event => {
+            let module = event.detail.tbsettings;
+            if (module) {
+                let setting = event.detail.setting;
                 self.log(setting);
-                if (module) {
-                // prevent tbsetting URL hash from persisting on reload.
-                    history.pushState('', document.title, window.location.pathname);
-
-                    module = module.toLowerCase();
+                module = module.toLowerCase();
 
-                    if (setting) {
-                        setting = setting.toLowerCase();
-                        const id = `#tb-${module}-${setting}`;
-                        let highlightedCSS = `${id} p {background-color: ${TB.ui.standardColors.softyellow}; display: block !important;}`;
+                if (setting) {
+                    setting = setting.toLowerCase();
+                    const id = `#tb-${module}-${setting}`;
+                    let highlightedCSS = `${id} p {background-color: ${TB.ui.standardColors.softyellow}; display: block !important;}`;
 
-                        // this next line is to deal with legacy settings
-                        highlightedCSS += `${id}{background-color: ${TB.ui.standardColors.softyellow}; display: block !important;}`;
-                        highlightedCSS += `.tb-setting-link-${setting} {display: inline !important;}`;
-
-                        $('head').append(`<style type="text/css">${highlightedCSS}</style>`);
-                    }
+                    // this next line is to deal with legacy settings
+                    highlightedCSS += `${id}{background-color: ${TB.ui.standardColors.softyellow}; display: block !important;}`;
+                    highlightedCSS += `.tb-setting-link-${setting} {display: inline !important;}`;
 
-                    // Wait a sec for stuff to load.
-                    setTimeout(() => {
-                        TB.showSettings();
-                        switchTab(module);
-                    }, 1000);
+                    $('head').append(`<style type="text/css">${highlightedCSS}</style>`);
                 }
+
+                // Wait a sec for stuff to load.
+                setTimeout(() => {
+                    // prevent tbsetting URL hash from persisting on reload.
+                    history.pushState('', document.title, window.location.pathname);
+                    TB.showSettings();
+                    switchTab(module);
+                }, 500);
             }
-        }
-        checkHash();
-        setInterval(checkHash, 500);
+        });
 
         // change tabs
         $body.on('click', '.tb-window-tabs a:not(.active)', function () {

diff --git a/extension/data/tbcore.js b/extension/data/tbcore.js
@@ -1563,6 +1563,7 @@ function initwrapper ({userDetails, newModSubs, cacheDetails}) {
 
         // Watch for locationHref changes and sent an event with details
         let locationHref;
+        let locationHash;
 
         // new modmail regex matches.
         const newMMlistingReg = /^\/mail\/(all|new|inprogress|archived|highlighted|mod|notifications|perma|appeals)\/?$/;
@@ -1580,12 +1581,37 @@ function initwrapper ({userDetails, newModSubs, cacheDetails}) {
         const userProfile = /^\/user\/([^/]*?)\/?(overview|submitted|posts|comments|saved|upvoted|downvoted|hidden|gilded)?\/?$/;
         const userModMessage = /^\/message\/([^/]*?)\/([^/]*?)?\/?$/;
 
+        // Once a change in the page hash is detected in toolbox format it will abstract the parms and send out an event.
+        function refreshHashContext () {
+            if (window.location.hash && window.location.hash !== locationHash) {
+                const locationHash = window.location.hash;
+                const hash = locationHash.substring(1);
+                // To make sure we only trigger on toolbox hashes we check that the first param starts with `tb`.
+                // This because `tbsettings` is already used for settings.
+                if (hash.startsWith('?tb')) {
+                    const paramObject = {};
+                    const params = hash.split('&');
+                    params.forEach(param => {
+                        const keyval = param.split('=');
+                        const key = keyval[0].replace('?', ''),
+                              val = keyval[1];
+                        paramObject[key] = val;
+                    });
+                    setTimeout(() => {
+                        window.dispatchEvent(new CustomEvent('TBHashParams', {detail: paramObject}));
+                    }, 500);
+                }
+            } else if (!window.location.hash) {
+                locationHash = null;
+            }
+        }
+
         // Once a change is detected it will abstract all the context information from url, update TBCore variables and emit all information in an event.
         // NOTE: this function is a work in progress, page types are added once needed. Currently supported pages where context are provided are:
         // NewModmail: listings, conversations, create
         // reddit frontpage: sorting
         // subreddits: listing including sorting, submissions, submissions with permalink
-        function refreshUrlContext () {
+        function refreshPathContext () {
             const samePage = locationHref === location.href;
             if (!samePage) {
                 const oldHref = locationHref;
@@ -1715,8 +1741,12 @@ function initwrapper ({userDetails, newModSubs, cacheDetails}) {
             }
         }
 
-        refreshUrlContext();
-        window.addEventListener('tb-url-changed', refreshUrlContext);
+        refreshPathContext();
+        refreshHashContext();
+        window.addEventListener('tb-url-changed', () => {
+            refreshPathContext();
+            refreshHashContext();
+        });
 
         // Watch for new things and send out events based on that.
         if ($('#header').length) {

diff --git a/extension/data/tbhelpers.js b/extension/data/tbhelpers.js
@@ -622,24 +622,6 @@
         return dirtySub.replace('/r/', '').replace('r/', '').replace('/', '').replace('−', '').replace('+', '').trim();
     };
 
-    /**
-     * Parses the URL hash as a query string and gets the value of a given key
-     * @function
-     * @param {string} key The key to get
-     * @returns {string} The value for that key
-     */
-    TBHelpers.getHashParameter = function (parameterKey) {
-        const hash = window.location.hash.substring(1);
-        const params = hash.split('&');
-        for (let i = 0; i < params.length; i++) {
-            const keyval = params[i].split('='),
-                  key = keyval[0].replace('?', '');
-            if (key === parameterKey) {
-                return keyval[1];
-            }
-        }
-    };
-
     /**
      * Replaces {tokens} for the respective value in given content
      * @function