diff --git a/blocks/adp-header/adp-header.css b/blocks/adp-header/adp-header.css index bfd8516f..52585a73 100644 --- a/blocks/adp-header/adp-header.css +++ b/blocks/adp-header/adp-header.css @@ -514,6 +514,10 @@ header nav .nav-bottom { width: 100%; } +header.hide-navigation-tabs nav .nav-bottom { + display: none; +} + header nav { display: grid; grid-template-areas: @@ -526,6 +530,12 @@ header nav { box-shadow: 0 0 4px rgba(233 233 233 / 100%); } +header.hide-navigation-tabs nav { + grid-template-areas: + "nav-top"; + grid-template-rows: calc(var(--nav-height) - var(--header-banner-height)); +} + .contenthub header nav { background: var(--contenthub-header-background); border-bottom: unset; diff --git a/blocks/adp-header/adp-header.js b/blocks/adp-header/adp-header.js index b3eafe7c..16c4da45 100644 --- a/blocks/adp-header/adp-header.js +++ b/blocks/adp-header/adp-header.js @@ -106,14 +106,14 @@ function toggleMenu(nav, navSections, forceExpanded = null) { */ export default async function decorate(block) { block.textContent = ''; - + const logoUrl = document.querySelector('head meta[name="logo-link"]')?.getAttribute('content'); // decorate nav DOM const nav = document.createElement('nav'); nav.id = 'nav'; nav.innerHTML = `
- +
@@ -224,7 +224,7 @@ export default async function decorate(block) { } if (await getUserProfile() !== null) { - document.querySelector('.adp-logo').href = getBaseConfigPath() + '/assets'; + document.querySelector('.adp-logo').href = logoUrl ?? (getBaseConfigPath() + '/assets'); loadSearchField(nav); if (!window.unifiedShellRuntime) { await createUserInfo(nav); diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index 733ef284..86239780 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -584,3 +584,10 @@ body { } } +.hide-overflow { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 89e776c1..2531bf5a 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -215,13 +215,17 @@ export default async function decorate(block) { }, 300)); enableBackBtn(block, blockConfig); + block.querySelectorAll('.read-more').forEach((button) => { button.addEventListener('click', (event) => { const readMore = event.target; const parent = readMore.parentElement; - parent.querySelector('.paragraph').classList.toggle('hide-overflow'); + const paragraph = parent.querySelector('.paragraph'); + paragraph.classList.toggle('hide-overflow'); + readMore.textContent = paragraph.classList.contains('hide-overflow') ? 'Read more' : 'Read less'; }); }); + decorateIcons(block); } diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 0635f963..9b331872 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -50,7 +50,6 @@ let totalPages = 0; let campaignCount = await graphqlCampaignCount(); let blockConfig; -//Custom event gmoCampaignListBlock to allow the gmo-campaign-header to trigger the gmo-program-list to update document.addEventListener('gmoCampaignListBlock', async function() { //Build graphq filter that is passed to the graphql persisted queries const graphQLFilterArray = getFilterValues(); @@ -64,18 +63,16 @@ document.addEventListener('gmoCampaignListBlock', async function() { const block = document.querySelector('.gmo-program-list.block'); //Get Campaign Count for pagination campaignCount = await graphqlCampaignCount(currentGraphqlFilter); - //Trigger loading the gmo-campaign-block + //Reset page variables currentPageInfo = {}; cursorArray = []; currentPage = 1; currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; - + //Trigger loading the gmo-campaign-block decorate( block, currentNumberPerPage, '', false, false, currentGraphqlFilter); - }); - export default async function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) { if (blockConfig == undefined) blockConfig = readBlockConfig(block); const campaignPaginatedResponse = await graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter); @@ -117,8 +114,32 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, listContainer.appendChild(listItems); listContainer.appendChild(listFooter); // Show Hide Previous and Next Page buttons - const footerNext = document.querySelector('.footer-pagination-button.next'); + togglePaginationButtons(); + + decorateIcons(block); + + // Lazy loading for images + document.addEventListener('DOMContentLoaded', function() { + if ('IntersectionObserver' in window) { + const lazyImages = document.querySelectorAll('.lazy'); + const observer = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const img = entry.target; + img.src = img.dataset.src; + img.classList.remove('lazy'); + observer.unobserve(img); + } + }); + }); + lazyImages.forEach(img => observer.observe(img)); + } + }); +} + +function togglePaginationButtons() { const footerPrev = document.querySelector('.footer-pagination-button.prev'); + const footerNext = document.querySelector('.footer-pagination-button.next'); if (currentPage > 1) { footerPrev.classList.add('active'); } else { @@ -130,9 +151,6 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, } else { footerNext.classList.remove('active'); } - - decorateIcons(block); - } function getFilterValues(){ @@ -275,14 +293,13 @@ function buildStatus(statusWrapper, campaign) { } async function addThumbnail(parentElement, programName, campaignName) { - searchAsset(programName, campaignName).then((response) => { - if (response && (Object.hasOwn(response, 'imageUrl') && Object.hasOwn(response, 'imageAltText'))) { - const iconImage = document.createElement('img'); - iconImage.src = response?.imageUrl; - iconImage.alt = response?.imageAltText; - parentElement.appendChild(iconImage); - } - }) + const response = await searchAsset(programName, campaignName); + if (response?.imageUrl && response?.imageAltText) { + const iconImage = document.createElement('img'); + iconImage.src = response.imageUrl; + iconImage.alt = response.imageAltText; + parentElement.appendChild(iconImage); + } } async function buildProduct(product) { @@ -529,4 +546,3 @@ function sortColumn(dir, property) { container.appendChild(row); }); } - diff --git a/scripts/scripts.js b/scripts/scripts.js index de80ce00..7100baf9 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -268,6 +268,9 @@ async function loadLazy(doc) { } if (!(document.querySelector('head meta[name="hide-header"]')?.getAttribute('content') === 'true')) { loadHeader(doc.querySelector('header'), 'adp-header'); + if(document.querySelector('head meta[name="hide-navigation-tabs"]')?.getAttribute('content') === 'true'){ + doc.querySelector('header').classList.add('hide-navigation-tabs'); + } } else { document.querySelector('header').classList.add('hidden'); } diff --git a/styles/styles.css b/styles/styles.css index 655685fd..c0ff6f91 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -171,6 +171,10 @@ header.hidden { display: none; } +header.hide-navigation-tabs{ + height: 30px; +} + h1, h2, h3,