|
// retoor <retoor@molodetz.nl>
|
|
|
|
export class MessagesLayout {
|
|
constructor() {
|
|
this.layout = document.querySelector(".messages-layout");
|
|
if (!this.layout) {
|
|
return;
|
|
}
|
|
this.thread = document.querySelector(".messages-thread");
|
|
this.input = document.querySelector('.messages-input-area input[name="content"]');
|
|
this.stackBreakpoint = 768;
|
|
this.minHeight = 320;
|
|
this.resize = this.resize.bind(this);
|
|
|
|
this.resize();
|
|
window.addEventListener("resize", this.resize);
|
|
window.addEventListener("orientationchange", this.resize);
|
|
|
|
this.scrollThreadToEnd();
|
|
if (this.input) {
|
|
this.input.focus({ preventScroll: true });
|
|
}
|
|
}
|
|
|
|
resize() {
|
|
if (window.innerWidth <= this.stackBreakpoint) {
|
|
this.layout.style.height = "";
|
|
return;
|
|
}
|
|
const top = this.layout.getBoundingClientRect().top;
|
|
const page = this.layout.closest(".page");
|
|
const bottomPadding = page ? parseFloat(getComputedStyle(page).paddingBottom) || 0 : 0;
|
|
const available = window.innerHeight - top - bottomPadding;
|
|
this.layout.style.height = `${Math.max(available, this.minHeight)}px`;
|
|
}
|
|
|
|
scrollThreadToEnd() {
|
|
if (this.thread) {
|
|
this.thread.scrollTop = this.thread.scrollHeight;
|
|
}
|
|
}
|
|
}
|