feat: refine earth hud panel behaviors and news board

frontend/public/earth/js/hud-panels.js

@@ -0,0 +1,233 @@
+const DEFAULT_COLLAPSED_CLASS = "hud-panel--collapsed";
+const DEFAULT_HIDDEN_CLASS = "hud-panel-hidden";
+const EXPAND_DIRECTION_BUFFER_PX = 20;
+
+function clampExpandDirection(direction) {
+  return direction === "up" ? "up" : "down";
+}
+
+function resolveElement(target, root = document) {
+  if (!target) return null;
+  if (target instanceof HTMLElement) return target;
+  if (typeof target === "string") {
+    return root.querySelector(target);
+  }
+  return null;
+}
+
+function pickExpandDirection({
+  headerRect,
+  expandedHeight,
+  preferredDirection,
+  currentDirection,
+}) {
+  const spaceAbove = Math.max(0, headerRect.top);
+  const spaceBelow = Math.max(0, window.innerHeight - headerRect.bottom);
+  const preferred = clampExpandDirection(preferredDirection);
+  const fitsAbove = expandedHeight <= spaceAbove;
+  const fitsBelow = expandedHeight <= spaceBelow;
+  const bufferedFitsBelow = expandedHeight + EXPAND_DIRECTION_BUFFER_PX <= spaceBelow;
+  const activeDirection = clampExpandDirection(currentDirection ?? preferred);
+
+  // Hysteresis:
+  // - if we're already in "up", keep it until bottom space drops below h
+  // - if we're already in "down", keep it until bottom space grows beyond h + 20
+  if (activeDirection === "up" && spaceBelow > expandedHeight && fitsAbove) {
+    return "up";
+  }
+
+  if (activeDirection === "down" && spaceBelow < expandedHeight + EXPAND_DIRECTION_BUFFER_PX && fitsBelow) {
+    return "down";
+  }
+
+  // Main contract:
+  // d = spaceBelow, h = expandedHeight
+  // - d > h + 20 => up
+  // - d <= h + 20 => down
+  // Only fall back when the preferred side cannot actually fit.
+  if (bufferedFitsBelow && fitsAbove) return "up";
+  if (!bufferedFitsBelow && fitsBelow) return "down";
+  if (fitsAbove && fitsBelow) return preferred;
+  if (fitsAbove) return "up";
+  if (fitsBelow) return "down";
+  return spaceAbove > spaceBelow ? "up" : "down";
+}
+
+function getCollapseButtonState({ collapsed, direction, expandLabel, collapseLabel }) {
+  // The arrow always describes the next action and must stay aligned with the
+  // real expansion direction chosen by the controller. Panels should not add
+  // their own extra CSS rotation on top of this mapping.
+  if (collapsed) {
+    return {
+      title: expandLabel,
+      icon: direction === "up" ? "expand_less" : "expand_more",
+    };
+  }
+
+  return {
+    title: collapseLabel,
+    icon: direction === "up" ? "expand_more" : "expand_less",
+  };
+}
+
+export function createHUDPanel({
+  panel,
+  header,
+  body,
+  collapseBtn,
+  bodyCollapsedClass = "",
+  preferredDirection = "down",
+  collapsedClass = DEFAULT_COLLAPSED_CLASS,
+  hiddenClass = DEFAULT_HIDDEN_CLASS,
+  expandLabel = "展开",
+  collapseLabel = "折叠",
+}) {
+  const panelEl = resolveElement(panel);
+  const headerEl = resolveElement(header, panelEl ?? document);
+  const bodyEl = resolveElement(body, panelEl ?? document);
+  const collapseBtnEl = resolveElement(collapseBtn, panelEl ?? document);
+
+  if (!(panelEl instanceof HTMLElement) || !(headerEl instanceof HTMLElement) || !(bodyEl instanceof HTMLElement)) {
+    return {
+      panel: panelEl,
+      header: headerEl,
+      body: bodyEl,
+      collapseBtn: collapseBtnEl,
+      setCollapsed() {},
+      setVisible() {},
+      syncLayout() {},
+      destroy() {},
+      isCollapsed() {
+        return false;
+      },
+      isVisible() {
+        return false;
+      },
+      getExpandDirection() {
+        return clampExpandDirection(preferredDirection);
+      },
+    };
+  }
+
+  let currentDirection = clampExpandDirection(preferredDirection);
+
+  const shouldAnchorBottomDuringToggle = () =>
+    panelEl.dataset.dragged === "true" && typeof panelEl.style.top === "string" && panelEl.style.top !== "";
+
+  const compensateTopForBottomAnchor = (beforeBottom) => {
+    if (!shouldAnchorBottomDuringToggle()) return;
+    const afterBottom = panelEl.getBoundingClientRect().bottom;
+    const delta = afterBottom - beforeBottom;
+    if (delta === 0) return;
+    panelEl.style.top = `${parseFloat(panelEl.style.top) - delta}px`;
+  };
+
+  const syncDirection = () => {
+    const expandedHeight = Math.max(bodyEl.scrollHeight, bodyEl.getBoundingClientRect().height);
+    const nextDirection = pickExpandDirection({
+      headerRect: headerEl.getBoundingClientRect(),
+      expandedHeight,
+      preferredDirection,
+      currentDirection,
+    });
+
+    currentDirection = nextDirection;
+    panelEl.classList.toggle("hud-panel--expand-up", nextDirection === "up");
+    panelEl.classList.toggle("hud-panel--expand-down", nextDirection !== "up");
+    panelEl.dataset.expandDirection = nextDirection;
+  };
+
+  const syncButton = () => {
+    if (!(collapseBtnEl instanceof HTMLElement)) return;
+    const iconEl = collapseBtnEl.querySelector(".material-symbols-rounded");
+    const { title, icon } = getCollapseButtonState({
+      collapsed: panelEl.classList.contains(collapsedClass),
+      direction: currentDirection,
+      expandLabel,
+      collapseLabel,
+    });
+
+    collapseBtnEl.title = title;
+    collapseBtnEl.setAttribute("aria-label", title);
+    collapseBtnEl.dataset.expandDirection = currentDirection;
+    if (iconEl) {
+      iconEl.textContent = icon;
+    }
+  };
+
+  const syncLayout = () => {
+    syncDirection();
+    syncButton();
+  };
+
+  const setCollapsed = (collapsed) => {
+    syncDirection();
+    const nextCollapsed = Boolean(collapsed);
+    const shouldCompensate = currentDirection === "up" && shouldAnchorBottomDuringToggle();
+    const bottomBefore = shouldCompensate ? panelEl.getBoundingClientRect().bottom : 0;
+
+    if (shouldCompensate) {
+      bodyEl.style.transition = "none";
+    }
+
+    panelEl.classList.toggle(collapsedClass, nextCollapsed);
+    if (bodyCollapsedClass) {
+      bodyEl.classList.toggle(bodyCollapsedClass, nextCollapsed);
+    }
+
+    if (shouldCompensate) {
+      void panelEl.offsetHeight;
+      compensateTopForBottomAnchor(bottomBefore);
+      requestAnimationFrame(() => {
+        bodyEl.style.transition = "";
+      });
+    }
+
+    syncButton();
+  };
+
+  const setVisible = (visible) => {
+    panelEl.classList.toggle(hiddenClass, !visible);
+    if (visible) {
+      syncLayout();
+    }
+  };
+
+  const handleViewportChange = () => {
+    if (!panelEl.classList.contains(collapsedClass) && !panelEl.classList.contains(hiddenClass)) {
+      syncLayout();
+    }
+  };
+
+  window.addEventListener("resize", handleViewportChange);
+  document.addEventListener("pointerup", handleViewportChange);
+
+  syncLayout();
+
+  return {
+    panel: panelEl,
+    header: headerEl,
+    body: bodyEl,
+    collapseBtn: collapseBtnEl,
+    setCollapsed,
+    setVisible,
+    syncLayout,
+    destroy() {
+      window.removeEventListener("resize", handleViewportChange);
+      document.removeEventListener("pointerup", handleViewportChange);
+    },
+    isCollapsed() {
+      return panelEl.classList.contains(collapsedClass);
+    },
+    isVisible() {
+      return !panelEl.classList.contains(hiddenClass);
+    },
+    getExpandDirection() {
+      return currentDirection;
+    },
+  };
+}
+
+export function setupCollapsibleHudPanel(options) {
+  return createHUDPanel(options);
+}