andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Make arrow rotate sensibly

Browse source
This commit is contained in:
Andras Schmelczer 2022-10-04 15:05:58 +02:00
parent ce3697de54
commit e86a5977b0
No known key found for this signature in database
GPG key ID: 0EA1BC97D0AB076E
5 changed files with 53 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/page/up-arrow-button/up-arrow-button.ts
View file

@ -6,7 +6,11 @@ export class UpArrowButton extends PageElement {
private static readonly interval = 50;
private timeToLive = 0;
public constructor(private scrollTarget: PageElement, label: string) {
public constructor(
private scrollTarget: PageElement,
private turningThreshold: PageElement,
label: string
) {
super(generate(label));
this.htmlRoot.addEventListener('click', this.scrollToTop.bind(this));
@ -15,7 +19,6 @@ export class UpArrowButton extends PageElement {
this.timeToLive = Math.max(0, this.timeToLive - UpArrowButton.interval);
if (this.timeToLive == 0) {
this.htmlRoot.style.opacity = '0';
this.htmlRoot.style.visibility = 'hidden';
}
}, UpArrowButton.interval);
}
@ -24,19 +27,31 @@ export class UpArrowButton extends PageElement {
this.scrollTarget.htmlRoot.addEventListener('scroll', () => {
this.timeToLive = UpArrowButton.defaultTimeToLive;
this.htmlRoot.style.opacity = '1';
this.htmlRoot.style.visibility = 'visible';
});
if (this.scrollTarget.htmlRoot.scrollTop == 0) {
this.timeToLive = 0;
this.htmlRoot.addEventListener('mouseover', () => {
this.timeToLive = UpArrowButton.defaultTimeToLive;
this.htmlRoot.style.opacity = '1';
});
new IntersectionObserver((e) => {
if (e[0].isIntersecting) {
this.htmlRoot.classList.remove('down');
} else {
this.htmlRoot.classList.add('down');
}
}).observe(this.turningThreshold.htmlRoot);
super.initialize();
}
private scrollToTop() {
this.scrollTarget.htmlRoot.scrollTo({
top: this.htmlRoot.classList.contains('down')
? this.scrollTarget.htmlRoot.scrollHeight
: 0,
left: 0,
behavior: 'smooth',
});
}
private scrollToTop(e: MouseEvent) {
if (this.timeToLive > 0) {
this.scrollTarget.htmlRoot.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
} else {
e.preventDefault();
}
}
}