From 9ee90d266beffe5d0fd21de2ce4e39d4fca7d87c Mon Sep 17 00:00:00 2001 From: cheintzman <147882114+cheintzman@users.noreply.github.com> Date: Fri, 5 Jan 2024 13:30:43 -0500 Subject: [PATCH 01/11] Assets 32349 (#24) * Changed decorate(block) to use getBaseConfigPath() to create adp-logo href * Cleaned up new code in adp-header decorate(block) * Changed quickLinks selection resolving missing selection bug in QA --- blocks/adp-header/adp-header.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/blocks/adp-header/adp-header.js b/blocks/adp-header/adp-header.js index b9864550..68444981 100644 --- a/blocks/adp-header/adp-header.js +++ b/blocks/adp-header/adp-header.js @@ -105,13 +105,22 @@ function toggleMenu(nav, navSections, forceExpanded = null) { */ export default async function decorate(block) { block.textContent = ''; + + // change adp-logo href depending on whether user is logged in + let logoHome = null; + if (await window.adobeIMS?.getProfile() != null) { + logoHome = `${getBaseConfigPath()}/` + 'assets'; + } else { + logoHome = `${getBaseConfigPath()}/`; + } + // decorate nav DOM const nav = document.createElement('nav'); nav.id = 'nav'; nav.innerHTML = `
- +
@@ -338,7 +347,7 @@ function initQuickLinks() { // set aria-selected on quick links quickLinks.querySelectorAll('.item').forEach((item) => { - if (item.querySelector('a')?.dataset.page === window.location.pathname) { + if (item.querySelector('a')?.getAttribute('href') === window.location.pathname) { item.setAttribute('aria-selected', 'true'); } }); From a70185d646d7b2c42294f004d78d415a3ba17ed3 Mon Sep 17 00:00:00 2001 From: Nithin Asokan <2903839+nithinasokan@users.noreply.github.com> Date: Tue, 23 Jan 2024 11:17:46 -0800 Subject: [PATCH 02/11] Use full indexname (#27) --- blocks/adp-search-field/adp-search-field.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/adp-search-field/adp-search-field.js b/blocks/adp-search-field/adp-search-field.js index 074653b1..3c31cdc1 100644 --- a/blocks/adp-search-field/adp-search-field.js +++ b/blocks/adp-search-field/adp-search-field.js @@ -85,7 +85,7 @@ function createSuggestionsPlugin(recentSearchesPlugin) { if (enableSearchSuggestions) { querySuggestionsPlugin = createQuerySuggestionsPlugin({ searchClient: getSearchClient(), - indexName: 'query_suggestions', + indexName: INSTANT_SEARCH_INDEX_NAME + '_query_suggestions', getSearchParams({ state }) { // This creates a shared `hitsPerPage` value once the duplicates // between recent searches and Query Suggestions are removed. From b4d8028e5b708a5c87f0a6bc2b879d791da895bb Mon Sep 17 00:00:00 2001 From: cheintzman <147882114+cheintzman@users.noreply.github.com> Date: Tue, 23 Jan 2024 15:06:38 -0500 Subject: [PATCH 03/11] Assets 33680 (#26) * Changes link colors for landing page teasers * Created Functions to Detect Background Color Created getVideoColor() and waitForVideoLoad() in order to track the color of the background video and changed the CSS styling of Landing page links under a

element * Code cleanup Cleaned up some unused code and added a transition for the color change on landing page links * More code clean up --- blocks/gmo-landing-page/gmo-landing-page.css | 15 ++++++ blocks/gmo-landing-page/gmo-landing-page.js | 49 ++++++++++++++++++-- blocks/gmo-teaser/gmo-teaser.css | 12 +++++ 3 files changed, 73 insertions(+), 3 deletions(-) diff --git a/blocks/gmo-landing-page/gmo-landing-page.css b/blocks/gmo-landing-page/gmo-landing-page.css index aeb78abf..27374f22 100644 --- a/blocks/gmo-landing-page/gmo-landing-page.css +++ b/blocks/gmo-landing-page/gmo-landing-page.css @@ -8,12 +8,27 @@ color: #505050; } +.gmo-landing-page p a:any-link { + color: #035fe6; + transition: + color 0.2s; +} + +.gmo-landing-page p a:hover { + color: #136ff6; +} + +.gmo-landing-page p a:active { + color: #035fe6; +} + .gmo-landing-page .video-background { position: relative; width: 100%; display: flex; justify-content: center; } + .gmo-landing-page .video-background video { position: relative; top: 0; diff --git a/blocks/gmo-landing-page/gmo-landing-page.js b/blocks/gmo-landing-page/gmo-landing-page.js index af6187fd..1ec10c6d 100644 --- a/blocks/gmo-landing-page/gmo-landing-page.js +++ b/blocks/gmo-landing-page/gmo-landing-page.js @@ -1,5 +1,45 @@ import { readBlockConfig } from '../../scripts/lib-franklin.js'; +async function waitForVideoLoad() { + const video = document.querySelector('.desktop'); + return new Promise((resolve) => { + video.oncanplaythrough = () => { + resolve(); + }; + }); +} + +async function getVideoColor(){ + const video = document.querySelector('.desktop'); + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d', { willReadFrequently: true }); + await waitForVideoLoad(); + + canvas.width = video.videoWidth; + canvas.height = video.videoHeight; + + let hexColorOld = null; + + // Capture the video frame and extract the color information at the specified interval + setInterval(() => { + context.drawImage(video, 0, 0, canvas.width, canvas.height); + const pixelData = context.getImageData(10, 10, canvas.width, canvas.height).data; + const red = pixelData[0]; + const green = pixelData[1]; + const blue = pixelData[2]; + const hexColor = '#' + ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).slice(1); + + if (hexColorOld !== hexColor) { + hexColorOld = hexColor; + let linkActive = document.querySelector('.gmo-landing-page p a'); + if (hexColor == '#000000') { + return linkActive.style.color = '#AEDBFE'; + } + linkActive.style.color = '#035FE6'; + } + }, 500); +} + export default async function decorate(block) { const host = location.origin; const signInMsg = getSignInMsg(block); @@ -8,10 +48,11 @@ export default async function decorate(block) { block.innerHTML=`

-
@@ -32,6 +73,7 @@ export default async function decorate(block) {
` const msgParent = block.querySelector(".signin-notif"); msgParent.append(signInMsg); + getVideoColor(); } function getSignInMsg(block) { @@ -42,4 +84,5 @@ function getSignInMsg(block) { } }); return msgDiv; -} \ No newline at end of file +} + diff --git a/blocks/gmo-teaser/gmo-teaser.css b/blocks/gmo-teaser/gmo-teaser.css index 8fed5986..6f7639d9 100644 --- a/blocks/gmo-teaser/gmo-teaser.css +++ b/blocks/gmo-teaser/gmo-teaser.css @@ -9,6 +9,18 @@ text-transform: none; } +.gmo-teaser a:any-link { + color: #72B7F9; +} + +.gmo-teaser a:hover { + color: #8FCAFC; +} + +.gmo-teaser a:active { + color: #AEDBFE; +} + .gmo-teaser .teaser { background-color: #292929; color: #efefef; From f3da5c53356b1da0c551ca9f17e87483db74c7b3 Mon Sep 17 00:00:00 2001 From: mdickson-adbe <95774602+mdickson-adbe@users.noreply.github.com> Date: Tue, 23 Jan 2024 15:07:49 -0500 Subject: [PATCH 04/11] Assets 32164 (#25) * refactor notification code - new branch - small change to immutable(?) head.html * remove log statement * update legal toast - remove default msg and add logic: no longer display toast unless configured --- scripts/custom-scripts.js | 13 +++++++------ styles/gmo-styles.css | 3 +-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/scripts/custom-scripts.js b/scripts/custom-scripts.js index 656b9009..f67f21cd 100644 --- a/scripts/custom-scripts.js +++ b/scripts/custom-scripts.js @@ -5,17 +5,18 @@ import showToast from "./toast-message.js"; initLegalNotice(); async function initLegalNotice() { - const config = await getBrandingConfig(); + const config = await getBrandingConfig(); + if (config?.legalMessage) { document.addEventListener(EventNames.SESSION_STARTED, function() { showLegalNotice(config); }); + } } function showLegalNotice(config) { - const legalDefault = `NOTICE: Adobe records and uses your e-mail address for tracking purposes.`; - const legalToast = config?.legalMessage || legalDefault; - const legalDuration = 10000; - const toastType = "info"; + const legalToast = config?.legalMessage; + const legalDuration = 10000; + const toastType = "info"; - showToast(legalToast, legalDuration, toastType, false); + showToast(legalToast, legalDuration, toastType, false); } \ No newline at end of file diff --git a/styles/gmo-styles.css b/styles/gmo-styles.css index 44fe5826..e7b2b014 100644 --- a/styles/gmo-styles.css +++ b/styles/gmo-styles.css @@ -28,5 +28,4 @@ header nav .nav-brand .adp-logo img { .adp-toast { text-transform: none; -} - +} \ No newline at end of file From 0ad18f32575d1ad213f557ee26b93d6ad0a2945b Mon Sep 17 00:00:00 2001 From: cheintzman <147882114+cheintzman@users.noreply.github.com> Date: Wed, 24 Jan 2024 14:22:58 -0500 Subject: [PATCH 05/11] ASSETS 33680 (Update) (#28) * Changes link colors for landing page teasers * Created Functions to Detect Background Color Created getVideoColor() and waitForVideoLoad() in order to track the color of the background video and changed the CSS styling of Landing page links under a

element * Code cleanup Cleaned up some unused code and added a transition for the color change on landing page links * More code clean up * Changed color of landing page link --- blocks/gmo-landing-page/gmo-landing-page.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/gmo-landing-page/gmo-landing-page.js b/blocks/gmo-landing-page/gmo-landing-page.js index 1ec10c6d..b6da5a47 100644 --- a/blocks/gmo-landing-page/gmo-landing-page.js +++ b/blocks/gmo-landing-page/gmo-landing-page.js @@ -33,7 +33,7 @@ async function getVideoColor(){ hexColorOld = hexColor; let linkActive = document.querySelector('.gmo-landing-page p a'); if (hexColor == '#000000') { - return linkActive.style.color = '#AEDBFE'; + return linkActive.style.color = '#72B7F9'; } linkActive.style.color = '#035FE6'; } From 4cec07faa8d3eb5e9605c543b7092a77482cd667 Mon Sep 17 00:00:00 2001 From: Christopher Heintzman Date: Thu, 8 Feb 2024 12:03:07 -0500 Subject: [PATCH 06/11] Assets 34038 (#31) * Login status can be checked without redirect - Made changes to checkUserAccess() that will allow login status to be checked even on pages where isPublicPage() is true - Changed client_id to use imsLibConfig in case sharepoint is used for this purpose in the future -Changes to getBearerTokenFromIMS() made so that window.adobeIMS.reAuthenticate() only runs on non public pages - Simplified method of changing the adp-logo href using the ability to check user logged in status - Header now loads quicklinks, searchfield and userinfo based on user login status, allowing quicklinks and userinfo to appear on public pages if logged in. * Code Cleanup --- blocks/adp-header/adp-header.js | 13 +++---------- scripts/security-imslib.js | 13 ++++++++----- scripts/security.js | 6 +++--- 3 files changed, 14 insertions(+), 18 deletions(-) diff --git a/blocks/adp-header/adp-header.js b/blocks/adp-header/adp-header.js index 68444981..7590dd66 100644 --- a/blocks/adp-header/adp-header.js +++ b/blocks/adp-header/adp-header.js @@ -106,21 +106,13 @@ function toggleMenu(nav, navSections, forceExpanded = null) { export default async function decorate(block) { block.textContent = ''; - // change adp-logo href depending on whether user is logged in - let logoHome = null; - if (await window.adobeIMS?.getProfile() != null) { - logoHome = `${getBaseConfigPath()}/` + 'assets'; - } else { - logoHome = `${getBaseConfigPath()}/`; - } - // decorate nav DOM const nav = document.createElement('nav'); nav.id = 'nav'; nav.innerHTML = `

- +
@@ -228,7 +220,8 @@ export default async function decorate(block) { } }); - if (!isPublicPage()) { + if (await getUserProfile() !== null) { + document.querySelector('.adp-logo').href = getBaseConfigPath() + '/assets'; loadSearchField(nav); await createUserInfo(nav); initQuickLinks(); diff --git a/scripts/security-imslib.js b/scripts/security-imslib.js index 10a1ccc8..9c94edeb 100644 --- a/scripts/security-imslib.js +++ b/scripts/security-imslib.js @@ -1,6 +1,7 @@ import { loadScript } from './lib-franklin.js'; import { getAdminConfig } from './site-config.js'; import { fetchCached } from './fetch-util.js'; +import { isPublicPage } from './security.js'; let isIMSInitialized = false; @@ -25,7 +26,7 @@ async function getBearerTokenFromIMS(callWithToken) { } if (!isIMSInitialized) { window.adobeid = { - client_id: IMSLIB_ENV_CONFIG.clientId, + client_id: imsLibConfig.clientId, scope: IMSLIB_ENV_CONFIG.scope, locale: 'en_US', autoValidateToken: true, @@ -39,8 +40,10 @@ async function getBearerTokenFromIMS(callWithToken) { } const token = tokenDetails && tokenDetails.token; callWithToken(token); - } else { - window.adobeIMS.reAuthenticate(); + return; + } + if (!isPublicPage()) { + window.adobeIMS.reAuthenticate(); } }, }; @@ -48,9 +51,9 @@ async function getBearerTokenFromIMS(callWithToken) { // load ims.min.js await loadScript(IMSLIB_ENV_CONFIG.urls[imsLibConfig.imsEnvironment]); isIMSInitialized = true; - } else { - window.adobeIMS.reAuthenticate(); + return; } + window.adobeIMS.reAuthenticate(); } /** diff --git a/scripts/security.js b/scripts/security.js index 58885df9..180e8990 100644 --- a/scripts/security.js +++ b/scripts/security.js @@ -52,13 +52,13 @@ export function isPublicPage() { } export async function checkUserAccess() { - if (isPublicPage()) { - return true; - } await getBearerToken(); const { imsUserGroup } = await getIMSConfig(); if (imsUserGroup) { const imsLibSecurityModule = await import('./security-imslib.js'); + if (isPublicPage()) { + return true; + } return await imsLibSecurityModule.isUserInSecurityGroup(imsUserGroup, await getBearerToken()); } return true; From f68df33e397e496cf3cc9127890af39c2cd6f2c0 Mon Sep 17 00:00:00 2001 From: Samruddhi <150183547+staware30@users.noreply.github.com> Date: Thu, 8 Feb 2024 09:03:21 -0800 Subject: [PATCH 07/11] Assets 34569 (#33) * Updated Data and Added Date/Time to Insights Page * Updated Data and Added Date/Time to Insights Page * Updated css class name and commented out metrics tiles as per the story description --- blocks/gmo-metrics/gmo-metrics.css | 12 +++++++ blocks/gmo-metrics/gmo-metrics.js | 57 ++++++++++++++++-------------- 2 files changed, 43 insertions(+), 26 deletions(-) diff --git a/blocks/gmo-metrics/gmo-metrics.css b/blocks/gmo-metrics/gmo-metrics.css index c5b7317b..17067ffe 100644 --- a/blocks/gmo-metrics/gmo-metrics.css +++ b/blocks/gmo-metrics/gmo-metrics.css @@ -12,6 +12,17 @@ content: ''; } +.gmo-metrics .title { + display: flex; + justify-content: space-between; +} + +.gmo-metrics .subtitle-right { + font-size: 16px; + color: var(--assets-browser-text-color); + font-weight: normal; +} + .gmo-metrics .graph-container { display: flex; flex-flow: row wrap; @@ -100,4 +111,5 @@ align-items: center; justify-content: center; } + } diff --git a/blocks/gmo-metrics/gmo-metrics.js b/blocks/gmo-metrics/gmo-metrics.js index c35504ac..7d208f39 100644 --- a/blocks/gmo-metrics/gmo-metrics.js +++ b/blocks/gmo-metrics/gmo-metrics.js @@ -6,20 +6,20 @@ import { logError } from '../../scripts/scripts.js'; const GENERAL_METRICS = [{ category: 'Total assets', - amount: 59475, + amount: 60882, }, { category: 'Total size', - amount: 1024 * 1024 * 1024 * 331.6, + amount: 1024 * 1024 * 1024 * 334, unit: 'bytes', }, { category: 'Uploads year-to-date', - amount: 59475, + amount: 261, }, { category: 'Uploads quarter-to-date', - amount: 56629, + amount: 57865, }, { category: 'Uploads last 30 days', - amount: 56486, + amount: 261, }]; function formatNumber(number) { @@ -57,40 +57,42 @@ function formatAmount(metric) { } const MIME_TYPES = [ - { category: 'video/mp4', amount: 3579 }, - { category: 'image/jpeg', amount: 51258 }, - { category: 'image/png', amount: 2102 }, - { category: 'video/quicktime', amount: 422 }, - { category: 'image/vnd.adobe.photoshop', amount: 380 }, - { category: 'audio/x-wav', amount: 104 }, - { category: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', amount: 102 }, - { category: 'application/vnd.adobe.sparkler.project+dcx', amount: 578 }, - { category: 'application/pdf', amount: 571 }, - { category: 'application/octet-stream', amount: 48 }, - { category: 'application/postscript', amount: 33 }, - { category: 'application/json', amount: 30 }, + { category: 'image/jpeg', amount: 51595 }, + { category: 'video/mp4', amount: 3794 }, + { category: 'image/png', amount: 2404 }, + { category: 'application/vnd.adobe.sparkler.project+dcx', amount: 632 }, + { category: 'application/pdf', amount: 631 }, + { category: 'video/quicktime', amount: 598 }, + { category: 'image/vnd.adobe.photoshop', amount: 402 }, + { category: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', amount: 170 }, + { category: 'audio/x-wav', amount: 166 }, + { category: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', amount: 137 }, + { category: 'application/octet-stream', amount: 56 }, + { category: 'image/tiff', amount: 50 }, + { category: 'application/postscript', amount: 48 }, + { category: 'image/svg+xml', amount: 35 }, + { category: 'application/x-subrip', amount: 30 }, + { category: 'application/zip', amount: 30 }, + { category: 'application/x-font-otf', amount: 22 }, { category: 'application/vnd.audiograph', amount: 19 }, - { category: 'application/x-subrip', amount: 18 }, { category: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', amount: 15 }, - { category: 'application/zip', amount: 21 }, - { category: 'image/svg+xml', amount: 9 }, + { category: 'application/vnd.3gpp.pic-bw-small', amount: 11 }, { category: 'image/gif', amount: 11 }, - { category: 'application/vnd.3gpp.pic-bw-small', amount: 9 }, { category: 'video/ogg', amount: 9 }, - { category: 'image/tiff', amount: 8 }, - { category: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', amount: 170 }, { category: 'audio/mpeg', amount: 4 }, + { category: 'image/dng', amount: 3 }, { category: 'text/html', amount: 3 }, { category: 'text/plain', amount: 2 }, + { category: 'application/x-indesign', amount: 1 }, ]; -const BUSINESS_UNITS = [{ +/*const BUSINESS_UNITS = [{ category: 'Digital Media', amount: 2517, }, { category: 'Other', amount: 509, -}]; +}];*/ const PRODUCTS = [{ category: 'Photoshop', @@ -323,7 +325,10 @@ function sortByAmount(values) { export default async function decorate(block) { const config = readBlockConfig(block); block.innerHTML = ` -

${config.title || 'Asset Metrics'}

+
+

${config.title || 'Asset Metrics'}

+

Updated: ${config.updated}

+

Asset Statistics

From 7c06834713920427fe7d4d0ac12ba51452131d74 Mon Sep 17 00:00:00 2001 From: Andrew Khoury Date: Sat, 17 Feb 2024 20:09:26 -0800 Subject: [PATCH 08/11] Create .hlxignore (#36) At some point the .hlxignore file seemed to have been removed or omitted from git on accident. I am re-adding it. --- .hlxignore | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .hlxignore diff --git a/.hlxignore b/.hlxignore new file mode 100644 index 00000000..c5059166 --- /dev/null +++ b/.hlxignore @@ -0,0 +1,7 @@ +.* +*.md +karma.config.js +LICENSE +package.json +package-lock.json +test/* From 4bc49ac788875f07e81280e73af1c2fa3daf6428 Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu, 7 Mar 2024 09:54:22 -0600 Subject: [PATCH 09/11] ASSETS-88888 : Add 'Select All' button on Collections Details and Share Link Page (#40) * Added Select All checkbox to adp-collection-header block component /blocks/adp-infinite-results-collection/adp-infinite-results-collection.js : Added the functions selectAllAsets() and deselectAllAssets() which is used in adp-collection-header.js * Initial checkin of new block component adp-share-header that will contain the Select All Items button * Added block component adp-share-header which has the Select All check box /blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.js : Added the functions selectAllAssets() and deselectAllAssets() * Removed redundant CSS * Pull Request Review Changes /blocks/adp-collection-header/adp-collection-header.css : Removed Todo comment /blocks/adp-collection-header/adp-collection-header.js : Changed back to await deleteCollection(collectionId, collection.title); /blocks/adp-share-header/adp-share-header.css: Removed redundant CSS classes * Removed the confirm-dialog.js this was in the original code copied from the adp-collections-header.js * Added logic to un check the select-all-checkbox on event CLOSE_BANNER and Remove Item from Multi Select * /blocks/adp-collection-header/adp-collection-header.js => Added , to import statement and refactored select-all-checkbox event listener /blocks/adp-share-header/adp-share-header.js => Removed extra div, refactored select-all-checkbox event listener --- .../adp-collection-header.css | 27 ++++++++- .../adp-collection-header.js | 13 +++++ .../CollectionDatasource.js | 2 + .../adp-infinite-results-collection.js | 11 ++++ .../LinkShareDatasource.js | 2 + .../adp-infinite-results-linkshare.js | 11 ++++ blocks/adp-share-header/adp-share-header.css | 55 +++++++++++++++++++ blocks/adp-share-header/adp-share-header.js | 34 ++++++++++++ 8 files changed, 153 insertions(+), 2 deletions(-) create mode 100644 blocks/adp-share-header/adp-share-header.css create mode 100644 blocks/adp-share-header/adp-share-header.js diff --git a/blocks/adp-collection-header/adp-collection-header.css b/blocks/adp-collection-header/adp-collection-header.css index 5928d329..20f3c73a 100644 --- a/blocks/adp-collection-header/adp-collection-header.css +++ b/blocks/adp-collection-header/adp-collection-header.css @@ -20,8 +20,15 @@ z-index: 1; } + .adp-collection-header-left .adp-collection-title { - margin-bottom: 12px; + margin-bottom: 12px; /* Keeps space between title and items */ +} + +.adp-collection-subinfo { + display: flex; + /* justify-content: space-between; /* Aligns items to the left and select all to the right */ + align-items: center; /* Centers items vertically */ } .adp-collection-stats { @@ -29,15 +36,31 @@ border-radius: 6px; font: 11px/14px var(--body-font-family); padding: 6px 10px; - width: fit-content; + flex-shrink: 0; + margin-right: 20px; /* Adjust the 20px to whatever fixed space you want between the items and the checkbox */ +} + +.adp-collection-select-all { + display: flex; + align-items: center; /* This will vertically align the checkbox and label */ } +.adp-collection-select-all input[type="checkbox"] { + margin-right: 5px; /* Adds some space between the checkbox and the label */ +} + + .adp-collection-header-left .back-button .icon { height: 10px; width: 18px; vertical-align: text-bottom; } +.adp-collection-header-collection-info { + display: flex; + flex-direction: column; /* Stack the title and sub-info vertically */ +} + .adp-collection-header .adp-collection-title { font: var(--collection-heading-font); width: 100%; diff --git a/blocks/adp-collection-header/adp-collection-header.js b/blocks/adp-collection-header/adp-collection-header.js index 618a4ce5..9ccea497 100644 --- a/blocks/adp-collection-header/adp-collection-header.js +++ b/blocks/adp-collection-header/adp-collection-header.js @@ -3,6 +3,11 @@ import createConfirmDialog from '../../scripts/confirm-dialog.js'; import { decorateIcons } from '../../scripts/lib-franklin.js'; import { createLinkHref, navigateTo } from '../../scripts/scripts.js'; +import { + selectAllAssets, deselectAllAssets, +} from '../adp-infinite-results-collection/adp-infinite-results-collection.js'; + + function createCollectionInfoHeader(collectionInfoHeader, collection) { // include back to collections listing similar to hide filters button collectionInfoHeader.innerHTML = ` @@ -14,6 +19,10 @@ function createCollectionInfoHeader(collectionInfoHeader, collection) {
+
+ + +
@@ -28,6 +37,10 @@ function createCollectionInfoHeader(collectionInfoHeader, collection) { const backButton = collectionInfoHeader.querySelector('.back-button a'); backButton.href = createLinkHref(backButton.href); + document.getElementById('select-all-checkbox').addEventListener('click', (event) => { + event.target.checked ? selectAllAssets() : deselectAllAssets(); + }); + collectionInfoHeader.querySelector('.action-collection-delete').addEventListener('click', async (e) => { e.preventDefault(); const collectionId = getCollectionIdFromURL(); diff --git a/blocks/adp-infinite-results-collection/CollectionDatasource.js b/blocks/adp-infinite-results-collection/CollectionDatasource.js index 7ac6cd63..f2177923 100644 --- a/blocks/adp-infinite-results-collection/CollectionDatasource.js +++ b/blocks/adp-infinite-results-collection/CollectionDatasource.js @@ -88,6 +88,8 @@ export default class CollectionsDatasource { }, removeItemFromMultiSelectionHandler: () => { infiniteResultsContainer.removeItemFromMultiSelection(assetId); + //Uncheck select all checkbox + document.getElementById('select-all-checkbox').checked = false; }, }, ); diff --git a/blocks/adp-infinite-results-collection/adp-infinite-results-collection.js b/blocks/adp-infinite-results-collection/adp-infinite-results-collection.js index 396a9472..aa9fe7da 100644 --- a/blocks/adp-infinite-results-collection/adp-infinite-results-collection.js +++ b/blocks/adp-infinite-results-collection/adp-infinite-results-collection.js @@ -16,6 +16,8 @@ export default async function decorate(block) { infiniteResultsContainer.deselectItem(e.detail.assetId); }); addEventListener(EventNames.CLOSE_BANNER, () => { + //Uncheck select all checkbox + document.getElementById('select-all-checkbox').checked = false; infiniteResultsContainer.clearAllSelections(); }); } @@ -39,3 +41,12 @@ export function hasNextCard() { export function hasPreviousCard() { return infiniteResultsContainer.hasPreviousCard(); } + + +export function selectAllAssets() { + infiniteResultsContainer.selectAllItems(); +} + +export function deselectAllAssets() { + infiniteResultsContainer.deselectAllItems(); +} diff --git a/blocks/adp-infinite-results-linkshare/LinkShareDatasource.js b/blocks/adp-infinite-results-linkshare/LinkShareDatasource.js index 2c70c2ee..04448c63 100644 --- a/blocks/adp-infinite-results-linkshare/LinkShareDatasource.js +++ b/blocks/adp-infinite-results-linkshare/LinkShareDatasource.js @@ -53,6 +53,8 @@ export default class LinkShareDatasource { }, removeItemFromMultiSelectionHandler: () => { infiniteResultsContainer.removeItemFromMultiSelection(assetId); + //Uncheck select all checkbox + document.getElementById('select-all-checkbox').checked = false; }, }, ); diff --git a/blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.js b/blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.js index 19aabd04..a54be492 100644 --- a/blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.js +++ b/blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.js @@ -8,10 +8,13 @@ export default async function decorate(block) { const instantSearchDatasource = new LinkShareDatasource(); infiniteResultsContainer = new InfiniteResultsContainer(block, instantSearchDatasource); infiniteResultsContainer.render(); + addEventListener(EventNames.ASSET_QUICK_PREVIEW_CLOSE, (e) => { infiniteResultsContainer.deselectItem(e.detail.assetId); }); addEventListener(EventNames.CLOSE_BANNER, () => { + //Uncheck select all checkbox + document.getElementById('select-all-checkbox').checked = false; infiniteResultsContainer.clearAllSelections(); }); } @@ -21,3 +24,11 @@ export function openLinkShare(id) { // change the url window.history.pushState({}, '', url); } + +export function selectAllAssets() { + infiniteResultsContainer.selectAllItems(); +} + +export function deselectAllAssets() { + infiniteResultsContainer.deselectAllItems(); +} diff --git a/blocks/adp-share-header/adp-share-header.css b/blocks/adp-share-header/adp-share-header.css new file mode 100644 index 00000000..f4656feb --- /dev/null +++ b/blocks/adp-share-header/adp-share-header.css @@ -0,0 +1,55 @@ + +.adp-share-header { + display: flex; + height: 62px; +} + +.adp-share-header-left { + display: flex; + gap: 15px; + align-items: center; + width: 100%; + font-size: var(--header-font-size); + padding: 0; + top: 0.01rem; + padding-top: 0.88rem; + padding-bottom: 0.88rem; + z-index: 1; +} + +.adp-share-subinfo { + display: flex; + /* justify-content: space-between; /* Aligns items to the left and select all to the right */ + align-items: center; /* Centers items vertically */ +} + +.adp-share-select-all { + display: flex; + align-items: center; /* This will vertically align the checkbox and label */ +} + +.adp-share-select-all input[type="checkbox"] { + margin-right: 5px; /* Adds some space between the checkbox and the label */ +} + +.adp-share-header-share-info { + display: flex; + flex-direction: column; /* Stack the title and sub-info vertically */ +} + +.adp-share-header { + font: var(--collection-heading-font); + width: 100%; +} + +.adp-share-header .actions .adp-action { + text-wrap: nowrap; + align-items: center; +} + +.adp-share-header .actions { + /* vertically align center */ + display: flex; + align-items: center; + justify-content: center; +} diff --git a/blocks/adp-share-header/adp-share-header.js b/blocks/adp-share-header/adp-share-header.js new file mode 100644 index 00000000..ab300dc7 --- /dev/null +++ b/blocks/adp-share-header/adp-share-header.js @@ -0,0 +1,34 @@ +import { decorateIcons } from '../../scripts/lib-franklin.js'; +import { createLinkHref, navigateTo } from '../../scripts/scripts.js'; + +import { + selectAllAssets, deselectAllAssets +} from '../adp-infinite-results-linkshare/adp-infinite-results-linkshare.js'; + +function createShareInfoHeader(shareInfoHeader) { + + shareInfoHeader.innerHTML = ` +
+
+
+
+ + +
+
+
+
+ `; + + document.getElementById('select-all-checkbox').addEventListener('click', (event) => { + event.target.checked ? selectAllAssets() : deselectAllAssets(); + }); + + decorateIcons(shareInfoHeader); + return shareInfoHeader; +} + +export default async function decorate(block) { + block.innerHTML = ''; + createShareInfoHeader(block); +} From 2b09856d2878d559fc72e104518c56dec63ad6ec Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu, 14 Mar 2024 09:36:29 -0500 Subject: [PATCH 10/11] ASSETS-88889 : Add 'Share' button to the Collection Detail Page (#42) * /blocks/adp-collection-header/adp-collection-header.css : Added CSS classes for right header, toast message, and share button /blocks/adp-collection-header/adp-collection-header.js : Added JS and HTML for Share Button and Toast Message * Changed Toast background color to site blue Added default font family to toast --- .../adp-collection-header.css | 57 +++++++++++++++++++ .../adp-collection-header.js | 47 +++++++++++++++ 2 files changed, 104 insertions(+) diff --git a/blocks/adp-collection-header/adp-collection-header.css b/blocks/adp-collection-header/adp-collection-header.css index 20f3c73a..127f28e3 100644 --- a/blocks/adp-collection-header/adp-collection-header.css +++ b/blocks/adp-collection-header/adp-collection-header.css @@ -20,6 +20,19 @@ z-index: 1; } +.adp-collection-header-right { + margin-left: auto; /* This will push the element to the far right */ + display: flex; + gap: 15px; + align-items: center; + font-size: var(--header-font-size); + padding: 0; + top: 0.01rem; + padding-top: 0.88rem; + padding-bottom: 0.88rem; + z-index: 1; +} + .adp-collection-header-left .adp-collection-title { margin-bottom: 12px; /* Keeps space between title and items */ @@ -77,3 +90,47 @@ align-items: center; justify-content: center; } + +.toast { + display: flex; + align-items: center; + background-color: #5258E4; /* Site used blue background */ + color: white; /* White text color */ + padding: 12px 24px; /* Padding inside the toast */ + position: fixed; /* Positioning relative to the viewport */ + z-index: 1; /* Make sure it is above other items */ + bottom: 30px; /* Distance from the bottom */ + left: 50%; /* Center the toast */ + transform: translateX(-50%); /* Center the toast horizontally */ + border-radius: 4px; /* Rounded corners */ + box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); /* Shadow for 3D effect */ + font-family: var(--body-font-family); /* Use site default font */ + font-size: 0.9rem; /* Font size */ + visibility: hidden; /* Hidden by default */ + opacity: 0; /* Fully transparent */ + transition: visibility 0s, opacity 0.5s linear; /* Transition for the toast */ +} + +.toast.show { + visibility: visible; /* Make the toast visible */ + opacity: 1; /* Fully opaque */ +} + +.toast-icon { + margin-right: 12px; /* Space between icon and message */ + font-size: 1.2rem; /* Icon size */ +} + +.toast-close { + margin-left: auto; /* Push the close button to the right */ + background: none; /* No background */ + border: none; /* No border */ + color: white; /* White text color */ + padding: 0; /* No padding */ + cursor: pointer; /* Pointer cursor on hover */ + font-size: 1.2rem; /* Size of the close button */ +} + +.toast-close:focus { + outline: none; /* Remove focus outline */ +} diff --git a/blocks/adp-collection-header/adp-collection-header.js b/blocks/adp-collection-header/adp-collection-header.js index 9ccea497..b97d0bfa 100644 --- a/blocks/adp-collection-header/adp-collection-header.js +++ b/blocks/adp-collection-header/adp-collection-header.js @@ -27,10 +27,19 @@ function createCollectionInfoHeader(collectionInfoHeader, collection) {
+
+ Share +
+ +
+ ✓ + Collection link copied to clipboard + +
`; collectionInfoHeader.querySelector('.adp-collection-title').innerText = collection.title; collectionInfoHeader.querySelector('.adp-collection-stats').innerText = `${collection.items.length} items`; @@ -41,6 +50,10 @@ function createCollectionInfoHeader(collectionInfoHeader, collection) { event.target.checked ? selectAllAssets() : deselectAllAssets(); }); + document.getElementById('shareButton').addEventListener('click', (event) => { + copyCurrentUrlToClipboard(); + }); + collectionInfoHeader.querySelector('.action-collection-delete').addEventListener('click', async (e) => { e.preventDefault(); const collectionId = getCollectionIdFromURL(); @@ -69,3 +82,37 @@ export default async function decorate(block) { createCollectionInfoHeader(block, collection); } } + +// This function is called when the "Share" button is clicked +function copyCurrentUrlToClipboard() { + // Create a dummy input to copy the string + const dummy = document.createElement('input'), + text = window.location.href; // Get the current URL + document.body.appendChild(dummy); + dummy.value = text; + dummy.select(); + document.execCommand('copy'); // Copy the text inside the input + document.body.removeChild(dummy); + + // Here you can also trigger any feedback to the user, like a tooltip or toast + //alert('URL copied to clipboard!'); // For demonstration purposes, using an alert + showToast(); +} + +function closeToast() { + const toast = document.getElementById("toast"); + // Reset the toast visibility and opacity + toast.style.visibility = "hidden"; + toast.style.opacity = "0"; +} + +function showToast() { + const toast = document.getElementById("toast"); + // Ensure the toast is visible and fully opaque + toast.style.visibility = "visible"; + toast.style.opacity = "1"; + // Add "show" class again in case it was removed + toast.className = "toast show"; + // Set a timeout to hide the toast after 3 seconds + setTimeout(function() { closeToast(); }, 3000); +} From 3e135987c8b7771d0f8824435fca368110c8e4db Mon Sep 17 00:00:00 2001 From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com> Date: Thu, 14 Mar 2024 09:37:40 -0500 Subject: [PATCH 11/11] ASSETS-88890 : Hide "Edit in Express" icon for Licensed Content (#45) * scripts/metadata.js : Added function isLicensedContent(assetJSON) which returns true for licensed content, and false for no licensed content blocks/adp-asset-details-panel/adp-asset-details-panel.js : Hides the express button for licensed content * /blocks/adp-asset-details-modal/adp-asset-details-modal.js: Hides the express button for licensed content --- blocks/adp-asset-details-modal/adp-asset-details-modal.js | 5 +++-- blocks/adp-asset-details-panel/adp-asset-details-panel.js | 5 +++-- scripts/metadata.js | 8 ++++++++ 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/blocks/adp-asset-details-modal/adp-asset-details-modal.js b/blocks/adp-asset-details-modal/adp-asset-details-modal.js index f8b47391..36d923a0 100644 --- a/blocks/adp-asset-details-modal/adp-asset-details-modal.js +++ b/blocks/adp-asset-details-modal/adp-asset-details-modal.js @@ -9,7 +9,7 @@ import { import { closeModal } from '../../scripts/shared.js'; import { authorizeURL, getAssetMetadata } from '../../scripts/polaris.js'; import { - getAssetName, getAssetMimeType, getAssetTitle, + getAssetName, getAssetMimeType, getAssetTitle, isLicensedContent, } from '../../scripts/metadata.js'; // eslint-disable-next-line import/no-cycle import { disableActionButtons } from '../adp-asset-details-panel/adp-asset-details-panel.js'; @@ -96,7 +96,8 @@ function createHeaderPanel(modal) { // ensure express button only shows for valid asset types const expressBtn = modal.querySelector('.action-edit-asset'); const validCheck = fileValidity(format); - if (isCCEConfigured() && validCheck.isValid) { + if (isCCEConfigured() && validCheck.isValid && !isLicensedContent(assetJSON)) { + //Only show express button for content that is not licensed. expressBtn.classList.remove('hidden'); } else if (!expressBtn.classList.contains('hidden')) { expressBtn.classList.add('hidden'); diff --git a/blocks/adp-asset-details-panel/adp-asset-details-panel.js b/blocks/adp-asset-details-panel/adp-asset-details-panel.js index 4e35bb06..45b693fd 100644 --- a/blocks/adp-asset-details-panel/adp-asset-details-panel.js +++ b/blocks/adp-asset-details-panel/adp-asset-details-panel.js @@ -6,7 +6,7 @@ import { openDownloadModal } from '../adp-download-modal/adp-download-modal.js'; import { openAssetDetailsModal } from '../adp-asset-details-modal/adp-asset-details-modal.js'; import { fetchMetadataAndCreateHTML } from '../../scripts/metadata-html-builder.js'; import { - getAssetMimeType, getAssetTitle, getAssetName, getAssetHeight, getAssetWidth, + getAssetMimeType, getAssetTitle, getAssetName, getAssetHeight, getAssetWidth, isLicensedContent, } from '../../scripts/metadata.js'; import { getAssetMetadata, @@ -74,7 +74,8 @@ export async function openAssetDetailsPanel(assetId, resultsManagerObj) { // ensure express button only shows for valid asset types const expressBtn = assetDetailsPanel.querySelector('.action-edit-asset'); const validCheck = fileValidity(fileFormat); - if (isCCEConfigured() && validCheck.isValid) { + if (isCCEConfigured() && validCheck.isValid && !isLicensedContent(assetJSON)) { + //Only show express button for content that is not licensed. expressBtn.classList.remove('hidden'); } else if (!expressBtn.classList.contains('hidden')) { expressBtn.classList.add('hidden'); diff --git a/scripts/metadata.js b/scripts/metadata.js index b9e42091..bbd3684c 100644 --- a/scripts/metadata.js +++ b/scripts/metadata.js @@ -180,6 +180,14 @@ export function getAssetSize(assetJSON) { return getMetadataValue('size', assetJSON); } +/** + * Is licensed content + * Returns true for gmo:licensedContent != 'no' + */ +export function isLicensedContent(assetJSON) { + return getMetadataValue('gmo:licensedContent', assetJSON) !== 'no'; +} + /** * Predefined metadata fields that have special handling, can have compound values and a * special formatter.