Add interactive-image panel

[spencerwahl]

Changes

• [FEATURE] Adds the interactive-image panel, to fix issues with the hacky implementation in a project and to make it reusable.

Notes

A large portion of the panel file is taken from dynamic panels. The change looks large but it shouldn't be too crazy to look through.

Testing

Steps:

1. Scroll down to the new slide
2. Hover over the left zone, see nothing change
3. Click the zone, see the right panel change like a dynamic panel
4. Hover the right zone, see a new image
5. Click and see the image stay and the right panel update

Please test in mobile, keyboard etc. Things worked for me but who knows what happens when things become a demo.

---

This change is 

[github-actions]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/story-ramp/interactive-image/#/en/00000000-0000-0000-0000-000000000000

[RyanCoulsonCA]

Looks and works great! Tested on Chrome & Firefox with keyboard and on mobile. The only issue I found is that on mobile the text overlaps with the image as you scroll down:

Reviewed 5 of 5 files at r1, all commit messages.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @spencerwahl)

---

src/components/panels/interactive-image-panel.vue line 127 at r1 (raw file):

onMounted(() => {
    if (props.slideIdx && props.slideIdx > 2) {

This should probably take into account the lazyLoad flag, which disables lazy loading if set to false. You should just need to add in props.lazyLoad && here, and then add the following to the props variable up top (the prop should already be passed in to all panels so nothing more is needed):

lazyLoad: {
        type: Boolean
}

---

src/components/panels/interactive-image-panel.vue line 186 at r1 (raw file):

const zoneMouseEnter = (zone: InteractiveImageZone): void => {
    console.log(zone);

Stray console.log

[spencerwahl]

Huh I must have accidentally removed the fix for that. Donethanks.

Reviewable status: 4 of 5 files reviewed, 2 unresolved discussions (waiting on @RyanCoulsonCA)

---

src/components/panels/interactive-image-panel.vue line 127 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

This should probably take into account the lazyLoad flag, which disables lazy loading if set to false. You should just need to add in props.lazyLoad && here, and then add the following to the props variable up top (the prop should already be passed in to all panels so nothing more is needed):

lazyLoad: {
        type: Boolean
}

done

---

src/components/panels/interactive-image-panel.vue line 186 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

Stray console.log

done

[yileifeng]

I'm still seeing the same behavior shown in the GIF

Reviewable status: 4 of 5 files reviewed, 2 unresolved discussions (waiting on @RyanCoulsonCA)

[spencerwahl]

Ok it should actually be fixed this time, sick me put the class on the wrong element 🏆

Reviewable status: 4 of 5 files reviewed, 2 unresolved discussions (waiting on @RyanCoulsonCA)

[RyanCoulsonCA]

Reviewed 1 of 1 files at r3, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @spencerwahl)

[yileifeng]

Reviewed 4 of 5 files at r1, 1 of 1 files at r3, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @spencerwahl)