Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RED-6510 - WIP on "Lazy load help mode elements"

Browse Source
This commit is contained in:
Valentin Mihai 2023-04-08 22:48:49 +03:00
parent 8a61630a37
commit 6deb24dc41
2 changed files with 47 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/lib/help-mode/help-mode.service.ts
View File

@ -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<string, Helper> = {};
readonly #renderer: Renderer2;
#helpers: Record<string, Helper> = {};
#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);

2
src/lib/help-mode/utils/constants.ts
View File

@ -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',
},
];