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

Button type enum

Browse Source
This commit is contained in:
Adina Țeudan 2021-07-06 14:55:17 +03:00
parent 1427353c64
commit 9333bfc593
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.html
View File

@ -1,10 +1,14 @@
<button (click)="scroll('top')" [hidden]="!showScroll('top')" class="scroll-button top pointer">
<button
(click)="scroll(ButtonType.TOP)"
[hidden]="!showScroll(ButtonType.TOP)"
class="scroll-button top pointer"
>
<mat-icon svgIcon="red:arrow-down-o"></mat-icon>
</button>
<button
(click)="scroll('bottom')"
[hidden]="!showScroll('bottom')"
(click)="scroll(ButtonType.BOTTOM)"
[hidden]="!showScroll(ButtonType.BOTTOM)"
class="scroll-button bottom pointer"
>
<mat-icon svgIcon="red:arrow-down-o"></mat-icon>

18
apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.ts
View File

@ -1,25 +1,33 @@
import { Component, HostListener, Input } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
enum ButtonType {
TOP = 'top',
BOTTOM = 'bottom'
}
@Component({
selector: 'redaction-scroll-button',
templateUrl: './scroll-button.component.html',
styleUrls: ['./scroll-button.component.scss']
})
export class ScrollButtonComponent {
ButtonType = ButtonType;
@Input()
scrollViewport: CdkVirtualScrollViewport;
@Input()
itemSize: number;
scroll(type: 'top' | 'bottom'): void {
scroll(type: ButtonType): void {
const viewportSize =
(this.scrollViewport?.getViewportSize() - this.itemSize) * (type === 'top' ? -1 : 1);
(this.scrollViewport?.getViewportSize() - this.itemSize) *
(type === ButtonType.TOP ? -1 : 1);
const scrollOffset = this.scrollViewport?.measureScrollOffset('top');
this.scrollViewport?.scrollToOffset(scrollOffset + viewportSize, 'smooth');
}
showScroll(type: 'top' | 'bottom'): boolean {
showScroll(type: ButtonType): boolean {
const reachedEnd = this.scrollViewport?.measureScrollOffset(type) === 0;
const scrollSize = this.scrollViewport?.getDataLength() * this.itemSize;
const scrollIsNeeded = this.scrollViewport?.getViewportSize() < scrollSize;
@ -30,9 +38,9 @@ export class ScrollButtonComponent {
@HostListener('document:keyup', ['$event'])
spaceAndPageDownScroll(event: KeyboardEvent): void {
if (['Space', 'PageDown'].includes(event.code)) {
this.scroll('bottom');
this.scroll(ButtonType.BOTTOM);
} else if (['PageUp'].includes(event.code)) {
this.scroll('top');
this.scroll(ButtonType.TOP);
}
}
}