Add support for teleporting areas of interest content outside RAMP

[yileifeng]

Related Item(s)

For https://github.com/ramp4-pcar4/tcei-tmx-cwa-storylines/issues/74, #499

Changes

• [FEATURE] option to teleport areas of interest items outside of RAMP instance (to the right)
• [FIX] change tooltip positioning for horizontal ToC items to be placed at bottom of container

Notes

Here is what the TCEI summaries map would look like:

Note: I kept the same styling as the old point of interests that was overlayed on top of RAMP instance but open to any styling changes now that it is side-by-side.

Testing

Take a look at the interactive map slide on main demo page.

---

This change is 

[github-actions]

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

[spencerwahl]

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

[RyanCoulsonCA]

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

[RyanCoulsonCA]

Actually just randomly found a bug when testing this again on mobile resolution.

On mobile the points of interest are layered back on top of the map, but it makes scrolling the page very difficult. The non-teleported implementation of this puts the point of interest layer overtop of the map and makes the width 100% so the map can't be interacted with. If we still want the map to be interacted with on mobile then we need to find another way to fix this. Maybe the built-in scroll guard fixture works?

Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @yileifeng)

[james-rae]

Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @yileifeng)

---

StoryRampSchema.json line 275 at r1 (raw file):

                    "description": "A title that is displayed centered above this map."
                },
                "teleportAOI": {

I'm fairly out of my depth on this one, but rando thought is if you make this a string with an enum / domain-of-values, it will future-proof it to adding different teleport targets, like to the left of the map, or some of those other fancy storylines content layouts.
'off' or '' can be default.
Can call the current "on" mode 'right', or just 'on' and you can alias that to 'right' later if you need to expand.

Anyway just a thought, do what ya wanna!

[yileifeng]

Moved the areas of interest content outside RAMP container on mobile resolutions below the map, similar to the original StoryMap.

Reviewable status: 0 of 4 files reviewed, all discussions resolved (waiting on @RyanCoulsonCA and @spencerwahl)

---

StoryRampSchema.json line 275 at r1 (raw file):

Previously, james-rae (James Rae) wrote…

I'm fairly out of my depth on this one, but rando thought is if you make this a string with an enum / domain-of-values, it will future-proof it to adding different teleport targets, like to the left of the map, or some of those other fancy storylines content layouts.
'off' or '' can be default.
Can call the current "on" mode 'right', or just 'on' and you can alias that to 'right' later if you need to expand.

Anyway just a thought, do what ya wanna!

Changed alongside the "teleportGrid" config option for consistency

[james-rae]

StoryRampSchema.json line 275 at r1 (raw file):

Previously, yileifeng (Yi Lei Feng) wrote…

Changed alongside the "teleportGrid" config option for consistency

If you really wanna go ham, you can add something like this to your schema (use whatever string values you had in mind).

"enum": ["", "right"]

[yileifeng]

Reviewable status: 0 of 4 files reviewed, all discussions resolved (waiting on @RyanCoulsonCA and @spencerwahl)

---

StoryRampSchema.json line 275 at r1 (raw file):

Previously, james-rae (James Rae) wrote…

If you really wanna go ham, you can add something like this to your schema (use whatever string values you had in mind).

"enum": ["", "right"]

Donethanks

[spencerwahl]

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

[yileifeng]

Added a change to adjust tooltip positioning for items in horizontal ToC to be placed at bottom: #499

Reviewable status: 4 of 5 files reviewed, all discussions resolved (waiting on @james-rae, @RyanCoulsonCA, and @spencerwahl)

[spencerwahl]

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

[RyanCoulsonCA]

Looks good! We might want to consider adding support for scroll guard on the map at some point, but we don't have to do it in this PR

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