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

Floating scroll up button

Browse Source
This commit is contained in:
Adina Țeudan 2021-07-06 14:34:57 +03:00
parent adaf90a70c
commit 1427353c64
3 changed files with 30 additions and 10 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,3 +1,11 @@
<button (click)="scroll()" [hidden]="!showScrollButton()" class="scroll-button pointer">
<button (click)="scroll('top')" [hidden]="!showScroll('top')" class="scroll-button top pointer">
<mat-icon svgIcon="red:arrow-down-o"></mat-icon>
</button>
<button
(click)="scroll('bottom')"
[hidden]="!showScroll('bottom')"
class="scroll-button bottom pointer"
>
<mat-icon svgIcon="red:arrow-down-o"></mat-icon>
</button>

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

@ -3,13 +3,24 @@
.scroll-button {
background-color: $white;
position: absolute;
bottom: 30px;
right: 0;
height: 40px;
width: 44px;
border: none;
border-radius: 8px 0 0 8px;
box-shadow: -1px 1px 5px 0 rgba(40, 50, 65, 0.25);
&.bottom {
bottom: 30px;
}
&.top {
top: 100px;
mat-icon {
transform: rotate(180deg);
}
}
}
mat-icon {

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

@ -12,26 +12,27 @@ export class ScrollButtonComponent {
@Input()
itemSize: number;
scroll(): void {
scroll(type: 'top' | 'bottom'): void {
const viewportSize =
(this.scrollViewport?.getViewportSize() - this.itemSize) * (type === 'top' ? -1 : 1);
const scrollOffset = this.scrollViewport?.measureScrollOffset('top');
const ligaturePortion = 50;
const viewportSize = this.scrollViewport?.getViewportSize() - ligaturePortion;
this.scrollViewport?.scrollToOffset(scrollOffset + viewportSize, 'smooth');
}
showScrollButton(): boolean {
const reachedBottom = this.scrollViewport?.measureScrollOffset('bottom') === 0;
showScroll(type: 'top' | 'bottom'): boolean {
const reachedEnd = this.scrollViewport?.measureScrollOffset(type) === 0;
const scrollSize = this.scrollViewport?.getDataLength() * this.itemSize;
const scrollIsNeeded = this.scrollViewport?.getViewportSize() < scrollSize;
return scrollIsNeeded && !reachedBottom;
return scrollIsNeeded && !reachedEnd;
}
@HostListener('document:keyup', ['$event'])
spaceAndPageDownScroll(event: KeyboardEvent): void {
if (['Space', 'PageDown'].includes(event.code)) {
this.scroll();
this.scroll('bottom');
} else if (['PageUp'].includes(event.code)) {
this.scroll('top');
}
}
}