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

lint

Browse Source
This commit is contained in:
Valentin Mihai 2022-12-06 00:58:33 +02:00
parent be87af0147
commit 5f9c754abf
2 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/lib/help-mode/help-mode.directive.ts
View File

@ -32,7 +32,14 @@ export class HelpModeDirective implements OnInit {
this._renderer.setAttribute(helperElement, 'target', '_blank'); this._renderer.setAttribute(helperElement, 'target', '_blank');
this._renderer.addClass(helperElement, 'help-mode'); this._renderer.addClass(helperElement, 'help-mode');
this._helpModeService.addElement(helperElementName, element, helperElement, this.scrollableParentView, this.overlappingElement, this.dialogElement); this._helpModeService.addElement(
helperElementName,
element,
helperElement,
this.scrollableParentView,
this.overlappingElement,
this.dialogElement,
);
} }
private _generateId(): string { private _generateId(): string {

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

@ -19,7 +19,7 @@ export const ScrollableParentViews = {
export type ScrollableParentView = keyof typeof ScrollableParentViews; export type ScrollableParentView = keyof typeof ScrollableParentViews;
export const OverlappingElements = { export const OverlappingElements = {
USER_MENU: 'USER_MENU' USER_MENU: 'USER_MENU',
} as const; } as const;
export type OverlappingElement = keyof typeof OverlappingElements; export type OverlappingElement = keyof typeof OverlappingElements;
@ -124,7 +124,11 @@ export class HelpModeService {
}); });
} }
private _isElementVisible(element: HTMLElement, scrollableParentView: ScrollableParentView, overlappingElementName: OverlappingElement): boolean { private _isElementVisible(
element: HTMLElement,
scrollableParentView: ScrollableParentView,
overlappingElementName: OverlappingElement,
): boolean {
let elementRect: DOMRect = element.getBoundingClientRect(); let elementRect: DOMRect = element.getBoundingClientRect();
if (elementRect.top === 0 && elementRect.left === 0 && elementRect.bottom === 0 && elementRect.bottom === 0) { if (elementRect.top === 0 && elementRect.left === 0 && elementRect.bottom === 0 && elementRect.bottom === 0) {
return false; return false;
@ -184,13 +188,17 @@ export class HelpModeService {
Math.max(elementRect.left, overlappingElementRect.left) < Math.min(elementRect.right, overlappingElementRect.right) && Math.max(elementRect.left, overlappingElementRect.left) < Math.min(elementRect.right, overlappingElementRect.right) &&
Math.max(elementRect.top, overlappingElementRect.top) < Math.min(elementRect.bottom, overlappingElementRect.bottom) Math.max(elementRect.top, overlappingElementRect.top) < Math.min(elementRect.bottom, overlappingElementRect.bottom)
); );
} }
return true; return true;
} }
private _updateHelperElement(element: HTMLElement, helperElement: HTMLElement, scrollableParentView: ScrollableParentView, overlappingElement: OverlappingElement) { private _updateHelperElement(
element: HTMLElement,
helperElement: HTMLElement,
scrollableParentView: ScrollableParentView,
overlappingElement: OverlappingElement,
) {
if (this._isElementVisible(element, scrollableParentView, overlappingElement)) { if (this._isElementVisible(element, scrollableParentView, overlappingElement)) {
const dimensions = this._getElementDimensions(element); const dimensions = this._getElementDimensions(element);
helperElement.style.cssText = ` helperElement.style.cssText = `
@ -206,12 +214,14 @@ export class HelpModeService {
} }
private _enableHelperElements() { private _enableHelperElements() {
Object.values(this._helperElements).forEach(({ element, helperElement, scrollableParentView,overlappingElement, dialogElement }) => { Object.values(this._helperElements).forEach(
if (this._dialogMode === dialogElement) { ({ element, helperElement, scrollableParentView, overlappingElement, dialogElement }) => {
document.body.appendChild(helperElement); if (this._dialogMode === dialogElement) {
this._updateHelperElement(element, helperElement, scrollableParentView, overlappingElement); document.body.appendChild(helperElement);
} this._updateHelperElement(element, helperElement, scrollableParentView, overlappingElement);
}); }
},
);
} }
private _disableHelperElements() { private _disableHelperElements() {