MH3.FY24.0716 Release

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;

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 = `
   <div class="nav-top">
     <div class="nav-brand">
-      <a class="adp-logo" href="${getBaseConfigPath()}/"></a>
+      <a class="adp-logo" href="${logoUrl ?? getBaseConfigPath()}/"></a>
       <div></div>
     </div>
     <div class="nav-sections">
@@ -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);

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;
+}

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);
 
 }

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);
     });
 }
-

scripts/assets.js

@@ -55,8 +55,7 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) {
 
   const indexName =  await getSearchIndex();
 
-
-  if (!progamName && !campaginName)
+  if (!programName && !campaignName)
   {
     // Display Underdevelopment Icon
     return await getUnderdevelopmentIcon();

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');
   }

styles/styles.css

@@ -171,6 +171,10 @@ header.hidden {
   display: none;
 }
 
+header.hide-navigation-tabs{
+  height: 30px;
+}
+
 h1,
 h2,
 h3,