From bde8643261724801243c9b33b8c74a8c19aa0d35 Mon Sep 17 00:00:00 2001 From: Rajneesh Date: Thu, 2 May 2024 15:44:49 +0530 Subject: [PATCH 1/6] china ICP changes --- blocks/footer/footer.css | 622 +++++++++++++++++---------------------- blocks/footer/footer.js | 19 +- 2 files changed, 279 insertions(+), 362 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index e1bc2ca68..a35907f14 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -1,363 +1,273 @@ -.footer-wrapper { - background-color: #fff; - background-image: url("../../images/research-bg.png"); - overflow-x: hidden; -} - -.footer.block { - margin: auto; - font-size: 15px; - margin-top: 25px; -} - -.footer-wrap > div { - padding: 15px; -} - -.footer-news-events > div { - display: flex; -} - -.footer-news-events > div > div { - flex-grow: 1; -} - -.footer-news-events > div:first-of-type { - margin-bottom: 7px; -} - -.footer-bottom { - margin-top: 18px; - border-top: 1px solid var(--highlight-background-color); - padding-top: 20px; - padding-bottom: 20px; -} - -.footer ul { - list-style: none; - padding: 0; - margin: 0 0 30px; -} - -.footer a { - color: var(--text-color); -} - -.row-5 i { - margin: 0; -} - -.row-3 a, -.footer h3, -.footer h3 a { - color: var(--button-bg-color); -} - -.footer a:hover { - color: var(--link-hover-color); -} - -.footer a i.fa.fa-external-link { - color: inherit; -} - -.footer h3 { - font-size: 16px; - margin-bottom: 10px; -} - -.footer-news-events h3 { - margin: 0; - padding: 0 15px 6px; -} - -.footer-newsletter-form h3 { - font-size: 20px; -} - -.footer h3 + h3 { - margin-top: 30px; -} - -.footer-news-events .toggle:not(.on) h3 { - color: var(--border-color-gray); -} - -.footer-wrap > div.row-3 { - padding: 0; -} - -.footer-news-events p { - border-bottom: 1px solid var(--highlight-background-color); - padding-bottom: 12px; - margin-top: 6px; - margin-bottom: 12px; -} - -.footer-newsletter-form p { - font-size: 10px; -} - -.footer-news-events p:last-of-type { - border: none; -} - -.footer-news-events p:last-of-type a { - color: var(--button-bg-color); -} - -.footer-news-events > div:first-of-type > div { - border-bottom: 2px solid var(--highlight-background-color); - margin-left: 0; -} - -.footer-news-events > div:nth-child(1) > div:nth-child(1) { - text-align: right; -} - -.footer-news-events > div:first-of-type > div:first-of-type { - text-align: right; - border-right: 2px solid var(--button-bg-color); -} - -.footer-news-events > div:first-of-type > div.toggle.on { - border-bottom: 3px solid var(--button-bg-color); -} - -.footer-news-events > div:nth-child(2) > div.toggle { - display: none; -} - -.footer-news-events > div:nth-child(2) > div.toggle.on { - display: block; -} - -.footer-newsletter-form { - background-color: var(--grey-background-color); - padding: 0 15px 15px; -} - -.footer-newsletter-form ul { - margin-top: 15px; -} - -.footer-newsletter-form li { - margin-bottom: 5px; - max-width: 162px; -} - -.footer-newsletter-form i { - float: right; -} - -.row-6 ul { - display: flex; - flex-wrap: wrap; - font-family: var(--ff-proxima-light); - margin-bottom: 16px; -} - -.row-4 li { - margin-top: -5px; - position:relative; - top: -30px; - left: 36px; -} - -.row-4 picture { - position: relative; - top: 30px; - left: -36px; -} - -.footer-wrap .footer-contact img { - width: auto; -} - -.row-5 > a[aria-label="Molecular Devices"], -.row-6 a[aria-label='Danaher'] { - background-position: top; - background-repeat: no-repeat; - background-size: contain; - display: block; -} - -.row-5 > a[aria-label="Molecular Devices"] { - background-image: url('/images/header-menus/logo.svg'); -} - -.row-6 a[aria-label='Danaher'] { - background-image: url('/images/danaher.svg'); -} - -.row-5 > a[aria-label="Molecular Devices"] img, -.row-6 a[aria-label='Danaher'] img{ - opacity: 0; -} - -.row-5 ul { - display: flex; - font-size:21px; - margin: 0; - padding: 12px 0 5px; -} - -.row-4 ul:first-of-type { - border-bottom: 1px solid #ccc; - margin: 5px 0 15px; -} - -.row-6 { - font-size: 12.3px; -} - -.row-6 ul li { - flex-shrink: 0; - margin-left: 12px; - margin-bottom: 7px; -} - -.row-5 li:not(:last-child) { - padding-right:32px; -} - -.row-6 i { - margin-left: 3px; -} - -.fa-external-link { - position: relative; - bottom: 5px; -} - -.row-3 .hubspot-iframe-wrapper { - margin-left: -15px; - margin-right: -15px; -} - -.row-3 .hubspot-iframe-wrapper iframe { - border: 0; - margin: 0; - padding: 0; - display: block; - width: 1px; - min-width: 100%; - height: 1px; - max-height: 100%; -} - -.footer .row-1 h3:first-child, -.footer .row-4 h3:first-child { - margin-top: 0; -} - -.footer-wrap .social-media-list ul { - margin-bottom: 0; - display: flex; - border-bottom: none; -} - -.footer-wrap .social-media-list ul li { - margin-top: 0; - position: static; - margin-right: 10px; -} - -.footer-wrap .social-media-list ul li a { - font-size: 24px; - color: var(--text-blue); - display: block; - padding: 8px; -} - -.footer-wrap .social-media-list ul li a img { - display: inline-block; - width: 30px; - height: 23px; - vertical-align: middle; -} - -.footer-wrap .social-media-list ul li a i { - margin-left: 0; -} - -@media (min-width: 768px) { - .footer.block { - width: 750px; - } - - .footer-wrap { - display: flex; - } - - .footer-wrap > div { - width: 25%; - } -} - -@media (min-width: 992px) { - .footer.block { - width: 970px; - } - - .footer-bottom, - .footer-bottom .row-6 { - display: flex; - justify-content: space-between; - } - - .footer-bottom { - padding: 15px 15px 30px; - position: relative; - } - - .footer-bottom .row-6 { - justify-content: flex-end; - align-items: flex-end; - } - - .footer-bottom .row-6 ul { - max-width: 65%; - justify-content: right; - padding-right: 32px; - margin-bottom: 0; - } - - .footer-bottom .row-6 p { - margin: 0; - } - - .footer-bottom .row-6 p:last-of-type { - margin-top: 40px; - position: absolute; - left: 15px; +import { + decorateIcons, decorateBlock, fetchPlaceholders, getMetadata, +} from '../../scripts/lib-franklin.js'; +import ffetch from '../../scripts/ffetch.js'; +import { + a, div, i, iframe, li, p, ul, +} from '../../scripts/dom-helpers.js'; +import { + decorateExternalLink, formatDate, loadScript, unixDateToString, +} from '../../scripts/scripts.js'; + +let placeholders = {}; + +function toggleNewsEvents(container, target) { + if (!target.parentElement.classList.contains('on')) { + const items = container.querySelectorAll('.toggle'); + [...items].forEach((item) => { + item.classList.toggle('on'); + }); } } -@media (min-width: 1200px) { - .footer.block { - width: 1170px; +function addEventListeners(container) { + const h3s = container.querySelectorAll('h3'); + [...h3s].forEach((h3) => { + h3.addEventListener('click', (e) => { + toggleNewsEvents(container, e.target); + }); + }); +} + +function renderEntry(item) { + return ( + p(formatDate(unixDateToString(item.date)), + document.createElement('br'), + a({ + href: item.path, + 'aria-label': item.title, + }, item.title), + ) + ); +} + +function renderMoreLink(text, link) { + return ( + p( + a({ + href: link, + 'aria-label': text, + }, text, i({ + class: 'fa fa-chevron-circle-right', + 'aria-hidden': true, + }), + ), + ) + ); +} + +async function renderEvents(container) { + const events = await ffetch('/query-index.json') + .sheet('events') + .filter((item) => item.eventEnd * 1000 > Date.now()) + .all(); + const sortedEvents = events.sort((first, second) => first.eventStart - second.eventStart) + .slice(0, 3); + container.innerHTML = ''; + sortedEvents.forEach((item) => { + item.date = item.eventStart; + container.append(renderEntry(item)); + }); + container.append(renderMoreLink(placeholders.moreEvents || 'More Events', '/events')); +} + +async function renderNews(container) { + const news = await ffetch('/query-index.json') + .sheet('news') + .chunks(5) + .slice(0, 3) + .all(); + container.innerHTML = ''; + news.forEach( + (item) => container.append(renderEntry(item)), + ); + container.append(renderMoreLink(placeholders.moreNews || 'More News', '/newsroom/news')); +} + +async function buildNewsEvents(container) { + if (!container) return; + [...container.children].forEach((row, j) => { + [...row.children].forEach((column, k) => { + column.classList.add('toggle'); + if (k === 0) { + column.classList.add('on'); + } + if (j === 1 && k === 0) { + column.classList.add('news-list'); + } else if (j === 1 && k === 1) { + column.classList.add('events-list'); + } + }); + }); + + renderNews(container.querySelector('.news-list')); + renderEvents(container.querySelector('.events-list')); + + addEventListeners(container); +} + +function iframeResizeHandler(formUrl, id, container) { + const resizerPromise = new Promise((resolve) => { + loadScript('/scripts/iframeResizer.min.js', () => { resolve(); }); + }); + + container.querySelector('iframe').addEventListener('load', async () => { + if (formUrl) { + await resizerPromise; + /* global iFrameResize */ + iFrameResize({ log: false }, id); + } + }); +} + +function capitalize(sting) { + return sting[0].toUpperCase() + sting.slice(1); +} + +async function getLatestNewsletter() { + const newsletters = await ffetch('/query-index.json') + .sheet('resources') + .filter((resource) => resource.type === 'Newsletter') + .limit(3) + .all(); + + const list = ul(); + newsletters.forEach((newsletter) => { + let title = newsletter.path.split('/').slice(-1)[0]; + title = capitalize(title).split('-').join(' '); + list.appendChild(li(a({ href: newsletter.gatedURL }, title, i({ class: 'fa fa-chevron-circle-right' })))); + }); + return list; +} + +async function buildNewsletter(container) { + const newsletterId = 'enewsletter'; + if (container.querySelector(`#${newsletterId} iframe`)) { + return; // newsletter already present } -} - -@media (max-width: 992px) { - .row-5 { - display: flex; - margin-bottom: 8px; - } - - .row-6 { - text-align: center; - } - - .row-5, - .row-6 ul { - justify-content: center; - } -} -@media (max-width: 767px) { - .footer h3+h3 { - margin-top: 20px; + const formId = 'enewsletterSubscribeForm'; + const formUrl = 'https://info.moleculardevices.com/newsletter-signup'; + const form = ( + div({ + id: newsletterId, + class: 'hubspot-iframe-wrapper', + loading: 'lazy', + }, div( + iframe({ + id: formId, + src: formUrl, + loading: 'lazy', + title: 'Newsletter', + }), + ), + ) + ); + + const newsletterList = await getLatestNewsletter(); + + // add submission form from hubspot + container.querySelector(`#${newsletterId}`).replaceWith(form); + container.querySelector(`#${newsletterId}`).insertAdjacentElement('afterend', newsletterList); + iframeResizeHandler(formUrl, `#${formId}`, container); +} + +function decorateSocialMediaLinks(socialIconsContainer) { + socialIconsContainer.querySelectorAll('.social-media-list a').forEach((iconLink) => { + iconLink.ariaLabel = `molecular devices ${iconLink.children[0].classList[1].split('-')[2]} page`; + }); +} + +function decorateImageWithLink(wrapper, link, title) { + const img = wrapper.innerHTML; + const newWrapper = `${img}`; + wrapper.innerHTML = newWrapper; +} + +/** + * loads and decorates the footer + * @param {Element} block The header block element + */ + +export default async function decorate(block) { + block.textContent = ''; + + const footerPath = getMetadata('footer') || '/footer'; + + const resp = await fetch(`${footerPath}.plain.html`, window.location.pathname.endsWith('/footer') ? { cache: 'reload' } : {}); + const html = await resp.text(); + const footer = div(); + footer.innerHTML = html; + + const footerWrap = div({ class: 'footer-wrap' }); + const footerBottom = div({ class: 'footer-bottom' }); + block.appendChild(footerWrap); + block.appendChild(footerBottom); + + placeholders = await fetchPlaceholders(); + + [...footer.children].forEach((row, idx) => { + row.classList.add(`row-${idx + 1}`); + if (idx <= 3) { + footerWrap.appendChild(row); + } else { + footerBottom.appendChild(row); + } + + if (idx === 3) { + decorateSocialMediaLinks(row); + } + + if (idx === 4) { + const mainUrl = 'https://www.moleculardevices.com/'; + decorateImageWithLink(row, mainUrl, 'Molecular Devices'); + } + + if (idx === 5) { + const copyrightTextEn = p({ class: 'en OneLinkHide footer-copyright-text' }, `©${new Date().getFullYear()} Molecular Devices, LLC. All rights reserved.`); + const copyrightTextZh = p({ class: 'zh OneLinkShow_zh footer-copyright-text' }, + `©${new Date().getFullYear()} Molecular Devices, LLC. 保留所有权利。`, + a({ href: 'https://beian.miit.gov.cn/' }, '沪ICP备05056171号-2'), + ' ', + a({ href: 'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=%E6%B2%AA%E5%85%AC%E7%BD%91%E5%AE%89%E5%A4%87%2031010502001469%E5%8F%B7' }, '沪公网安备 31010502001469号'), + ); + const imgWrapper = row.getElementsByTagName('p')[0]; + const danaherUrl = 'https://www.danaher.com/?utm_source=MLD_web&utm_medium=referral&utm_content=trustmarkfooter'; + decorateImageWithLink(imgWrapper, danaherUrl, 'Danaher'); + row.appendChild(copyrightTextEn); + row.appendChild(copyrightTextZh); + } + }); + + buildNewsEvents(block.querySelector('.footer-news-events')); + block.querySelectorAll('.footer-contact').forEach((contactBlock) => decorateBlock(contactBlock)); + + block.append(footer); + block.querySelectorAll('a').forEach(decorateExternalLink); + decorateIcons(block); + + /* + Creating the Newsletter has high TBT due to a high number of external scripts it brings. + However it is an important business piece, so we make all the effort to give a good + experience to user: + 1. We lazy load it 3 seconds later, but if the user reaches the footer before that + 2. We quickly load it with an intersection observer + In most cases it is expected that the newsletter is already present when the user has + scrolled down to it. + */ + const newsletterContainer = block.querySelector('.footer-newsletter-form'); + if (newsletterContainer) { + const observer = new IntersectionObserver((entries) => { + if (entries.some((e) => e.isIntersecting)) { + observer.disconnect(); + buildNewsletter(newsletterContainer); + } + }); + observer.observe(newsletterContainer); + + setTimeout(() => { + observer.disconnect(); + buildNewsletter(newsletterContainer); + }, 3000); } } diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index be3728596..a35907f14 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -196,13 +196,11 @@ export default async function decorate(block) { const resp = await fetch(`${footerPath}.plain.html`, window.location.pathname.endsWith('/footer') ? { cache: 'reload' } : {}); const html = await resp.text(); - const footer = document.createElement('div'); + const footer = div(); footer.innerHTML = html; - const footerWrap = document.createElement('div'); - const footerBottom = document.createElement('div'); - footerWrap.classList.add('footer-wrap'); - footerBottom.classList.add('footer-bottom'); + const footerWrap = div({ class: 'footer-wrap' }); + const footerBottom = div({ class: 'footer-bottom' }); block.appendChild(footerWrap); block.appendChild(footerBottom); @@ -226,9 +224,18 @@ export default async function decorate(block) { } if (idx === 5) { + const copyrightTextEn = p({ class: 'en OneLinkHide footer-copyright-text' }, `©${new Date().getFullYear()} Molecular Devices, LLC. All rights reserved.`); + const copyrightTextZh = p({ class: 'zh OneLinkShow_zh footer-copyright-text' }, + `©${new Date().getFullYear()} Molecular Devices, LLC. 保留所有权利。`, + a({ href: 'https://beian.miit.gov.cn/' }, '沪ICP备05056171号-2'), + ' ', + a({ href: 'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=%E6%B2%AA%E5%85%AC%E7%BD%91%E5%AE%89%E5%A4%87%2031010502001469%E5%8F%B7' }, '沪公网安备 31010502001469号'), + ); const imgWrapper = row.getElementsByTagName('p')[0]; const danaherUrl = 'https://www.danaher.com/?utm_source=MLD_web&utm_medium=referral&utm_content=trustmarkfooter'; decorateImageWithLink(imgWrapper, danaherUrl, 'Danaher'); + row.appendChild(copyrightTextEn); + row.appendChild(copyrightTextZh); } }); @@ -237,7 +244,7 @@ export default async function decorate(block) { block.append(footer); block.querySelectorAll('a').forEach(decorateExternalLink); - await decorateIcons(block); + decorateIcons(block); /* Creating the Newsletter has high TBT due to a high number of external scripts it brings. From c0e6952f04d73ceb94110867bb48d3fea7aa3cad Mon Sep 17 00:00:00 2001 From: Rajneesh Date: Thu, 2 May 2024 15:54:24 +0530 Subject: [PATCH 2/6] china ICP changes --- blocks/footer/footer.css | 629 ++++++++++++++++++++++----------------- 1 file changed, 363 insertions(+), 266 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index a35907f14..88c5ff5ab 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -1,273 +1,370 @@ -import { - decorateIcons, decorateBlock, fetchPlaceholders, getMetadata, -} from '../../scripts/lib-franklin.js'; -import ffetch from '../../scripts/ffetch.js'; -import { - a, div, i, iframe, li, p, ul, -} from '../../scripts/dom-helpers.js'; -import { - decorateExternalLink, formatDate, loadScript, unixDateToString, -} from '../../scripts/scripts.js'; - -let placeholders = {}; - -function toggleNewsEvents(container, target) { - if (!target.parentElement.classList.contains('on')) { - const items = container.querySelectorAll('.toggle'); - [...items].forEach((item) => { - item.classList.toggle('on'); - }); +.footer-wrapper { + background-color: #fff; + background-image: url("../../images/research-bg.png"); + overflow-x: hidden; +} + +.footer.block { + margin: auto; + font-size: 15px; + margin-top: 25px; +} + +.footer-wrap > div { + padding: 15px; +} + +.footer-news-events > div { + display: flex; +} + +.footer-news-events > div > div { + flex-grow: 1; +} + +.footer-news-events > div:first-of-type { + margin-bottom: 7px; +} + +.footer-bottom { + margin-top: 18px; + border-top: 1px solid var(--highlight-background-color); + padding-top: 20px; + padding-bottom: 20px; +} + +.footer ul { + list-style: none; + padding: 0; + margin: 0 0 30px; +} + +.footer a { + color: var(--text-color); +} + +.row-5 i { + margin: 0; +} + +.row-3 a, +.footer h3, +.footer h3 a { + color: var(--button-bg-color); +} + +.footer a:hover { + color: var(--link-hover-color); +} + +.footer a i.fa.fa-external-link { + color: inherit; +} + +.footer h3 { + font-size: 16px; + margin-bottom: 10px; +} + +.footer-news-events h3 { + margin: 0; + padding: 0 15px 6px; +} + +.footer-newsletter-form h3 { + font-size: 20px; +} + +.footer h3 + h3 { + margin-top: 30px; +} + +.footer-news-events .toggle:not(.on) h3 { + color: var(--border-color-gray); +} + +.footer-wrap > div.row-3 { + padding: 0; +} + +.footer-news-events p { + border-bottom: 1px solid var(--highlight-background-color); + padding-bottom: 12px; + margin-top: 6px; + margin-bottom: 12px; +} + +.footer-newsletter-form p { + font-size: 10px; +} + +.footer-news-events p:last-of-type { + border: none; +} + +.footer-news-events p:last-of-type a { + color: var(--button-bg-color); +} + +.footer-news-events > div:first-of-type > div { + border-bottom: 2px solid var(--highlight-background-color); + margin-left: 0; +} + +.footer-news-events > div:nth-child(1) > div:nth-child(1) { + text-align: right; +} + +.footer-news-events > div:first-of-type > div:first-of-type { + text-align: right; + border-right: 2px solid var(--button-bg-color); +} + +.footer-news-events > div:first-of-type > div.toggle.on { + border-bottom: 3px solid var(--button-bg-color); +} + +.footer-news-events > div:nth-child(2) > div.toggle { + display: none; +} + +.footer-news-events > div:nth-child(2) > div.toggle.on { + display: block; +} + +.footer-newsletter-form { + background-color: var(--grey-background-color); + padding: 0 15px 15px; +} + +.footer-newsletter-form ul { + margin-top: 15px; +} + +.footer-newsletter-form li { + margin-bottom: 5px; + max-width: 162px; +} + +.footer-newsletter-form i { + float: right; +} + +.row-6 ul { + display: flex; + flex-wrap: wrap; + font-family: var(--ff-proxima-light); + margin-bottom: 16px; +} + +.row-4 li { + margin-top: -5px; + position:relative; + top: -30px; + left: 36px; +} + +.row-4 picture { + position: relative; + top: 30px; + left: -36px; +} + +.footer-wrap .footer-contact img { + width: auto; +} + +.row-5 > a[aria-label="Molecular Devices"], +.row-6 a[aria-label='Danaher'] { + background-position: top; + background-repeat: no-repeat; + background-size: contain; + display: block; +} + +.row-5 > a[aria-label="Molecular Devices"] { + background-image: url('/images/header-menus/logo.svg'); +} + +.row-6 a[aria-label='Danaher'] { + background-image: url('/images/danaher.svg'); +} + +.row-5 > a[aria-label="Molecular Devices"] img, +.row-6 a[aria-label='Danaher'] img{ + opacity: 0; +} + +.row-5 ul { + display: flex; + font-size:21px; + margin: 0; + padding: 12px 0 5px; +} + +.row-4 ul:first-of-type { + border-bottom: 1px solid #ccc; + margin: 5px 0 15px; +} + +.row-6 { + font-size: 12.3px; +} + +.row-6 ul li { + flex-shrink: 0; + margin-left: 12px; + margin-bottom: 7px; +} + +.row-5 li:not(:last-child) { + padding-right:32px; +} + +.row-6 i { + margin-left: 3px; +} + +.fa-external-link { + position: relative; + bottom: 5px; +} + +.row-3 .hubspot-iframe-wrapper { + margin-left: -15px; + margin-right: -15px; +} + +.row-3 .hubspot-iframe-wrapper iframe { + border: 0; + margin: 0; + padding: 0; + display: block; + width: 1px; + min-width: 100%; + height: 1px; + max-height: 100%; +} + +.footer .row-1 h3:first-child, +.footer .row-4 h3:first-child { + margin-top: 0; +} + +.footer-wrap .social-media-list ul { + margin-bottom: 0; + display: flex; + border-bottom: none; +} + +.footer-wrap .social-media-list ul li { + margin-top: 0; + position: static; + margin-right: 10px; +} + +.footer-wrap .social-media-list ul li a { + font-size: 24px; + color: var(--text-blue); + display: block; + padding: 8px; +} + +.footer-wrap .social-media-list ul li a img { + display: inline-block; + width: 30px; + height: 23px; + vertical-align: middle; +} + +.footer-wrap .social-media-list ul li a i { + margin-left: 0; +} + +@media (min-width: 768px) { + .footer.block { + width: 750px; + } + + .footer-wrap { + display: flex; + } + + .footer-wrap > div { + width: 25%; } } -function addEventListeners(container) { - const h3s = container.querySelectorAll('h3'); - [...h3s].forEach((h3) => { - h3.addEventListener('click', (e) => { - toggleNewsEvents(container, e.target); - }); - }); -} - -function renderEntry(item) { - return ( - p(formatDate(unixDateToString(item.date)), - document.createElement('br'), - a({ - href: item.path, - 'aria-label': item.title, - }, item.title), - ) - ); -} - -function renderMoreLink(text, link) { - return ( - p( - a({ - href: link, - 'aria-label': text, - }, text, i({ - class: 'fa fa-chevron-circle-right', - 'aria-hidden': true, - }), - ), - ) - ); -} - -async function renderEvents(container) { - const events = await ffetch('/query-index.json') - .sheet('events') - .filter((item) => item.eventEnd * 1000 > Date.now()) - .all(); - const sortedEvents = events.sort((first, second) => first.eventStart - second.eventStart) - .slice(0, 3); - container.innerHTML = ''; - sortedEvents.forEach((item) => { - item.date = item.eventStart; - container.append(renderEntry(item)); - }); - container.append(renderMoreLink(placeholders.moreEvents || 'More Events', '/events')); -} - -async function renderNews(container) { - const news = await ffetch('/query-index.json') - .sheet('news') - .chunks(5) - .slice(0, 3) - .all(); - container.innerHTML = ''; - news.forEach( - (item) => container.append(renderEntry(item)), - ); - container.append(renderMoreLink(placeholders.moreNews || 'More News', '/newsroom/news')); -} - -async function buildNewsEvents(container) { - if (!container) return; - [...container.children].forEach((row, j) => { - [...row.children].forEach((column, k) => { - column.classList.add('toggle'); - if (k === 0) { - column.classList.add('on'); - } - if (j === 1 && k === 0) { - column.classList.add('news-list'); - } else if (j === 1 && k === 1) { - column.classList.add('events-list'); - } - }); - }); - - renderNews(container.querySelector('.news-list')); - renderEvents(container.querySelector('.events-list')); - - addEventListeners(container); -} - -function iframeResizeHandler(formUrl, id, container) { - const resizerPromise = new Promise((resolve) => { - loadScript('/scripts/iframeResizer.min.js', () => { resolve(); }); - }); - - container.querySelector('iframe').addEventListener('load', async () => { - if (formUrl) { - await resizerPromise; - /* global iFrameResize */ - iFrameResize({ log: false }, id); - } - }); -} - -function capitalize(sting) { - return sting[0].toUpperCase() + sting.slice(1); -} - -async function getLatestNewsletter() { - const newsletters = await ffetch('/query-index.json') - .sheet('resources') - .filter((resource) => resource.type === 'Newsletter') - .limit(3) - .all(); - - const list = ul(); - newsletters.forEach((newsletter) => { - let title = newsletter.path.split('/').slice(-1)[0]; - title = capitalize(title).split('-').join(' '); - list.appendChild(li(a({ href: newsletter.gatedURL }, title, i({ class: 'fa fa-chevron-circle-right' })))); - }); - return list; -} - -async function buildNewsletter(container) { - const newsletterId = 'enewsletter'; - if (container.querySelector(`#${newsletterId} iframe`)) { - return; // newsletter already present +@media (min-width: 992px) { + .footer.block { + width: 970px; + } + + .footer-bottom, + .footer-bottom .row-6 { + display: flex; + justify-content: space-between; + } + + .footer-bottom { + padding: 15px 15px 30px; + position: relative; + } + + .footer-bottom .row-6 { + justify-content: flex-end; + align-items: flex-end; + } + + .footer-bottom .row-6 ul { + max-width: 65%; + justify-content: right; + padding-right: 32px; + margin-bottom: 0; } - const formId = 'enewsletterSubscribeForm'; - const formUrl = 'https://info.moleculardevices.com/newsletter-signup'; - const form = ( - div({ - id: newsletterId, - class: 'hubspot-iframe-wrapper', - loading: 'lazy', - }, div( - iframe({ - id: formId, - src: formUrl, - loading: 'lazy', - title: 'Newsletter', - }), - ), - ) - ); - - const newsletterList = await getLatestNewsletter(); - - // add submission form from hubspot - container.querySelector(`#${newsletterId}`).replaceWith(form); - container.querySelector(`#${newsletterId}`).insertAdjacentElement('afterend', newsletterList); - iframeResizeHandler(formUrl, `#${formId}`, container); -} - -function decorateSocialMediaLinks(socialIconsContainer) { - socialIconsContainer.querySelectorAll('.social-media-list a').forEach((iconLink) => { - iconLink.ariaLabel = `molecular devices ${iconLink.children[0].classList[1].split('-')[2]} page`; - }); -} - -function decorateImageWithLink(wrapper, link, title) { - const img = wrapper.innerHTML; - const newWrapper = `${img}`; - wrapper.innerHTML = newWrapper; -} - -/** - * loads and decorates the footer - * @param {Element} block The header block element - */ - -export default async function decorate(block) { - block.textContent = ''; - - const footerPath = getMetadata('footer') || '/footer'; - - const resp = await fetch(`${footerPath}.plain.html`, window.location.pathname.endsWith('/footer') ? { cache: 'reload' } : {}); - const html = await resp.text(); - const footer = div(); - footer.innerHTML = html; - - const footerWrap = div({ class: 'footer-wrap' }); - const footerBottom = div({ class: 'footer-bottom' }); - block.appendChild(footerWrap); - block.appendChild(footerBottom); - - placeholders = await fetchPlaceholders(); - - [...footer.children].forEach((row, idx) => { - row.classList.add(`row-${idx + 1}`); - if (idx <= 3) { - footerWrap.appendChild(row); - } else { - footerBottom.appendChild(row); - } - - if (idx === 3) { - decorateSocialMediaLinks(row); - } - - if (idx === 4) { - const mainUrl = 'https://www.moleculardevices.com/'; - decorateImageWithLink(row, mainUrl, 'Molecular Devices'); - } - - if (idx === 5) { - const copyrightTextEn = p({ class: 'en OneLinkHide footer-copyright-text' }, `©${new Date().getFullYear()} Molecular Devices, LLC. All rights reserved.`); - const copyrightTextZh = p({ class: 'zh OneLinkShow_zh footer-copyright-text' }, - `©${new Date().getFullYear()} Molecular Devices, LLC. 保留所有权利。`, - a({ href: 'https://beian.miit.gov.cn/' }, '沪ICP备05056171号-2'), - ' ', - a({ href: 'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=%E6%B2%AA%E5%85%AC%E7%BD%91%E5%AE%89%E5%A4%87%2031010502001469%E5%8F%B7' }, '沪公网安备 31010502001469号'), - ); - const imgWrapper = row.getElementsByTagName('p')[0]; - const danaherUrl = 'https://www.danaher.com/?utm_source=MLD_web&utm_medium=referral&utm_content=trustmarkfooter'; - decorateImageWithLink(imgWrapper, danaherUrl, 'Danaher'); - row.appendChild(copyrightTextEn); - row.appendChild(copyrightTextZh); - } - }); - - buildNewsEvents(block.querySelector('.footer-news-events')); - block.querySelectorAll('.footer-contact').forEach((contactBlock) => decorateBlock(contactBlock)); - - block.append(footer); - block.querySelectorAll('a').forEach(decorateExternalLink); - decorateIcons(block); - - /* - Creating the Newsletter has high TBT due to a high number of external scripts it brings. - However it is an important business piece, so we make all the effort to give a good - experience to user: - 1. We lazy load it 3 seconds later, but if the user reaches the footer before that - 2. We quickly load it with an intersection observer - In most cases it is expected that the newsletter is already present when the user has - scrolled down to it. - */ - const newsletterContainer = block.querySelector('.footer-newsletter-form'); - if (newsletterContainer) { - const observer = new IntersectionObserver((entries) => { - if (entries.some((e) => e.isIntersecting)) { - observer.disconnect(); - buildNewsletter(newsletterContainer); - } - }); - observer.observe(newsletterContainer); - - setTimeout(() => { - observer.disconnect(); - buildNewsletter(newsletterContainer); - }, 3000); + .footer-bottom .row-6 p { + margin: 0; + } + + .footer-bottom .row-6 .footer-copyright-text { + margin-top: 40px; + position: absolute; + max-width: 400px; + top: 10px; + left: 15px; + } +} + +@media (min-width: 1200px) { + .footer.block { + width: 1170px; + } + + .footer-bottom .row-6 .footer-copyright-text { + max-width: 100%; + top: auto; + } +} + +@media (max-width: 992px) { + .row-5 { + display: flex; + margin-bottom: 8px; + } + + .row-6 { + text-align: center; + } + + .row-5, + .row-6 ul { + justify-content: center; + } +} + +@media (max-width: 767px) { + .footer h3+h3 { + margin-top: 20px; } } From effd21e3742826d2c1414317fc2db66096e2908d Mon Sep 17 00:00:00 2001 From: Rajneesh Date: Thu, 2 May 2024 16:13:50 +0530 Subject: [PATCH 3/6] new chanes --- blocks/footer/footer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index a35907f14..913804ab0 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -225,7 +225,7 @@ export default async function decorate(block) { if (idx === 5) { const copyrightTextEn = p({ class: 'en OneLinkHide footer-copyright-text' }, `©${new Date().getFullYear()} Molecular Devices, LLC. All rights reserved.`); - const copyrightTextZh = p({ class: 'zh OneLinkShow_zh footer-copyright-text' }, + const copyrightTextZh = p({ class: 'zh OneLinkShow_zh1 footer-copyright-text' }, `©${new Date().getFullYear()} Molecular Devices, LLC. 保留所有权利。`, a({ href: 'https://beian.miit.gov.cn/' }, '沪ICP备05056171号-2'), ' ', From f257654d191fc2ed31337966d035da262b881a3c Mon Sep 17 00:00:00 2001 From: dev-rajneeshkumar Date: Mon, 6 May 2024 11:34:25 +0530 Subject: [PATCH 4/6] added spacing between links --- blocks/footer/footer.js | 7 +++---- scripts/scripts.js | 5 +++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 913804ab0..5b7f39586 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -226,10 +226,9 @@ export default async function decorate(block) { if (idx === 5) { const copyrightTextEn = p({ class: 'en OneLinkHide footer-copyright-text' }, `©${new Date().getFullYear()} Molecular Devices, LLC. All rights reserved.`); const copyrightTextZh = p({ class: 'zh OneLinkShow_zh1 footer-copyright-text' }, - `©${new Date().getFullYear()} Molecular Devices, LLC. 保留所有权利。`, - a({ href: 'https://beian.miit.gov.cn/' }, '沪ICP备05056171号-2'), - ' ', - a({ href: 'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=%E6%B2%AA%E5%85%AC%E7%BD%91%E5%AE%89%E5%A4%87%2031010502001469%E5%8F%B7' }, '沪公网安备 31010502001469号'), + `©${new Date().getFullYear()} Molecular Devices, LLC. 保留所有权利`, + a({ href: 'https://beian.miit.gov.cn/', style: 'margin-left: 4px;' }, ' 沪ICP备05056171号-2'), + a({ href: 'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=%E6%B2%AA%E5%85%AC%E7%BD%91%E5%AE%89%E5%A4%87%2031010502001469%E5%8F%B7', style: 'margin-left: 4px;' }, ' 沪公网安备 31010502001469号'), ); const imgWrapper = row.getElementsByTagName('p')[0]; const danaherUrl = 'https://www.danaher.com/?utm_source=MLD_web&utm_medium=referral&utm_content=trustmarkfooter'; diff --git a/scripts/scripts.js b/scripts/scripts.js index e1e564f8d..f8b7acb42 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -1059,7 +1059,8 @@ export function setCookie(cname, cvalue, exdays) { let hostName = ''; let domain = ''; let expires = ''; - date.setTime(date.getTime() + exdays * 24 * 60 * 60 * 1000); + // date.setTime(date.getTime() + exdays * 24 * 60 * 60 * 1000); + date.setTime(date.getTime() + exdays * 60 * 1000); if (exdays !== 0) { expires = `expires=${date.toUTCString()}`; } @@ -1162,7 +1163,7 @@ async function loadPage() { const cookieParams = ['cmp', 'utm_medium', 'utm_source', 'utm_keyword', 'gclid']; cookieParams.forEach((param) => { - setCookieFromQueryParameters(param, 0); + setCookieFromQueryParameters(param, 2); }); export function isAuthorizedUser() { From 6d15cd219ee8a60d83aaed1dfefc40a35f9ad2ff Mon Sep 17 00:00:00 2001 From: dev-rajneeshkumar Date: Mon, 6 May 2024 13:03:58 +0530 Subject: [PATCH 5/6] tested cookie expiration date --- scripts/scripts.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index f8b7acb42..4cce0c81d 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -1060,8 +1060,10 @@ export function setCookie(cname, cvalue, exdays) { let domain = ''; let expires = ''; // date.setTime(date.getTime() + exdays * 24 * 60 * 60 * 1000); - date.setTime(date.getTime() + exdays * 60 * 1000); if (exdays !== 0) { + // expires = `expires=${date.toUTCString()}`; + + date.setTime(date.getTime() + (exdays * 60 * 1000)); expires = `expires=${date.toUTCString()}`; } From 2275301d86943023994ea7e497315d4632ed7028 Mon Sep 17 00:00:00 2001 From: dev-rajneeshkumar Date: Mon, 6 May 2024 14:07:46 +0530 Subject: [PATCH 6/6] increated cookie expiration time --- scripts/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index 4cce0c81d..b041d1cd9 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -1165,7 +1165,7 @@ async function loadPage() { const cookieParams = ['cmp', 'utm_medium', 'utm_source', 'utm_keyword', 'gclid']; cookieParams.forEach((param) => { - setCookieFromQueryParameters(param, 2); + setCookieFromQueryParameters(param, 60); }); export function isAuthorizedUser() {