Skip to content

Commit

Permalink
fix advanced editor validation; enhance the Storylines schema
Browse files Browse the repository at this point in the history
  • Loading branch information
Ryan Coulson committed Jun 14, 2024
1 parent 35b4caf commit 57aba04
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 13 deletions.
91 changes: 86 additions & 5 deletions public/StorylinesSlideSchema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,6 @@
"width": {
"type": "number",
"description": "The width of the panel inside the slide (between 0 and 100)."
},
"customStyles": {
"type": "string",
"description": "Additional CSS styles to apply to the panel."
}
},
"minItems": 1,
Expand Down Expand Up @@ -65,8 +61,13 @@
"type": "string",
"description": "The colour of the text. Defaults to black.",
"default": "#000000"
},
"customStyles": {
"type": "string",
"description": "Additional CSS styles to apply to the panel."
}
},
"additionalProperties": false,
"required": ["content", "type", "title"]
},

Expand Down Expand Up @@ -103,16 +104,24 @@
"type": "string",
"description": "The colour of the text. Defaults to black.",
"default": "#000000"
},
"customStyles": {
"type": "string",
"description": "Additional CSS styles to apply to the panel."
}
},
"additionalProperties": false,
"required": ["content", "type", "children", "title"]
},

"dynamicChildItem": {
"type": "object",
"description": "A child screen of a dynamic panel. Contains an ID and a panel config.",
"properties": {
"id": "string",
"id": {
"type": "string",
"description": "An ID representing a dynamic child."
},
"panel": {
"oneOf": [
{
Expand All @@ -130,6 +139,7 @@
]
}
},
"additionalProperties": false,
"required": ["id", "panel"]
},

Expand Down Expand Up @@ -182,8 +192,42 @@
"title": {
"type": "string",
"description": "A title that is displayed centered above this map."
},
"timeSlider": {
"type": "object",
"description": "Configuration for a time slider on the map.",
"properties": {
"range": {
"type": "array",
"items": {
"type": "number"
}
},
"start": {
"type": "array",
"items": {
"type": "number"
}
},
"attribute": {
"type": "string"
},
"layers": {
"type": "array",
"items": {
"type": "string"
}
}
},
"additionalProperties": false,
"required": ["range", "start", "attribute"]
},
"customStyles": {
"type": "string",
"description": "Additional CSS styles to apply to the panel."
}
},
"additionalProperties": false,
"required": ["config", "type"]
},

Expand All @@ -205,15 +249,28 @@
},
"options": {
"$ref": "#/$defs/chartOptions"
},
"name": {
"type": "string",
"description": "The name of the chart."
},
"customStyles": {
"type": "string",
"description": "Additional CSS styles to apply to the panel."
}
},
"additionalProperties": false,
"required": ["src", "type"]
},

"multimediaImage": {
"type": "object",
"description": "A multimedia image component.",
"properties": {
"id": {
"type": "string",
"description": "The image ID."
},
"width": {
"type": "number",
"description": "The image width."
Expand Down Expand Up @@ -245,8 +302,17 @@
"type": {
"type": "string",
"enum": ["image"]
},
"fullscreen": {
"type": "boolean",
"description": "Specifies whether the image can be fullscreened or not."
},
"customStyles": {
"type": "string",
"description": "Additional CSS styles to apply to the panel."
}
},
"additionalProperties": false,
"required": ["src", "type"]
},

Expand Down Expand Up @@ -289,8 +355,13 @@
"type": {
"type": "string",
"enum": ["video"]
},
"customStyles": {
"type": "string",
"description": "Additional CSS styles to apply to the panel."
}
},
"additionalProperties": false,
"required": ["src", "type", "videoType"]
},

Expand Down Expand Up @@ -333,11 +404,21 @@
"type": "text",
"description": "A caption to display below the slideshow."
},
"userCreated": {
"type": "boolean",
"description": "Specifies whether this slideshow was automatically created from an image panel or if this is actually a slideshow panel.",
"default": false
},
"type": {
"type": "string",
"enum": ["slideshow"]
},
"customStyles": {
"type": "string",
"description": "Additional CSS styles to apply to the panel."
}
},
"additionalProperties": false,
"required": ["items", "type"]
},

Expand Down
68 changes: 60 additions & 8 deletions src/components/helpers/custom-editor.vue
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,65 @@
<template>
<div class="mt-4">
<div
class="w-full rounded-md bg-red-100 p-2 mb-3"
:class="validatorErrors.length === 0 ? 'bg-green-200' : 'bg-red-100'"
>
<span class="flex flex-row items-center" v-if="validatorErrors.length === 0"
><svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1024 1024"
style="color: rgb(23, 183, 126)"
class="w-10 h-10 pr-2"
>
<path
fill="currentColor"
d="M512,72C269,72,72,269,72,512s197,440,440,440s440-197,440-440S755,72,512,72L512,72z M758.9,374 c-48.5,48.6-81.2,76.9-172.3,186.8c-52.6,63.4-102.3,131.5-102.7,132L462.1,720c-4.6,6.1-13.5,6.8-19.1,1.6L267.9,558.9 c-17.8-16.5-18.8-44.4-2.3-62.2s44.4-18.8,62.2-2.3l104.9,97.5c5.5,5.1,14.1,4.5,18.9-1.3c16.2-20.1,38.4-44.5,62.4-68.6 c90.2-90.9,145.6-139.7,175.2-161.3c36-26.2,77.3-48.6,87.3-36.2C792,343.9,782.5,350.3,758.9,374L758.9,374z"
></path></svg
>{{ $t('editor.slides.advanced.good') }}</span
>
<span class="flex flex-row items-center" v-else>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1024 1024"
style="color: rgb(245, 108, 108)"
class="w-10 h-10 pr-2"
>
<path
fill="currentColor"
d="M512,952C269,952,72,755,72,512S269,72,512,72s440,197,440,440S755,952,512,952z M579.7,512l101.6-101.6 c18.7-18.7,18.7-49,0-67.7c-18.7-18.7-49-18.7-67.7,0l0,0L512,444.3L410.4,342.7c-18.7-18.7-49-18.7-67.7,0s-18.7,49,0,67.7 L444.3,512L342.7,613.6c-18.7,18.7-18.7,49,0,67.7c18.7,18.7,49,18.7,67.7,0L512,579.7l101.6,101.6c18.7,18.7,49,18.7,67.7,0 c18.7-18.7,18.7-49,0-67.7L579.7,512z"
></path>
</svg>
{{ $t('editor.slides.advanced.broken') }}
<button class="underline ml-1" @click="() => (showErrors = !showErrors)">
{{ $t('editor.slides.advanced.details') }}
</button></span
>

<div v-if="showErrors">
<ul class="list-disc ml-8">
<li v-for="(error, idx) in validatorErrors" :key="idx">{{ error }}</li>
</ul>
</div>
</div>
<json-editor
v-model="updatedConfig"
lang="en"
:mode="'text'"
:show-btns="true"
:expandedOnStart="true"
@has-error="(err: string) => { jsonError = err; this.validate()}"
@json-change="
(json: any) => {
// library does not 2-way v-model binding so need to set manually
updatedConfig = json;
edited = true;
jsonError = '';
this.validate();
$emit('slide-edit');
}
"
@json-save="onJsonSave"
></json-editor>
</div>
</template>
Expand All @@ -39,7 +84,11 @@ export default class CustomEditorV extends Vue {
edited = false;
jsonValidator = require('jsonschema').Validator;
jsonError = '';
validator: Validator = new this.jsonValidator();
validatorErrors: any = [];
showErrors = false;
storylinesSchema = '';
mounted(): void {
Expand All @@ -50,6 +99,7 @@ export default class CustomEditorV extends Vue {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(res: any) => {
this.storylinesSchema = res;
this.validate();
},
(err) => {
console.error(err);
Expand All @@ -59,21 +109,23 @@ export default class CustomEditorV extends Vue {
this.updatedConfig = this.config;
}
onJsonSave(): void {
validate(): void {
// TODO: add any missing properties in schema as required (e.g. chart options)
const checkValidation = this.validator.validate(this.updatedConfig, this.storylinesSchema);
if (checkValidation.valid) {
this.$emit('config-edited', this.updatedConfig, true);
} else {
// TODO: add FR translation for alert message
alert('Attempted to save a custom config that violates the Storylines schema.');
console.error(checkValidation.errors);
this.validatorErrors = checkValidation.errors;
if (this.jsonError) {
this.validatorErrors.push(this.jsonError);
}
}
saveChanges(): void {
this.$emit('config-edited', this.updatedConfig);
this.edited = false;
// If the user saves or leaves the advanced editor page with errors, give them a warning.
if (this.validatorErrors.length !== 0) {
alert(this.$t('editor.slides.advanced.error'));
}
}
}
</script>
Expand Down
4 changes: 4 additions & 0 deletions src/lang/lang.csv
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,10 @@ editor.slides.leftPanel,Left panel,1,Panneau de gauche,1
editor.slides.rightPanel,Right panel,1,Panneau de droite,1
editor.slides.fullscreenPanel,Fullscreen panel,1,Panneau plein écran,1
editor.slides.advanced,Advanced,1,Avancé,0
editor.slides.advanced.good,Configuration adheres to Storylines schema.,1,La configuration adhère au schéma Storylines.,0
editor.slides.advanced.broken,This configuration violates the Storylines schema.,1,Cette configuration viole le schéma Storylines.,0
editor.slides.advanced.details,Click here for more details.,1,Cliquez ici pour plus de détails.,0
editor.slides.advanced.error,This configuration contains one or more errors. Leaving it as-is may cause unexpected behaviour in the editor and published product.,1,Cette configuration contient une ou plusieurs erreurs. La laisser telle quelle peut entraîner un comportement inattendu dans l'éditeur et dans le produit publié.,0
editor.slides.contentType,Content type,1,Type de contenu,1
editor.slides.content,Content,1,Contenu,1
editor.slides.select,Please select a slide to edit,1,Veuillez sélectionner une diapositive à modifier,1
Expand Down

0 comments on commit 57aba04

Please sign in to comment.