From 2f9e51b5cd7dfafadac90ec896edd365da12a1c8 Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Sat, 3 Jul 2021 23:07:09 +0200 Subject: viewer: add markdown item handler Extracted from b170f49 (GH PR #304) --- .../components/item_handlers/LdMarkdownViewer.vue | 82 ++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 viewer/src/components/item_handlers/LdMarkdownViewer.vue (limited to 'viewer/src/components/item_handlers') diff --git a/viewer/src/components/item_handlers/LdMarkdownViewer.vue b/viewer/src/components/item_handlers/LdMarkdownViewer.vue new file mode 100644 index 0000000..ecebbcf --- /dev/null +++ b/viewer/src/components/item_handlers/LdMarkdownViewer.vue @@ -0,0 +1,82 @@ +<!-- +-- ldgallery - A static generator which turns a collection of tagged +-- pictures into a searchable web gallery. +-- +-- Copyright (C) 2021 Guillaume FOUET +-- +-- This program is free software: you can redistribute it and/or modify +-- it under the terms of the GNU Affero General Public License as +-- published by the Free Software Foundation, either version 3 of the +-- License, or (at your option) any later version. +-- +-- This program is distributed in the hope that it will be useful, +-- but WITHOUT ANY WARRANTY; without even the implied warranty of +-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +-- GNU Affero General Public License for more details. +-- +-- You should have received a copy of the GNU Affero General Public License +-- along with this program. If not, see <https://www.gnu.org/licenses/>. +--> + +<template> + <b-loading v-if="isLoading" active /> + <Markdown v-else-if="markdown" class="flex-grow-1" :markdown="markdown" /> +</template> + +<script lang="ts"> +import { MarkdownItem } from "@/@types/gallery"; +import { Markdown } from "@/components/async"; +import FetchWithCheck from "@/services/fetchWithCheck"; +import { Component, Prop, Vue } from "vue-property-decorator"; + +@Component({ + components: { + Markdown, + }, +}) +export default class LdMarkdownViewer extends Vue { + @Prop({ required: true }) readonly item!: MarkdownItem; + + isLoading: boolean = true; + markdown: string | null = null; + + created() { + this.fetchMarkdown(); + } + + get itemResourceUrl(): string { + return this.$galleryStore.resourceRoot + this.item.properties.resource; + } + + fetchMarkdown() { + FetchWithCheck.get(this.itemResourceUrl) + .then(response => response.text()) + .then(text => (this.markdown = text)) + .finally(() => (this.isLoading = false)) + .catch(this.displayError); + } + + displayError(reason: any) { + this.$buefy.snackbar.open({ + message: `${reason}`, + actionText: this.$t("snack.retry"), + position: "is-top", + type: "is-warning", + onAction: this.fetchMarkdown, + }); + } +} +</script> + +<style lang="scss" module> +.splashscreen { + display: flex; + flex-flow: column; + align-items: center; + padding: 32px; +} +.buttonOkay { + min-width: 310px; + align-self: center; +} +</style> -- cgit v1.2.3 From 581029f1b15b51f90812a47b20bce454014da32a Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Tue, 12 Apr 2022 21:35:24 +0200 Subject: viewer: add markdown item handler Minor CSS fixes Comment for future upgrade to Vue3 --- viewer/src/components/item_handlers/LdMarkdownViewer.vue | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) (limited to 'viewer/src/components/item_handlers') diff --git a/viewer/src/components/item_handlers/LdMarkdownViewer.vue b/viewer/src/components/item_handlers/LdMarkdownViewer.vue index ecebbcf..3b9a8d6 100644 --- a/viewer/src/components/item_handlers/LdMarkdownViewer.vue +++ b/viewer/src/components/item_handlers/LdMarkdownViewer.vue @@ -20,7 +20,7 @@ <template> <b-loading v-if="isLoading" active /> - <Markdown v-else-if="markdown" class="flex-grow-1" :markdown="markdown" /> + <Markdown v-else-if="markdown" :class="$style.container" :markdown="markdown" /> </template> <script lang="ts"> @@ -48,6 +48,7 @@ export default class LdMarkdownViewer extends Vue { return this.$galleryStore.resourceRoot + this.item.properties.resource; } + // TODO: Identical to SplashScreen.vue, use composition with Vue3. fetchMarkdown() { FetchWithCheck.get(this.itemResourceUrl) .then(response => response.text()) @@ -69,14 +70,7 @@ export default class LdMarkdownViewer extends Vue { </script> <style lang="scss" module> -.splashscreen { - display: flex; - flex-flow: column; - align-items: center; - padding: 32px; -} -.buttonOkay { - min-width: 310px; - align-self: center; +.container { + padding: 8px; } </style> -- cgit v1.2.3