Hide Obsidian app header when the softkeyboard is open

Share & showcase
,
2

While making it so the cursor changes colors based on Vim operating mode with a combination of JavaScript and CSS, I realized I can do a similar thing here.

const capacitorapp = window.Capacitor?.Plugins?.App;
export async function invoke(app) {
	let keyboardopen = false;
	if (capacitorapp && capacitorapp.addListener) {
		window.Capacitor?.Plugins?.Keyboard?.addListener('keyboardWillShow', () => {
			keyboardopen = true;
			if (document.activeElement.className == 'view-header-title') {
				if (!document.activeElement.onblur) {
					document.activeElement.onblur = function() {
						if (keyboardopen) document.body.style.setProperty('--headerview', 'none');
					};
				}
				return;
			}
			document.body.style.setProperty('--headerview', 'none');
		});

		window.Capacitor?.Plugins?.Keyboard?.addListener('keyboardWillHide', () => {
			keyboardopen = false;
			document.body.style.setProperty('--headerview', 'flex');
		});
	}
}

body {
  --headerview: flex;
}

.workspace-leaf-content[data-type="markdown"] .view-header {
	display: var(--headerview) !important;
}

This works more consistently than the previous script. I was using the previous one and noticed it got a little buggy when going from tablet mode to phone mode on my foldable. Maybe because it targeted all .view-header instead of .view.header that specifically have data-type="markdown" in their parent .workspace-leaf-content[1].

This version also doesn’t hide the app header when the keyboard opens if you tap on the app header to edit the note title.

  1. Also this version doesn’t have to iterate through all of the .view-header programmatically. ↩︎