From 26c5b8eb29bdec91905d4494ac3b5fbed3388e61 Mon Sep 17 00:00:00 2001 From: Pomax Date: Thu, 27 Feb 2020 13:56:55 -0800 Subject: [PATCH 1/2] port --- .../static/js/directory-listing-filters.js | 3 +- source/js/buyers-guide/bg-main.js | 176 ++++++++---------- source/js/main.js | 69 +++---- 3 files changed, 110 insertions(+), 138 deletions(-) diff --git a/network-api/networkapi/wagtailpages/static/js/directory-listing-filters.js b/network-api/networkapi/wagtailpages/static/js/directory-listing-filters.js index 107e58c367f..9ea28316840 100644 --- a/network-api/networkapi/wagtailpages/static/js/directory-listing-filters.js +++ b/network-api/networkapi/wagtailpages/static/js/directory-listing-filters.js @@ -2,7 +2,7 @@ // start of function const profileCache = {}; - const filters = document.querySelectorAll( + const labels = document.querySelectorAll( `.profile-directory .fellowships-directory-filter .filter-option button` ); const profileContainer = document.querySelector(`.profiles .row`); @@ -124,7 +124,6 @@ * associated year (for now) */ function bindEventsToLabels() { - let labels = Array.from(filters); labels.forEach(label => { label.addEventListener("click", evt => { // the label text content is, itself, the filter: diff --git a/source/js/buyers-guide/bg-main.js b/source/js/buyers-guide/bg-main.js index 7acac2364e9..d6bbd5f7516 100644 --- a/source/js/buyers-guide/bg-main.js +++ b/source/js/buyers-guide/bg-main.js @@ -98,116 +98,96 @@ let main = { }, enableCopyLinks() { - if (document.querySelectorAll(`.copy-link`)) { - Array.from(document.querySelectorAll(`.copy-link`)).forEach(element => { - element.addEventListener(`click`, event => { - event.preventDefault(); - - let productBox = document.querySelector( - `.product-detail .h1-heading` - ); - let productTitle = productBox - ? productBox.textContent - : `unknown product`; - - ReactGA.event({ - category: `product`, - action: `copy link tap`, - label: `copy link ${productTitle}` - }); - - copyToClipboard(event.target, window.location.href); + document.querySelectorAll(`.copy-link`).forEach(element => { + element.addEventListener(`click`, event => { + event.preventDefault(); + + let productBox = document.querySelector(`.product-detail .h1-heading`); + let productTitle = productBox + ? productBox.textContent + : `unknown product`; + + ReactGA.event({ + category: `product`, + action: `copy link tap`, + label: `copy link ${productTitle}` }); + + copyToClipboard(event.target, window.location.href); }); - } + }); }, // Embed various React components based on the existence of containers within the current page injectReactComponents() { - let creepVoteTargets = document.querySelectorAll(`.creep-vote-target`); - - if (creepVoteTargets.length > 0) { - Array.from(creepVoteTargets).forEach(element => { - let csrf = element.querySelector(`input[name=csrfmiddlewaretoken]`); - let productName = element.dataset.productName; - let productID = element.querySelector(`input[name=productID]`).value; - let votes = element.querySelector(`input[name=votes]`).value; - - try { - votes = JSON.parse(votes.replace(/'/g, `"`)); - } catch (e) { - votes = { - creepiness: { - average: 50, - vote_breakdown: { "0": 0, "1": 0, "2": 0, "3": 0, "4": 0 } - }, - confidence: { "0": 0, "1": 0 } - }; - } - - apps.push( - new Promise(resolve => { - ReactDOM.render( - resolve()} - joinUsCSRF={csrfToken} - joinUsApiUrl={`${networkSiteURL}/api/campaign/signups/0/`} - />, - element - ); - }) - ); - }); - } - - let creepometerTargets = document.querySelectorAll(`.creepometer-target`); - - if (creepometerTargets.length > 0) { - Array.from(creepometerTargets).forEach(element => { - let initialValue = element.dataset.initialValue; - - apps.push( - new Promise(resolve => { - ReactDOM.render( - resolve()} - />, - element - ); - }) - ); - }); - } + document.querySelectorAll(`.creep-vote-target`).forEach(element => { + let csrf = element.querySelector(`input[name=csrfmiddlewaretoken]`); + let productName = element.dataset.productName; + let productID = element.querySelector(`input[name=productID]`).value; + let votes = element.querySelector(`input[name=votes]`).value; + + try { + votes = JSON.parse(votes.replace(/'/g, `"`)); + } catch (e) { + votes = { + creepiness: { + average: 50, + vote_breakdown: { "0": 0, "1": 0, "2": 0, "3": 0, "4": 0 } + }, + confidence: { "0": 0, "1": 0 } + }; + } - if (document.querySelectorAll(`.join-us`)) { - var elements = Array.from(document.querySelectorAll(`.join-us`)); + apps.push( + new Promise(resolve => { + ReactDOM.render( + resolve()} + joinUsCSRF={csrfToken} + joinUsApiUrl={`${networkSiteURL}/api/campaign/signups/0/`} + />, + element + ); + }) + ); + }); - if (elements.length) { - elements.forEach(element => { - var props = element.dataset; + document.querySelectorAll(`.creepometer-target`).forEach(element => { + let initialValue = element.dataset.initialValue; + apps.push( + new Promise(resolve => { + ReactDOM.render( + resolve()} + />, + element + ); + }) + ); + }); - props.apiUrl = `${networkSiteURL}/api/campaign/signups/${props.signupId || - 0}/`; + document.querySelectorAll(`.join-us`).forEach(element => { + const props = element.dataset; + const sid = props.signupId || 0; + props.apiUrl = `${networkSiteURL}/api/campaign/signups/${sid}/`; - props.csrfToken = props.csrfToken || csrfToken; - props.isHidden = false; + props.csrfToken = props.csrfToken || csrfToken; + props.isHidden = false; - apps.push( - new Promise(resolve => { - ReactDOM.render( - resolve()} />, - element - ); - }) + apps.push( + new Promise(resolve => { + ReactDOM.render( + resolve()} />, + element ); - }); - } - } + }) + ); + }); } }; diff --git a/source/js/main.js b/source/js/main.js index 9d6834c78a5..9cfe96c1e8f 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -301,16 +301,13 @@ let main = { }); // petition elements - var petitionElements = Array.from( - document.querySelectorAll(`.sign-petition`) - ); var subscribed = false; if (window.location.search.indexOf(`subscribed=1`) !== -1) { subscribed = true; } - petitionElements.forEach(element => { + document.querySelectorAll(`.sign-petition`).forEach(element => { var props = element.dataset; props.apiUrl = `${networkSiteURL}/api/campaign/petitions/${props.petitionId}/`; @@ -370,11 +367,7 @@ let main = { } // Pulse project lists - let pulseProjectList = Array.from( - document.querySelectorAll(`.pulse-project-list`) - ); - - pulseProjectList.forEach(target => { + document.querySelectorAll(`.pulse-project-list`).forEach(target => { apps.push( new Promise(resolve => { ReactDOM.render( @@ -396,11 +389,9 @@ let main = { }); // Share button group - let shareButtonGroups = document.querySelectorAll( - `.share-button-group-wrapper` - ); - if (shareButtonGroups) { - shareButtonGroups.forEach(element => { + document + .querySelectorAll(`.share-button-group-wrapper`) + .forEach(element => { var props = element.dataset; apps.push( @@ -412,24 +403,23 @@ let main = { }) ); }); - } //Profile Directory Filter-Bar GA - const filters = document.querySelectorAll( - `.profile-directory .fellowships-directory-filter .filter-option button` - ); - - filters.forEach(filter => { - let year = filter.textContent.trim(); - filter.addEventListener(`click`, () => { - ReactGA.event({ - category: `profiles`, - action: `directory filter`, - label: `${document.title} ${year}` + document + .querySelectorAll( + `.profile-directory .fellowships-directory-filter .filter-option button` + ) + .forEach(filter => { + let year = filter.textContent.trim(); + filter.addEventListener(`click`, () => { + ReactGA.event({ + category: `profiles`, + action: `directory filter`, + label: `${document.title} ${year}` + }); }); }); - }); //Profile Directory Cards Social Media GA @@ -493,19 +483,22 @@ let main = { } // store profile cards - let profileCards = document.querySelectorAll(`.profiles .person-card`); + function getProfileCards() { + return document.querySelectorAll(`.profiles .person-card`); + } - // checks for profile cards in the initial page load - if (profileCards.length > 0) { - bindProfileCardAnalytics(profileCards); + function updateProfileList() { + let profileCards = getProfileCards(); + if (profileCards.length > 0) { + bindProfileCardAnalytics(profileCards); + } } - // And start listening for profile filter events, - // in case profile cards get updated. - document.addEventListener(`profiles:list-updated`, () => { - // Refetch the profile cards, because they'll have gone stale. - profileCards = document.querySelectorAll(`.profiles .person-card`); - bindProfileCardAnalytics(profileCards); - }); + + document.addEventListener(`profiles:list-updated`, () => + updateProfileList() + ); + + updateProfileList(); // Enable the "load more results" button on index pages let loadMoreButton = document.querySelector(`.load-more-index-entries`); From 7053da74b4d0a3cf6d54e1cab0311016038acb75 Mon Sep 17 00:00:00 2001 From: Pomax Date: Thu, 5 Mar 2020 16:03:04 -0800 Subject: [PATCH 2/2] PR suggestion --- source/js/main.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/source/js/main.js b/source/js/main.js index 9cfe96c1e8f..60267d88129 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -483,23 +483,20 @@ let main = { } // store profile cards - function getProfileCards() { - return document.querySelectorAll(`.profiles .person-card`); - } - function updateProfileList() { - let profileCards = getProfileCards(); - if (profileCards.length > 0) { - bindProfileCardAnalytics(profileCards); - } + let profileCards = document.querySelectorAll(`.profiles .person-card`); + bindProfileCardAnalytics(profileCards); } + // Checks for profile cards in the initial page load + updateProfileList(); + + // And start listening for profile filter events, + // in case profile cards get updated. document.addEventListener(`profiles:list-updated`, () => updateProfileList() ); - updateProfileList(); - // Enable the "load more results" button on index pages let loadMoreButton = document.querySelector(`.load-more-index-entries`); if (loadMoreButton) {