@open-file-viewer/core 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,133 @@
+# @open-file-viewer/core
+
+Framework-agnostic browser file preview core for Open File Viewer.
+
+Open File Viewer renders files inside your own DOM container instead of opening a new window. It supports images, PDF, Office documents, audio, video, text/code, archives, email, drawings, CAD, 3D and GIS formats through a plugin-based pipeline.
+
+- Website: https://open-file-viewer-workspace.void.app
+- GitHub: https://github.com/xushanpei/open-file-viewer
+- npm: https://www.npmjs.com/package/@open-file-viewer/core
+
+## Install
+
+```bash
+npm install @open-file-viewer/core
+```
+
+PDF preview requires `pdfjs-dist`:
+
+```bash
+npm install pdfjs-dist
+```
+
+## Quick Start
+
+```ts
+import {
+  createViewer,
+  imagePlugin,
+  videoPlugin,
+  audioPlugin,
+  textPlugin,
+  pdfPlugin,
+  officePlugin,
+  archivePlugin,
+  emailPlugin,
+  drawingPlugin,
+  cadPlugin,
+  model3dPlugin,
+  gisPlugin,
+  fallbackPlugin
+} from "@open-file-viewer/core";
+import "@open-file-viewer/core/style.css";
+import pdfWorkerSrc from "pdfjs-dist/build/pdf.worker.mjs?url";
+
+const viewer = createViewer({
+  container: "#viewer",
+  file: fileOrUrl,
+  fileName: "contract.pdf",
+  width: "100%",
+  height: "70vh",
+  fit: "contain",
+  toolbar: true,
+  theme: "auto",
+  plugins: [
+    imagePlugin(),
+    videoPlugin(),
+    audioPlugin(),
+    textPlugin(),
+    pdfPlugin({ workerSrc: pdfWorkerSrc }),
+    officePlugin(),
+    archivePlugin(),
+    emailPlugin(),
+    drawingPlugin(),
+    cadPlugin(),
+    model3dPlugin(),
+    gisPlugin(),
+    fallbackPlugin()
+  ]
+});
+
+viewer.resize();
+viewer.destroy();
+```
+
+## Supported Inputs
+
+`createViewer` accepts local files and remote sources:
+
+- `File`
+- `Blob`
+- URL string
+- `ArrayBuffer`
+- multiple files through `files`
+
+## Package Notes
+
+Import the stylesheet once in your app:
+
+```ts
+import "@open-file-viewer/core/style.css";
+```
+
+React and Vue adapters are available as separate packages:
+
+```bash
+npm install @open-file-viewer/react
+npm install @open-file-viewer/vue
+```
+
+## Toolbar Customization
+
+The toolbar can be configured from simple feature toggles to a fully custom renderer:
+
+```ts
+createViewer({
+  container: "#viewer",
+  file,
+  toolbar: {
+    labels: {
+      download: "下载",
+      fullscreen: "全屏",
+      search: "搜索"
+    },
+    order: ["search", "download", "approve", "fullscreen"],
+    actions: [
+      {
+        id: "approve",
+        label: "审批",
+        onClick(ctx) {
+          openApprovalDialog(ctx.file);
+        }
+      }
+    ]
+  },
+  plugins
+});
+```
+
+Use `toolbar.render(ctx)` when you need to replace the toolbar completely. The context exposes file metadata, queue navigation, preview commands, download, fullscreen, print and search helpers.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -735,6 +735,7 @@ function createViewer(options) {
         file,
         size: getElementSize(viewport),
         options: normalizedOptions,
+        toolbar: toolbar?.getContext(),
         setLoading,
         setError
       });
@@ -908,18 +909,32 @@ function createToolbar(toolbar, viewport, queue) {
   element.setAttribute("role", "toolbar");
   element.setAttribute("aria-label", "File preview toolbar");
   let file;
+  let currentIndex = 0;
+  let currentLength = queue.getLength();
   let queueLabel;
   let previousButton;
   let nextButton;
   const commandButtons = [];
+  const customButtons = [];
   const disposers = [];
   const search = createSearchController(viewport);
   let searchInput;
   let searchCount;
-  const addButton = (label, title, action, className) => {
+  let canRunCommand = (_command) => false;
+  const getContext = () => createToolbarContext({
+    file,
+    index: currentIndex,
+    length: currentLength,
+    viewport,
+    queue,
+    element,
+    search,
+    canCommand: canRunCommand
+  });
+  const addButton = (label, title, action, className, icon) => {
     const button = document.createElement("button");
     button.type = "button";
-    button.textContent = label;
+    setToolbarButtonContent(button, label, icon);
     button.title = title;
     button.setAttribute("aria-label", title);
     if (className) {
@@ -930,68 +945,117 @@ function createToolbar(toolbar, viewport, queue) {
     disposers.push(() => button.removeEventListener("click", action));
     return button;
   };
-  const addQueueButton = (label, title, action) => {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.textContent = label;
-    button.title = title;
-    button.setAttribute("aria-label", title);
-    const listener = () => {
-      void action();
-    };
-    button.addEventListener("click", listener);
-    element.append(button);
-    disposers.push(() => button.removeEventListener("click", listener));
-    return button;
-  };
-  if (queue.getLength() > 1) {
-    previousButton = addQueueButton("Prev", "Previous file", queue.previous);
-    nextButton = addQueueButton("Next", "Next file", queue.next);
-    queueLabel = document.createElement("span");
-    queueLabel.className = "ofv-toolbar-queue";
-    element.append(queueLabel);
-  }
-  const addCommandButton = (label, title, command) => {
+  const addCommandButton = (id, label, title, command) => {
     const button = addButton(label, title, () => {
       queue.command(command);
-    });
+    }, void 0, options.icons?.[id]);
     button.disabled = true;
     commandButtons.push({ button, command });
   };
-  if (options.zoom) {
-    addCommandButton("-", "Zoom out", "zoom-out");
-    addCommandButton("+", "Zoom in", "zoom-in");
-    addCommandButton("100%", "Reset zoom", "zoom-reset");
-  }
-  if (options.rotate) {
-    addCommandButton("Rotate", "Rotate right", "rotate-right");
-  }
-  if (options.download !== false) {
-    addButton("Download", "Download file", () => {
-      if (file) {
-        downloadFile(file);
+  const renderDefaultAction = (id) => {
+    if (!isBuiltInToolbarAction(id)) {
+      const customAction = options.actions?.find((action) => action.id === id);
+      if (customAction) {
+        renderCustomAction(customAction);
       }
-    });
-  }
-  if (options.fullscreen !== false) {
-    addButton("Fullscreen", "Open preview fullscreen", () => {
-      const target = element.parentElement;
-      void target?.requestFullscreen?.();
-    });
-  }
-  if (options.print) {
-    addButton("Print", "Print preview", () => {
-      printPreview(viewport);
-    });
-  }
-  if (options.search !== false) {
+      return;
+    }
+    if (id === "previous" && queue.getLength() > 1) {
+      previousButton = addButton(
+        getToolbarLabel(options, "previous"),
+        getToolbarTitle(options, "previous"),
+        () => void queue.previous(),
+        void 0,
+        options.icons?.previous
+      );
+      return;
+    }
+    if (id === "next" && queue.getLength() > 1) {
+      nextButton = addButton(
+        getToolbarLabel(options, "next"),
+        getToolbarTitle(options, "next"),
+        () => void queue.next(),
+        void 0,
+        options.icons?.next
+      );
+      return;
+    }
+    if (id === "queue" && queue.getLength() > 1) {
+      queueLabel = document.createElement("span");
+      queueLabel.className = "ofv-toolbar-queue";
+      element.append(queueLabel);
+      return;
+    }
+    if (id === "zoom-out" && options.zoom) {
+      addCommandButton(id, getToolbarLabel(options, id), getToolbarTitle(options, id), "zoom-out");
+      return;
+    }
+    if (id === "zoom-in" && options.zoom) {
+      addCommandButton(id, getToolbarLabel(options, id), getToolbarTitle(options, id), "zoom-in");
+      return;
+    }
+    if (id === "zoom-reset" && options.zoom) {
+      addCommandButton(id, getToolbarLabel(options, id), getToolbarTitle(options, id), "zoom-reset");
+      return;
+    }
+    if (id === "rotate-right" && options.rotate) {
+      addCommandButton(id, getToolbarLabel(options, id), getToolbarTitle(options, id), "rotate-right");
+      return;
+    }
+    if (id === "download" && options.download !== false) {
+      addButton(
+        getToolbarLabel(options, id),
+        getToolbarTitle(options, id),
+        () => getContext().download(),
+        void 0,
+        options.icons?.download
+      );
+      return;
+    }
+    if (id === "fullscreen" && options.fullscreen !== false) {
+      addButton(
+        getToolbarLabel(options, id),
+        getToolbarTitle(options, id),
+        () => getContext().fullscreen(),
+        void 0,
+        options.icons?.fullscreen
+      );
+      return;
+    }
+    if (id === "print" && options.print) {
+      addButton(
+        getToolbarLabel(options, id),
+        getToolbarTitle(options, id),
+        () => getContext().print(),
+        void 0,
+        options.icons?.print
+      );
+      return;
+    }
+    if (id === "search" && options.search !== false) {
+      renderSearchControl();
+      return;
+    }
+  };
+  const renderCustomAction = (action) => {
+    const button = addButton(
+      action.label,
+      action.title || action.label,
+      () => void action.onClick(getContext()),
+      action.className,
+      action.icon
+    );
+    button.dataset.ofvToolbarAction = action.id;
+    customButtons.push({ button, action });
+  };
+  const renderSearchControl = () => {
     const searchGroup = document.createElement("div");
     searchGroup.className = "ofv-toolbar-search";
-    searchGroup.title = "Search preview text";
+    searchGroup.title = getToolbarTitle(options, "search");
     const nextSearchInput = document.createElement("input");
     nextSearchInput.type = "search";
-    nextSearchInput.placeholder = "Search";
-    nextSearchInput.setAttribute("aria-label", "Search preview text");
+    nextSearchInput.placeholder = getToolbarLabel(options, "search");
+    nextSearchInput.setAttribute("aria-label", getToolbarTitle(options, "search"));
     const nextSearchCount = document.createElement("span");
     nextSearchCount.className = "ofv-toolbar-search-count";
     searchInput = nextSearchInput;
@@ -1004,18 +1068,53 @@ function createToolbar(toolbar, viewport, queue) {
     searchGroup.append(nextSearchInput, nextSearchCount);
     element.append(searchGroup);
     disposers.push(() => nextSearchInput.removeEventListener("input", runSearch));
-  }
+  };
+  const renderToolbar = () => {
+    if (options.render) {
+      element.replaceChildren();
+      const customElement = options.render(getContext());
+      if (customElement) {
+        element.append(customElement);
+      }
+      return;
+    }
+    getToolbarOrder(options, queue.getLength()).forEach(renderDefaultAction);
+    getImplicitCustomActions(options).forEach(renderCustomAction);
+  };
+  renderToolbar();
+  const updateCustomButtons = () => {
+    const context = getContext();
+    for (const { button, action } of customButtons) {
+      button.disabled = evaluateToolbarFlag(action.disabled, context);
+      button.hidden = evaluateToolbarFlag(action.hidden, context);
+    }
+  };
+  const resetSearch = () => {
+    search.clear();
+    if (searchInput) {
+      searchInput.value = "";
+    }
+    if (searchCount) {
+      searchCount.textContent = "";
+    }
+  };
+  const refreshCustomRender = () => {
+    if (!options.render) {
+      return;
+    }
+    element.replaceChildren();
+    const customElement = options.render(getContext());
+    if (customElement) {
+      element.append(customElement);
+    }
+  };
   return {
     element,
     update(nextFile, index, length) {
       file = nextFile;
-      search.clear();
-      if (searchInput) {
-        searchInput.value = "";
-      }
-      if (searchCount) {
-        searchCount.textContent = "";
-      }
+      currentIndex = index;
+      currentLength = length;
+      resetSearch();
       commandButtons.forEach(({ button }) => {
         button.disabled = true;
       });
@@ -1028,20 +1127,158 @@ function createToolbar(toolbar, viewport, queue) {
       if (nextButton) {
         nextButton.disabled = index >= length - 1;
       }
+      updateCustomButtons();
+      refreshCustomRender();
     },
     setCommandSupport(isSupported) {
+      canRunCommand = isSupported;
       commandButtons.forEach(({ button, command }) => {
         button.disabled = !isSupported(command);
       });
+      updateCustomButtons();
+      refreshCustomRender();
     },
+    getContext,
     destroy() {
       search.clear();
       for (const dispose of disposers) {
         dispose();
       }
+      element.replaceChildren();
     }
   };
 }
+function createToolbarContext({
+  file,
+  index,
+  length,
+  viewport,
+  queue,
+  element,
+  search,
+  canCommand
+}) {
+  return {
+    file,
+    index,
+    length,
+    viewport,
+    canPrevious: index > 0,
+    canNext: index < length - 1,
+    async previous() {
+      await queue.previous();
+    },
+    async next() {
+      await queue.next();
+    },
+    command: queue.command,
+    canCommand,
+    download() {
+      if (file) {
+        downloadFile(file);
+      }
+    },
+    fullscreen() {
+      void element.parentElement?.requestFullscreen?.();
+    },
+    print() {
+      printPreview(viewport);
+    },
+    search: search.search,
+    clearSearch: search.clear
+  };
+}
+var defaultToolbarLabels = {
+  previous: "Prev",
+  next: "Next",
+  queue: "",
+  "zoom-out": "-",
+  "zoom-in": "+",
+  "zoom-reset": "100%",
+  "rotate-right": "Rotate",
+  download: "Download",
+  fullscreen: "Fullscreen",
+  print: "Print",
+  search: "Search"
+};
+var defaultToolbarTitles = {
+  previous: "Previous file",
+  next: "Next file",
+  queue: "Current file position",
+  "zoom-out": "Zoom out",
+  "zoom-in": "Zoom in",
+  "zoom-reset": "Reset zoom",
+  "rotate-right": "Rotate right",
+  download: "Download file",
+  fullscreen: "Open preview fullscreen",
+  print: "Print preview",
+  search: "Search preview text"
+};
+function getToolbarLabel(options, id) {
+  return options.labels?.[id] ?? defaultToolbarLabels[id];
+}
+function getToolbarTitle(options, id) {
+  return options.titles?.[id] ?? options.labels?.[id] ?? defaultToolbarTitles[id];
+}
+function getToolbarOrder(options, queueLength) {
+  if (options.order) {
+    return options.order;
+  }
+  const actions = [];
+  if (queueLength > 1) {
+    actions.push("previous", "next", "queue");
+  }
+  if (options.zoom) {
+    actions.push("zoom-out", "zoom-in", "zoom-reset");
+  }
+  if (options.rotate) {
+    actions.push("rotate-right");
+  }
+  if (options.download !== false) {
+    actions.push("download");
+  }
+  if (options.fullscreen !== false) {
+    actions.push("fullscreen");
+  }
+  if (options.print) {
+    actions.push("print");
+  }
+  if (options.search !== false) {
+    actions.push("search");
+  }
+  return actions;
+}
+function getImplicitCustomActions(options) {
+  if (options.order || !options.actions) {
+    return [];
+  }
+  return [...options.actions].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+}
+function evaluateToolbarFlag(value, context) {
+  return typeof value === "function" ? value(context) : Boolean(value);
+}
+function setToolbarButtonContent(button, label, icon) {
+  button.replaceChildren();
+  if (!icon) {
+    button.textContent = label;
+    return;
+  }
+  const iconElement = document.createElement("span");
+  iconElement.className = "ofv-toolbar-icon";
+  iconElement.setAttribute("aria-hidden", "true");
+  if (typeof icon === "string") {
+    iconElement.innerHTML = icon;
+  } else {
+    iconElement.append(icon.cloneNode(true));
+  }
+  const labelElement = document.createElement("span");
+  labelElement.className = "ofv-toolbar-label";
+  labelElement.textContent = label;
+  button.append(iconElement, labelElement);
+}
+function isBuiltInToolbarAction(id) {
+  return id in defaultToolbarLabels;
+}
 function createSearchController(root) {
   const markerClass = "ofv-search-match";
   const clear = () => {