Android task entry fix
This commit is contained in:
@ -25,6 +25,7 @@ export class TaskEditorModal extends Modal {
|
||||
private selectedFile: TFile | null = null;
|
||||
private fileLabel: HTMLSpanElement | null = null;
|
||||
private keyboardHandler: (() => void) | null = null;
|
||||
private keyboardResetHandler: (() => void) | null = null;
|
||||
|
||||
constructor(
|
||||
app: App,
|
||||
@ -46,20 +47,42 @@ export class TaskEditorModal extends Modal {
|
||||
const { contentEl } = this;
|
||||
contentEl.addClass('yaotp-editor-modal');
|
||||
|
||||
// On Android the on-screen keyboard shrinks the visual viewport but not
|
||||
// the layout viewport, so a fixed-position modal stays centered in the
|
||||
// full layout height and gets half-covered. We listen for visual-viewport
|
||||
// resize events and pull the modal container's bottom edge up to match,
|
||||
// keeping the modal in the visible area above the keyboard.
|
||||
if (window.visualViewport) {
|
||||
this.keyboardHandler = () => {
|
||||
const vv = window.visualViewport!;
|
||||
const keyboardHeight = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
|
||||
this.containerEl.style.bottom = `${keyboardHeight}px`;
|
||||
this.modalEl.style.maxHeight = keyboardHeight > 0 ? `${vv.height * 0.9}px` : '';
|
||||
};
|
||||
window.visualViewport.addEventListener('resize', this.keyboardHandler);
|
||||
// On Android the on-screen keyboard doesn't resize the layout viewport, so
|
||||
// the fixed-position modal container stays full-height and the modal ends
|
||||
// up centered behind the keyboard. We fix this by:
|
||||
// 1. On textarea focus (+ a short delay for the keyboard animation),
|
||||
// read the visual viewport height and shrink the container to that
|
||||
// size, then align the modal to the top of the container.
|
||||
// 2. On blur, reset everything.
|
||||
// We also listen to visualViewport and window resize as supplementary
|
||||
// triggers in case the keyboard appears/disappears without a focus change.
|
||||
const adjust = () => {
|
||||
const vv = window.visualViewport;
|
||||
const availableHeight = vv ? vv.height : window.innerHeight;
|
||||
const keyboardHeight = Math.max(0, window.innerHeight - availableHeight);
|
||||
if (keyboardHeight > 50) {
|
||||
this.containerEl.style.height = `${availableHeight}px`;
|
||||
this.containerEl.style.alignItems = 'flex-start';
|
||||
this.containerEl.style.paddingTop = '8px';
|
||||
this.modalEl.style.maxHeight = `${availableHeight - 16}px`;
|
||||
} else {
|
||||
this.containerEl.style.height = '';
|
||||
this.containerEl.style.alignItems = '';
|
||||
this.containerEl.style.paddingTop = '';
|
||||
this.modalEl.style.maxHeight = '';
|
||||
}
|
||||
};
|
||||
|
||||
this.keyboardHandler = adjust;
|
||||
this.keyboardResetHandler = () => {
|
||||
this.containerEl.style.height = '';
|
||||
this.containerEl.style.alignItems = '';
|
||||
this.containerEl.style.paddingTop = '';
|
||||
this.modalEl.style.maxHeight = '';
|
||||
};
|
||||
|
||||
window.visualViewport?.addEventListener('resize', adjust);
|
||||
window.addEventListener('resize', adjust);
|
||||
|
||||
// Title
|
||||
contentEl.createEl('h2', { text: 'Edit task' });
|
||||
@ -74,6 +97,8 @@ export class TaskEditorModal extends Modal {
|
||||
attr: { rows: '8', placeholder: 'Task title\n\nNotes…' },
|
||||
});
|
||||
this.textarea.value = initialValue;
|
||||
this.textarea.addEventListener('focus', () => setTimeout(adjust, 300));
|
||||
this.textarea.addEventListener('blur', () => setTimeout(adjust, 100));
|
||||
// Auto-focus
|
||||
setTimeout(() => this.textarea?.focus(), 50);
|
||||
|
||||
@ -129,8 +154,11 @@ export class TaskEditorModal extends Modal {
|
||||
onClose(): void {
|
||||
if (this.keyboardHandler) {
|
||||
window.visualViewport?.removeEventListener('resize', this.keyboardHandler);
|
||||
window.removeEventListener('resize', this.keyboardHandler);
|
||||
this.keyboardHandler = null;
|
||||
}
|
||||
this.keyboardResetHandler?.();
|
||||
this.keyboardResetHandler = null;
|
||||
this.contentEl.empty();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user