Merge pull request #88 from hlxsites/sponsors-new-structure

Sponsors new structure

blocks/footer/footer.css

@@ -108,7 +108,7 @@ footer .footer .footer-partners img {
 }
 
 /* nav */
-footer .footer .footer-nav {
+footer .footer .footer-partners + .footer-nav {
   border-top: 1px solid var(--footer-border-color);
 }
 
@@ -232,8 +232,10 @@ footer .footer .footer-copyright {
   }
 }
 
-footer .footer #ot-sdk-btn.ot-sdk-show-settings, footer .footer #ot-sdk-btn.optanon-show-settings,
-footer .footer #ot-sdk-btn.ot-sdk-show-settings:hover, footer .footer #ot-sdk-btn.optanon-show-settings:hover {
+footer .footer #ot-sdk-btn.ot-sdk-show-settings,
+footer .footer #ot-sdk-btn.optanon-show-settings,
+footer .footer #ot-sdk-btn.ot-sdk-show-settings:hover,
+footer .footer #ot-sdk-btn.optanon-show-settings:hover {
   color: var(--footer-text-color);
   text-transform: uppercase;
   cursor: pointer;

blocks/footer/footer.js

@@ -6,7 +6,7 @@ import {
   wrapImgsInLinks,
 } from '../../scripts/scripts.js';
 
-import { setupSponsors } from '../sponsors/sponsors.js';
+import { setupSponsors, setupSponsorsV2 } from '../sponsors/sponsors.js';
 
 function setupCookieChoices(section) {
   const cookieLink = section.querySelector('a[href*="onetrust-link"]');
@@ -26,19 +26,26 @@ function setupSocialButtons(section) {
 }
 
 async function setupPartners(section) {
-  let sponsorLinks = [];
+  let sponsors = [];
   try {
+    // const resp = await fetch('/drafts/shsteimer/sponsors');
     const resp = await fetch('/sponsors');
     // eslint-disable-next-line no-await-in-loop
     const html = await resp.text();
     const dp = new DOMParser();
     const sponsorsDoc = dp.parseFromString(html, 'text/html');
-    sponsorLinks = [...sponsorsDoc.querySelectorAll('.sponsors a')].map((a) => a.href);
+    if (sponsorsDoc.querySelector('.sponsors.v2')) {
+      const sponsorRows = [...sponsorsDoc.querySelector('.sponsors.v2').children];
+      sponsors = await setupSponsorsV2(sponsorRows);
+    } else {
+      // backwards compat, kill off after marge and content update
+      const sponsorLinks = [...sponsorsDoc.querySelectorAll('.sponsors a')].map((a) => a.href);
+      sponsors = await setupSponsors(sponsorLinks);
+    }
   } catch (err) {
     // eslint-disable-next-line no-console
     console.log(err);
   }
-  const sponsors = await setupSponsors(sponsorLinks);
 
   const wrapper = document.createElement('div');
   // combine ordered sponsors with any remaining unordered sponsors
@@ -72,7 +79,7 @@ export default async function decorate(block) {
     const footer = document.createElement('div');
     footer.innerHTML = html;
 
-    const hasPartners = footer.children.length > 4;
+    let hasPartners = footer.children.length > 4;
     let classes = ['partners', 'nav', 'links', 'social', 'copyright'];
     if (!hasPartners) {
       classes = ['nav', 'links', 'social', 'copyright'];
@@ -82,6 +89,13 @@ export default async function decorate(block) {
       if (section) section.classList.add(`footer-${c}`);
     });
 
+    const pageHasSponsers = document.querySelector('.block.sponsors');
+    if (pageHasSponsers) {
+      // hide partners in footer when page contains sponsors block
+      hasPartners = false;
+      footer.querySelector('.footer-partners').remove();
+    }
+
     // setup ribbon
     const ribbon = document.createElement('div');
     ribbon.classList.add('footer', 'footer-ribbon');

blocks/header/header.js

@@ -7,7 +7,7 @@ import {
   decorateLinkedPictures,
 } from '../../scripts/scripts.js';
 
-import { setupSponsors } from '../sponsors/sponsors.js';
+import { setupSponsors, setupSponsorsV2 } from '../sponsors/sponsors.js';
 
 /**
  * collapses all open nav sections
@@ -27,19 +27,26 @@ function displayNextPartner(proud) {
 }
 
 async function setupPartners(section) {
-  let sponsorLinks = [];
+  let sponsors = [];
   try {
+    // const resp = await fetch('/drafts/shsteimer/sponsors');
     const resp = await fetch('/sponsors');
     // eslint-disable-next-line no-await-in-loop
     const html = await resp.text();
     const dp = new DOMParser();
     const sponsorsDoc = dp.parseFromString(html, 'text/html');
-    sponsorLinks = [...sponsorsDoc.querySelectorAll('.sponsors a')].map((a) => a.href);
+    if (sponsorsDoc.querySelector('.sponsors.v2')) {
+      const sponsorRows = [...sponsorsDoc.querySelector('.sponsors.v2').children];
+      sponsors = await setupSponsorsV2(sponsorRows);
+    } else {
+      // backwards compat, kill off after marge and content update
+      const sponsorLinks = [...sponsorsDoc.querySelectorAll('.sponsors a')].map((a) => a.href);
+      sponsors = await setupSponsors(sponsorLinks);
+    }
   } catch (err) {
     // eslint-disable-next-line no-console
     console.log(err);
   }
-  const sponsors = await setupSponsors(sponsorLinks);
 
   if (sponsors.length > 0) {
     const hasWhiteBg = [...section.classList].includes('white');

blocks/sponsors/sponsors.css

@@ -53,7 +53,8 @@ main .sponsors .sponsors-sponsor:hover > div {
   transform: rotateY(180deg);
 }
 
-main .sponsors .sponsors-sponsor-front, main .sponsors .sponsors-sponsor-back {
+main .sponsors .sponsors-sponsor-front,
+main .sponsors .sponsors-sponsor-back {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -73,13 +74,3 @@ main .sponsors .sponsors-sponsor-back {
   background-color: var(--sponsors-background-color);
   transform: rotateY(180deg);
 }
-
-/* hide duplicate sponsors in footer */
-body footer .footer .footer-partners {
-  display: none;
-  visibility: hidden;
-}
-
-body footer .footer .footer-nav {
-  border-top: 0;
-}

blocks/sponsors/sponsors.js

@@ -5,6 +5,26 @@ import {
   toClassName,
 } from '../../scripts/scripts.js';
 
+export async function setupSponsorsV2(sponsorRows = []) {
+  const sponsors = [];
+  sponsorRows.forEach((sponsorRow) => {
+    const link = sponsorRow.querySelector('a');
+    const images = sponsorRow.querySelectorAll('picture');
+    const headline = sponsorRow.querySelector('h1');
+    const description = sponsorRow.querySelector('h1 + p');
+
+    sponsors.push({
+      title: headline.textContent,
+      image: images[0].querySelector('img').src,
+      logoWhite: images[1].querySelector('img').src,
+      description: description.textContent,
+      link: link.href,
+    });
+  });
+
+  return sponsors;
+}
+
 export async function setupSponsors(sponsorLinks = []) {
   let sponsors = [];
   let orderedSponsors = [];
@@ -51,11 +71,19 @@ export async function setupSponsors(sponsorLinks = []) {
 }
 
 export default async function decorate(block) {
-  const sponsorLinks = [...block.querySelectorAll('a')].map((a) => a.href);
-  const sponsors = await setupSponsors(sponsorLinks);
+  let sponsors;
+  if (block.classList.contains('v2')) {
+    // use new content model
+    const sponsorRows = [...block.children];
+    sponsors = await setupSponsorsV2(sponsorRows);
+  } else {
+    // backwards compatability, can be killed off after this is merged and content is updated
+    const sponsorLinks = [...block.querySelectorAll('a')].map((a) => a.href);
+    sponsors = await setupSponsors(sponsorLinks);
+  }
+
   block.textContent = '';
 
-  // combine ordered sponsors with any remaining unordered sponsors
   sponsors.forEach((sponsor) => {
     const card = document.createElement('div');
     card.className = 'sponsors-sponsor';
@@ -66,8 +94,8 @@ export default async function decorate(block) {
     const back = document.createElement('div');
     back.className = `sponsors-sponsor-back sponsor-${toClassName(sponsor.title)}`;
     back.innerHTML = `<h2>${sponsor.title}</h2>
-      <p>${sponsor.description}</p>
-      <p class="button-container"><a class="button" href="${sponsor.link}">${sponsor.title.replace(' ', '')}.com</a></p>`;
+        <p>${sponsor.description}</p>
+        <p class="button-container"><a class="button" href="${sponsor.link}">${sponsor.title.replace(' ', '')}.com</a></p>`;
     wrapper.append(front, back);
     card.append(wrapper);
     block.append(card);