From 1d91b7ce81f59b41aa2f1f904b96c8651fa5c1c2 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 23 May 2024 13:12:48 -0400 Subject: [PATCH 1/4] Update firefly-gallery.js --- blocks/firefly-gallery/firefly-gallery.js | 1 - 1 file changed, 1 deletion(-) diff --git a/blocks/firefly-gallery/firefly-gallery.js b/blocks/firefly-gallery/firefly-gallery.js index 9299eb5..153f806 100644 --- a/blocks/firefly-gallery/firefly-gallery.js +++ b/blocks/firefly-gallery/firefly-gallery.js @@ -129,7 +129,6 @@ async function addCards(cardContainer, images) { const url = FAVOURITE_URL.replace('$', imageId); const headers = new Headers({ 'X-Api-Key': 'alfred-community-hubs', - 'community_id': 'ff_community', 'Authorization': `Bearer ${accessToken.token}`, 'content-type': 'application/json', }); From 45de80771dbbc74dc89729d5ea157327d65aa020 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Fri, 24 May 2024 11:43:46 -0400 Subject: [PATCH 2/4] gallery images like and unlike --- blocks/firefly-gallery/firefly-gallery.css | 6 +- blocks/firefly-gallery/firefly-gallery.js | 64 ++++++++++++++++++---- scripts/utils.js | 8 +-- 3 files changed, 61 insertions(+), 17 deletions(-) diff --git a/blocks/firefly-gallery/firefly-gallery.css b/blocks/firefly-gallery/firefly-gallery.css index 2d40a19..639fd57 100644 --- a/blocks/firefly-gallery/firefly-gallery.css +++ b/blocks/firefly-gallery/firefly-gallery.css @@ -154,6 +154,10 @@ background-color: var(--color-gray-200); } + .card .card-details .card-footer .favorite.hide { + display: none; + } + .card .card-details .card-footer .favorite::after { position: absolute; display: inline-block; @@ -163,7 +167,7 @@ background: url('/icons/like.svg') center no-repeat; } - .card .card-details .card-footer .favorite.selected::after { + .card .card-details .card-footer .favorite.liked::after { content: ''; width: 16px; height: 16px; diff --git a/blocks/firefly-gallery/firefly-gallery.js b/blocks/firefly-gallery/firefly-gallery.js index 153f806..958c62c 100644 --- a/blocks/firefly-gallery/firefly-gallery.js +++ b/blocks/firefly-gallery/firefly-gallery.js @@ -2,7 +2,7 @@ /* eslint-disable no-underscore-dangle */ import { getLibs } from '../../scripts/utils.js'; -const { createTag } = await import(`${getLibs()}/utils/utils.js`); +const { createTag, loadIms } = await import(`${getLibs()}/utils/utils.js`); const GALLERY_URL = 'https://community-hubs.adobe.io/api/v2/ff_community/assets?sort=updated_desc&include_pending_assets=false&size='; const FAVOURITE_URL = 'https://community-hubs.adobe.io/api/v2/ff_community/assets/$/likes'; const COMMUNITY_URL = 'https://firefly.adobe.com/community/view/texttoimage?id='; @@ -28,13 +28,16 @@ function resizeAllGridItems(block) { } } -async function getImages(link, next = '') { +async function getImages(link, accessToken = '', next = '') { let endpoint = link; // const requestId = (Math.random() + 1).toString(36).substring(5); const headers = new Headers({ 'X-Api-Key': 'alfred-community-hubs', 'community_id': 'ff_community', }); + if (accessToken) { + headers.set('Authorization', `Bearer ${accessToken}`); + } if (cursor !== null && cursor !== '') endpoint += `&cursor=${encodeURIComponent(next)}`; const resp = await fetch(endpoint, { headers, @@ -57,7 +60,7 @@ async function getImages(link, next = '') { return []; } -async function addCards(cardContainer, images) { +async function addCards(cardContainer, images, accessToken = '') { let heightOfContainer = 0; await images.forEach((image) => { const rendition = image._links.rendition.href; @@ -71,6 +74,7 @@ async function addCards(cardContainer, images) { const prompt = image.title; const imageUrl = rendition.replace('{format}', DEFAULT_FORMAT).replace('{dimension}', DEFAULT_DIMENSION).replace('{size}', DEFAULT_SIZE); const communityUrl = COMMUNITY_URL + imageUrn; + const liked = Boolean(image.liked); if (images.indexOf(image) < 5) { heightOfContainer += parseInt(height, 10); } @@ -102,11 +106,13 @@ async function addCards(cardContainer, images) { class: 'viewLink button', }); viewLink.textContent = 'View'; - const favorite = createTag('button', { class: 'favorite' }); + const favorite = createTag('button', { class: `favorite ${liked ? 'hide' : ''}` }); + const favoriteSelected = createTag('button', { class: `favorite liked ${liked ? '' : 'hide'}` }); const viewButton = createTag('button', { class: 'view' }); viewButton.append(viewLink); const cardFooter = createTag('div', { class: 'card-footer' }); cardFooter.append(favorite); + cardFooter.append(favoriteSelected); cardFooter.append(viewButton); cardDetails.append(author); cardDetails.append(cardPrompt); @@ -124,32 +130,51 @@ async function addCards(cardContainer, images) { favorite.addEventListener('click', async (e) => { e.preventDefault(); if (window.adobeIMS.isSignedInUser()) { - const accessToken = window.adobeIMS.getAccessToken(); const imageId = image.urn.split(':').pop(); const url = FAVOURITE_URL.replace('$', imageId); const headers = new Headers({ 'X-Api-Key': 'alfred-community-hubs', - 'Authorization': `Bearer ${accessToken.token}`, + 'Authorization': `Bearer ${accessToken}`, 'content-type': 'application/json', }); const resp = await fetch(url, { method: 'PUT', headers, - mode: 'cors', }); if (resp.ok) { - favorite.classList.add('liked'); + favorite.classList.add('hide'); + favoriteSelected.classList.remove('hide'); + } + } + }); + + favoriteSelected.addEventListener('click', async (e) => { + e.preventDefault(); + if (window.adobeIMS.isSignedInUser()) { + const imageId = image.urn.split(':').pop(); + const url = FAVOURITE_URL.replace('$', imageId); + const headers = new Headers({ + 'X-Api-Key': 'alfred-community-hubs', + 'Authorization': `Bearer ${accessToken}`, + 'content-type': 'application/json', + }); + const resp = await fetch(url, { + method: 'DELETE', + headers, + }); + if (resp.ok) { + favoriteSelected.classList.add('hide'); + favorite.classList.remove('hide'); } } }); } }); - // set height of container cardContainer.style.height = `${heightOfContainer}px`; GETTING_IMAGES = false; } -export default async function decorate(block) { +async function loadImages(block, accessToken = '') { const size = FULL_GALLERY_SIZE; let IS_INFINITE_SCROLL = false; if (block.classList.contains('full')) { @@ -157,11 +182,11 @@ export default async function decorate(block) { } const link = block.querySelector('a')?.href || `${GALLERY_URL}${size}`; block.innerHTML = ''; - const images = await getImages(link); + const images = await getImages(link, accessToken); // shuffle images images.sort(() => Math.random() - 0.5); const cardContainer = createTag('div', { class: 'card-container' }); - await addCards(cardContainer, images); + await addCards(cardContainer, images, accessToken); block.append(cardContainer); resizeAllGridItems(block); window.addEventListener('resize', resizeAllGridItems(block)); @@ -202,3 +227,18 @@ export default async function decorate(block) { }, 2000); } } + +export default async function decorate(block) { + loadIms() + .then(async () => { + if (window.adobeIMS.isSignedInUser()) { + await loadImages(block, window.adobeIMS.getAccessToken()); + } else { + await loadImages(block); + } + }) + .catch(async (e) => { + console.log('Unable to load IMS:', e); + await loadImages(block); + }); +} diff --git a/scripts/utils.js b/scripts/utils.js index 663bcef..6897d9e 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -98,14 +98,14 @@ export function createOptimizedFireflyPicture( * @param {string} [prefix] prefix to be added to icon src * @param {string} [alt] alt text to be added to icon */ -function decorateIcon(span, prefix = '', alt = '') { +function decorateIcon(span, alt = '') { const iconName = Array.from(span.classList) .find((c) => c.startsWith('icon-')) .substring(5); const img = document.createElement('img'); img.dataset.iconName = iconName; img.src = `/icons/${iconName}.svg`; - img.alt = alt; + img.alt = alt || iconName; img.loading = 'lazy'; span.append(img); } @@ -115,10 +115,10 @@ function decorateIcon(span, prefix = '', alt = '') { * @param {Element} [element] Element containing icons * @param {string} [prefix] prefix to be added to icon the src */ -export function decorateIcons(element, prefix = '') { +export function decorateIcons(element) { const icons = [...element.querySelectorAll('span.icon')]; icons.forEach((span) => { - decorateIcon(span, prefix); + decorateIcon(span); }); } From 3a9049b2b191d3528d1244509e2670dcd5ff64ee Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Fri, 24 May 2024 11:50:58 -0400 Subject: [PATCH 3/4] Update firefly-gallery.js --- blocks/firefly-gallery/firefly-gallery.js | 32 +++++++++++------------ 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/blocks/firefly-gallery/firefly-gallery.js b/blocks/firefly-gallery/firefly-gallery.js index 958c62c..d56921c 100644 --- a/blocks/firefly-gallery/firefly-gallery.js +++ b/blocks/firefly-gallery/firefly-gallery.js @@ -145,27 +145,27 @@ async function addCards(cardContainer, images, accessToken = '') { favorite.classList.add('hide'); favoriteSelected.classList.remove('hide'); } + } else { + // TODO: Add IMS login } }); favoriteSelected.addEventListener('click', async (e) => { e.preventDefault(); - if (window.adobeIMS.isSignedInUser()) { - const imageId = image.urn.split(':').pop(); - const url = FAVOURITE_URL.replace('$', imageId); - const headers = new Headers({ - 'X-Api-Key': 'alfred-community-hubs', - 'Authorization': `Bearer ${accessToken}`, - 'content-type': 'application/json', - }); - const resp = await fetch(url, { - method: 'DELETE', - headers, - }); - if (resp.ok) { - favoriteSelected.classList.add('hide'); - favorite.classList.remove('hide'); - } + const imageId = image.urn.split(':').pop(); + const url = FAVOURITE_URL.replace('$', imageId); + const headers = new Headers({ + 'X-Api-Key': 'alfred-community-hubs', + 'Authorization': `Bearer ${accessToken}`, + 'content-type': 'application/json', + }); + const resp = await fetch(url, { + method: 'DELETE', + headers, + }); + if (resp.ok) { + favoriteSelected.classList.add('hide'); + favorite.classList.remove('hide'); } }); } From 4f1f16376f9b8e137773e66e5b7f44a24db7d73b Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Fri, 24 May 2024 14:51:37 -0400 Subject: [PATCH 4/4] Update firefly-gallery.js --- blocks/firefly-gallery/firefly-gallery.js | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/blocks/firefly-gallery/firefly-gallery.js b/blocks/firefly-gallery/firefly-gallery.js index d56921c..42c1ded 100644 --- a/blocks/firefly-gallery/firefly-gallery.js +++ b/blocks/firefly-gallery/firefly-gallery.js @@ -2,7 +2,7 @@ /* eslint-disable no-underscore-dangle */ import { getLibs } from '../../scripts/utils.js'; -const { createTag, loadIms } = await import(`${getLibs()}/utils/utils.js`); +const { createTag } = await import(`${getLibs()}/utils/utils.js`); const GALLERY_URL = 'https://community-hubs.adobe.io/api/v2/ff_community/assets?sort=updated_desc&include_pending_assets=false&size='; const FAVOURITE_URL = 'https://community-hubs.adobe.io/api/v2/ff_community/assets/$/likes'; const COMMUNITY_URL = 'https://firefly.adobe.com/community/view/texttoimage?id='; @@ -229,16 +229,9 @@ async function loadImages(block, accessToken = '') { } export default async function decorate(block) { - loadIms() - .then(async () => { - if (window.adobeIMS.isSignedInUser()) { - await loadImages(block, window.adobeIMS.getAccessToken()); - } else { - await loadImages(block); - } - }) - .catch(async (e) => { - console.log('Unable to load IMS:', e); - await loadImages(block); - }); + if (window.adobeIMS.isSignedInUser()) { + await loadImages(block, window.adobeIMS.getAccessToken()); + } else { + await loadImages(block); + } }