Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Gallery: like and unlike #31

Merged
merged 5 commits into from
May 24, 2024
Merged

Gallery: like and unlike #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1d91b7c
Update firefly-gallery.js
kailasnadh790 May 23, 2024
8d037d1
Merge branch 'main' into feature/gallery-favourite
kailasnadh790 May 24, 2024
45de807
gallery images like and unlike
kailasnadh790 May 24, 2024
3a9049b
Update firefly-gallery.js
kailasnadh790 May 24, 2024
4f1f163
Update firefly-gallery.js
kailasnadh790 May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion blocks/firefly-gallery/firefly-gallery.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
56 changes: 44 additions & 12 deletions blocks/firefly-gallery/firefly-gallery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
Expand All @@ -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);
}
Expand Down Expand Up @@ -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);
Expand All @@ -124,45 +130,63 @@ 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',
'community_id': 'ff_community',
'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');
}
} else {
// TODO: Add IMS login
}
});

favoriteSelected.addEventListener('click', async (e) => {
e.preventDefault();
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')) {
IS_INFINITE_SCROLL = true;
}
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));
Expand Down Expand Up @@ -203,3 +227,11 @@ export default async function decorate(block) {
}, 2000);
}
}

export default async function decorate(block) {
if (window.adobeIMS.isSignedInUser()) {
await loadImages(block, window.adobeIMS.getAccessToken());
} else {
await loadImages(block);
}
}
8 changes: 4 additions & 4 deletions scripts/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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);
});
}

Expand Down