v0.2.6

src/web/js/95-bindings-boot.js

@@ -61,21 +61,44 @@ function bindPaneResizer(selector, preferenceKey, minPx, maxPx) {
   });
 }
 
+function toolbarMenuPopover(menu) {
+  return menu?._rustboxPopover || menu?.querySelector(".toolbar-menu-popover") || null;
+}
+
+function mountToolbarMenuPopover(menu) {
+  const popover = toolbarMenuPopover(menu);
+  if (!popover) return null;
+  menu._rustboxPopover = popover;
+  if (popover.parentElement !== document.body) document.body.append(popover);
+  popover.dataset.toolbarMenuOwner = menu.id || "toolbar-menu";
+  return popover;
+}
+
+function restoreToolbarMenuPopover(menu) {
+  const popover = toolbarMenuPopover(menu);
+  if (!popover || !menu?.isConnected || popover.parentElement !== document.body) return;
+  popover.removeAttribute("data-toolbar-menu-owner");
+  menu.append(popover);
+}
+
 function positionToolbarMenu(menu) {
   if (!menu?.open) return;
-  const popover = menu.querySelector(".toolbar-menu-popover");
+  const popover = mountToolbarMenuPopover(menu);
   const summary = menu.querySelector("summary");
   if (!popover || !summary) return;
   Object.assign(popover.style, { right: "auto", bottom: "auto" });
   const rect = summary.getBoundingClientRect();
   const margin = 8;
   const mobile = matchMedia("(max-width: 560px)").matches;
-  const width = Math.min(Math.max(mobile ? 180 : 164, popover.offsetWidth || 164), window.innerWidth - (margin * 2));
+  const viewportWidth = window.visualViewport?.width || window.innerWidth;
+  const viewportHeight = window.visualViewport?.height || window.innerHeight;
+  popover.style.maxWidth = `${Math.max(120, viewportWidth - (margin * 2))}px`;
+  const width = Math.min(Math.max(mobile ? 180 : 164, popover.offsetWidth || 164), viewportWidth - (margin * 2));
   const height = popover.offsetHeight || 80;
-  let left = Math.min(rect.left, window.innerWidth - width - margin);
+  let left = Math.min(rect.left, viewportWidth - width - margin);
   left = Math.max(margin, left);
   let top = rect.bottom + 5;
-  if (top + height > window.innerHeight - margin) top = Math.max(margin, rect.top - height - 5);
+  if (top + height > viewportHeight - margin) top = Math.max(margin, rect.top - height - 5);
   popover.style.left = `${Math.round(left)}px`;
   popover.style.top = `${Math.round(top)}px`;
 }
@@ -83,12 +106,19 @@ function positionToolbarMenu(menu) {
 function bindToolbarMenus() {
   const menus = $$(".toolbar-menu");
   menus.forEach((menu) => menu.addEventListener("toggle", () => {
-    if (!menu.open) return;
+    if (!menu.open) {
+      restoreToolbarMenuPopover(menu);
+      return;
+    }
     menus.forEach((other) => { if (other !== menu) other.open = false; });
+    mountToolbarMenuPopover(menu);
     requestAnimationFrame(() => positionToolbarMenu(menu));
   }));
-  window.addEventListener("resize", () => menus.forEach(positionToolbarMenu), { passive: true });
-  document.addEventListener("scroll", () => menus.forEach(positionToolbarMenu), true);
+  const reposition = () => menus.forEach(positionToolbarMenu);
+  window.addEventListener("resize", reposition, { passive: true });
+  window.visualViewport?.addEventListener("resize", reposition, { passive: true });
+  window.visualViewport?.addEventListener("scroll", reposition, { passive: true });
+  document.addEventListener("scroll", reposition, true);
 }
 
 function bindEvents() {
@@ -203,7 +233,20 @@ function bindEvents() {
   $("#bulk-tag-select").addEventListener("change", async (event) => { const tagId = event.target.value; event.target.value = ""; if (tagId) await bulkAddTag(tagId); });
   $("#select-mode-btn").addEventListener("click", () => setSelectionMode(!state.selectionMode));
   $("#selection-done").addEventListener("click", () => setSelectionMode(false));
-  $("#refresh-btn").addEventListener("click", () => loadFolders(false));
+  $("#refresh-btn").addEventListener("click", async () => {
+    const button = $("#refresh-btn");
+    setBusy(button, true);
+    try {
+      const folderRefresh = refreshFolderListOnly();
+      if (state.searchContext) {
+        await Promise.all([folderRefresh, runSearch(new URLSearchParams(state.searchContext.params), state.searchContext.label, { restoreScrollTop: state.searchContext.scrollTop })]);
+      } else {
+        await Promise.all([folderRefresh, loadMessages(true, { force: true })]);
+      }
+    } finally {
+      setBusy(button, false);
+    }
+  });
   $("#message-sort").addEventListener("change", async (event) => {
     const value = event.target.value;
     state.mailPrefs.default_sort = value;
@@ -445,7 +488,7 @@ function bindEvents() {
   bindEditor();
   document.addEventListener("click", (event) => {
     if (!event.target.closest("#context-menu")) hideContextMenu();
-    if (!event.target.closest(".toolbar-menu")) $$(".toolbar-menu[open]").forEach((menu) => { menu.open = false; });
+    if (!event.target.closest(".toolbar-menu, .toolbar-menu-popover[data-toolbar-menu-owner]")) $$(".toolbar-menu[open]").forEach((menu) => { menu.open = false; });
   });
   window.addEventListener("blur", hideContextMenu);
   document.addEventListener("scroll", hideContextMenu, true);