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

checked if helper elements are visible for more scrollable views instead of just virtual scroll

Browse Source
This commit is contained in:
Valentin Mihai 2022-02-21 22:30:42 +02:00
parent 9b6a1b79db
commit b4460732f8
4 changed files with 51 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
import { HelpModeService } from './help-mode.service';
import { HelpModeService, ScrollableParentView } from './help-mode.service';
import { Router } from '@angular/router';
@Directive({
@ -8,7 +8,7 @@ import { Router } from '@angular/router';
})
export class HelpModeDirective implements OnInit {
@Input('iqserHelpMode') elementName!: string;
@Input() isVirtualScrollElement: boolean = false;
@Input() scrollableParentView!: ScrollableParentView;
private _path: string;
constructor(
@ -35,7 +35,7 @@ export class HelpModeDirective implements OnInit {
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, this.isVirtualScrollElement);
this._helpModeService.addElement(helperElementName, element, helperElement, this.scrollableParentView);
}
private _generateId(): string {

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

@ -5,15 +5,23 @@ import { BehaviorSubject, firstValueFrom } from 'rxjs';
import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component';
import { HELP_DOCS, MANUAL_BASE_URL } from './tokens';
const VIRTUAL_SCROLL_ID = 'virtual-scroll';
const ANNOTATIONS_LIST_ID = 'annotations-list';
const SCROLL_BUTTONS_IDS = ['scroll-up', 'scroll-down'];
export const ScrollableParentViews = {
VIRTUAL_SCROLL: 'VIRTUAL_SCROLL',
ANNOTATIONS_LIST: 'ANNOTATIONS_LIST'
} as const;
export type ScrollableParentView = keyof typeof ScrollableParentViews;
interface Helper {
readonly element: HTMLElement;
readonly helperElement: HTMLElement;
readonly isVirtualScrollElement: boolean;
readonly scrollableParentView: ScrollableParentView;
}
const VIRTUAL_SCROLL_ID = 'virtual-scroll';
const SCROLL_BUTTONS_IDS = ['scroll-up', 'scroll-down'];
@Injectable({
providedIn: 'root',
})
@ -89,50 +97,53 @@ export class HelpModeService {
});
}
addElement(helperElementName: string, element: HTMLElement, helperElement: HTMLElement, isVirtualScrollElement: boolean): void {
this._helperElements[helperElementName] = { element, helperElement, isVirtualScrollElement };
addElement(helperElementName: string, element: HTMLElement, helperElement: HTMLElement, scrollableParentView: ScrollableParentView): void {
this._helperElements[helperElementName] = { element, helperElement, scrollableParentView };
}
updateHelperElements() {
Object.values(this._helperElements).forEach(({element, helperElement, isVirtualScrollElement }) => {
this._updateHelperElement(element, helperElement, isVirtualScrollElement);
Object.values(this._helperElements).forEach(({element, helperElement, scrollableParentView }) => {
this._updateHelperElement(element, helperElement, scrollableParentView);
});
}
private _isElementVisible(element: HTMLElement, isVirtualScrollElement: boolean): boolean {
private _isElementVisible(element: HTMLElement, scrollableParentView: ScrollableParentView): boolean {
const elementRect = element.getBoundingClientRect();
if (elementRect.top === 0 && elementRect.left === 0 && elementRect.bottom === 0 && elementRect.bottom === 0) {
return false;
}
if (isVirtualScrollElement) {
const virtualScroll: any = document.getElementById(VIRTUAL_SCROLL_ID);
if (scrollableParentView) {
const scrollableElementId = scrollableParentView === ScrollableParentViews.VIRTUAL_SCROLL ? VIRTUAL_SCROLL_ID : ANNOTATIONS_LIST_ID;
const scrollableElement: any = document.getElementById(scrollableElementId);
if (!virtualScroll) {
if (!scrollableElement) {
return false;
}
const virtualScrollRect = virtualScroll.getBoundingClientRect();
const scrollableElementRect = scrollableElement.getBoundingClientRect();
if (!(elementRect.top > virtualScrollRect.top
&& elementRect.left > virtualScrollRect.left
&& elementRect.bottom < virtualScrollRect.bottom
&& elementRect.right < virtualScrollRect.right)) {
if (!(elementRect.top > scrollableElementRect.top
&& elementRect.left > scrollableElementRect.left
&& elementRect.bottom < scrollableElementRect.bottom
&& elementRect.right < scrollableElementRect.right)) {
return false;
}
for (const id of SCROLL_BUTTONS_IDS) {
const scroll: any = document.getElementById(id);
if (scrollableParentView === ScrollableParentViews.VIRTUAL_SCROLL) {
for (const id of SCROLL_BUTTONS_IDS) {
const scroll: any = document.getElementById(id);
const elementRect = element.getBoundingClientRect();
const scrollRect = scroll.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();
const scrollRect = scroll.getBoundingClientRect();
if(elementRect.top + elementRect.height > scrollRect.top
&& elementRect.left + elementRect.width > scrollRect.left
&& elementRect.bottom - elementRect.height < scrollRect.bottom
&& elementRect.right - elementRect.width < scrollRect.right) {
return false
if(elementRect.top + elementRect.height > scrollRect.top
&& elementRect.left + elementRect.width > scrollRect.left
&& elementRect.bottom - elementRect.height < scrollRect.bottom
&& elementRect.right - elementRect.width < scrollRect.right) {
return false
}
}
}
}
@ -140,8 +151,8 @@ export class HelpModeService {
return true;
}
private _updateHelperElement(element: HTMLElement, helperElement: HTMLElement, isVirtualScrollElement: boolean) {
if (this._isElementVisible(element, isVirtualScrollElement)) {
private _updateHelperElement(element: HTMLElement, helperElement: HTMLElement, scrollableParentView: ScrollableParentView) {
if (this._isElementVisible(element, scrollableParentView)) {
const dimensions = this._getElementDimensions(element);
helperElement.style.cssText = `
top:${dimensions.y}px;
@ -157,9 +168,9 @@ export class HelpModeService {
}
private _enableHelperElements() {
Object.values(this._helperElements).forEach(({ element, helperElement, isVirtualScrollElement }) => {
Object.values(this._helperElements).forEach(({ element, helperElement, scrollableParentView }) => {
document.body.appendChild(helperElement)
this._updateHelperElement(element, helperElement, isVirtualScrollElement);
this._updateHelperElement(element, helperElement, scrollableParentView);
});
}

4
src/lib/listing/scroll-button/scroll-button.component.html
View File

@ -1,7 +1,7 @@
<button (click)="scroll(buttonType.top)" [hidden]="(showScrollUp$ | async) === false" class="scroll-button top pointer" iqserHelpMode="scroll_up_and_down" id="scroll-up">
<button (click)="scroll(buttonType.top)" [hidden]="(showScrollUp$ | async) === false" class="scroll-button top pointer" [iqserHelpMode]="helpModeKey" id="scroll-up">
<mat-icon svgIcon="iqser:arrow-down-o"></mat-icon>
</button>
<button (click)="scroll(buttonType.bottom)" [hidden]="(showScrollDown$ | async) === false" class="scroll-button bottom pointer" iqserHelpMode="scroll_up_and_down" id="scroll-down">
<button (click)="scroll(buttonType.bottom)" [hidden]="(showScrollDown$ | async) === false" class="scroll-button bottom pointer" [iqserHelpMode]="helpModeKey" id="scroll-down">
<mat-icon svgIcon="iqser:arrow-down-o"></mat-icon>
</button>

5
src/lib/listing/scroll-button/scroll-button.component.ts
View File

@ -61,4 +61,9 @@ export class ScrollButtonComponent implements OnInit {
this.scroll(ButtonTypes.top);
}
}
get helpModeKey (): string {
const screen = window.location.href.includes('/dossiers/') ? 'documents' : 'dossiers';
return `${screen}_scroll_up_and_down`;
}
}