[Doodlebug] New aside-carousel block

[JingleH]

Currently on Doodlebug pages, MEP is leveraged to swap out aside blocks with a section using carousel and editorial-cards. It could be better UX to use a responsive block (aside on desktop, carousel on tablet/mobile), and it would also remove the dependency on MEP, allowing automation of pages to be more streamlined.

This is a brand new block so should have no regression risk. No Figma yet as we are trying to proceed quickly. This is a best-effort attempt at combining multiple blocks and retaining doodlebug.css theme override under the time constraint.

Test URLs:

• Before: https://www.adobe.com/products/firefly/features/image-upscaler.html
• After: https://doodlebug-aside-carousel--da-cc--adobecom.aem.live/drafts/jingle/image-upscaler-aside-carousel?martech=off

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• ada5aaa 🔄 (latest)
• 52a92df ✅
• 84fe770 ✅
• 29fe641 ✅
• de0fa3a ✅
• bebbd5a ✅
• 186cec2 ✅
• 811259c ✅
• 8601968 ✅
• 60d53bd ✅
• 9067761 ✅
• 8f30227 ✅
• 65c89bd ✅
• a29781a ✅
• 37d2e63 ✅
• 845b3d1 ✅

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/drafts/jingle/image-upscaler-aside-carousel?martech=off
🖥️	/drafts/jingle/image-upscaler-aside-carousel?martech=off

[suhjainadobe]

Hello @JingleH ,
When we swipe the carousel, the left card is also peeking on the screen. For doodlebug pages, our requirement was to show only the right card peeking on the screen. Could you please add a class/functionality to extent the functionality so that both the options are present on the carousel.
Please refer to our prod link for the same.
https://www.adobe.com/in/products/firefly/features/ai-character-generator.html?sdid=9RQM3T4B&mv=search&mv2=paidsearch&ef_id=CjwKCAjw8arQBhB9EiwAfIKdQtzzwr5KzY-aOEymJgSKyN-mvUjW6RsfU-70lJIOu4jkayM9pf_njRoCg7oQAvD_BwE:G:s&s_kwcid=AL!3085!3!805321749260!e!!g!!ai%20character%20generator!23747433558!198447110587&gad_source=1&gad_campaignid=23747433558&gbraid=0AAAAADoVWmTOGAGD1oVIDlqDx0BKWd5bP&gclid=CjwKCAjw8arQBhB9EiwAfIKdQtzzwr5KzY-aOEymJgSKyN-mvUjW6RsfU-70lJIOu4jkayM9pf_njRoCg7oQAvD_BwE

[JingleH]

Hello @JingleH , When we swipe the carousel, the left card is also peeking on the screen. For doodlebug pages, our requirement was to show only the right card peeking on the screen. Could you please add a class/functionality to extent the functionality so that both the options are present on the carousel. Please refer to our prod link for the same. https://www.adobe.com/in/products/firefly/features/ai-character-generator.html?sdid=9RQM3T4B&mv=search&mv2=paidsearch&ef_id=CjwKCAjw8arQBhB9EiwAfIKdQtzzwr5KzY-aOEymJgSKyN-mvUjW6RsfU-70lJIOu4jkayM9pf_njRoCg7oQAvD_BwE:G:s&s_kwcid=AL!3085!3!805321749260!e!!g!!ai%20character%20generator!23747433558!198447110587&gad_source=1&gad_campaignid=23747433558&gbraid=0AAAAADoVWmTOGAGD1oVIDlqDx0BKWd5bP&gclid=CjwKCAjw8arQBhB9EiwAfIKdQtzzwr5KzY-aOEymJgSKyN-mvUjW6RsfU-70lJIOu4jkayM9pf_njRoCg7oQAvD_BwE

Hi @suhjainadobe , I've updated the block to be behaving like the current prod by default (https://doodlebug-aside-carousel--da-cc--adobecom.aem.live/drafts/jingle/image-upscaler-aside-carousel). With a (no-clip-left) variant, it will be like the initial implementation (https://doodlebug-aside-carousel--da-cc--adobecom.aem.live/drafts/jingle/image-upscaler-aside-carousel-no-clip-left).

[spadmasa]

Thankyou @JingleH for the fix on image peek view in left , when verified with video in ipad do not see it working as expected, can you please take a look
https://doodlebug-aside-carousel--da-cc--adobecom.aem.page/drafts/souj/doodle-audio/image-upscaler-aside-carousel-no-clip-left

in mobile do see slight peek available on video in left

[JingleH]

Thankyou @JingleH for the fix on image peek view in left , when verified with video in ipad do not see it working as expected, can you please take a look https://doodlebug-aside-carousel--da-cc--adobecom.aem.page/drafts/souj/doodle-audio/image-upscaler-aside-carousel-no-clip-left in mobile do see slight peek available on video in left

Hi @spadmasa , part of the request was to make it authorable, so there are 2 links: one with no-cilp-left variant, and this will not hide the left card; the other one is standard default, and it will hide the left card. If we want to verify the hiding logic, can you help verify on https://doodlebug-aside-carousel--da-cc--adobecom.aem.live/drafts/jingle/image-upscaler-aside-carousel? Thanks!

[spadmasa]

Thankyou @JingleH verified with authoring change , seen working as expected https://doodlebug-aside-carousel--da-cc--adobecom.aem.page/drafts/souj/doodle-audio/image-upscaler-aside-carousel-no-clip-left

[nkthakur48]

I don't see handleImageLoad getting defined or exported from aside-carousel.js. Could you please re-check?

[JingleH]

Yes @nkthakur48 it's dead code copied from milo's aside and not cleaned up. I've removed it and also added case for the newly added no-clip-left variant. Good catch!