Skip to content

Commit

Permalink
add intro background customization to metadata editor
Browse files Browse the repository at this point in the history
  • Loading branch information
Ryan Coulson committed Jan 9, 2025
1 parent 2f3e83f commit 2ab558b
Show file tree
Hide file tree
Showing 5 changed files with 303 additions and 121 deletions.
25 changes: 21 additions & 4 deletions StorylinesSchema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@
"type": {
"type": "string",
"enum": ["dynamic"]
},
},
"modified": {
"type": "boolean",
"description": "An optional tag that specifies whether the panel has been modified from its default configuration"
Expand Down Expand Up @@ -189,7 +189,7 @@
"title": {
"type": "string",
"description": "A title that is displayed centered above this map."
},
},
"caption": {
"type": "string",
"description": "Supporting text content for the map."
Expand Down Expand Up @@ -289,7 +289,7 @@
"type": {
"type": "string",
"enum": ["video"]
},
},
"modified": {
"type": "boolean",
"description": "An optional tag that specifies whether the panel has been modified from its default configuration"
Expand Down Expand Up @@ -361,7 +361,20 @@
"type": {
"type": "string",
"description": "The type of chart.",
"enum": ["line", "spline", "area", "areaspline", "column", "bar", "pie", "scatter", "gauge", "arearange", "areasplinerange", "columnrange"]
"enum": [
"line",
"spline",
"area",
"areaspline",
"column",
"bar",
"pie",
"scatter",
"gauge",
"arearange",
"areasplinerange",
"columnrange"
]
},
"width": {
"type": "number",
Expand Down Expand Up @@ -436,6 +449,10 @@
"blurb": {
"type": "string",
"description": "Any additional information to display on the introductory slide."
},
"backgroundImage": {
"type": "string",
"description": "A background image for the introduction slide."
}
},
"required": ["logo", "title"]
Expand Down
75 changes: 70 additions & 5 deletions src/components/helpers/metadata-content.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,13 +115,13 @@
<input
type="text"
id="metaLogo"
@change="$emit('logo-source-changed', $event)"
@change="$emit('image-source-changed', $event, 'logo')"
:value="metadata.logoName"
class="metadata-input w-full lg:w-1/2"
/>
<!-- Upload button -->
<button
@click.stop="openFileSelector"
@click.stop="openFileSelector('logoUpload')"
class="metadata-button mb-0.5 bg-black border border-black text-white hover:bg-gray-800"
>
{{ $t('editor.browse') }}
Expand Down Expand Up @@ -155,7 +155,7 @@
<input
type="file"
id="logoUpload"
@change="$emit('logo-changed', $event)"
@change="$emit('image-changed', $event, 'logo')"
class="editor-input w-1/4"
style="display: none"
/>
Expand All @@ -178,6 +178,66 @@
<p v-if="!editing">{{ metadata.logoAltText || $t('editor.metadataForm.na') }}</p>
</div>
</section>
<!-- Subsection: Intro background stuff -->
<section>
<div class="metadata-item">
<label class="metadata-label" for="metaIntroBg">{{ $t('editor.introBackground') }}</label>
<div v-show="editing">
<!-- Intro slide background URL -->
<div class="flex flex-wrap gap-2 items-center">
<input
type="text"
id="metaIntroBg"
@change="$emit('image-source-changed', $event, 'introBg')"
:value="metadata.introBgName"
class="metadata-input w-full lg:w-1/2"
/>
<!-- Upload button -->
<button
@click.stop="openFileSelector('backgroundUpload')"
class="metadata-button mb-0.5 bg-black border border-black text-white hover:bg-gray-800"
>
{{ $t('editor.browse') }}
</button>
<!-- Delete button -->
<button
v-if="metadata.introBgName || metadata.introBgPreview"
@click.stop="removeIntroBackground"
class="metadata-button border mb-0.5 border-black"
>
{{ $t('editor.remove') }}
</button>
</div>
<p class="metadata-subcaption">
{{ $t('editor.metadataForm.caption.introBackground') }}
</p>
</div>

<p class="break-all" v-if="!editing">{{ metadata.introBgName || $t('editor.metadataForm.na') }}</p>
</div>
<!-- Logo Preview -->
<div v-if="!!metadata.introBgPreview" class="metadata-item">
<div class="metadata-label">{{ $t('editor.introBackgroundPreview') }}:</div>
<img
:src="metadata.introBgPreview"
v-if="!!metadata.introBgPreview && metadata.introBgPreview != 'error'"
class="image-preview"
:alt="$t('editor.introBackgroundPreview')"
/>
<p v-if="metadata.introBgPreview == 'error'" class="image-preview">
{{ $t('editor.image.loadingError') }}
</p>
</div>
<!-- hide the actual file input. Label prevents a WAVE error -->
<label style="display: none" for="backgroundUpload">Intro background upload</label>
<input
type="file"
id="backgroundUpload"
@change="$emit('image-changed', $event, 'introBg')"
class="editor-input w-1/4"
style="display: none"
/>
</section>
</section>
<!-- Section: End of page information -->
<section class="border mt-5 rounded-md px-4 md:px-5 py-3">
Expand Down Expand Up @@ -245,8 +305,8 @@ export default class MetadataEditorV extends Vue {
@Prop() metadata!: MetadataContent;
@Prop({ default: true }) editing!: boolean;
openFileSelector(): void {
document.getElementById('logoUpload')?.click();
openFileSelector(where: string = 'logoUpload'): void {
document.getElementById(where)?.click();
}
metadataChanged(event: Event): void {
Expand All @@ -261,6 +321,11 @@ export default class MetadataEditorV extends Vue {
this.metadata.logoName = '';
this.metadata.logoPreview = '';
}
removeIntroBackground(): void {
this.metadata.introBgName = '';
this.metadata.introBgPreview = '';
}
}
</script>

Expand Down
Loading

0 comments on commit 2ab558b

Please sign in to comment.