Skip to content

Commit

Permalink
Hide panel change warnings when no changes made
Browse files Browse the repository at this point in the history
  • Loading branch information
@gordlin
gordlin committed Sep 9, 2024
1 parent 4ae4c85 commit ce32bdd
Show file tree
Hide file tree
Showing 7 changed files with 136 additions and 100 deletions.
2 changes: 1 addition & 1 deletion src/components/chart-editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,7 @@ export default class ChartEditorV extends Vue {
onChartsEdited(): void {
this.edited = true;
this.$emit('slide-edit');
this.$emit('slide-edit', this.chartConfigs.length !== 0);
}
}
</script>
Expand Down
41 changes: 2 additions & 39 deletions src/components/dynamic-editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@
import { Options, Prop, Vue } from 'vue-property-decorator';
import {
BasePanel,
BaseStartingConfig,
ChartPanel,
ConfigFileStructure,
DefaultConfigs,
Expand Down Expand Up @@ -146,45 +147,7 @@ export default class DynamicEditorV extends Vue {
video: 'video-editor'
};
startingConfig: DefaultConfigs = {
text: {
type: PanelType.Text,
title: '',
content: ''
},
dynamic: {
type: PanelType.Dynamic,
title: '',
titleTag: '',
content: '',
children: []
},
slideshow: {
type: PanelType.Slideshow,
items: [],
userCreated: true
},
image: {
type: PanelType.Image,
src: ''
},
chart: {
type: PanelType.Chart,
src: ''
},
map: {
type: PanelType.Map,
config: '',
title: '',
scrollguard: false
},
video: {
type: PanelType.Video,
title: '',
videoType: '',
src: ''
}
};
startingConfig: DefaultConfigs = JSON.parse(JSON.stringify(BaseStartingConfig));
editingStatus = 'text';
editingSlide = -1;
Expand Down
2 changes: 1 addition & 1 deletion src/components/image-editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,7 +293,7 @@ export default class ImageEditorV extends Vue {
onImagesEdited(): void {
this.edited = true;
this.$emit('slide-edit');
this.$emit('slide-edit', this.imagePreviews.length !== 0);
}
}
</script>
Expand Down
114 changes: 84 additions & 30 deletions src/components/slide-editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,13 @@
class="editor-input rounded-none cursor-pointer w-4 h-4"
v-model="rightOnly"
:disabled="rightOnly && determineEditorType(currentSlide.panel[panelIndex]) === 'dynamic'"
@change.stop="$vfm.open(`right-only-${slideIndex}`)"
@change.stop="
if (currentSlide.panel.length > 1 && panelModified(currentSlide.panel[0])) {
$vfm.open(`right-only-${slideIndex}`);
} else {
toggleRightOnly();
}
"
/>
<span class="mx-2 font-bold">{{ $t('editor.slides.centerSlide') }}</span>
<input
Expand Down Expand Up @@ -236,8 +242,18 @@
<select
ref="typeSelector"
@input="
$vfm.open(`change-slide-${slideIndex}`);
newType = ($event.target as HTMLInputElement).value;
if (
panelModified(currentSlide.panel[panelIndex]) ||
// Changing to dynamic deletes content of both panels. Therefore, warn if ANY panel has changes.
(newType === 'dynamic' && currentSlide.panel.some((panel) => panelModified(panel)))
) {
$vfm.open(`change-slide-${slideIndex}`);
} else {
changePanelType(determineEditorType(currentSlide.panel[panelIndex]), newType);
toggleCenterPanel();
toggleCenterSlide();
}
"
:value="determineEditorType(currentSlide.panel[panelIndex])"
>
Expand Down Expand Up @@ -269,7 +285,15 @@
:sourceCounts="sourceCounts"
:centerSlide="centerSlide"
:dynamicSelected="dynamicSelected"
@slide-edit="$emit('slide-edit')"
@slide-edit="(changedFromDefault: boolean = true) => {
$emit('slide-edit');
// changedFromDefault should hold a boolean indicating whether the panel is actually modified
// (different from initial state). Only needed for some multimedia editors; text editors
// write directly to currentSlide constantly, which is handled by panelModified().
currentSlide.panel[panelIndex].modified = changedFromDefault || undefined;
}
"
v-else
></component>
</div>
Expand Down Expand Up @@ -308,6 +332,7 @@
import { Options, Prop, Vue, Watch } from 'vue-property-decorator';
import {
BasePanel,
BaseStartingConfig,
ChartPanel,
ConfigFileStructure,
DefaultConfigs,
Expand All @@ -334,6 +359,7 @@ import SlideshowEditorV from './slideshow-editor.vue';
import LoadingPageV from './helpers/loading-page.vue';
import DynamicEditorV from './dynamic-editor.vue';
import ConfirmationModalV from './helpers/confirmation-modal.vue';
import { toRaw } from 'vue';
@Options({
components: {
Expand Down Expand Up @@ -383,13 +409,21 @@ export default class SlideEditorV extends Vue {
this.currentSlide ? (this.rightOnly = this.currentSlide.panel.length === 1) : false;
}
changePanelType(prevType: string, newType: string): void {
const startingConfig: DefaultConfigs = {
text: {
type: PanelType.Text,
title: '',
content: ''
},
/**
* Determines whether a given panel has been modified from the default configuration of its type.
* Note that some editors (e.g. text) write directly to currentSlide after each change,
* while other editors (e.g. image) do not. The first type is handled completely in
* panelModified; the second type requires you to set `panel.modified` for the given panel beforehand,
* indicating whether changes have been made from the specific editor sub-component (see
* `<component>`'s `@slide-edit` event handler).
* @param {BasePanel} panel The panel to analyze.
* @returns {boolean} Whether panel has been modified.
*/
panelModified(panel: BasePanel): boolean {
const prevType = this.currentSlide.panel[this.panelIndex].type;
let startingConfig = {
...JSON.parse(JSON.stringify(BaseStartingConfig)),
dynamic: {
type: PanelType.Dynamic,
title:
Expand All @@ -403,30 +437,42 @@ export default class SlideEditorV extends Vue {
: '',
children: []
},
slideshow: {
type: PanelType.Slideshow,
items: [],
userCreated: true
},
image: {
type: PanelType.Image,
src: ''
},
chart: {
type: PanelType.Chart,
src: ''
},
map: {
type: PanelType.Map,
config: '',
config: `${this.configFileStructure.uuid}/ramp-config/${
this.configFileStructure.uuid
}-map-${this.getNumberOfMaps()}.json`,
title: '',
scrollguard: false
},
video: {
type: PanelType.Video,
title: '',
videoType: '',
src: ''
}
};
const oldStartingConfig = startingConfig[panel.type as keyof DefaultConfigs];
let newConfig = Object.assign({}, toRaw(panel));
newConfig.customStyles = newConfig.customStyles || undefined;
return (
JSON.stringify(oldStartingConfig) !== JSON.stringify(newConfig) ||
this.currentSlide.panel[this.panelIndex].modified === true
);
}
changePanelType(prevType: string, newType: string): void {
let startingConfig = {
...JSON.parse(JSON.stringify(BaseStartingConfig)),
dynamic: {
type: PanelType.Dynamic,
title:
this.currentSlide.panel[0] && prevType === 'text'
? (this.currentSlide.panel[0] as TextPanel).title
: '',
titleTag: '',
content:
this.currentSlide.panel[0] && prevType === 'text'
? (this.currentSlide.panel[0] as TextPanel).content
: '',
children: []
}
};
Expand Down Expand Up @@ -628,6 +674,14 @@ export default class SlideEditorV extends Vue {
}
}
}
getNumberOfMaps(): number {
let n = 0;
this.configFileStructure.rampConfig.forEach((f) => {
n += 1;
});
return n;
}
}
</script>

Expand Down
31 changes: 3 additions & 28 deletions src/components/slideshow-editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@
import { Options, Prop, Vue } from 'vue-property-decorator';
import {
BasePanel,
BaseStartingConfig,
ChartPanel,
ConfigFileStructure,
DefaultConfigs,
Expand Down Expand Up @@ -163,43 +164,17 @@ export default class SlideshowEditorV extends Vue {
video: 'video-editor'
};
// TODO: we use this and a few other functions (updating source counts, etc.) in multiple places. We should probably look in to putting this somewhere else.
startingConfig: DefaultConfigs = {
text: {
type: PanelType.Text,
title: '',
content: ''
},
dynamic: {
type: PanelType.Dynamic,
title: '',
titleTag: '',
content: '',
children: []
},
...JSON.parse(JSON.stringify(BaseStartingConfig)),
slideshow: {
type: PanelType.Slideshow,
items: []
},
chart: {
type: PanelType.Chart,
src: ''
},
image: {
type: PanelType.Image,
src: ''
},
map: {
type: PanelType.Map,
config: '',
title: '',
scrollguard: true // default to ON for slideshows. Allows users to use the cursor to switch slides.
},
video: {
type: PanelType.Video,
title: '',
videoType: '',
src: ''
}
};
Expand Down Expand Up @@ -289,7 +264,7 @@ export default class SlideshowEditorV extends Vue {
(this.$refs.slideEditor as ImageEditorV | ChartEditorV).saveChanges();
if (itemConfig.type === PanelType.Map) {
this.$emit('slide-edit');
this.$emit('slide-edit', false);
}
}
}
Expand Down
5 changes: 4 additions & 1 deletion src/components/video-editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,10 @@ export default class VideoEditorV extends Vue {
onVideoEdited(): void {
this.edited = true;
this.$emit('slide-edit');
this.$emit(
'slide-edit',
(this.videoPreview?.videoType || this.videoPreview?.title?.length) ? true : false
);
}
}
</script>
Expand Down
41 changes: 41 additions & 0 deletions src/definitions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ export interface BasePanel {
type: string;
width?: number;
customStyles?: string;
modified?: boolean;
}

export interface TextPanel extends BasePanel {
Expand Down Expand Up @@ -282,3 +283,43 @@ export interface DefaultConfigs {
video: VideoPanel;
image: ImagePanel;
}

export const BaseStartingConfig: DefaultConfigs = {
text: {
type: PanelType.Text,
title: '',
content: ''
},
dynamic: {
type: PanelType.Dynamic,
title: '',
titleTag: '',
content: '',
children: []
},
slideshow: {
type: PanelType.Slideshow,
items: [],
userCreated: true
},
image: {
type: PanelType.Image,
src: ''
},
chart: {
type: PanelType.Chart,
src: ''
},
map: {
type: PanelType.Map,
config: '',
title: '',
scrollguard: false
},
video: {
type: PanelType.Video,
title: '',
videoType: '',
src: ''
}
};

0 comments on commit ce32bdd

Please sign in to comment.