From ed6cd244772fde2f8aa15f0892850016dabbc523 Mon Sep 17 00:00:00 2001 From: creesch Date: Tue, 13 Oct 2020 10:41:12 +0200 Subject: [PATCH] Move hash based actions to be event triggered (#395) * Move hash based actions to be event triggered * refreshUrlContext -> refreshPathContext --- extension/data/modules/modbar.js | 50 ++++++++++++++------------------ extension/data/tbcore.js | 36 +++++++++++++++++++++-- extension/data/tbhelpers.js | 18 ------------ 3 files changed, 55 insertions(+), 49 deletions(-) diff --git a/extension/data/modules/modbar.js b/extension/data/modules/modbar.js index 6fac5aac8..83c564f32 100644 --- 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(``); - } + // 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(``); } + + // 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 index e80ae0520..874502daa 100644 --- 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 index f67c5156f..a8d5a38c7 100644 --- 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