create caption input for maps and charts

Author: IshavSohal

StorylinesSchema.json

@@ -185,6 +185,10 @@
                 "title": {
                     "type": "string",
                     "description": "A title that is displayed centered above this map."
+                }, 
+                "caption": {
+                    "type": "string",
+                    "description": "Supporting text content for the map."
                 }
             },
             "required": ["config", "type"]

public/StorylinesSlideSchema.json

@@ -192,6 +192,10 @@
                     "type": "string",
                     "description": "A title that is displayed centered above this map."
                 },
+                "caption": {
+                    "type": "string",
+                    "description": "Supporting text content for the map."
+                },
                 "timeSlider": {
                     "type": "object",
                     "description": "Configuration for a time slider on the map.",
@@ -256,6 +260,10 @@
                 "customStyles": {
                     "type": "string",
                     "description": "Additional CSS styles to apply to the panel."
+                }, 
+                "caption": {
+                    "type": "string",
+                    "description": "Supporting text content for the chart."
                 }
             },
             "additionalProperties": false,

src/components/chart-editor.vue

@@ -47,8 +47,10 @@
                         :configFileStructure="configFileStructure"
                         :sourceCounts="sourceCounts"
                         :lang="lang"
+                        :index="index"
                         @edit="editChart"
                         @delete="$vfm.open(`${element.name}-${index}`)"
+                        @captionEdit="onChartsEdited"
                     ></ChartPreview>
                 </template>
             </draggable>

src/components/helpers/chart-preview.vue

@@ -63,6 +63,19 @@
                 </div>
             </button>
         </div>
+        <div class="flex items-center mt-2">
+            <label :for="'chartPreviewCaption' + index" class="font-bold"
+                >{{ $t('editor.image.label.caption') }}:
+            </label>
+            <input
+                :id="'chartPreviewCaption' + index"
+                class="editor-input w-2/5 ml-2"
+                type="text"
+                v-model="chart.caption"
+                placeholder="Add a caption"
+                @input="$emit('captionEdit')"
+            />
+        </div>
     </li>
 </template>
 
@@ -92,6 +105,7 @@ export default class ChartPreviewV extends Vue {
     @Prop() configFileStructure!: ConfigFileStructure;
     @Prop() sourceCounts!: SourceCounts;
     @Prop() lang!: string;
+    @Prop() index!: number;
 
     loading = true;
     chartIdx = 0;

src/components/map-editor.vue

@@ -24,6 +24,19 @@
 
             <div class="mb-4" v-if="usingTimeSlider"></div>
 
+            <div class="flex items-center w-full text-left mt-2">
+                <label class="editor-label text-label" for="rampMapCaption">
+                    {{ $t('editor.image.label.caption') }}:</label
+                >
+                <input
+                    id="rampMapCaption"
+                    class="editor-input w-2/5"
+                    type="text"
+                    v-model="panel.caption"
+                    placeholder="Add a caption"
+                />
+            </div>
+
             <div class="ramp-editor mt-5" ref="editor" style="width: 70vw; height: 80vh"></div>
         </div>
         <vue-final-modal
@@ -44,7 +57,7 @@
                     :disabled="timeSliderError"
                     @click="saveTimeSlider"
                 >
-                    Done
+                    {{ $t('editor.done') }}
                 </button>
             </div>
         </vue-final-modal>

src/definitions.ts

@@ -183,6 +183,7 @@ export interface MapPanel extends BasePanel {
     title: string;
     scrollguard: boolean;
     customStyles?: string;
+    caption?: string;
 }
 export interface TimeSliderConfig {
     range: number[];
@@ -252,6 +253,7 @@ export interface ChartPanel extends BasePanel {
     name?: string;
     options?: DQVOptions;
     customStyles?: string;
+    caption?: string;
 }
 
 export interface ChartConfig {
@@ -260,6 +262,7 @@ export interface ChartConfig {
     config?: any;
     name?: string;
     options?: DQVOptions;
+    caption?: string;
 }
 
 export interface ImageFile {