Улучшить раскладку чата при клавиатуре

2026-08-20 07:12:46 +03:00
parent 4656a03ea9
commit 8741be6cba
6 changed files with 529 additions and 104 deletions
@@ -82,7 +82,7 @@ import * as solanaUsersInitView from './pages/solana-users-init-view.js';
 import * as solanaRpcCheckView from './pages/solana-rpc-check-view.js';
 import * as messagesList from './pages/messages-list.js';
 import * as contactSearchView from './pages/contact-search-view.js';
-import * as chatView from './pages/chat-view.js?v=202607152145';
+import * as chatView from './pages/chat-view.js?v=202608191738';
 import * as userProfileView from './pages/user-profile-view.js';
 import * as channelsList from './pages/channels-list.js';
 import * as channelView from './pages/channel-view.js';
@@ -221,6 +221,62 @@ function setKeyboardOffsetPx(valuePx = 0) {
  setShellMetricVar('--keyboard-offset', valuePx);
 }

+let stableViewportHeightPx = Math.max(
+  1,
+  Math.round(window.innerHeight || document.documentElement?.clientHeight || window.visualViewport?.height || 0),
+);
+
+function isTextEntryFocused() {
+  const active = document.activeElement;
+  return active instanceof HTMLTextAreaElement
+    || (active instanceof HTMLInputElement && !['button', 'checkbox', 'radio', 'range', 'file', 'submit', 'reset'].includes(active.type));
+}
+
+function syncViewportMetrics() {
+  if (!appShellEl) return;
+  const viewport = window.visualViewport || null;
+  const currentLayoutHeightPx = Math.max(
+    1,
+    Math.round(window.innerHeight || document.documentElement?.clientHeight || viewport?.height || 0),
+  );
+  const widthPx = Math.max(1, Math.round(window.innerWidth || viewport?.width || 0));
+  const offsetLeftPx = Math.max(0, Math.round(viewport?.offsetLeft || 0));
+  const textEntryFocused = isTextEntryFocused();
+
+  // Android Chrome/Firefox могут уменьшать и visualViewport, и innerHeight.
+  // Поэтому высоту экрана до открытия клавиатуры запоминаем отдельно и во
+  // время ввода НЕ переписываем ею app-shell. Иначе toolbar тоже поднимется.
+  if (!textEntryFocused) {
+    stableViewportHeightPx = Math.max(stableViewportHeightPx, currentLayoutHeightPx);
+    // После поворота/реального resize разрешаем уменьшить базу, но только
+    // когда никакое текстовое поле не держит экранную клавиатуру.
+    if (Math.abs(stableViewportHeightPx - currentLayoutHeightPx) > 220) {
+      stableViewportHeightPx = currentLayoutHeightPx;
+    }
+  } else if (currentLayoutHeightPx > stableViewportHeightPx) {
+    stableViewportHeightPx = currentLayoutHeightPx;
+  }
+
+  const visualBottomPx = viewport
+    ? Math.round((viewport.offsetTop || 0) + viewport.height)
+    : currentLayoutHeightPx;
+  const rawKeyboardOffsetPx = Math.max(
+    0,
+    stableViewportHeightPx - Math.min(currentLayoutHeightPx, visualBottomPx),
+  );
+  // Address bar Android обычно даёт небольшую дельту; клавиатура — заметно больше.
+  const keyboardOffsetPx = textEntryFocused && rawKeyboardOffsetPx >= 100
+    ? rawKeyboardOffsetPx
+    : 0;
+
+  setShellMetricVar('--app-viewport-width', widthPx);
+  setShellMetricVar('--app-viewport-height', keyboardOffsetPx > 0 ? stableViewportHeightPx : currentLayoutHeightPx);
+  setShellMetricVar('--app-viewport-offset-top', 0);
+  setShellMetricVar('--app-viewport-offset-left', offsetLeftPx);
+  setKeyboardOffsetPx(keyboardOffsetPx);
+  appShellEl.classList.toggle('keyboard-open', keyboardOffsetPx > 0);
+}
+
 function attachSlotHeightObserver(slotEl, cssVarName) {
  if (!slotEl || typeof ResizeObserver !== 'function') return null;
  const sync = () => {
@@ -237,6 +293,55 @@ const topbarHeightObserver = attachSlotHeightObserver(topbarEl, '--topbar-height
 const composerHeightObserver = attachSlotHeightObserver(composerEl, '--composer-height');
 const toolbarHeightObserver = attachSlotHeightObserver(toolbarEl, '--toolbar-height');

+syncViewportMetrics();
+window.visualViewport?.addEventListener('resize', syncViewportMetrics);
+window.visualViewport?.addEventListener('scroll', syncViewportMetrics);
+window.addEventListener('resize', syncViewportMetrics);
+document.addEventListener('focusin', () => {
+  requestAnimationFrame(syncViewportMetrics);
+  // Samsung One UI / Firefox can finish the OSK viewport transition several
+  // frames after focus. Re-sample through the animation instead of trusting
+  // the first resize event.
+  window.setTimeout(syncViewportMetrics, 80);
+  window.setTimeout(syncViewportMetrics, 180);
+  window.setTimeout(syncViewportMetrics, 320);
+});
+document.addEventListener('focusout', () => {
+  window.setTimeout(syncViewportMetrics, 80);
+  window.setTimeout(syncViewportMetrics, 220);
+});
+
+// Optional on-device viewport diagnostics: append ?keyboard-debug=1 to the URL.
+if (new URLSearchParams(window.location.search).get('keyboard-debug') === '1') {
+  const debugEl = document.createElement('pre');
+  debugEl.id = 'keyboard-viewport-debug';
+  Object.assign(debugEl.style, {
+    position: 'fixed', top: '4px', right: '4px', zIndex: '999999', margin: '0',
+    maxWidth: '94vw', padding: '6px 8px', fontSize: '10px', lineHeight: '1.25',
+    color: '#fff', background: 'rgba(0,0,0,.82)', pointerEvents: 'none',
+    whiteSpace: 'pre-wrap',
+  });
+  document.body.append(debugEl);
+  const syncDebug = () => {
+    const vv = window.visualViewport;
+    debugEl.textContent = [
+      `innerHeight=${window.innerHeight}`,
+      `clientHeight=${document.documentElement.clientHeight}`,
+      `vv.height=${vv ? Math.round(vv.height) : 'n/a'}`,
+      `vv.offsetTop=${vv ? Math.round(vv.offsetTop) : 'n/a'}`,
+      `stable=${stableViewportHeightPx}`,
+      `keyboard=${getComputedStyle(appShellEl).getPropertyValue('--keyboard-offset').trim()}`,
+      `focused=${isTextEntryFocused()}`,
+    ].join(' | ');
+  };
+  window.visualViewport?.addEventListener('resize', syncDebug);
+  window.visualViewport?.addEventListener('scroll', syncDebug);
+  window.addEventListener('resize', syncDebug);
+  document.addEventListener('focusin', () => window.setTimeout(syncDebug, 330));
+  document.addEventListener('focusout', () => window.setTimeout(syncDebug, 230));
+  syncDebug();
+}
+
 function clearSlot(slotEl, cssVarName) {
  if (!slotEl) return;
  slotEl.innerHTML = '';