self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-23 01:27:14 +02:00
Code Issues Releases Activity

Adding show and hide delay #587 #44 #27 #615 #427

Browse Source
This commit is contained in:
Patrik J. Braun 2023-03-05 19:40:13 +01:00
parent 0891215c3a
commit 3fa4f59ebe
3 changed files with 53 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/common/config/public/ClientConfig.ts
View File

@ -429,6 +429,15 @@ export class NavBarConfig {
new NavigationLinkConfig(NavigationLinkTypes.albums), new NavigationLinkConfig(NavigationLinkTypes.albums),
new NavigationLinkConfig(NavigationLinkTypes.faces), new NavigationLinkConfig(NavigationLinkTypes.faces),
]; ];
@ConfigProperty({
tags: {
name: $localize`Navbar show/hide delay`,
priority: ConfigPriority.underTheHood
},
type: 'ratio',
description: $localize`Ratio of the page height, you need to scroll to show or hide the navigationbar.`,
})
NavbarShowHideDelay: number = 0.15;
} }
@SubConfigClass<TAGS>({tags: {client: true}, softReadonly: true}) @SubConfigClass<TAGS>({tags: {client: true}, softReadonly: true})

37
src/frontend/app/ui/frame/frame.component.ts
View File

@ -32,10 +32,14 @@ export class FrameComponent {
public readonly stringify = JSON.stringify; public readonly stringify = JSON.stringify;
/* sticky top navbar */ /* sticky top navbar */
private lastScroll = 0; private lastScroll = {
any: 0,
up: 0,
down: 0
};
public shouldHideNavbar = false; public shouldHideNavbar = false;
public navbarKeepTop = true; public navbarKeepTop = true;
public animateNavbar = false; public animateNavbar = false;
@ViewChild('navContainer', {static: true}) navContainer: ElementRef; @ViewChild('navContainer', {static: true}) navContainer: ElementRef;
@ViewChild('dropdown', {static: true}) dropdown: BsDropdownDirective; @ViewChild('dropdown', {static: true}) dropdown: BsDropdownDirective;
@ViewChild('languageSelector', {static: true}) languageSelector: LanguageComponent; @ViewChild('languageSelector', {static: true}) languageSelector: LanguageComponent;
@ -88,35 +92,48 @@ export class FrameComponent {
} }
@HostListener('window:scroll') @HostListener('window:scroll')
onScroll(): void { onScroll(): void {
const up = this.lastScroll > PageHelper.ScrollY; const scrollPosition = PageHelper.ScrollY;
const down = this.lastScroll < PageHelper.ScrollY; const up = this.lastScroll.any > scrollPosition;
const down = this.lastScroll.any < scrollPosition;
const upDelay = up && this.lastScroll.down > scrollPosition + window.innerHeight * Config.Gallery.NavBar.NavbarShowHideDelay;
const downDelay = down && this.lastScroll.up < scrollPosition - window.innerHeight * Config.Gallery.NavBar.NavbarShowHideDelay;
//we are the top where the navbar by default lives //we are the top where the navbar by default lives
if (this.navContainer.nativeElement.offsetHeight > PageHelper.ScrollY) { if (this.navContainer.nativeElement.offsetHeight > scrollPosition) {
// do not force move navbar up when we are scrolling up from bottom // do not force move navbar up when we are scrolling up from bottom
if (this.shouldHideNavbar != false) { if (this.shouldHideNavbar != false) {
this.navbarKeepTop = true; this.navbarKeepTop = true;
} }
if (down) { // scroll down
this.shouldHideNavbar = true;
}
} else { } else {
// enable navigation once we left the top part to prevent hide extra animation // enable navigation once we left the top part to prevent hide extra animation
this.animateNavbar = !(this.navbarKeepTop && down); this.animateNavbar = !(this.navbarKeepTop && down);
this.navbarKeepTop = false; this.navbarKeepTop = false;
if (down) {
if (downDelay) { // scroll down
this.dropdown.hide(); this.dropdown.hide();
this.languageSelector.dropdown.hide(); this.languageSelector.dropdown.hide();
} }
} }
if (up) { //scroll up if (upDelay) { //scroll up
this.shouldHideNavbar = false; this.shouldHideNavbar = false;
} else if (down) { // scroll down } else if (downDelay) { // scroll down
this.shouldHideNavbar = true; this.shouldHideNavbar = true;
} }
this.lastScroll = PageHelper.ScrollY; if (up) { //scroll up
this.lastScroll.up = scrollPosition;
} else if (down) { // scroll down
this.lastScroll.down = scrollPosition;
}
this.lastScroll.any = scrollPosition;
} }
} }

23
src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts
View File

@ -34,9 +34,13 @@ export class GalleryNavigatorComponent {
private readonly RootFolderName: string; private readonly RootFolderName: string;
private parentPath: string = null; private parentPath: string = null;
private lastScroll = 0; private lastScroll = {
any: 0,
up: 0,
down: 0
};
@ViewChild('dropdown', {static: true}) dropdown: BsDropdownDirective; @ViewChild('dropdown', {static: true}) dropdown: BsDropdownDirective;
@ViewChild('navigator', { read: ElementRef }) navigatorElement: ElementRef<HTMLInputElement>; @ViewChild('navigator', {read: ElementRef}) navigatorElement: ElementRef<HTMLInputElement>;
constructor( constructor(
public authService: AuthenticationService, public authService: AuthenticationService,
@ -192,11 +196,18 @@ export class GalleryNavigatorComponent {
@HostListener('window:scroll') @HostListener('window:scroll')
onScroll(): void { onScroll(): void {
if (this.lastScroll < PageHelper.ScrollY) { // scroll down const scrollPosition = PageHelper.ScrollY;
this.showFilters = false; if (this.lastScroll.any < scrollPosition) { // scroll down
this.dropdown.hide(); //hide delay
if (this.lastScroll.up < scrollPosition - window.innerHeight * Config.Gallery.NavBar.NavbarShowHideDelay) {
this.showFilters = false;
this.dropdown.hide();
}
this.lastScroll.down = scrollPosition;
} else if (this.lastScroll.any > scrollPosition) {
this.lastScroll.up = scrollPosition;
} }
this.lastScroll = PageHelper.ScrollY; this.lastScroll.any = scrollPosition;
} }
} }