57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import { PageElement } from '../page-element';
|
|
import { generate } from './up-arrow-button.html';
|
|
|
|
export class UpArrowButton extends PageElement {
|
|
private static readonly defaultTimeToLive = 3500;
|
|
private static readonly interval = 50;
|
|
private timeToLive = 0;
|
|
|
|
public constructor(
|
|
private scrollTarget: PageElement,
|
|
private turningThreshold: PageElement,
|
|
label: string
|
|
) {
|
|
super(generate(label));
|
|
|
|
this.htmlRoot.addEventListener('click', this.scrollToTop.bind(this));
|
|
|
|
setInterval(() => {
|
|
this.timeToLive = Math.max(0, this.timeToLive - UpArrowButton.interval);
|
|
if (this.timeToLive == 0) {
|
|
this.htmlRoot.style.opacity = '0';
|
|
}
|
|
}, UpArrowButton.interval);
|
|
}
|
|
|
|
protected initialize() {
|
|
this.scrollTarget.htmlRoot.addEventListener('scroll', () => {
|
|
this.timeToLive = UpArrowButton.defaultTimeToLive;
|
|
this.htmlRoot.style.opacity = '1';
|
|
});
|
|
|
|
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',
|
|
});
|
|
}
|
|
}
|