From 5c442ced9f37bb50778371c6e01a352f52a2f0a5 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Mon, 10 Apr 2023 17:53:30 +0300 Subject: [PATCH] RED-6510 - WIP on "Lazy load help mode elements" --- .../help-mode/help-button/help-button.component.ts | 3 +-- src/lib/help-mode/help-mode.module.ts | 6 +++--- src/lib/help-mode/help-mode.service.ts | 12 ++++-------- src/lib/help-mode/help-mode/help-mode.component.ts | 3 +-- src/lib/help-mode/tokens.ts | 4 ++-- .../page-header/models/action-config.model.ts | 1 - 6 files changed, 11 insertions(+), 18 deletions(-) diff --git a/src/lib/help-mode/help-button/help-button.component.ts b/src/lib/help-mode/help-button/help-button.component.ts index a0afd0a..e924372 100644 --- a/src/lib/help-mode/help-button/help-button.component.ts +++ b/src/lib/help-mode/help-button/help-button.component.ts @@ -22,8 +22,7 @@ export class HelpButtonComponent implements OnInit, OnDestroy { activateHelpMode(): void { if (this.helpButtonKey) { - // const url = this._helpModeService.getDocsLink(this.helpButtonKey); - const url = ''; + const url = this._helpModeService.generateDocsLink(this.helpButtonKey); window.open(url, '_blank'); return; } diff --git a/src/lib/help-mode/help-mode.module.ts b/src/lib/help-mode/help-mode.module.ts index 5bd7e2d..f0250c7 100644 --- a/src/lib/help-mode/help-mode.module.ts +++ b/src/lib/help-mode/help-mode.module.ts @@ -4,7 +4,7 @@ import { TranslateModule } from '@ngx-translate/core'; import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component'; import { HelpModeComponent } from './help-mode/help-mode.component'; import { HelpButtonComponent } from './help-button/help-button.component'; -import { DocsKey, HelpModeService } from './help-mode.service'; +import { HelpModeKey, HelpModeService } from './help-mode.service'; import { MatDialogModule } from '@angular/material/dialog'; import { CircleButtonComponent } from '../buttons'; import { HELP_MODE_KEYS } from './tokens'; @@ -17,10 +17,10 @@ const components = [HelpModeComponent, HelpModeDialogComponent, HelpButtonCompon exports: [...components], }) export class IqserHelpModeModule { - static forRoot(helpDocs: DocsKey): ModuleWithProviders { + static forRoot(helpModeKeys: HelpModeKey[]): ModuleWithProviders { return { ngModule: IqserHelpModeModule, - providers: [{ provide: HELP_MODE_KEYS, useValue: helpDocs }, HelpModeService], + providers: [{ provide: HELP_MODE_KEYS, useValue: helpModeKeys }, HelpModeService], }; } } diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts index 04e6c3f..287a047 100644 --- a/src/lib/help-mode/help-mode.service.ts +++ b/src/lib/help-mode/help-mode.service.ts @@ -27,7 +27,7 @@ export interface Helper { readonly iframeElement?: boolean; } -export interface DocsKey { +export interface HelpModeKey { readonly elementKey: string; readonly documentKey: string; readonly scrollableParentView?: ScrollableParentView; @@ -47,7 +47,7 @@ export class HelpModeService { #dialogMode = false; constructor( - @Inject(HELP_MODE_KEYS) private readonly _keys: DocsKey[], + @Inject(HELP_MODE_KEYS) private readonly _keys: HelpModeKey[], @Inject(MANUAL_BASE_URL) private readonly _manualBaseURL: string, private readonly _dialog: MatDialog, private readonly _rendererFactory: RendererFactory2, @@ -135,7 +135,7 @@ export class HelpModeService { #getHelperElement(element: HTMLElement, key: string): HTMLElement { const helperElement = this.#renderer.createElement('a') as HTMLElement; - this.#renderer.setAttribute(helperElement, 'href', this.#generateDocsLink(key)); + this.#renderer.setAttribute(helperElement, 'href', this.generateDocsLink(key)); this.#renderer.setAttribute(helperElement, 'target', '_blank'); this.#renderer.addClass(helperElement, HELP_MODE_CLASS); return helperElement; @@ -145,7 +145,7 @@ export class HelpModeService { return Math.random().toString(36).substring(2, 9); } - #generateDocsLink(key: string) { + generateDocsLink(key: string) { const currentLang = this._translateService.currentLang; return `${this._manualBaseURL}/${currentLang}/index-${currentLang}.html?contextId=${key}`; } @@ -159,10 +159,6 @@ export class HelpModeService { }); } - addHelper(helperKey: string, helper: Helper): void { - this.#helpers[helperKey] = helper; - } - updateHelperElements() { Object.values(this.#helpers).forEach(helper => this.#updateHelperElement(helper)); } diff --git a/src/lib/help-mode/help-mode/help-mode.component.ts b/src/lib/help-mode/help-mode/help-mode.component.ts index 955decf..8a27dc0 100644 --- a/src/lib/help-mode/help-mode/help-mode.component.ts +++ b/src/lib/help-mode/help-mode/help-mode.component.ts @@ -25,8 +25,7 @@ export class HelpModeComponent { const node = (event.target as IqserEventTarget).localName; if (!this.helpModeService.isHelpModeActive && node !== 'input' && node !== 'textarea') { if (this.helpModeService.helpButtonKey) { - // const url = this.helpModeService.getDocsLink(this.helpModeService.helpButtonKey); - const url = ''; + const url = this.helpModeService.generateDocsLink(this.helpModeService.helpButtonKey);; window.open(url, '_blank'); return; } diff --git a/src/lib/help-mode/tokens.ts b/src/lib/help-mode/tokens.ts index d76d9b4..c842b24 100644 --- a/src/lib/help-mode/tokens.ts +++ b/src/lib/help-mode/tokens.ts @@ -1,8 +1,8 @@ import { inject, InjectionToken } from '@angular/core'; import { IqserConfigService } from '../services'; -import { DocsKey } from './help-mode.service'; +import { HelpModeKey } from './help-mode.service'; -export const HELP_MODE_KEYS = new InjectionToken('Help mode keys'); +export const HELP_MODE_KEYS = new InjectionToken('Help mode keys'); export const MANUAL_BASE_URL = new InjectionToken('Base manual URL', { factory: () => inject(IqserConfigService).values.MANUAL_BASE_URL, }); diff --git a/src/lib/listing/page-header/models/action-config.model.ts b/src/lib/listing/page-header/models/action-config.model.ts index 0e96c6d..dbfb226 100644 --- a/src/lib/listing/page-header/models/action-config.model.ts +++ b/src/lib/listing/page-header/models/action-config.model.ts @@ -5,6 +5,5 @@ import { OverlappingElement } from '../../../help-mode'; export interface ActionConfig extends BaseHeaderConfig { readonly action: ($event: MouseEvent) => void; readonly helpModeKey?: string; - readonly overlappingElements?: OverlappingElement[]; readonly disabled$?: Observable; }