mobile: fullscreen editor on virtual keyboard open
Hunter
Friday, July 25th, 2025 at 10:24 PM
136 }
137 }
138
139 + /* Mobile keyboard state - hide preview when keyboard is open */
140 + @media (pointer: coarse), (pointer: none) {
141 + body.mobile-keyboard-open .preview-pane {
142 + display: none;
143 + }
144 +
145 + body.mobile-keyboard-open .editor-pane {
146 + height: var(--visible-height, 100vh);
147 + order: 1;
148 + }
149 + }
150 +
151 </style>
152 </head>
153 <body>
431 // Focus the editor
432 editorView.focus();
433
434 + // Setup mobile keyboard detection
435 + setupMobileKeyboardDetection();
436 +
437 // Global keydown handler for Cmd+F toggle
438 document.addEventListener('keydown', function(e) {
439 if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
443 });
444 }
445
446 + // Mobile keyboard detection
447 + let initialViewportHeight = window.visualViewport ? window.visualViewport.height : window.innerHeight;
448 + let keyboardOpenThreshold = 150; // pixels
449 +
450 + function isMobileDevice() {
451 + return window.matchMedia("(pointer: coarse), (pointer: none)").matches;
452 + }
453 +
454 + function handleViewportChange() {
455 + if (!isMobileDevice()) return;
456 +
457 + const currentHeight = window.visualViewport ? window.visualViewport.height : window.innerHeight;
458 + const heightDifference = initialViewportHeight - currentHeight;
459 + const isKeyboardOpen = heightDifference > keyboardOpenThreshold;
460 +
461 + if (isKeyboardOpen) {
462 + document.body.classList.add('mobile-keyboard-open');
463 + // Set CSS custom property for the visible height
464 + document.documentElement.style.setProperty('--visible-height', `${currentHeight}px`);
465 + } else {
466 + document.body.classList.remove('mobile-keyboard-open');
467 + // Reset to full viewport height
468 + document.documentElement.style.setProperty('--visible-height', '100vh');
469 + }
470 + }
471 +
472 + // Listen for viewport changes
473 + if (window.visualViewport) {
474 + window.visualViewport.addEventListener('resize', handleViewportChange);
475 + } else {
476 + window.addEventListener('resize', handleViewportChange);
477 + }
478 +
479 + // Also listen for focus/blur events on the editor for additional reliability
480 + function setupMobileKeyboardDetection() {
481 + if (!isMobileDevice() || !editorView) return;
482 +
483 + const editorElement = editorView.dom;
484 +
485 + editorElement.addEventListener('focusin', () => {
486 + setTimeout(handleViewportChange, 300); // Delay to allow keyboard animation
487 + });
488 +
489 + editorElement.addEventListener('focusout', () => {
490 + setTimeout(handleViewportChange, 300); // Delay to allow keyboard animation
491 + });
492 + }
493 +
494 // Initialize when page loads
495 initializeCodeMirror();
496