From 50a70dd80dae0b9a82a13c3a5bc46e59f6fc62cb Mon Sep 17 00:00:00 2001 From: Holger Stitz Date: Mon, 4 Jan 2021 17:50:48 +0100 Subject: [PATCH] Refactor header dialogs Closes #130 * Remove hard-coded modal dialog HTML code * Use Dialog class instead Breaking changes might be: * dialog id to class * `#headerAboutDialog` -> `.header-about-dialog` * `#headerReportBugDialog` -> `.header-report-bug-dialog` * `#headerOptionsDialog` -> `.header-options-dialog` * Make link toggle functions private (`toggleOptionsLink`, `toggleReportBugLink`, `toggleHelpLink`) * About dialog: `content` parameter of content generator function is now empty -> default HTML is only generated by `defaultAboutInfo()` --- dist/components/header.d.ts | 26 ++- dist/components/header.js | 180 ++++++++----------- dist/components/header.js.map | 2 +- dist/scss/components/_header_navbar.scss | 23 ++- src/components/header.ts | 209 +++++++++-------------- src/scss/components/_header_navbar.scss | 23 ++- 6 files changed, 193 insertions(+), 270 deletions(-) diff --git a/dist/components/header.d.ts b/dist/components/header.d.ts index 8adfcde..6975783 100644 --- a/dist/components/header.d.ts +++ b/dist/components/header.d.ts @@ -52,24 +52,29 @@ export interface IAppHeaderOptions { * a list of links that should be shown in the right menu */ rightMenu?: IHeaderLink[]; + /** + * show/hide the about dialog link + * @default true + */ showAboutLink?: boolean | ((title: HTMLElement, content: HTMLElement) => void); /** * show/hide the options link - * default: false + * @default false */ showOptionsLink?: boolean | ((title: HTMLElement, content: HTMLElement) => void); /** * show/hide the bug report link - * default: true + * @default true */ showReportBugLink?: boolean | ((title: HTMLElement, content: HTMLElement) => void); /** * show/hide the EU cookie disclaimer bar from `cookie-bar.eu` + * @default false */ showCookieDisclaimer?: boolean; /** * show help link true or the url to link - * default: false + * @default false */ showHelpLink?: boolean | string; } @@ -91,14 +96,6 @@ export declare class AppHeader { * Right menu is positioned to the right of the document */ rightMenu: HTMLElement; - /** - * About dialog - */ - aboutDialog: HTMLElement; - /** - * Options dialog - */ - optionsDialog: HTMLElement; /** * Constructor overrides the default options with the given options * @param parent @@ -114,9 +111,10 @@ export declare class AppHeader { wait(): void; ready(): void; private static setVisibility; - toggleOptionsLink(isVisible: boolean, contentGenerator?: (title: HTMLElement, content: HTMLElement) => void): void; - toggleHelpLink(isVisible: boolean, helpUrl?: string): void; - toggleReportBugLink(isVisible: boolean, contentGenerator?: (title: HTMLElement, content: HTMLElement) => void): void; + private openModalDialog; + private toggleOptionsLink; + private toggleHelpLink; + private toggleReportBugLink; private toggleAboutLink; hideDialog(selector: string): void; showAndFocusOn(selector: string, focusSelector: string): void; diff --git a/dist/components/header.js b/dist/components/header.js index 05b00fe..f8f3af5 100644 --- a/dist/components/header.js +++ b/dist/components/header.js @@ -6,6 +6,7 @@ import { BaseUtils, I18nextManager } from 'phovea_core'; import '../webpack/_bootstrap'; import { BuildInfo } from './buildInfo'; import { AppMetaDataUtils } from './metaData'; +import { Dialog } from './dialogs'; /** * header html template declared inline so we can use i18next */ @@ -25,19 +26,19 @@ const getTemplate = () => {