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

Carousel LCP Adjustment #28

Closed
wants to merge 7 commits into from
Closed

Carousel LCP Adjustment #28

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f81e18c
fix: carousel feed allows configured dam
fkakatie Oct 7, 2022
d443107
Merge branch 'main' into carousel-feed-dam-fix
Oct 10, 2022
8715c25
an attempt to attress lh score with course feed carousel
shsteimer Oct 10, 2022
e20f975
eager images
shsteimer Oct 10, 2022
0cae3f1
eager images
shsteimer Oct 10, 2022
d6786e1
lazy images
shsteimer Oct 10, 2022
6f81c2f
Merge branch 'main' into carousel-tbt-test
Oct 11, 2022
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
35 changes: 21 additions & 14 deletions blocks/carousel/carousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,19 +47,11 @@ async function insertCourseFeedSlides(block) {
const code = json.tourCode;
const perm = json.permNum;
const { courseId } = json.courses[0];
const tournament = config['dam-code'] ? config['dam-code'] : `${code}${perm}`;
// eslint-disable-next-line no-restricted-syntax
for (const hole of json.courses[0].holes) {
const damSrc = `${damPrefix}/${code}${perm}/${courseId}/holes/hole${hole.holeNum}.jpg`;
const holeJpg = `${cloudinaryPrefix},w_1290/v1/pgatour/courses/${code}${perm}/${courseId}/holes/hole${hole.holeNum}.jpg`;
const holeJpg = `${cloudinaryPrefix},w_1290/v1/pgatour/courses/${tournament}/${courseId}/holes/hole${hole.holeNum}.jpg`;
const holePng = `${cloudinaryPrefix},w_150/holes_${config.year || new Date().getFullYear()}_${code}_${perm}_${courseId}_overhead_full_${hole.holeNum}.png`;
// eslint-disable-next-line no-await-in-loop
const metaresp = await fetch(`https://little-forest-58aa.david8603.workers.dev/?url=${encodeURIComponent(`${damSrc}/jcr:content/metadata.json`)}`);
// eslint-disable-next-line no-await-in-loop
const meta = await metaresp.json();
const metaDesc = meta['dc:description'];
const metaCreator = meta['dc:creator'];
const metaRights = meta['dc:rights'];
const metaTitle = meta['dc:title'];
const avg = hole.stats.find((stat) => stat.id === '43108').eV2;
const stats = hole.stats.filter((stat) => stat.id !== '43108');
const statsDivisor = stats.reduce((a, b) => {
Expand All @@ -77,7 +69,7 @@ async function insertCourseFeedSlides(block) {
div.innerHTML = `
<div class="carousel-image">
<picture>
<img src="${holeJpg}" alt="${metaTitle}" />
<img loading="${hole.holeNum === '1' ? 'eager' : 'lazy'}" src="${holeJpg}" alt="" />
</picture>
</div>
<div class="carousel-text course-text">
Expand All @@ -88,10 +80,10 @@ async function insertCourseFeedSlides(block) {
</div>
<p class="course-hole">
<picture>
<img src="${holePng}" alt="${metaTitle}" />
<img src="${holePng}" alt="" loading="lazy" />
</picture>
</p>
<p>${metaDesc}</p>
<p class="hole-desc"></p>
</div>
<div class="course-statistics">
<h3 id="statistics">${config.year || new Date().getFullYear()} Statistics</h3>
Expand Down Expand Up @@ -139,9 +131,24 @@ async function insertCourseFeedSlides(block) {
</tbody>
</table>
</div>
<p class="course-credits">PHOTO BY <strong>${metaCreator.join(', ')}</strong> / ${metaRights}</p>
<p class="course-credits">PHOTO BY</p>
</div>`;
block.append(div);

const damSrc = `${damPrefix}/${tournament}/${courseId}/holes/hole${hole.holeNum}.jpg`;
fetch(`https://little-forest-58aa.david8603.workers.dev/?url=${encodeURIComponent(`${damSrc}/jcr:content/metadata.json`)}`)
.then(async (metaresp) => {
const meta = await metaresp.json();
const metaDesc = meta['dc:description'];
const metaCreator = meta['dc:creator'];
const metaRights = meta['dc:rights'];
const metaTitle = meta['dc:title'];

div.querySelector('.carousel-image > picture > img').setAttribute('alt', metaTitle);
div.querySelector('.course-hole > picture > img').setAttribute('alt', metaTitle);
div.querySelector('.hole-desc').innerText = metaDesc;
div.querySelector('.course-credits').innerHTML = `PHOTO BY <strong>${metaCreator.join(', ')}</strong> / ${metaRights}`;
});
}
}
}
Expand Down