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

@@ -42,13 +42,32 @@
             ></storylines-chart>
         </div>
         <!-- chart description and edit  -->
-        <div class="flex mt-4 items-center">
-            <label class="editor-label name-label font-bold flex-2"
-                >{{ $t('editor.chart.label.name') }}: <span class="font-normal">{{ chartName }}</span></label
-            >
+        <div class="flex mt-4 items-center flex-wrap">
+            <div class="flex flex-2 w-4/5" style="min-width: 130px">
+                <div class="flex flex-col mr-2 justify-between">
+                    <label class="name-label font-bold"> {{ $t('editor.chart.label.name') }}: </label>
+                    <label :for="'chartPreviewCaption' + index" class="name-label font-bold pb-2">
+                        {{ $t('editor.image.label.caption') }}:
+                    </label>
+                </div>
+                <div class="flex flex-col justify-between">
+                    <label class="name-label font-bold">
+                        <span class="font-normal break-all">{{ chartName }}</span>
+                    </label>
+                    <input
+                        :id="'chartPreviewCaption' + index"
+                        class="editor-input w-5/6"
+                        type="text"
+                        v-model="chart.caption"
+                        :placeholder="$t('editor.caption.placeholder')"
+                        @input="$emit('captionEdit')"
+                    />
+                </div>
+            </div>
+
             <!-- edit button -->
             <button
-                class="editor-button chart-btn bg-gray-100 cursor-pointer hover:bg-gray-200"
+                class="editor-button chart-btn bg-gray-100 cursor-pointer hover:bg-gray-200 m-0 mt-4"
                 :id="`edit-${chart.name}-btn`"
             >
                 <div class="flex items-center">
@@ -92,6 +111,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="$t('editor.caption.placeholder')"
+                />
+            </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 {

src/lang/lang.csv

@@ -122,6 +122,7 @@ editor.next,Next,1,Suivant,1
 editor.preview,Preview,1,Afficher l’aperçu,1
 editor.confirm,Confirm,1,Confirmer,1
 editor.cancel,Cancel,1,Annuler,1
+editor.caption.placeholder,Add a caption,1,Ajouter une légende,0
 editor.unsavedChanges,Unsaved changes,1,Modifications non enregistrées,1
 editor.saveChanges,Save changes,1,Enregistrer les modifications,1
 editor.discardChanges,Discard changes,1,Annuler les modifications,0