@open-file-viewer/core 0.1.0 → 0.1.2

package/dist/index.d.cts

@@ -4,6 +4,8 @@ type PreviewSource = File | Blob | string | ArrayBuffer;
 type PreviewFit = "contain" | "cover" | "width" | "height" | "actual" | "scale-down";
 type PreviewFallback = "inline" | "download" | "custom";
 type PreviewTheme = "light" | "dark" | "auto";
+type PreviewToolbarBuiltInAction = "previous" | "next" | "queue" | "zoom-out" | "zoom-in" | "zoom-reset" | "rotate-right" | "download" | "fullscreen" | "print" | "search";
+type PreviewToolbarActionId = PreviewToolbarBuiltInAction | (string & {});
 interface PreviewFile {
     source: PreviewSource;
     name: string;
@@ -29,6 +31,40 @@ interface PreviewToolbarOptions {
     fullscreen?: boolean;
     print?: boolean;
     search?: boolean;
+    order?: PreviewToolbarActionId[];
+    labels?: Partial<Record<PreviewToolbarBuiltInAction, string>>;
+    titles?: Partial<Record<PreviewToolbarBuiltInAction, string>>;
+    icons?: Partial<Record<PreviewToolbarBuiltInAction, string | HTMLElement | SVGElement>>;
+    actions?: PreviewToolbarCustomAction[];
+    render?: (ctx: PreviewToolbarRenderContext) => HTMLElement | void;
+}
+interface PreviewToolbarCustomAction {
+    id: string;
+    label: string;
+    title?: string;
+    icon?: string | HTMLElement | SVGElement;
+    order?: number;
+    disabled?: boolean | ((ctx: PreviewToolbarRenderContext) => boolean);
+    hidden?: boolean | ((ctx: PreviewToolbarRenderContext) => boolean);
+    className?: string;
+    onClick: (ctx: PreviewToolbarRenderContext) => void | Promise<void>;
+}
+interface PreviewToolbarRenderContext {
+    file?: PreviewFile;
+    index: number;
+    length: number;
+    viewport: HTMLElement;
+    canPrevious: boolean;
+    canNext: boolean;
+    previous: () => Promise<void>;
+    next: () => Promise<void>;
+    command: (command: PreviewCommand) => void | boolean | undefined;
+    canCommand: (command: PreviewCommand) => boolean;
+    download: () => void;
+    fullscreen: () => void;
+    print: () => void;
+    search: (query: string) => number;
+    clearSearch: () => void;
 }
 interface PreviewOptions {
     container: HTMLElement | string;
@@ -56,6 +92,7 @@ interface PreviewContext {
     file: PreviewFile;
     size: PreviewSize;
     options: Required<Pick<PreviewOptions, "fit" | "fallback">> & PreviewOptions;
+    toolbar?: PreviewToolbarRenderContext;
     setLoading: (loading: boolean) => void;
     setError: (error: Error | string) => void;
 }
@@ -122,4 +159,4 @@ declare function assetPlugin(): PreviewPlugin;
 
 declare function fallbackPlugin(): PreviewPlugin;
 
-export { type FileViewer, type PreviewCommand, type PreviewContext, type PreviewFallback, type PreviewFile, type PreviewFit, type PreviewInstance, type PreviewItem, type PreviewOptions, type PreviewPlugin, type PreviewSize, type PreviewSource, type PreviewTheme, type PreviewToolbarOptions, archivePlugin, assetPlugin, audioPlugin, cadPlugin, createViewer, drawingPlugin, emailPlugin, epubPlugin, fallbackPlugin, gisPlugin, imagePlugin, model3dPlugin, ofdPlugin, officePlugin, pdfPlugin, textPlugin, videoPlugin, xpsPlugin };
+export { type FileViewer, type PreviewCommand, type PreviewContext, type PreviewFallback, type PreviewFile, type PreviewFit, type PreviewInstance, type PreviewItem, type PreviewOptions, type PreviewPlugin, type PreviewSize, type PreviewSource, type PreviewTheme, type PreviewToolbarActionId, type PreviewToolbarBuiltInAction, type PreviewToolbarCustomAction, type PreviewToolbarOptions, type PreviewToolbarRenderContext, archivePlugin, assetPlugin, audioPlugin, cadPlugin, createViewer, drawingPlugin, emailPlugin, epubPlugin, fallbackPlugin, gisPlugin, imagePlugin, model3dPlugin, ofdPlugin, officePlugin, pdfPlugin, textPlugin, videoPlugin, xpsPlugin };

package/dist/index.d.ts

@@ -4,6 +4,8 @@ type PreviewSource = File | Blob | string | ArrayBuffer;
 type PreviewFit = "contain" | "cover" | "width" | "height" | "actual" | "scale-down";
 type PreviewFallback = "inline" | "download" | "custom";
 type PreviewTheme = "light" | "dark" | "auto";
+type PreviewToolbarBuiltInAction = "previous" | "next" | "queue" | "zoom-out" | "zoom-in" | "zoom-reset" | "rotate-right" | "download" | "fullscreen" | "print" | "search";
+type PreviewToolbarActionId = PreviewToolbarBuiltInAction | (string & {});
 interface PreviewFile {
     source: PreviewSource;
     name: string;
@@ -29,6 +31,40 @@ interface PreviewToolbarOptions {
     fullscreen?: boolean;
     print?: boolean;
     search?: boolean;
+    order?: PreviewToolbarActionId[];
+    labels?: Partial<Record<PreviewToolbarBuiltInAction, string>>;
+    titles?: Partial<Record<PreviewToolbarBuiltInAction, string>>;
+    icons?: Partial<Record<PreviewToolbarBuiltInAction, string | HTMLElement | SVGElement>>;
+    actions?: PreviewToolbarCustomAction[];
+    render?: (ctx: PreviewToolbarRenderContext) => HTMLElement | void;
+}
+interface PreviewToolbarCustomAction {
+    id: string;
+    label: string;
+    title?: string;
+    icon?: string | HTMLElement | SVGElement;
+    order?: number;
+    disabled?: boolean | ((ctx: PreviewToolbarRenderContext) => boolean);
+    hidden?: boolean | ((ctx: PreviewToolbarRenderContext) => boolean);
+    className?: string;
+    onClick: (ctx: PreviewToolbarRenderContext) => void | Promise<void>;
+}
+interface PreviewToolbarRenderContext {
+    file?: PreviewFile;
+    index: number;
+    length: number;
+    viewport: HTMLElement;
+    canPrevious: boolean;
+    canNext: boolean;
+    previous: () => Promise<void>;
+    next: () => Promise<void>;
+    command: (command: PreviewCommand) => void | boolean | undefined;
+    canCommand: (command: PreviewCommand) => boolean;
+    download: () => void;
+    fullscreen: () => void;
+    print: () => void;
+    search: (query: string) => number;
+    clearSearch: () => void;
 }
 interface PreviewOptions {
     container: HTMLElement | string;
@@ -56,6 +92,7 @@ interface PreviewContext {
     file: PreviewFile;
     size: PreviewSize;
     options: Required<Pick<PreviewOptions, "fit" | "fallback">> & PreviewOptions;
+    toolbar?: PreviewToolbarRenderContext;
     setLoading: (loading: boolean) => void;
     setError: (error: Error | string) => void;
 }
@@ -122,4 +159,4 @@ declare function assetPlugin(): PreviewPlugin;
 
 declare function fallbackPlugin(): PreviewPlugin;
 
-export { type FileViewer, type PreviewCommand, type PreviewContext, type PreviewFallback, type PreviewFile, type PreviewFit, type PreviewInstance, type PreviewItem, type PreviewOptions, type PreviewPlugin, type PreviewSize, type PreviewSource, type PreviewTheme, type PreviewToolbarOptions, archivePlugin, assetPlugin, audioPlugin, cadPlugin, createViewer, drawingPlugin, emailPlugin, epubPlugin, fallbackPlugin, gisPlugin, imagePlugin, model3dPlugin, ofdPlugin, officePlugin, pdfPlugin, textPlugin, videoPlugin, xpsPlugin };
+export { type FileViewer, type PreviewCommand, type PreviewContext, type PreviewFallback, type PreviewFile, type PreviewFit, type PreviewInstance, type PreviewItem, type PreviewOptions, type PreviewPlugin, type PreviewSize, type PreviewSource, type PreviewTheme, type PreviewToolbarActionId, type PreviewToolbarBuiltInAction, type PreviewToolbarCustomAction, type PreviewToolbarOptions, type PreviewToolbarRenderContext, archivePlugin, assetPlugin, audioPlugin, cadPlugin, createViewer, drawingPlugin, emailPlugin, epubPlugin, fallbackPlugin, gisPlugin, imagePlugin, model3dPlugin, ofdPlugin, officePlugin, pdfPlugin, textPlugin, videoPlugin, xpsPlugin };

package/dist/index.js

@@ -682,6 +682,7 @@ function createViewer(options) {
         file,
         size: getElementSize(viewport),
         options: normalizedOptions,
+        toolbar: toolbar?.getContext(),
         setLoading,
         setError
       });
@@ -855,18 +856,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) {
@@ -877,68 +892,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;
@@ -951,18 +1015,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;
       });
@@ -975,20 +1074,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 = () => {