Add support for teleporting areas of interest content outside RAMP

StoryRampSchema.json

@@ -230,9 +230,10 @@
                     "default": false
                 },
                 "teleportGrid": {
-                    "type": "boolean",
-                    "description": "Whether or not to teleport grid outside of RAMP instance.",
-                    "default": false
+                    "type": "string",
+                    "description": "Specifies where to teleport grid outside of RAMP instance.",
+                    "default": "",
+                    "enum": ["", "left", "right"]
                 },
                 "title": {
                     "type": "string",
@@ -272,6 +273,12 @@
                     "type": "string",
                     "description": "A title that is displayed centered above this map."
                 },
+                "teleportAOI": {
+                    "type": "string",
+                    "description": "Specifies where to teleport areas of interest outside of RAMP instance.",
+                    "default": "",
+                    "enum": ["", "left", "right"]
+                },
                 "points": {
                     "type": "array",
                     "description": "A list of points of interest.",

public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json

@@ -35,7 +35,7 @@
                 {
                     "config": "00000000-0000-0000-0000-000000000000/ramp-config/CommunityDirectory.json",
                     "type": "map",
-                    "teleportGrid": true,
+                    "teleportGrid": "left",
                     "scrollguard": true
                 }
             ],
@@ -49,6 +49,7 @@
                     "type": "interactive-map",
                     "scrollguard": true,
                     "title": "Map Title Test",
+                    "teleportAOI": "right",
                     "points": [
                         {
                             "title": "Point of Interest A",

src/components/panels/interactive-map.vue

@@ -1,11 +1,30 @@
 <template>
-    <div ref="el" class="h-full align-middle w-full interactive-container sticky">
-        <div class="interactive-content z-50">
-            <div v-for="(point, index) in config.points" :key="`poi-` + index" class="point-of-interest-container">
-                <PointOfInterestItem :point="point" :index="index" @poi-changed="handlePoint"></PointOfInterestItem>
+    <div ref="el" class="h-full align-middle w-full">
+        <!-- if teleporting areas of interest to side of RAMP container -->
+        <div class="flex teleport-container sm:flex-row flex-col h-full w-full" v-if="config.teleportAOI">
+            <div class="overflow-x-auto overflow-y-hidden sm:self-start flex-2 sticky z-40">
+                <div :id="`ramp-map-${slideIdx}`" class="bg-gray-200 rv-map"></div>
             </div>
+            <div class="flex-1">
+                <div v-for="(point, index) in config.points" :key="`poi-` + index" class="point-of-interest-container">
+                    <PointOfInterestItem
+                        class="point-of-interest"
+                        :point="point"
+                        :index="index"
+                        @poi-changed="handlePoint"
+                    ></PointOfInterestItem>
+                </div>
+            </div>
+        </div>
+
+        <div class="h-full align-middle w-full interactive-container sticky" v-else>
+            <div class="interactive-content z-50">
+                <div v-for="(point, index) in config.points" :key="`poi-` + index" class="point-of-interest-container">
+                    <PointOfInterestItem :point="point" :index="index" @poi-changed="handlePoint"></PointOfInterestItem>
+                </div>
+            </div>
+            <div :id="`ramp-map-${slideIdx}`" class="bg-gray-200 h-story rv-map sticky interactive-content"></div>
         </div>
-        <div :id="`ramp-map-${slideIdx}`" class="bg-gray-200 h-story rv-map sticky interactive-content"></div>
     </div>
 </template>
 
@@ -55,7 +74,9 @@ onMounted(() => {
 
 const init = async () => {
     // Find the map component.
-    mapComponent.value = el.value.children[1];
+    mapComponent.value = props.config.teleportAOI
+        ? el.value.children[0].children[0].children[0]
+        : el.value.children[0].children[1];
 
     fetch(props.config.config).then((data) => {
         // parse JSON data
@@ -185,6 +206,14 @@ const handlePoint = (id: string, oid: number, layerIndex?: number) => {
             height: calc(100vh - 4rem) !important;
         }
     }
+    .teleport-container {
+        .rv-map {
+            max-height: 50vh;
+        }
+        .point-of-interest {
+            width: 100%;
+        }
+    }
 }
 
 :deep(rv-basemap-item .rv-basemap-thumb img) {

src/components/story/horizontal-menu.vue

@@ -7,7 +7,7 @@
                     @click="scrollToChapter('intro')"
                     v-tippy="{
                         delay: '200',
-                        placement: 'right',
+                        placement: 'bottom',
                         content: $t('chapters.return'),
                         animateFill: true,
                         animation: 'chapter-menu'
@@ -25,7 +25,7 @@
                     target
                     v-tippy="{
                         delay: '200',
-                        placement: 'right',
+                        placement: 'bottom',
                         content: $t('chapters.return'),
                         animateFill: true,
                         animation: 'chapter-menu'
@@ -44,7 +44,7 @@
                     @click="scrollToChapter(`${slide.index}-${slide.title.toLowerCase().replaceAll(' ', '-')}`)"
                     v-tippy="{
                         delay: '200',
-                        placement: 'right',
+                        placement: 'bottom',
                         content: getTitle(slide),
                         animateFill: true,
                         animation: 'chapter-menu'
@@ -62,7 +62,7 @@
                     target
                     v-tippy="{
                         delay: '200',
-                        placement: 'right',
+                        placement: 'bottom',
                         content: getTitle(slide),
                         animateFill: true,
                         animation: 'chapter-menu'

src/definitions.ts

@@ -164,8 +164,8 @@ export interface MapPanel extends BasePanel {
     timeSlider?: TimeSliderConfig;
     title: string;
     scrollguard: boolean;
-    teleportGrid?: boolean;
-    customTemplates: String[];
+    teleportGrid?: string;
+    customTemplates: string[];
 }
 
 export interface InteractiveMapPanel extends BasePanel {
@@ -174,6 +174,7 @@ export interface InteractiveMapPanel extends BasePanel {
     title: string;
     scrollguard: boolean;
     points: PointOfInterest[];
+    teleportAOI?: string;
 }
 
 export interface PointOfInterest {