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-10 17:53:30 +03:00
parent 4aef8c608d
commit 5c442ced9f
6 changed files with 11 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/lib/help-mode/help-button/help-button.component.ts
View File

@ -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;
}

6
src/lib/help-mode/help-mode.module.ts
View File

@ -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<IqserHelpModeModule> {
static forRoot(helpModeKeys: HelpModeKey[]): ModuleWithProviders<IqserHelpModeModule> {
return {
ngModule: IqserHelpModeModule,
providers: [{ provide: HELP_MODE_KEYS, useValue: helpDocs }, HelpModeService],
providers: [{ provide: HELP_MODE_KEYS, useValue: helpModeKeys }, HelpModeService],
};
}
}

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

@ -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));
}

3
src/lib/help-mode/help-mode/help-mode.component.ts
View File

@ -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;
}

4
src/lib/help-mode/tokens.ts
View File

@ -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<DocsKey>('Help mode keys');
export const HELP_MODE_KEYS = new InjectionToken<HelpModeKey>('Help mode keys');
export const MANUAL_BASE_URL = new InjectionToken<string>('Base manual URL', {
factory: () => inject(IqserConfigService).values.MANUAL_BASE_URL,
});

1
src/lib/listing/page-header/models/action-config.model.ts
View File

@ -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<boolean>;
}