commit 40ccc4aebbc6e2e7c82289e023a9055f8b565a56
parent 7151c6e044deee31503cf0c639333ee3e1cab042
Author: Hunter
Date: Fri, 25 Jul 2025 22:24:40 -0400
mobile: fullscreen editor on virtual keyboard open
Diffstat:
| M | index.html | | | 63 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
1 file changed, 63 insertions(+), 0 deletions(-)
diff --git a/index.html b/index.html
@@ -136,6 +136,18 @@
}
}
+ /* Mobile keyboard state - hide preview when keyboard is open */
+ @media (pointer: coarse), (pointer: none) {
+ body.mobile-keyboard-open .preview-pane {
+ display: none;
+ }
+
+ body.mobile-keyboard-open .editor-pane {
+ height: var(--visible-height, 100vh);
+ order: 1;
+ }
+ }
+
</style>
</head>
<body>
@@ -419,6 +431,9 @@
// Focus the editor
editorView.focus();
+ // Setup mobile keyboard detection
+ setupMobileKeyboardDetection();
+
// Global keydown handler for Cmd+F toggle
document.addEventListener('keydown', function(e) {
if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
@@ -428,6 +443,54 @@
});
}
+ // Mobile keyboard detection
+ let initialViewportHeight = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+ let keyboardOpenThreshold = 150; // pixels
+
+ function isMobileDevice() {
+ return window.matchMedia("(pointer: coarse), (pointer: none)").matches;
+ }
+
+ function handleViewportChange() {
+ if (!isMobileDevice()) return;
+
+ const currentHeight = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+ const heightDifference = initialViewportHeight - currentHeight;
+ const isKeyboardOpen = heightDifference > keyboardOpenThreshold;
+
+ if (isKeyboardOpen) {
+ document.body.classList.add('mobile-keyboard-open');
+ // Set CSS custom property for the visible height
+ document.documentElement.style.setProperty('--visible-height', `${currentHeight}px`);
+ } else {
+ document.body.classList.remove('mobile-keyboard-open');
+ // Reset to full viewport height
+ document.documentElement.style.setProperty('--visible-height', '100vh');
+ }
+ }
+
+ // Listen for viewport changes
+ if (window.visualViewport) {
+ window.visualViewport.addEventListener('resize', handleViewportChange);
+ } else {
+ window.addEventListener('resize', handleViewportChange);
+ }
+
+ // Also listen for focus/blur events on the editor for additional reliability
+ function setupMobileKeyboardDetection() {
+ if (!isMobileDevice() || !editorView) return;
+
+ const editorElement = editorView.dom;
+
+ editorElement.addEventListener('focusin', () => {
+ setTimeout(handleViewportChange, 300); // Delay to allow keyboard animation
+ });
+
+ editorElement.addEventListener('focusout', () => {
+ setTimeout(handleViewportChange, 300); // Delay to allow keyboard animation
+ });
+ }
+
// Initialize when page loads
initializeCodeMirror();