44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
|
import { ApplicationController } from './application_controller';
|
||
|
|
|
||
|
|
export class StickyTopController extends ApplicationController {
|
||
|
|
// Ajusts top of sticky top components when there is a sticky header.
|
||
|
|
|
||
|
|
connect(): void {
|
||
|
|
const header = document.getElementById('sticky-header');
|
||
|
|
|
||
|
|
if (!header) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.adjustTop(header);
|
||
|
|
|
||
|
|
window.addEventListener('resize', () => this.adjustTop(header));
|
||
|
|
|
||
|
|
this.listenHeaderMutations(header);
|
||
|
|
}
|
||
|
|
|
||
|
|
private listenHeaderMutations(header: HTMLElement) {
|
||
|
|
const config = { childList: true, subtree: true };
|
||
|
|
|
||
|
|
const callback: MutationCallback = (mutationsList) => {
|
||
|
|
for (const mutation of mutationsList) {
|
||
|
|
if (mutation.type === 'childList') {
|
||
|
|
this.adjustTop(header);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const observer = new MutationObserver(callback);
|
||
|
|
observer.observe(header, config);
|
||
|
|
}
|
||
|
|
|
||
|
|
private adjustTop(header: HTMLElement) {
|
||
|
|
const headerHeight = header.clientHeight;
|
||
|
|
|
||
|
|
if (headerHeight > 0) {
|
||
|
|
(this.element as HTMLElement).style.top = `${headerHeight + 8}px`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|