hlxsites · davenichols-DHLS · Oct 30, 2023 · Oct 3, 2023 · Oct 25, 2023 · Oct 25, 2023
diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js
@@ -1,6 +1,22 @@
-import { button, div, span } from '../../scripts/dom-builder.js';
+import { decorateIcons, loadScript } from '../../scripts/lib-franklin.js';
 
-import { readBlockConfig, decorateIcons, loadScript } from '../../scripts/lib-franklin.js';
+async function getFragmentFromFile(fragmentURL) {
+  const response = await fetch(fragmentURL);
+  if (!response.ok) {
+    // eslint-disable-next-line no-console
+    console.error('error loading fragment details', response);
+    return null;
+  }
+  const text = await response.text();
+  if (!text) {
+    // eslint-disable-next-line no-console
+    console.error('fragment details empty', fragmentURL);
+    return null;
+  }
+  const parser = new DOMParser();
+  const html = parser.parseFromString(text, 'text/html');
+  return html.body.children;
+}
 
 function loadAccessibe() {
   loadScript('../../scripts/lib-accessibe.js');
@@ -12,61 +28,37 @@ function scrollToTop() {
 
 function generateStickyFooter(stickyFooter) {
   const stickyFooterClone = stickyFooter[0].cloneNode(true);
-  const allNestedAnchorChilds = stickyFooterClone.querySelectorAll('a');
-  const container = div({ class: 'sticky-footer' });
-  const wrapper = div({ class: 'btn-group' });
-  allNestedAnchorChilds.forEach((child) => {
-    const childClone = child.cloneNode(true);
-    childClone.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" aria-label="${child.textContent}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-5 h-5 users"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"></path></svg> <span class="hidden md:block">${child.textContent}</span>`;
-    childClone.className = 'btn';
-    const url = new URL(childClone.href);
-    url.searchParams.set('utm_previouspage', window.location.href.split('?')[0]);
-    childClone.href = url.href;
-    childClone.title = childClone.textContent.trim();
-    wrapper.appendChild(childClone);
-  });
-  const topFeature = button(
-    { class: 'btn', title: 'Top', 'aria-label': 'scroll to top of the page' },
-    span({ class: 'icon icon-chevron-up block w-5 h-5' }),
-    span({ class: 'hidden md:block' }, 'Top'),
-  );
-  topFeature.addEventListener('click', scrollToTop);
-  wrapper.appendChild(topFeature);
+  const accessibeBtn = stickyFooterClone.children[stickyFooterClone.children.length - 1];
+  const topBtn = stickyFooterClone.querySelector('button.scroll-top');
+  topBtn.addEventListener('click', scrollToTop);
   stickyFooter[0].remove();
-  container.append(wrapper);
-  const accessibe = button(
-    { class: 'accessibility', 'aria-label': 'users', 'data-acsb-custom-trigger': 'true' },
-    span({ class: 'icon icon-accessibe block w-5 md:w-6 h-5 md:h-6' }),
-  );
-  accessibe.addEventListener('click', loadAccessibe);
-  container.append(accessibe);
-  decorateIcons(container);
-  document.body.appendChild(container);
+  accessibeBtn.addEventListener('click', loadAccessibe);
+  stickyFooterClone.append(accessibeBtn);
+  decorateIcons(stickyFooterClone);
+  document.body.appendChild(stickyFooterClone);
 }
 
 /**
  * loads and decorates the footer
  * @param {Element} block The footer block element
  */
 export default async function decorate(block) {
-  const cfg = readBlockConfig(block);
-  block.textContent = '';
-
-  // fetch footer content
-  const footerPath = cfg.footer || '/fragments/footer/';
-  const resp = await fetch(`${footerPath}master.plain.html`, window.location.pathname.endsWith('/master.plain.html') ? { cache: 'reload' } : {});
-
-  if (resp.ok) {
-    const html = await resp.text();
-
-    // decorate footer DOM
-    const footer = document.createElement('div');
-    footer.innerHTML = html;
-    generateStickyFooter(footer.getElementsByClassName('sticky-footer'));
-    const manageCookiesLink = footer.querySelector('ul>li>a[href="#manage-cookies"]');
-    manageCookiesLink.classList.add('ot-sdk-show-settings');
-    manageCookiesLink.href = '/#';
-    decorateIcons(footer);
-    block.append(footer);
+  try {
+    // get the content
+    const fragment = await getFragmentFromFile('/fragments/footer.html');
+    block.innerHTML = '';
+    if (fragment && fragment.length > 0) {
+      document.querySelector('.footer').parentElement.className += ' bg-danaherpurple-800';
+      document.querySelector('.footer').className += ' max-w-7xl mx-auto text-white py-6 px-6 sm:px-6 lg:px-8 divide-y divide-danaherpurple-500 print:hidden';
+      [...fragment].forEach((item) => {
+        if (item.className === 'sticky-footer') {
+          generateStickyFooter([item]);
+        } else block.append(item);
+      });
+    }
+  } catch (e) {
+    block.textContent = '';
+    // eslint-disable-next-line no-console
+    console.warn(`cannot load snippet at ${e}`);
   }
 }
diff --git a/fragments/footer.html b/fragments/footer.html
@@ -0,0 +1,82 @@
+  <div class="flex flex-col md:flex-row md:flex-wrap gap-x-16 gap-y-8 justify-between py-8">
+    <div>
+      <p class="m-0 text-base font-semibold tracking-wider uppercase">SOLUTIONS</p>
+      <ul class="mt-4 space-y-4 align-top h-full">
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/solutions/mabs/cell-line-development.html">Cell Line Development</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/solutions/mrna-therapy.html">mRNA Development</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/solutions/oligonucleotide-therapy/antisense-oligonucleotide-development-manufacturing.html" class="ot-sdk-show-settings">Antisense Oligonucleotide</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/solutions/pdna-synthesis.html">pDNA Synthesis</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/solutions/cell-therapy.html">Cell Therapy</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/solutions/gene-therapy.html">Gene Therapy</a></li>
+      </ul>
+    </div>
+    <div>
+      <p class="m-0 text-base font-semibold tracking-wider uppercase">USEFUL LINKS</p>
+      <ul class="mt-4 space-y-4 align-top h-full">
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/products.html">Products</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/solutions.html">Solutions</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/applications.html" class="ot-sdk-show-settings">Applications</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/library.html">Technical Library</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/expert.html">Talk to an Expert</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/quote-cart.html">Request a Quote</a></li>
+      </ul>
+    </div>
+    <div>
+      <p class="m-0 text-base font-semibold tracking-wider uppercase">COMPANY</p>
+      <ul class="mt-4 space-y-4 align-top h-full">
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/about-us.html">About</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/news.html">News</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/blog.html">Blog</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="https://jobs.danaher.com/global/en?utm_source=dhls_website&utm_medium=referral&utm_content=footer">Careers</a></li>
+      </ul>
+    </div>
+    <div>
+      <p class="m-0 text-base font-semibold tracking-wider uppercase">LEGAL</p>
+      <ul class="mt-4 space-y-4 align-top h-full">
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/legal/cookies.html">Cookie Policy</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/legal/ccpa.html">Do Not Sell or Share My Data</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="/#" class="ot-sdk-show-settings">Cookies Settings</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/legal/privacy-policy.html">Privacy Policy</a></li>
+        <li><a class="text-base hover:text-danaherpurple-50" href="/us/en/legal/terms-of-use.html">Terms of Use</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="flex flex-wrap gap-x-16 gap-y-8 justify-between py-8">
+    <div>
+      <p class="mb-2 text-base font-semibold tracking-wider uppercase">SUBSCRIBE TO OUR NEWSLETTER</p>
+      <p>The latest news, articles, and resources, sent to your inbox weekly.</p>
+    </div>
+    <a href="/us/en/connect/newsletter.html" class="btn btn-primary px-9 py-2.5 rounded-full h-max my-auto">Subscribe</a>
+  </div>
+  <div class="flex flex-wrap gap-x-16 gap-y-8 justify-between py-8">
+    <p>© 2023 DH Life Sciences, LLC. All Rights Reserved.</p>
+    <a href="https://www.linkedin.com/company/danaher-life-sciences/">
+      <span class="sr-only">LinkedIn</span>
+      <svg xmlns="http://www.w3.org/2000/svg" class="fill-white hover:fill-danaherpurple-50" width="24" height="24" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg>
+    </a>
+  </div>
+<div class="sticky-footer">
+  <div class="btn-group">
+    <a href="https://lifesciences.danaher.com/us/en/expert.html?utm_previouspage=https%3A%2F%2Flifesciences.danaher.com%2F" class="btn" m-0 text-base font-semibold tracking-wider uppercase="Talk to an Expert">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-label="Talk to an Expert" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-5 h-5 users">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"></path>
+      </svg>
+      <span class="hidden md:block">Talk to an Expert</span>
+    </a>
+    <button class="btn scroll-top" m-0 text-base font-semibold tracking-wider uppercase="Top" aria-label="scroll to top of the page">
+      <span class="icon icon-chevron-up block w-5 h-5">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="w-5 h-5">
+          <path fill-rule="evenodd" d="M11.47 7.72a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06L12 9.31l-6.97 6.97a.75.75 0 0 1-1.06-1.06l7.5-7.5z" clip-rule="evenodd"></path>
+        </svg>
+      </span>
+      <span class="hidden md:block">Top</span>
+    </button>
+  </div>
+  <button class="accessibility" aria-label="users" data-acsb-custom-trigger="true">
+    <span class="icon icon-accessibe block w-5 md:w-6 h-5 md:h-6">
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <use href="#icons-sprite-accessibe"></use>
+      </svg>
+    </span>
+  </button>
+</div>