Skip to content

Commit

Permalink
Merge pull request #172 from hlxsites/feat-170-static-footer-redesign
Browse files Browse the repository at this point in the history 
Static Footer Redesign
  • Loading branch information
@davenichols-DHLS
davenichols-DHLS authored Oct 30, 2023
2 parents 0a9a471 + 6c269a6 commit 828ce9a
Show file tree
Hide file tree
Showing 6 changed files with 2,207 additions and 16,309 deletions.
41 changes: 0 additions & 41 deletions blocks/footer/footer.css
View file

This file was deleted.

92 changes: 42 additions & 50 deletions blocks/footer/footer.js
View file
Original file line number Diff line number Diff line change
@@ -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');
Expand All @@ -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}`);
}
}
82 changes: 82 additions & 0 deletions fragments/footer.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 828ce9a

Please sign in to comment.