From b4460732f80c3c7036ffca6aa5a876a3a91b56eb Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Mon, 21 Feb 2022 22:30:42 +0200 Subject: [PATCH] checked if helper elements are visible for more scrollable views instead of just virtual scroll --- src/lib/help-mode/help-mode.directive.ts | 6 +- src/lib/help-mode/help-mode.service.ts | 71 +++++++++++-------- .../scroll-button.component.html | 4 +- .../scroll-button/scroll-button.component.ts | 5 ++ 4 files changed, 51 insertions(+), 35 deletions(-) diff --git a/src/lib/help-mode/help-mode.directive.ts b/src/lib/help-mode/help-mode.directive.ts index dac74b5..af3f122 100644 --- a/src/lib/help-mode/help-mode.directive.ts +++ b/src/lib/help-mode/help-mode.directive.ts @@ -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 { diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts index de00234..8172914 100644 --- a/src/lib/help-mode/help-mode.service.ts +++ b/src/lib/help-mode/help-mode.service.ts @@ -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); }); } diff --git a/src/lib/listing/scroll-button/scroll-button.component.html b/src/lib/listing/scroll-button/scroll-button.component.html index a0954c3..44bc640 100644 --- a/src/lib/listing/scroll-button/scroll-button.component.html +++ b/src/lib/listing/scroll-button/scroll-button.component.html @@ -1,7 +1,7 @@ - - diff --git a/src/lib/listing/scroll-button/scroll-button.component.ts b/src/lib/listing/scroll-button/scroll-button.component.ts index e13f7c4..9aed099 100644 --- a/src/lib/listing/scroll-button/scroll-button.component.ts +++ b/src/lib/listing/scroll-button/scroll-button.component.ts @@ -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`; + } }