From c83f44cd69a227f873a026c01653ef434b6ae045 Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Mon, 5 Jul 2021 19:10:20 +0200 Subject: viewer: viewer: optional user-defined markdown splash screen Code review changes --- viewer/ldgallery-viewer.7.md | 14 +++++++------- viewer/src/@types/splashscreen.d.ts | 2 +- viewer/src/store/uiStore.ts | 10 +++++----- viewer/src/views/SplashScreen.vue | 2 +- 4 files changed, 14 insertions(+), 14 deletions(-) (limited to 'viewer') diff --git a/viewer/ldgallery-viewer.7.md b/viewer/ldgallery-viewer.7.md index 5012e3b..1e914ff 100644 --- a/viewer/ldgallery-viewer.7.md +++ b/viewer/ldgallery-viewer.7.md @@ -92,13 +92,13 @@ initialTagDisplayLimit Set to -1 to disable the limit on suggestions. Defaults to 10. +splashScreen +: Displays an information notice before opening the gallery (see below). + An alternative viewer configuration file located in the viewer's directory can be loaded by specifying its name, without the ".json" extension, as a query parameter given before the page anchor; for example, some alternative configuration named "config_2.json" can be loaded with "http://gallery/?config_2#". -splashScreen -: Displays an information notice before opening the gallery (see below). - # SPLASH SCREEN CONFIGURATION @@ -106,9 +106,10 @@ splashScreen.resource : Absolute or relative path to the information notice. The user is prompted to explicitly acknowledge such notice before being allowed to browse the gallery. Rich text formatting is possible through the use of the [GitHub Flavoured Markdown syntax][GFM]. Inline HTML and CSS are also supported. + [GFM]: https://github.github.com/gfm/ -splashScreen.dontshowagainUID -: Optional unique ID; when set, the information notice will appear only the first time it is proposed to the user. To display the notice again, change this UID. +splashScreen.acknowledgmentKey +: Optional key; when set to an arbitrary string, the information notice will appear only the first time it is proposed to the user. Once the notice acknowledged, the key is saved to the device's local storage. To display the notice again, change this key to another value. When left empty, the notice will appear every time. splashScreen.buttonAcknowledgeLabel @@ -119,7 +120,6 @@ splashScreen.style : Optional CSS attributes for the information notice's container. String or JSON formats are supported. - [GFM]: https://github.github.com/gfm/ # CONFIGURATION EXAMPLE @@ -133,7 +133,7 @@ Viewer __config.json__: "initialTagDisplayLimit": 10, "splashScreen": { "resource": "./splashscreen.md", - "dontshowagainUID": "v001", + "acknowledgmentKey": "v001", "buttonAcknowledgeLabel": "I agree", "style": { "max-width": "45em", diff --git a/viewer/src/@types/splashscreen.d.ts b/viewer/src/@types/splashscreen.d.ts index bd79f80..4e03fa8 100644 --- a/viewer/src/@types/splashscreen.d.ts +++ b/viewer/src/@types/splashscreen.d.ts @@ -19,7 +19,7 @@ export interface SplashScreenConfig { resource?: string; - dontshowagainUID?: string; + acknowledgmentKey?: string; buttonAcknowledgeLabel?: string; style?: any; } diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts index 2c45136..520fcf4 100644 --- a/viewer/src/store/uiStore.ts +++ b/viewer/src/store/uiStore.ts @@ -27,7 +27,7 @@ const VuexModule = createModule({ strict: true, }); -const STORAGE_SPLASHSCREEN_VALIDATION = "splashScreenValidation"; +const STORAGE_SPLASHSCREEN_ACKNOWLEDGMENT = "splashScreenAcknowledgment"; export default class UIStore extends VuexModule { fullscreen: boolean = false; @@ -74,8 +74,8 @@ export default class UIStore extends VuexModule { } if (config.splashScreen) { this.setSplashScreenConfig(config.splashScreen); - const uid = config.splashScreen.dontshowagainUID; - this.setSplashScreenEnabled(!uid || localStorage.getItem(STORAGE_SPLASHSCREEN_VALIDATION) !== uid); + const uid = config.splashScreen.acknowledgmentKey; + this.setSplashScreenEnabled(!uid || localStorage.getItem(STORAGE_SPLASHSCREEN_ACKNOWLEDGMENT) !== uid); } } @@ -83,7 +83,7 @@ export default class UIStore extends VuexModule { @action async validateSpashScreen() { this.setSplashScreenEnabled(false); - const uid = this.splashScreenConfig?.dontshowagainUID; - if (uid) localStorage.setItem(STORAGE_SPLASHSCREEN_VALIDATION, String(uid)); + const uid = this.splashScreenConfig?.acknowledgmentKey; + if (uid) localStorage.setItem(STORAGE_SPLASHSCREEN_ACKNOWLEDGMENT, String(uid)); } } diff --git a/viewer/src/views/SplashScreen.vue b/viewer/src/views/SplashScreen.vue index a2f499a..dcb845d 100644 --- a/viewer/src/views/SplashScreen.vue +++ b/viewer/src/views/SplashScreen.vue @@ -31,7 +31,7 @@ export default class SplashScreen extends Vue { } fetchMarkdown() { - FetchWithCheck.get(`${process.env.VUE_APP_DATA_URL}${this.config.resource}?${this.config.dontshowagainUID ?? ""}`) + FetchWithCheck.get(`${process.env.VUE_APP_DATA_URL}${this.config.resource}?${this.config.acknowledgmentKey ?? ""}`) .then(response => response.text()) .then(text => (this.markdown = text)) .finally(() => (this.isLoading = false)) -- cgit v1.2.3