Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add intro background customization to metadata editor #505

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add intro background customization to metadata editor #505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 21 additions & 4 deletions StorylinesSchema.json
View file
Open in desktop
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
77 changes: 71 additions & 6 deletions src/components/helpers/metadata-content.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,14 +115,14 @@
<input
type="text"
id="metaLogo"
@change="$emit('logo-source-changed', $event)"
@change="$emit('image-source-changed', $event, 'logo')"
:value="metadata.logoName"
class="metadata-input editor-input w-full lg:w-1/2"
/>
<!-- Upload button -->
<button
@click.stop="openFileSelector"
class="editor-button py-1.5 bg-black border border-black text-white hover:bg-gray-800"
@click.stop="openFileSelector('logoUpload')"
class="editor-button mb-0.5 bg-black border border-black text-white hover:bg-gray-800"
>
{{ $t('editor.browse') }}
</button>
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 editor-input w-full lg:w-1/2"
/>
<!-- Upload button -->
<button
@click.stop="openFileSelector('backgroundUpload')"
class="editor-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="editor-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
Loading