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 36b33cec..b435e3fa 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -1,9 +1,11 @@ :root { border-bottom: none; } + body { background-color: rgb(247, 246, 246); } + .back-button { margin-top: 20px; background-color: #FFFFFF; @@ -26,6 +28,7 @@ body { font-weight: bold; } } + .gmo-program-details.block { & .h1 { font: normal normal bold 18px/27px Adobe Clean; @@ -99,6 +102,51 @@ body { } } +.header-row3 .icon-release-tier { + width: 16px; + height: 16px; + background-image: url('/icons/launch.svg'); + background-size: contain; + background-repeat: no-repeat; + margin-right: 8px; + margin-left: 16px; +} + +.header-row3 .icon-categories { + width: 16px; + height: 16px; + background-image: url('/icons/folderOpenOutline.svg'); + background-size: contain; + background-repeat: no-repeat; + margin-right: 8px; + margin-left: 16px; +} + +.header-row3 .release-tier { + font: normal normal normal 14px/21px Adobe Clean; + margin-left: 8px; +} + +.header-row3 .categories { + font: normal normal normal 14px/21px Adobe Clean; + margin-left: 8px; +} + + +.details-header-wrapper .header-row3 { + display: flex; + align-items: center; +} + +.details-header-wrapper .header-row3 .icon-calendar { + margin-right: 10px; +} + +.details-header-wrapper .header-row3 .driver-text { + font: normal normal normal 14px/21px Adobe Clean; + margin-left: 55px; +} + .campaign-img { width: 80px; height: 80px; @@ -133,6 +181,7 @@ body { } } } + .tab.two-column { display: flex; flex-direction: row; @@ -569,6 +618,7 @@ body { cursor: pointer; } } + .kpis-wrapper { margin-top: 30px; & ul { @@ -582,6 +632,7 @@ body { margin-top: 15px; } } + .use-cases-wrapper { margin-bottom: 30px; } @@ -619,6 +670,7 @@ body { flex-direction: column; margin-top: 20px; } + .links-wrapper { margin-top: 30px; & .links { @@ -632,6 +684,7 @@ body { color: #0D66D0; } } + .infocards-wrapper { margin-right: 40px; & .card { @@ -645,6 +698,7 @@ body { } } } + .card { & .card-heading { margin-top: 10px; @@ -660,6 +714,7 @@ body { font-size: 14px; } } + .milestone, .card-content { font: normal normal normal 14px/21px Adobe Clean; & .icon { @@ -672,6 +727,7 @@ body { margin-bottom: 5px; } } + .deliverables { & > .page-heading { display: flex; @@ -707,6 +763,48 @@ body { } } } + +.total-assets-tooltip { + position: relative; + display: inline-block; + cursor: pointer; +} + +.total-assets-tooltip .tooltiptext { + visibility: hidden; + white-space: nowrap; /* Ensure text appears on one line */ + background-color: #D3D3D3; /* Match the background color */ + color: black; /* Match the text color */ + text-align: left; /* Left-align the text */ + border-radius: 4px; + padding: 5px 10px; /* Adjust padding as needed */ + position: absolute; + z-index: 1; + top: 50%; /* Center vertically */ + left: 100%; /* Position to the right of the element */ + transform: translateY(-50%); /* Center vertically */ + margin-left: 10px; /* Adjust margin to match the screenshot */ + opacity: 0; + transition: opacity 0.3s; + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */ +} + +.total-assets-tooltip .tooltiptext::after { + content: ""; + position: absolute; + top: 50%; /* Center the arrow vertically */ + left: -5px; /* Adjust to position the arrow */ + transform: translateY(-50%); /* Center vertically */ + border-width: 5px; + border-style: solid; + border-color: transparent #D3D3D3 transparent transparent; /* Arrow color matches tooltip background */ +} + +.total-assets-tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; +} + .table-wrapper { font: normal normal bold 14px/21px Adobe Clean; & > .table-header { @@ -724,6 +822,7 @@ body { top: 0; } } + .table-content { max-height: 45vh; min-height: 7vh; @@ -732,10 +831,12 @@ body { display: none; } } + .inactive { display: none !important; visibility: hidden; } + .row { height: 56px; &:not(:last-child) { @@ -744,15 +845,16 @@ body { &.datarow { display: flex; align-items: center; - height: 88px; + height: auto; /* Set to auto to accommodate varying heights */ font-weight: 200; & .property { - line-height: 88px; + line-height: normal; /* Adjust line-height to normal */ + padding: 10px 0; /* Add padding for better spacing */ } &:first-child, &:nth-child(2) { border-top: 2px solid #F4F4F4; } - & .deliverable-name, .platforms, .deliverable-type, .review-link, .kpi { + & .deliverable-name, .platforms, .deliverable-type, .qa-files, .kpi { overflow: hidden; text-overflow: ellipsis; line-height: 16px; @@ -760,7 +862,7 @@ body { & .date-wrapper { display: flex; flex-direction: column; - justify-content:center; + justify-content: center; & > .completion-date, .revised-date { line-height: 21px; } @@ -801,6 +903,7 @@ body { justify-content: center; } } + .subheader { &:nth-child(2) { border-top: 2px solid #F4F4F4; @@ -845,12 +948,13 @@ body { border-radius: 3px; } } - } + .header-row3:hover .date-tooltip { visibility: visible; opacity: 1; } + .date-tooltip { background-color: #D3D3D3; border-radius: 2px; @@ -863,32 +967,58 @@ body { font: normal normal normal 12px/17px Adobe Clean; margin-left: 100px; } + .column1 { margin-left: 45px; } + .column1 { width: 200px; } + .column3 { width: 140px; } -.column4, & .column5, & .column6 { + +.column4, .column5, .column6 { width: 110px; } + .column2 { width: 130px; } + .column7 { width: 170px; } + .column8 { width: 120px; } + .column9 { width: 150px; + word-wrap: break-word; + white-space: normal; + line-height: 1.2; } + .table-column { &:not(:last-child) { margin-right: 85px; } } + +@media (max-width: 1255px) { + .column9 { + width: 100px; + } +} + +.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 1aea7567..deadd4af 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -15,12 +15,47 @@ const platformMappings = getMappingArray('platforms'); export default async function decorate(block) { const encodedSemi = encodeURIComponent(';'); const encodedProgram = encodeURIComponent(programName); + + blockConfig = readBlockConfig(block); + const programQueryString = `getProgramDetails${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; + const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; + + // Immediately render a placeholder header + block.innerHTML = ` +
+ + Back +
+
+
Loading program details...
+
+ `; + + // Wait for program data to render the actual header const programData = await executeQuery(programQueryString); const program = programData.data.programList.items[0]; - blockConfig = readBlockConfig(block); const header = buildHeader(program, queryVars).outerHTML; - if (!program) { + + // Update the header with the actual data + block.querySelector('.placeholder-header').outerHTML = header; + + let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0}; + let totalassets = 0; + if (program) { + try { + imageObject = await searchAsset(program.programName, program.campaignName); + if (imageObject) { + insertImageIntoCampaignImg(block, imageObject); + totalassets = imageObject.assetCount; + } + } catch (error) { + console.error("Failed to load campaign image:", error); + } + decorateIcons(block); + } + else + { //programName and campaignName is null block.innerHTML = `
@@ -30,36 +65,32 @@ export default async function decorate(block) { ${header}
No data available.
- ` + `; + try { + //programName and campaignName is null display under development icon + imageObject = await searchAsset(null, null); + if (imageObject) { + insertImageIntoCampaignImg(block, imageObject); + totalassets = imageObject.assetCount; + } + } catch (error) { + console.error("Failed to load campaign image:", error); + } + decorateIcons(block); enableBackBtn(block, blockConfig); return; } - const deliverableQueryString = `getProgramDeliverables${encodedSemi}programName=${encodedProgram}${encodedSemi}programID=${encodeURIComponent(programID)}`; - const deliverables = await executeQuery(deliverableQueryString); - const p0TargetMarketArea = program.p0TargetMarketArea; const p1TargetMarketArea = program.p1TargetMarketArea; - - // Extract unique deliverable types - const uniqueDeliverableTypes = getUniqueItems(programData.data.deliverableList.items, 'deliverableType'); - // Extract unique platforms (flattened from arrays within each item) - const uniquePlatforms = getUniqueItems(programData.data.deliverableList.items, 'platforms'); const kpis = buildKPIList(program).outerHTML; - const targetMarketAreas = buildTargetMarketAreaList(p0TargetMarketArea,p1TargetMarketArea).outerHTML; - const audiences = buildAudienceList(program).outerHTML; const artifactLinks = buildArtifactLinks(program).outerHTML; - - block.innerHTML = ` -
- - Back -
-
- ${header} + + // Inject the additional HTML content + block.querySelector('.main-body-wrapper').innerHTML += `
Overview
Deliverables
@@ -126,21 +157,22 @@ export default async function decorate(block) {
${artifactLinks} -
-
Total Assets
- +
+
Total Approved Assets
+ ${totalassets} + To view the assets, go to the "All Asset" search page and use Program and Campaign name facet to filter the assets
-
Deliverable Name
+
Deliverable Task Name
Deliverable Type
Platforms
-
Review Link
+
QA Files
Final Asset
Status Update
Completion Date
-
Project Owner
+
Task Owner
@@ -173,35 +205,55 @@ export default async function decorate(block) {
`; + + // Wait for deliverables data + const deliverables = await executeQuery(deliverableQueryString); + + const uniqueDeliverableTypes = getUniqueItems(programData.data.deliverableList.items, 'deliverableType'); + const uniquePlatforms = getUniqueItems(programData.data.deliverableList.items, 'platforms'); + buildProductCard(program); - try { - const imageObject = await searchAsset(program.programName, program.campaignName); - if (imageObject){ - insertImageIntoCampaignImg(block,imageObject); - document.getElementById('totalassets').textContent = imageObject.assetCount; - } - else - { - document.getElementById('totalassets').textContent = 0; - } - } catch (error) { - console.error("Failed to load campaign image:", error); - } + buildFieldScopes('deliverable-type', uniqueDeliverableTypes, block); + buildFieldScopes('platforms', uniquePlatforms, block); - block.querySelector('.tab-wrapper').addEventListener('click', (event) => { + const table = await buildTable(await deliverables).then(async (rows) => { + return rows; + }); + + // Batch Dom Updates + const tableRoot = block.querySelector('.table-content'); + const fragment = document.createDocumentFragment(); + fragment.appendChild(table); + tableRoot.appendChild(fragment); + + buildStatus(program.status); + + // Optimize Event Listeners: Added debouncing to event listeners to prevent performance issues. + const debounce = (func, delay) => { + let timeout; + return (...args) => { + clearTimeout(timeout); + timeout = setTimeout(() => func(...args), delay); + }; + }; + + block.querySelector('.tab-wrapper').addEventListener('click', debounce((event) => { switchTab(event.target); - }) + }, 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); - buildFieldScopes('deliverable-type',uniqueDeliverableTypes, block); - buildFieldScopes('platforms',uniquePlatforms, block); const table = await buildTable(await deliverables).then(async (rows) => { return rows; }) @@ -223,6 +275,13 @@ function enableBackBtn(block, blockConfig) { }) } +function buildDriverField(driverName) { + const driverSpan = document.createElement('span'); + driverSpan.classList.add('driver-text'); + driverSpan.innerHTML = `Project Owner: ${driverName}`; + return driverSpan; +} + function buildHeader(program, queryVars) { const headerWrapper = document.createElement('div'); headerWrapper.classList.add('details-header-wrapper'); @@ -230,6 +289,26 @@ function buildHeader(program, queryVars) { `Launch date${formatDate(program.launchDate)}
` : ""; const programName = program ? program.programName : queryVars.programName; const campaignName = program && program.campaignName ? '
' + program.campaignName + '
': ""; + + const driver = program && program.driver ? program.driver : "Not Available"; + let driverField = ''; + + if (program){ + driverField=buildDriverField(driver).outerHTML; + } + + const releaseTier = ` +
+ + Release Tier: ${program.releaseTier || "Not Available"} +
`; + + const categories = ` +
+ + ${program.categories && program.categories.length > 0 ? program.categories.join(', ') : "Not Available"} +
`; + headerWrapper.innerHTML = `
@@ -238,7 +317,12 @@ function buildHeader(program, queryVars) { ${programName}
${campaignName} - ${date} +
+ ${date} + ${driverField} + ${releaseTier} + ${categories} +
` return headerWrapper; @@ -260,9 +344,11 @@ function getUniqueItems(items, property) { )]; } -function insertImageIntoCampaignImg(block,imageObject) { +function insertImageIntoCampaignImg(block, imageObject) { const campaignImgDiv = block.querySelector('.campaign-img'); const imgElement = document.createElement('img'); + //Lazy load images + imgElement.loading = 'lazy'; imgElement.src = imageObject.imageUrl; imgElement.alt = imageObject.imageAltText; campaignImgDiv.appendChild(imgElement); @@ -271,7 +357,7 @@ function insertImageIntoCampaignImg(block,imageObject) { function switchTab(tab) { if (tab.classList.contains('active') || tab.classList.contains('tab-wrapper')) { return; - } + } document.querySelector('.tabBtn.active').classList.toggle('active'); document.querySelector(`.tab:not(.inactive)`).classList.toggle('inactive'); const targetTab = tab.dataset.target; @@ -424,7 +510,7 @@ function formatDate(dateString) { // Formatting the date into mm/dd/yyyy format const formattedDate = mm + '/' + dd + '/' + yyyy; - + return formattedDate; } @@ -514,7 +600,7 @@ async function buildHeaderRow(category, headerType, isInactive, matchCount) { const headerRow = document.createElement('div'); headerRow.classList.add('row', 'collapsible', 'header'); let divopen; - if (headerType === 'subcategory') { + if (headerType === 'subcategory') { headerRow.classList.add('subheader'); divopen = '
'; } else { @@ -542,8 +628,8 @@ async function buildTableRow(deliverableJson, kpi, createHidden) {
${checkBlankString(deliverableJson.deliverableName)}
${checkBlankString(typeLabel)}
-
- ${deliverableJson.reviewLink ? 'Review Link ': "Not Available"} +
+ ${deliverableJson.reviewLink ? 'QA Files ': "Not Available"}
${deliverableJson.linkedFolderLink ? 'Final Asset ': "Not Available"} @@ -591,7 +677,7 @@ function sortRows(rows) { nodes.sort((a, b) => { var classA = a.classList ? a.classList.contains('datarow') : false; var classB = b.classList ? b.classList.contains('datarow') : false; - + if (classA && !classB) { return 1; } else if (!classA && classB) { @@ -642,4 +728,4 @@ function extractQueryVars() { programID: 'Program ID Not Available' } } -} \ No newline at end of file +} diff --git a/blocks/gmo-program-header/gmo-program-header.js b/blocks/gmo-program-header/gmo-program-header.js index ab99e4f3..00f8cc61 100644 --- a/blocks/gmo-program-header/gmo-program-header.js +++ b/blocks/gmo-program-header/gmo-program-header.js @@ -126,6 +126,8 @@ export default async function decorate(block) { }); initializeDropdowns(); + // Attach event listeners for the dropdowns and reset filters + attachEventListeners(); decorateIcons(block); document.addEventListener('click', handleClickOutside); } @@ -171,6 +173,17 @@ function attachEventListeners() { function populateDropdown(response, dropdownId, type) { const options = response.data?.jsonByPath ? response.data.jsonByPath.item.json.options : response; + //Sort the options alphabetically + options.sort((a, b) => { + if (a.text < b.text) { + return -1; + } + if (a.text > b.text) { + return 1; + } + return 0; + }); + let dropdownContent = document.getElementById(dropdownId); dropdownContent.innerHTML = ''; options.forEach((option, index) => { diff --git a/blocks/gmo-program-list/gmo-program-list.css b/blocks/gmo-program-list/gmo-program-list.css index a417c0c9..5e71b736 100644 --- a/blocks/gmo-program-list/gmo-program-list.css +++ b/blocks/gmo-program-list/gmo-program-list.css @@ -204,28 +204,33 @@ select { border-radius: 4px; } .column-1 { - width: 28%; + width: 18%; margin-right: 1%; } .column-2 { - width: 40%; + width: 25%; margin-right: 1%; } .column-3 { - width: 12%; + width: 15%; margin-right: 1%; } .column-4 { - width: 16%; + width: 14%; margin-right: 1%; } .column-5 { - width: 13%; + width: 10%; margin-right: 1%; } .column-6 { - width: 14%; + width: 10%; + margin-right: 1%; } +.column-7 { + width: 5%; +} + .status { width: 80px; text-align: center; @@ -257,6 +262,7 @@ select { .campaign-name-label, .campaign-name { position: relative; display: inline-block; + cursor: pointer; } .campaign-name-label:hover .tooltip { diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 04a15a3a..9b331872 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -30,6 +30,11 @@ const headerConfig = [ 'name': 'Status', 'attribute': 'status', 'sortable': false + }, + { + 'name': 'Geo', + 'attribute': 'geo', + 'sortable': false } ] @@ -45,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(); @@ -59,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); @@ -112,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 { @@ -125,9 +151,6 @@ export default async function decorate(block, numPerPage = currentNumberPerPage, } else { footerNext.classList.remove('active'); } - - decorateIcons(block); - } function getFilterValues(){ @@ -180,6 +203,7 @@ async function buildCampaignList(campaigns, numPerPage) { const campaignNameWrapper = document.createElement('div'); campaignNameWrapper.classList.add('campaign-name-wrapper', 'vertical-center'); + campaignNameWrapper.innerHTML = `
${checkBlankString(programName)} @@ -190,7 +214,17 @@ async function buildCampaignList(campaigns, numPerPage) { Marketing Moment
`; - + + // Add click event to the campaign name label and text + const campaignNameLabel = campaignNameWrapper.querySelector('.campaign-name-label'); + const campaignNameText = campaignNameWrapper.querySelector('.campaign-name'); + campaignNameLabel.addEventListener('click', () => { + window.location.href = campaignDetailsLink; + }); + campaignNameText.addEventListener('click', () => { + window.location.href = campaignDetailsLink; + }); + campaignInfoWrapper.appendChild(campaignIconLink); campaignInfoWrapper.appendChild(campaignNameWrapper); @@ -214,17 +248,28 @@ async function buildCampaignList(campaigns, numPerPage) { var campaignStatusWrapper = document.createElement('div'); campaignStatusWrapper.classList.add('status-wrapper', 'column-6', 'vertical-center'); campaignStatusWrapper = buildStatus(campaignStatusWrapper, campaign); + + const campaignGeo = document.createElement('div'); + campaignGeo.textContent = formatGeos(campaign.node.p0TargetGeo); + campaignGeo.classList.add('column-7', 'vertical-center'); + campaignGeo.dataset.property = 'geo'; + campaignRow.appendChild(campaignInfoWrapper); campaignRow.appendChild(campaignOverviewWrapper); campaignRow.appendChild(campaignLaunch); campaignRow.appendChild(campaignProducts); campaignRow.appendChild(campaignStatusWrapper); + campaignRow.appendChild(campaignGeo); listWrapper.appendChild(campaignRow); } return listWrapper; } +function formatGeos(geoArray) { + return geoArray.map(geo => geo.toUpperCase()).join(', '); +} + function buildStatus(statusWrapper, campaign) { const campaignStatus = document.createElement('div'); const statusStr = checkBlankString(campaign.node.status); @@ -248,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) { @@ -502,4 +546,3 @@ function sortColumn(dir, property) { container.appendChild(row); }); } - diff --git a/icons/folderOpenOutline.svg b/icons/folderOpenOutline.svg new file mode 100644 index 00000000..ff67e983 --- /dev/null +++ b/icons/folderOpenOutline.svg @@ -0,0 +1,11 @@ + + + + + S FolderOpenOutline 18 N + + \ No newline at end of file diff --git a/icons/launch.svg b/icons/launch.svg new file mode 100644 index 00000000..e6209ba5 --- /dev/null +++ b/icons/launch.svg @@ -0,0 +1,13 @@ + + + + + S Launch 18 N + + + + \ No newline at end of file diff --git a/scripts/assets.js b/scripts/assets.js index 37ec6233..189af6a4 100644 --- a/scripts/assets.js +++ b/scripts/assets.js @@ -9,7 +9,7 @@ import { getOptimizedDeliveryUrl } from './polaris.js'; -import { getAdminConfig } from './site-config.js'; +import { getAdminConfig, getBaseConfigPath, getBrandingConfig } from './site-config.js'; import { createSearchEndpoint, logError } from './scripts.js'; @@ -33,22 +33,36 @@ const getFilters = () => { return `is_pur-expirationDate = 0 OR pur-expirationDate > ${currentEpoch}`; }; +async function getUnderdevelopmentIcon() { + const configPath = getBaseConfigPath(); + const brandingConfig = await getBrandingConfig(); + const underdevelopmentIconPath = `${configPath}/${brandingConfig.underdevelopmentIcon}`.replace(/\/\//g, '/'); + return { imageUrl: underdevelopmentIconPath, imageAltText: 'Under Development', assetCount: 0 }; +} /** - * Search Asset for programName and campaignName parameters. + * Search Asset for programName, campaignName, deliverableType parameters. * * @param {string} - Program Name. * @param {string} - Campaign Name. + * @param {string} - Deliverable Type + * @param {integer} - Image Width * @returns {Image } Resolves with image object. * @throws {Error} If an HTTP error or network error occurs. */ -export async function searchAsset(programName, campaignName, imageWidth = 80) { +export async function searchAsset(programName, campaignName, deliverableType = '', imageWidth = 80) { const adminConfig = await getAdminConfig(); const deliveryURL = await initDeliveryEnvironment(); const indexName = await getSearchIndex(); + if (!programName && !campaignName) + { + // Display Underdevelopment Icon + return await getUnderdevelopmentIcon(); + } + // Initialize the facetFilters array const facetFilters = []; if (programName) { // Check if programName is not null @@ -57,6 +71,10 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { if (campaignName) { // Check if campaignName is not null facetFilters.push('gmo-campaignName :'+ campaignName); } + + if (deliverableType) { // Check if deliverableType is not null + facetFilters.push('gmo-deliverableType :'+ deliverableType); + } const data = { requests: [ { @@ -96,7 +114,8 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { } else { - return null; + // Display Underdevelopment Icon + return await getUnderdevelopmentIcon(); } } // Handle other response codes @@ -106,3 +125,4 @@ export async function searchAsset(programName, campaignName, imageWidth = 80) { throw error; } } + 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,