v0.0.5

src/web/js/40-messages-reader.js

@@ -1,4 +1,4 @@
-/* RustBox UI module: 40-messages-reader.js */
+
 async function loadMessages(reset = false, options = {}) {
   const list = $("#message-list");
   const restoreState = Boolean(options.restoreState);
@@ -117,7 +117,17 @@ function renderMessages() {
     flagButton.setAttribute("aria-label", flagButton.title);
     flagButton.innerHTML = svgIcon("star");
     flagButton.addEventListener("click", (event) => { event.stopPropagation(); quickUpdateMessageFlag(message, "\\Flagged", !flagged, flagged ? "Flag removed" : "Message flagged"); });
-    quick.append(readButton, flagButton);
+    const fullscreenButton = el("button", "message-quick-action message-fullscreen-action");
+    fullscreenButton.type = "button";
+    fullscreenButton.title = "Open full screen";
+    fullscreenButton.setAttribute("aria-label", fullscreenButton.title);
+    fullscreenButton.innerHTML = svgIcon("external-link");
+    fullscreenButton.addEventListener("click", async (event) => {
+      event.stopPropagation();
+      await openMessage(folder, message.uid);
+      enterReaderFullscreen();
+    });
+    quick.append(readButton, flagButton, fullscreenButton);
     icons.append(quick);
     if (Array.isArray(message.tags) && message.tags.length) {
       const wrap = el("span", "message-tags");
@@ -177,6 +187,84 @@ async function senderIsSavedContact(email) {
   }
 }
 
+
+function readerFullscreenUrl(detail = state.currentDetail) {
+  const url = new URL(location.href);
+  if (detail?.folder && Number.isFinite(Number(detail.uid))) {
+    url.searchParams.set("mail_folder", detail.folder);
+    url.searchParams.set("mail_uid", String(detail.uid));
+    url.searchParams.set("mail_fullscreen", "1");
+  }
+  return url;
+}
+
+function restoreReaderScroll() {
+  const reader = $("#reader-content");
+  if (!reader) return;
+  const top = Math.max(0, Number(state.readerScrollTopBeforeFullscreen) || 0);
+  requestAnimationFrame(() => { reader.scrollTop = top; });
+}
+
+function setReaderFullscreen(enabled, options = {}) {
+  const reader = $("#reader");
+  const button = $("#reader-fullscreen");
+  if (!reader || !button) return;
+  const next = Boolean(enabled);
+  if (next === reader.classList.contains("reader-fullscreen")) return;
+  if (next) {
+    state.readerScrollTopBeforeFullscreen = $("#reader-content")?.scrollTop || 0;
+    reader.classList.add("reader-fullscreen");
+    document.body.classList.add("reader-fullscreen-open");
+    button.setAttribute("aria-pressed", "true");
+    button.title = "Exit full screen";
+    button.setAttribute("aria-label", "Exit message full screen");
+    if (options.pushHistory !== false && state.currentDetail) {
+      history.pushState({ rustboxMailFullscreen: true, folder: state.currentDetail.folder, uid: state.currentDetail.uid }, "", readerFullscreenUrl());
+      state.readerFullscreenHistory = true;
+    }
+  } else {
+    reader.classList.remove("reader-fullscreen");
+    document.body.classList.remove("reader-fullscreen-open");
+    button.setAttribute("aria-pressed", "false");
+    button.title = "Open full screen";
+    button.setAttribute("aria-label", "Open message full screen");
+    state.readerFullscreenHistory = false;
+    if (options.keepUrl !== true && new URL(location.href).searchParams.get("mail_fullscreen") === "1") {
+      const url = new URL(location.href);
+      url.searchParams.delete("mail_fullscreen");
+      history.replaceState(history.state && history.state.rustboxMailFullscreen ? null : history.state, "", url);
+    }
+    restoreReaderScroll();
+  }
+}
+
+function enterReaderFullscreen() {
+  if (!state.currentDetail) return;
+  setReaderFullscreen(true);
+}
+
+function exitReaderFullscreen() {
+  if (!$("#reader")?.classList.contains("reader-fullscreen")) return;
+  if (state.readerFullscreenHistory) history.back();
+  else setReaderFullscreen(false, { pushHistory: false });
+}
+
+function toggleReaderFullscreen() {
+  if ($("#reader")?.classList.contains("reader-fullscreen")) exitReaderFullscreen();
+  else enterReaderFullscreen();
+}
+
+async function openMessageTarget(accountId, folder, uid, fullscreen = false) {
+  if (accountId && accountId !== state.accountId) await switchAccount(accountId);
+  if (folder && folder !== state.folder) {
+    state.folder = folder;
+    renderFolders();
+    await loadMessages(true);
+  }
+  if (folder && Number.isFinite(Number(uid))) await openMessage(folder, Number(uid));
+  if (fullscreen && state.currentDetail) setReaderFullscreen(true, { pushHistory: false });
+}
+
 async function openMessage(folder, uid) {
   clearTimeout(state.markReadTimer);
   state.markReadTimer = null;
@@ -756,6 +844,7 @@ async function importVcardAttachment(folder, uid, attachment) {
 function closeReader() {
   clearTimeout(state.markReadTimer);
   state.markReadTimer = null;
+  if ($("#reader")?.classList.contains("reader-fullscreen")) setReaderFullscreen(false, { pushHistory: false });
   $("#reader").classList.remove("mobile-open");
   $("#reader-empty").classList.remove("hidden");
   $("#reader-content").classList.add("hidden");