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

WIP on refactoring help mode logic

Browse Source
This commit is contained in:
Valentin Mihai 2022-02-12 00:21:48 +02:00
parent 0bab458476
commit 24fbe8de35
6 changed files with 71 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/styles/common-help-mode.scss
View File

@ -1,17 +1,11 @@
.help-mode-on-mouse-over {
.help-mode {
z-index: 10;
position: absolute;
top: -5px;
left: -5px;
width: 100%;
height: 100%;
padding-right: 5px;
padding-bottom: 10px;
transition: all 0.25s;
}
.help-highlight,
.help-mode-on-mouse-over:hover {
.help-mode:hover {
background: rgba(92, 229, 148, 0.5);
box-shadow: 0 0 0 2px var(--iqser-helpmode-primary) inset;
cursor: help;

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

@ -1,4 +1,4 @@
import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
import { HelpModeService } from './help-mode.service';
import { Router } from '@angular/router';
@ -24,28 +24,18 @@ export class HelpModeDirective implements OnInit {
}
private _createHelperElement() {
const elementNameWithId = `${this.elementName}-${this._getRandomId()}`;
const element = this._elementRef.nativeElement as HTMLElement;
const helperElementName = `${this.elementName}-${this._generateId()}`;
if (!this._isDisabledElement()) {
const helperElement = this._renderer.createElement('div') as HTMLElement;
this._renderer.addClass(helperElement, 'help-mode-on-mouse-over');
this._renderer.addClass(helperElement, `help-mode-on-mouse-over-${this.elementName}`);
this._helpModeService.addElement(elementNameWithId, element, helperElement);
}
const helperElement = this._renderer.createElement('a') as HTMLElement;
this._renderer.setAttribute(helperElement, 'href', this._helpModeService.getDocsLink(this.elementName));
this._renderer.setAttribute(helperElement, 'target', '_blank');
this._renderer.addClass(helperElement, 'help-mode');
this._helpModeService.addElement(helperElementName, element, helperElement);
}
private _isDisabledElement() {
return this._path === 'dossiers' && this.elementName === 'filter-for-status';
}
private _getRandomId(): string {
return Math.random().toString(36).substr(2, 9);
}
@HostListener('click') onClick(): void {
this._helpModeService.openDocsFor(this.elementName);
private _generateId(): string {
return Math.random().toString(36).substring(2, 9);
}
}

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

@ -19,7 +19,7 @@ export class HelpModeService {
private readonly _helpModeDialogIsOpened$ = new BehaviorSubject(false);
readonly helpModeDialogIsOpened$ = this._helpModeDialogIsOpened$.asObservable();
private readonly _elements: Record<string, Helper> = {};
private readonly _helperElements: Record<string, Helper> = {};
private readonly _renderer: Renderer2;
constructor(
@ -53,29 +53,29 @@ export class HelpModeService {
return ref;
}
openDocsFor(elementName: string): void {
if (this.isHelpModeActive) {
window.open(`${this._manualBaseURL}${this._docs[elementName][this._translateService.currentLang]}`);
}
getDocsLink(elementName: string): string {
return `${this._manualBaseURL}${this._docs[elementName][this._translateService.currentLang]}`;
}
activateHelpMode(): void {
this._isHelpModeActive$.next(true);
this.openHelpModeDialog();
this._enableHelperElements();
if (!this.isHelpModeActive) {
this._isHelpModeActive$.next(true);
this.openHelpModeDialog();
setTimeout(() => {
this._enableHelperElements();
});
}
}
deactivateHelpMode(): void {
this._isHelpModeActive$.next(false);
this._disableHelperElements();
if (this.isHelpModeActive) {
this._isHelpModeActive$.next(false);
this._disableHelperElements();
}
}
highlightHelperElements(): void {
if (!this.isHelpModeActive) {
return;
}
Object.values(this._elements).forEach(({ helperElement }) => {
Object.values(this._helperElements).forEach(({ helperElement }) => {
this._renderer.addClass(helperElement, 'help-highlight');
setTimeout(() => {
this._renderer.removeClass(helperElement, 'help-highlight');
@ -83,21 +83,46 @@ export class HelpModeService {
});
}
addElement(elementName: string, element: HTMLElement, helperElement: HTMLElement): void {
this._elements[elementName] = { element, helperElement };
addElement(helperElementName: string, element: HTMLElement, helperElement: HTMLElement): void {
this._helperElements[helperElementName] = { element, helperElement };
}
updateHelperElements() {
Object.values(this._helperElements).forEach(({element, helperElement }) => {
this._updateHelperElement(element, helperElement);
});
}
private _updateHelperElement(element: HTMLElement, helperElement: HTMLElement) {
const dimensions = this._getElementDimensions(element);
helperElement.style.cssText = `
top:${dimensions.y}px;
left:${dimensions.x}px;
width:${dimensions.width}px;
height:${dimensions.height}px;
`;
}
private _enableHelperElements() {
Object.values(this._elements).forEach(({ element, helperElement }) => {
this._renderer.setStyle(element, 'position', 'relative');
this._renderer.appendChild(element, helperElement);
Object.values(this._helperElements).forEach(({ element, helperElement }) => {
document.body.appendChild(helperElement)
this._updateHelperElement(element, helperElement);
});
}
private _disableHelperElements() {
Object.values(this._elements).forEach(({ element, helperElement }) => {
this._renderer.removeStyle(element, 'position');
this._renderer.removeChild(element, helperElement);
Object.values(this._helperElements).forEach(({ helperElement }) => {
document.body.removeChild(helperElement)
});
}
private _getElementDimensions(element: HTMLElement) {
const rect = element.getBoundingClientRect();
return {
y: rect.top + window.pageYOffset,
x: rect.left + window.pageXOffset,
height: rect.height,
width: rect.width,
};
}
}

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

@ -25,6 +25,14 @@ export class HelpModeComponent {
}
@HostListener('click') onClick(): void {
this.helpModeService.highlightHelperElements();
if (this.helpModeService.isHelpModeActive) {
this.helpModeService.highlightHelperElements();
}
}
@HostListener('window:resize') onResize(event: any) {
if (this.helpModeService.isHelpModeActive) {
this.helpModeService.updateHelperElements();
}
}
}

5
src/lib/listing/page-header/page-header.component.html
View File

@ -1,7 +1,7 @@
<div class="page-header">
<div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
<div *ngIf="filters$ | async as filters" [iqserHelpMode]="helpModeKey" class="filters">
<div *ngIf="filters$ | async as filters" class="filters">
<div *ngIf="filters.length && searchPosition !== searchPositions.beforeFilters" translate="filters.filter-by"></div>
<ng-container *ngIf="searchPosition === searchPositions.beforeFilters" [ngTemplateOutlet]="searchBar"></ng-container>
@ -16,7 +16,6 @@
(click)="resetFilters()"
*ngIf="showResetFilters$ | async"
class="reset-filters"
iqserHelpMode="reset-filters"
translate="reset-filters"
></div>
</div>
@ -30,7 +29,6 @@
*ngIf="!config.hide"
[icon]="config.icon"
[id]="config.label.replace('.', '-')"
[iqserHelpMode]="config.helpModeKey"
[label]="config.label | translate"
[type]="config.type"
></iqser-icon-button>
@ -43,7 +41,6 @@
*ngIf="!config.hide"
[disabled]="config.disabled$ && (config.disabled$ | async)"
[icon]="config.icon"
[iqserHelpMode]="config.helpModeKey"
[tooltip]="config.label"
tooltipPosition="below"
></iqser-circle-button>

2
src/lib/listing/table-header/table-header.component.html
View File

@ -12,7 +12,7 @@
<ng-container [ngTemplateOutlet]="bulkActions"></ng-container>
<iqser-quick-filters *ngIf="quickFilters$ | async" iqserHelpMode="dossiers-quickfilter-my-dossiers"></iqser-quick-filters>
<iqser-quick-filters *ngIf="quickFilters$ | async"></iqser-quick-filters>
<!-- Custom content-->
<ng-content></ng-content>