Skip to content

Commit 2b74c74

Browse files
MistryMistry
Mistry
authored and
Mistry
committed
Option for centering content
1 parent f6ce309 commit 2b74c74

9 files changed

+150
-1
lines changed

‎src/components/editor/chart-editor.vue

+12
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,8 @@ export default class ChartEditorV extends Vue {
9393
@Prop() lang!: string;
9494
@Prop() sourceCounts!: SourceCounts;
9595
@Prop({ default: true }) allowMany!: boolean;
96+
@Prop({ default: false }) centerSlide!: boolean;
97+
@Prop({ default: false }) dynamicSelected!: boolean;
9698
9799
edited = false;
98100
@@ -125,6 +127,16 @@ export default class ChartEditorV extends Vue {
125127
? [this.panel]
126128
: [];
127129
130+
if (this.centerSlide && this.dynamicSelected) {
131+
for (const c in charts) {
132+
charts[c].customStyles += 'text-align: left;';
133+
}
134+
} else if (!this.centerSlide && this.dynamicSelected) {
135+
for (const c in charts) {
136+
charts[c].customStyles = (charts[c].customStyles || '').replace('text-align: left;', '');
137+
}
138+
}
139+
128140
// load charts from existing storylines product
129141
if (charts !== undefined && charts.length) {
130142
this.chartConfigs = charts.map((chart: ChartPanel) => {

‎src/components/editor/dynamic-editor.vue

+4
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,8 @@
7272
:configFileStructure="configFileStructure"
7373
:lang="lang"
7474
:sourceCounts="sourceCounts"
75+
:centerSlide="centerSlide"
76+
:dynamicSelected="dynamicSelected"
7577
@slide-edit="$emit('slide-edit')"
7678
></component>
7779
</div>
@@ -120,6 +122,8 @@ export default class DynamicEditorV extends Vue {
120122
@Prop() configFileStructure!: ConfigFileStructure;
121123
@Prop() lang!: string;
122124
@Prop() sourceCounts!: SourceCounts;
125+
@Prop() centerSlide!: boolean;
126+
@Prop() dynamicSelected!: boolean;
123127
124128
editors: Record<string, string> = {
125129
text: 'text-editor',

‎src/components/editor/image-editor.vue

+12
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,8 @@ export default class ImageEditorV extends Vue {
9797
@Prop() lang!: string;
9898
@Prop() sourceCounts!: SourceCounts;
9999
@Prop({ default: true }) allowMany!: boolean;
100+
@Prop({ default: false }) centerSlide!: boolean;
101+
@Prop({ default: false }) dynamicSelected!: boolean;
100102
101103
dragging = false;
102104
edited = false;
@@ -119,6 +121,16 @@ export default class ImageEditorV extends Vue {
119121
? [this.panel]
120122
: [];
121123
124+
if (this.centerSlide && this.dynamicSelected) {
125+
for (const i in images) {
126+
images[i].customStyles += 'text-align: left;';
127+
}
128+
} else if (!this.centerSlide && this.dynamicSelected) {
129+
for (const i in images) {
130+
images[i].customStyles = (images[i].customStyles || '').replace('text-align: left;', '');
131+
}
132+
}
133+
122134
if (images !== undefined && images.length) {
123135
// Set images as loading until they are all loaded and resolve.
124136
this.imagePreviewsLoading = true;

‎src/components/editor/map-editor.vue

+8
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@ export default class MapEditorV extends Vue {
6565
@Prop() configFileStructure!: ConfigFileStructure;
6666
@Prop() lang!: string;
6767
@Prop() sourceCounts!: SourceCounts;
68+
@Prop({ default: false }) centerSlide!: boolean;
69+
@Prop({ default: false }) dynamicSelected!: boolean;
6870
6971
// config editor
7072
rampEditorApi: any = '';
@@ -94,6 +96,12 @@ export default class MapEditorV extends Vue {
9496
this.createNewConfig();
9597
}
9698
99+
if (this.centerSlide && this.dynamicSelected) {
100+
this.panel.customStyles += 'text-align: left !important;';
101+
} else if (!this.centerSlide && this.dynamicSelected) {
102+
this.panel.customStyles = (this.panel.customStyles || '').replace('text-align: left !important;', '');
103+
}
104+
97105
this.openEditor();
98106
}
99107

‎src/components/editor/slide-editor.vue

+86-1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,22 @@
3636
:disabled="rightOnly && determineEditorType(currentSlide.panel[panelIndex]) === 'dynamic'"
3737
@change.stop="$vfm.open(`right-only-${slideIndex}`)"
3838
/>
39+
<span class="mx-2 font-bold">{{ $t('editor.slides.centerSlide') }}</span>
40+
<input
41+
type="checkbox"
42+
class="rounded-none cursor-pointer w-4 h-4"
43+
v-model="centerSlide"
44+
:disabled="centerPanel"
45+
@change.stop="toggleCenterSlide()"
46+
/>
47+
<span class="mx-2 font-bold">{{ $t('editor.slides.centerPanel') }}</span>
48+
<input
49+
type="checkbox"
50+
class="rounded-none cursor-pointer w-4 h-4"
51+
v-model="centerPanel"
52+
:disabled="centerSlide"
53+
@change.stop="toggleCenterPanel()"
54+
/>
3955
</div>
4056
</div>
4157
</div>
@@ -215,6 +231,8 @@
215231
:lang="lang"
216232
:uid="uid"
217233
:sourceCounts="sourceCounts"
234+
:centerSlide="centerSlide"
235+
:dynamicSelected="dynamicSelected"
218236
@slide-edit="$emit('slide-edit')"
219237
></component>
220238
</div>
@@ -229,7 +247,11 @@
229247
title: currentSlide.title
230248
})
231249
"
232-
@ok="changePanelType(determineEditorType(currentSlide.panel[panelIndex]), newType)"
250+
@ok="
251+
changePanelType(determineEditorType(currentSlide.panel[panelIndex]), newType);
252+
toggleCenterPanel();
253+
toggleCenterSlide();
254+
"
233255
@Cancel="cancelTypeChange"
234256
/>
235257
<confirmation-modal
@@ -302,6 +324,9 @@ export default class SlideEditorV extends Vue {
302324
panelIndex = 0;
303325
newType = '';
304326
rightOnly = false;
327+
centerSlide = false;
328+
centerPanel = false;
329+
dynamicSelected = false;
305330
306331
editors: Record<string, string> = {
307332
text: 'text-editor',
@@ -373,6 +398,7 @@ export default class SlideEditorV extends Vue {
373398
if (newType === 'dynamic') {
374399
this.panelIndex = 0;
375400
this.currentSlide['panel'] = [startingConfig[newType as keyof DefaultConfigs]];
401+
this.dynamicSelected = true;
376402
} else {
377403
// Switching panel type when dynamic panels are not involved.
378404
this.currentSlide.panel[this.panelIndex] = startingConfig[newType as keyof DefaultConfigs];
@@ -503,6 +529,65 @@ export default class SlideEditorV extends Vue {
503529
];
504530
}
505531
}
532+
533+
toggleCenterSlide(): void {
534+
if (this.determineEditorType(this.currentSlide.panel[this.panelIndex]) === 'dynamic') {
535+
if (this.centerSlide) {
536+
this.currentSlide.panel[0].customStyles = 'text-align: right;';
537+
} else {
538+
this.currentSlide.panel[0].customStyles = (this.currentSlide.panel[0].customStyles || '').replace(
539+
'text-align: right;',
540+
''
541+
);
542+
}
543+
} else if (this.rightOnly) {
544+
if (this.centerSlide) {
545+
this.currentSlide.panel[0].customStyles = 'text-align: center;';
546+
} else {
547+
this.currentSlide.panel[0].customStyles = (this.currentSlide.panel[0].customStyles || '').replace(
548+
'text-align: right;',
549+
''
550+
);
551+
this.currentSlide.panel[0].customStyles = (this.currentSlide.panel[0].customStyles || '').replace(
552+
'text-align: left;',
553+
''
554+
);
555+
this.currentSlide.panel[0].customStyles = (this.currentSlide.panel[0].customStyles || '').replace(
556+
'text-align: center;',
557+
''
558+
);
559+
}
560+
} else {
561+
if (this.centerSlide) {
562+
this.currentSlide.panel[0].customStyles = 'text-align: right;';
563+
this.currentSlide.panel[1].customStyles = 'text-align: left;';
564+
} else {
565+
this.currentSlide.panel[0].customStyles = (this.currentSlide.panel[0].customStyles || '').replace(
566+
'text-align: right;',
567+
''
568+
);
569+
this.currentSlide.panel[1].customStyles = (this.currentSlide.panel[1].customStyles || '').replace(
570+
'text-align: left;',
571+
''
572+
);
573+
}
574+
}
575+
}
576+
577+
toggleCenterPanel(): void {
578+
if (this.centerPanel) {
579+
for (const p in this.currentSlide.panel) {
580+
this.currentSlide.panel[p].customStyles = 'text-align: center;';
581+
}
582+
} else {
583+
for (const p in this.currentSlide.panel) {
584+
this.currentSlide.panel[p].customStyles = (this.currentSlide.panel[p].customStyles || '').replace(
585+
'text-align: center;',
586+
''
587+
);
588+
}
589+
}
590+
}
506591
}
507592
</script>
508593

‎src/components/editor/text-editor.vue

+10
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ interface MDEditor {
2222
2323
export default class TextEditorV extends Vue {
2424
@Prop() panel!: TextPanel;
25+
@Prop({ default: false }) centerSlide!: boolean;
26+
@Prop({ default: false }) dynamicSelected!: boolean;
2527
2628
toolbar = {
2729
subsuper: {
@@ -107,6 +109,14 @@ export default class TextEditorV extends Vue {
107109
]
108110
}
109111
};
112+
113+
mounted(): void {
114+
if (this.centerSlide && this.dynamicSelected) {
115+
this.panel.customStyles += 'text-align: left !important;';
116+
} else if (!this.centerSlide && this.dynamicSelected) {
117+
this.panel.customStyles = (this.panel.customStyles || '').replace('text-align: left !important;', '');
118+
}
119+
}
110120
}
111121
</script>
112122

‎src/components/editor/video-editor.vue

+7
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,8 @@ export default class VideoEditorV extends Vue {
9898
@Prop() configFileStructure!: ConfigFileStructure;
9999
@Prop() lang!: string;
100100
@Prop() sourceCounts!: SourceCounts;
101+
@Prop({ default: false }) centerSlide!: boolean;
102+
@Prop({ default: false }) dynamicSelected!: boolean;
101103
102104
dragging = false;
103105
edited = false;
@@ -148,6 +150,11 @@ export default class VideoEditorV extends Vue {
148150
};
149151
}
150152
}
153+
if (this.centerSlide && this.dynamicSelected) {
154+
this.panel.customStyles += 'text-align: left !important;';
155+
} else if (!this.centerSlide && this.dynamicSelected) {
156+
this.panel.customStyles = (this.panel.customStyles || '').replace('text-align: left !important;', '');
157+
}
151158
}
152159
153160
// adds an uploaded file that is either a: video, transcript or captions

‎src/definitions.ts

+9
Original file line numberDiff line numberDiff line change
@@ -148,13 +148,15 @@ export enum PanelType {
148148
export interface BasePanel {
149149
type: string;
150150
width?: number;
151+
customStyles?: string;
151152
}
152153

153154
export interface TextPanel extends BasePanel {
154155
type: PanelType.Text;
155156
title: string;
156157
titleTag?: string;
157158
content: string; // in md format
159+
customStyles?: string;
158160
}
159161

160162
export interface MapPanel extends BasePanel {
@@ -164,6 +166,7 @@ export interface MapPanel extends BasePanel {
164166
timeSlider?: TimeSliderConfig;
165167
title: string;
166168
scrollguard: boolean;
169+
customStyles?: string;
167170
}
168171
export interface TimeSliderConfig {
169172
range: number[];
@@ -178,6 +181,7 @@ export interface DynamicPanel extends BasePanel {
178181
titleTag?: string;
179182
content: string;
180183
children: DynamicChildItem[];
184+
customStyles?: string;
181185
}
182186

183187
export interface DynamicChildItem {
@@ -193,6 +197,7 @@ export interface ImagePanel extends BasePanel {
193197
fullscreen?: boolean;
194198
altText?: string;
195199
caption?: string;
200+
customStyles?: string;
196201
}
197202

198203
export interface VideoPanel extends BasePanel {
@@ -204,12 +209,14 @@ export interface VideoPanel extends BasePanel {
204209
videoType: string;
205210
caption?: string;
206211
transcript?: string;
212+
customStyles?: string;
207213
}
208214

209215
export interface AudioPanel extends BasePanel {
210216
type: PanelType.Audio;
211217
src: string;
212218
caption?: string;
219+
customStyles?: string;
213220
}
214221

215222
export interface SlideshowPanel extends BasePanel {
@@ -218,6 +225,7 @@ export interface SlideshowPanel extends BasePanel {
218225
loop?: boolean;
219226
caption?: string;
220227
userCreated?: boolean; // used to determine whether this was automatically converted to slideshow or not
228+
customStyles?: string;
221229
}
222230

223231
export interface ChartPanel extends BasePanel {
@@ -227,6 +235,7 @@ export interface ChartPanel extends BasePanel {
227235
config?: any;
228236
name?: string;
229237
options?: DQVOptions;
238+
customStyles?: string;
230239
}
231240

232241
export interface ChartConfig {

‎src/lang/lang.csv

+2
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,8 @@ editor.slides.copyFromLang,"Copy slides from the other language",1,"Copier les d
111111
editor.slides.deleteSlide.confirm,"Are you sure you want to delete the slide {title}?",1,"Voulez-vous vraiment supprimer la diapositive {titre}?",1
112112
editor.slides.changeSlide.confirm,"Are you sure you want to change the slide {title}? All unsaved progress will be lost.",1,"Voulez-vous vraiment modifier la diapositive {titre}? Toute modification non enregistrée sera perdue.",1
113113
editor.slides.makeFull,Make the right panel the full slide,1,Mettre la diapositive complète dans le panneau de droite,1
114+
editor.slides.centerPanel,Align panel content towards the middle,1,Aligner le contenu du panneau vers le milieu,0
115+
editor.slides.centerSlide,Align slide content towards the middle,1,Aligner le contenu de la diapositive vers le milieu,0
114116
editor.slides.copyAll,Copy all,1,Copier tout,1
115117
editor.slides.copy,Copy,1,Copier,1
116118
editor.slides.slide,Slide,1,Diapositive,1

0 commit comments

Comments
 (0)