diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts index e17d99b..04e6c3f 100644 --- a/src/lib/help-mode/help-mode.service.ts +++ b/src/lib/help-mode/help-mode.service.ts @@ -28,7 +28,8 @@ export interface Helper { } export interface DocsKey { - readonly key: string; + readonly elementKey: string; + readonly documentKey: string; readonly scrollableParentView?: ScrollableParentView; readonly overlappingElements?: OverlappingElement[]; readonly dialogElement?: boolean; @@ -41,8 +42,8 @@ export class HelpModeService { readonly isHelpModeActive$ = this.#isHelpModeActive$.asObservable(); readonly #helpModeDialogIsOpened$ = new BehaviorSubject(false); readonly helpModeDialogIsOpened$ = this.#helpModeDialogIsOpened$.asObservable(); - readonly #helpers: Record = {}; readonly #renderer: Renderer2; + #helpers: Record = {}; #dialogMode = false; constructor( @@ -82,17 +83,11 @@ export class HelpModeService { this.#isHelpModeActive$.next(true); this.openHelpModeDialog(); this.#dialogMode = dialogMode; - // setTimeout(() => { - // this.#createWebViewerHelpers(); - // this.#enableHelperElements(); - // }, 500); - - for (const key in this._keys) { - this.#createHelperElement(this._keys[key]); - } - - this.#createWebViewerHelpers(); - this.#enableHelperElements(); + setTimeout(() => { + this.#createHelpers(); + this.#createWebViewerHelpers(); + this.#enableHelperElements(); + }, 500); } } @@ -101,29 +96,51 @@ export class HelpModeService { document.body.style.removeProperty('overflow'); this.#isHelpModeActive$.next(false); this.#disableHelperElements(); + this.#helpers = {}; } } - #createHelperElement(key: DocsKey) { - const element = document.querySelectorAll(`[help-mode-key='${key.key}']`)[0] as HTMLElement; - if (element) { - const helperKey = `${key.key}-${this.#generateId()}`; + #createHelpers() { + for (const key of Object.values(this._keys)) { + const elements = document.querySelectorAll(`[help-mode-key='${key.elementKey}']`); + elements.forEach(element => { + const helperKey = `${key.elementKey}-${this.#generateId()}`; - const helperElement = this.#renderer.createElement('a') as HTMLElement; - this.#renderer.setAttribute(helperElement, 'href', this.#generateDocsLink(key.key)); - this.#renderer.setAttribute(helperElement, 'target', '_blank'); - this.#renderer.addClass(helperElement, HELP_MODE_CLASS); - - this.#helpers[helperKey] = { - element, - helperElement, - scrollableParentView: key.scrollableParentView, - overlappingElements: key.overlappingElements, - dialogElement: !!key.dialogElement, - }; + this.#helpers[helperKey] = { + element: element as HTMLElement, + helperElement: this.#getHelperElement(element as HTMLElement, key.documentKey), + scrollableParentView: key.scrollableParentView, + overlappingElements: key.overlappingElements, + dialogElement: key.elementKey.endsWith('_DIALOG'), + }; + }); } } + #createWebViewerHelpers(): void { + const iframe: HTMLIFrameElement = document.getElementById(PDF_TRON_IFRAME_ID) as HTMLIFrameElement; + if (iframe) { + WEB_VIEWER_ELEMENTS.forEach(e => { + const element: HTMLElement = iframe.contentWindow?.document.querySelector(e.querySelector) as HTMLElement; + + this.#helpers[e.documentKey] = { + element, + helperElement: this.#getHelperElement(element, e.documentKey), + dialogElement: false, + iframeElement: true, + }; + }); + } + } + + #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, 'target', '_blank'); + this.#renderer.addClass(helperElement, HELP_MODE_CLASS); + return helperElement; + } + #generateId(): string { return Math.random().toString(36).substring(2, 9); } @@ -142,29 +159,6 @@ export class HelpModeService { }); } - #createWebViewerHelpers(): void { - const iframe: HTMLIFrameElement = document.getElementById(PDF_TRON_IFRAME_ID) as HTMLIFrameElement; - if (iframe) { - WEB_VIEWER_ELEMENTS.forEach(e => { - const element: HTMLElement = iframe.contentWindow?.document.querySelector(e.querySelector) as HTMLElement; - - const helperElement: HTMLElement = this.#renderer.createElement('a') as HTMLElement; - this.#renderer.setAttribute(helperElement, 'href', this.#generateDocsLink(e.helpModeKey)); - this.#renderer.setAttribute(helperElement, 'target', '_blank'); - this.#renderer.addClass(helperElement, HELP_MODE_CLASS); - - const helper: Helper = { - element, - helperElement, - dialogElement: false, - iframeElement: true, - }; - - this.addHelper(e.helpModeKey, helper); - }); - } - } - addHelper(helperKey: string, helper: Helper): void { this.#helpers[helperKey] = helper; } @@ -268,9 +262,6 @@ export class HelpModeService { #enableHelperElements() { Object.values(this.#helpers).forEach(helper => { - console.log('-----------------------'); - console.log('this.#dialogMode: ', this.#dialogMode); - console.log('helper.dialogElement: ', helper.dialogElement); if (this.#dialogMode === helper.dialogElement) { document.body.appendChild(helper.helperElement); this.#updateHelperElement(helper); diff --git a/src/lib/help-mode/utils/constants.ts b/src/lib/help-mode/utils/constants.ts index 22a8fad..d97a3cf 100644 --- a/src/lib/help-mode/utils/constants.ts +++ b/src/lib/help-mode/utils/constants.ts @@ -10,7 +10,7 @@ export const PDF_TRON_IFRAME_ID = 'webviewer-1'; export const WEB_VIEWER_ELEMENTS = [ { querySelector: '.HeaderItems', - helpModeKey: 'pdf_features', + documentKey: 'pdf_features', }, ];