[Share] Focused Mode for Zotero PDF Reader (Full Screen + Zen)

[dschaehi]

Description

Switches to full screen mode and removes all distracting elements, i.e. both sidebars, the annotation toolbar and the tab bar.

Tested on Zotero 7.1 beta on MacOS

Exists as a standalone plugin: https://github.com/dschaehi/Zotero-Focused-Mode

Vibe-coded with the help of GPT o3 and the following scripts and the plugin:

• [Share] Fullscreen Mode #385
• [Share] Toggle Side Panes (Library/Reader) #169
• https://github.com/wmstack/Zotero-Toggle-Bars

Event

None

Operation

Script

Data

/**
 * Focus‑Mode Action Script for Zotero
 * Bind to F11 (Win/Linux) or Ctrl⌘F (macOS).
  * @author Jae Hee Lee
 * @usage 
 * @link https://github.com/windingwind/zotero-actions-tags/discussions/496
 * @see https://github.com/windingwind/zotero-actions-tags/discussions/496
 */
(function () {
  const Zotero = require('Zotero');
  const win    = Zotero.getMainWindow();
  const doc    = win.document;

  /* flag */
  let on = doc.documentElement.classList.contains('fullscreen');
  let t  = null;

  /* ------------------------------------------------------------------
     1.  per‑reader iframe (annotation bar, left nav, top gap)
  ------------------------------------------------------------------ */
  function readerCSS(enable) {
    const ID = 'focus-reader-style';
    Zotero.Reader?._readers.forEach(r => {
      const w = r?._iframeWindow;
      if (!w) return;
      const rDoc = w.document;
      let style  = rDoc.getElementById(ID);

      if (enable && !style) {
        style = rDoc.createElement('style');
        style.id  = ID;
        style.textContent = `
          /* annotation bar */
          .toolbar    { display:none !important; }
          .view-popup { margin-top:-40px !important; }

          /* left sidebar */
          #sidebarContainer { display:none !important; }

          /* remove 40‑px top gap */
          #split-view, #viewerContainer { top:0 !important; }

          /* reclaim full width inside split‑view */
          #split-view { left:0 !important; right:0 !important; }
        `;
        rDoc.head.appendChild(style);
      } else if (!enable && style) {
        style.remove();
      }
    });
  }

  /* ------------------------------------------------------------------
     2.  main‑window CSS (chrome + right context pane)
  ------------------------------------------------------------------ */
  function ensureMainCSS() {
    if (doc.getElementById('focus-main-style')) return;

    const s = doc.createElement('style');
    s.id = 'focus-main-style';
    s.textContent = `
      .fullscreen { margin:0; padding:0; overflow:hidden; }
      .fullscreen #mainPane { width:100vw; height:100vh; }

      /* hide Zotero chrome */
      .fullscreen .zotero-toolbar,
      .fullscreen .zotero-tb-button,
      .fullscreen #zotero-title-bar,
      .fullscreen #main-menubar,
      .fullscreen #titlebar,
      .fullscreen .topbar { display:none !important; }

      /* hide right context pane WITHOUT changing splitter state */
      .fullscreen #zotero-context-splitter,
      .fullscreen #zotero-context-container,
      .fullscreen #zotero-context-pane,
      .fullscreen #zotero-context {         /* covers all Zotero 6/7 id's */
        display:none !important;
        width:0 !important;
        min-width:0 !important;
        max-width:0 !important;
      }
    `;
    doc.documentElement.appendChild(s);
  }

  /* ------------------------------------------------------------------
     3.  toggle
  ------------------------------------------------------------------ */
  function toggle() {
    if (t) clearTimeout(t);
    t = setTimeout(() => {
      if (on) {
        /* leave */
        win.fullScreen = false;
        doc.documentElement.classList.remove('fullscreen');
        readerCSS(false);
        on = false;
      } else {
        /* enter */
        win.fullScreen = true;
        doc.documentElement.classList.add('fullscreen');
        readerCSS(true);
        on = true;
      }
    }, 200);
  }

  /* ------------------------------------------------------------------
     4.  bootstrap
  ------------------------------------------------------------------ */
  try {
    doc.documentElement.setAttribute('drawintitlebar', true);
    doc.documentElement.setAttribute('tabsintitlebar', true);
    doc.documentElement.setAttribute(
      'chromemargin',
      Zotero.isMac ? '0,-1,-1,-1' : '0,2,2,2'
    );

    ensureMainCSS();
    toggle();
  } catch (e) {
    Zotero.debug('Focus‑Mode script error: ' + e);
  }
})();

Anything else

No response