@open-file-viewer/core 0.1.21 → 0.1.22

package/dist/index.js

@@ -756,12 +756,17 @@ function createViewer(options) {
     currentIndex = clampIndex(index, queue.length);
     await renderQueueItem(currentIndex);
   };
-  const toolbar = createToolbar(options.toolbar, viewport, {
-    getLength: () => queue.length,
-    next: () => goTo(currentIndex + 1),
-    previous: () => goTo(currentIndex - 1),
-    command: (command) => currentInstance?.command?.(command)
-  });
+  const toolbar = createToolbar(
+    options.toolbar,
+    viewport,
+    {
+      getLength: () => queue.length,
+      next: () => goTo(currentIndex + 1),
+      previous: () => goTo(currentIndex - 1),
+      command: (command) => currentInstance?.command?.(command)
+    },
+    options.locale || "en-US"
+  );
   if (toolbar) {
     host.append(toolbar.element);
   }
@@ -998,7 +1003,7 @@ function removeMediaListener(media, listener) {
   }
   media.removeListener?.(listener);
 }
-function createToolbar(toolbar, viewport, queue) {
+function createToolbar(toolbar, viewport, queue, locale) {
   if (!toolbar) {
     return void 0;
   }
@@ -1006,7 +1011,7 @@ function createToolbar(toolbar, viewport, queue) {
   const element = document.createElement("div");
   element.className = "ofv-toolbar";
   element.setAttribute("role", "toolbar");
-  element.setAttribute("aria-label", "File preview toolbar");
+  element.setAttribute("aria-label", defaultToolbarText[locale].ariaLabel);
   let file;
   let currentIndex = 0;
   let currentLength = queue.getLength();
@@ -1067,8 +1072,8 @@ function createToolbar(toolbar, viewport, queue) {
     }
     if (id === "previous" && queue.getLength() > 1) {
       previousButton = addButton(
-        getToolbarLabel(options, "previous"),
-        getToolbarTitle(options, "previous"),
+        getToolbarLabel(options, locale, "previous"),
+        getToolbarTitle(options, locale, "previous"),
         () => void queue.previous(),
         void 0,
         options.icons?.previous
@@ -1077,8 +1082,8 @@ function createToolbar(toolbar, viewport, queue) {
     }
     if (id === "next" && queue.getLength() > 1) {
       nextButton = addButton(
-        getToolbarLabel(options, "next"),
-        getToolbarTitle(options, "next"),
+        getToolbarLabel(options, locale, "next"),
+        getToolbarTitle(options, locale, "next"),
         () => void queue.next(),
         void 0,
         options.icons?.next
@@ -1092,27 +1097,27 @@ function createToolbar(toolbar, viewport, queue) {
       return;
     }
     if (id === "zoom-out" && options.zoom) {
-      addCommandButton(id, getToolbarLabel(options, id), getToolbarTitle(options, id), "zoom-out");
+      addCommandButton(id, getToolbarLabel(options, locale, id), getToolbarTitle(options, locale, id), "zoom-out");
       return;
     }
     if (id === "zoom-in" && options.zoom) {
-      addCommandButton(id, getToolbarLabel(options, id), getToolbarTitle(options, id), "zoom-in");
+      addCommandButton(id, getToolbarLabel(options, locale, id), getToolbarTitle(options, locale, id), "zoom-in");
       return;
     }
     if (id === "zoom-reset" && options.zoom) {
-      addCommandButton(id, getToolbarLabel(options, id), getToolbarTitle(options, id), "zoom-reset");
+      addCommandButton(id, getToolbarLabel(options, locale, id), getToolbarTitle(options, locale, id), "zoom-reset");
       zoomResetButton = commandButtons[commandButtons.length - 1]?.button;
       updateZoomLabel();
       return;
     }
     if (id === "rotate-right" && options.rotate) {
-      addCommandButton(id, getToolbarLabel(options, id), getToolbarTitle(options, id), "rotate-right");
+      addCommandButton(id, getToolbarLabel(options, locale, id), getToolbarTitle(options, locale, id), "rotate-right");
       return;
     }
     if (id === "download" && options.download !== false) {
       addButton(
-        getToolbarLabel(options, id),
-        getToolbarTitle(options, id),
+        getToolbarLabel(options, locale, id),
+        getToolbarTitle(options, locale, id),
         () => getContext().download(),
         void 0,
         options.icons?.download
@@ -1121,8 +1126,8 @@ function createToolbar(toolbar, viewport, queue) {
     }
     if (id === "fullscreen" && options.fullscreen !== false) {
       fullscreenButton = addButton(
-        getToolbarLabel(options, id),
-        getToolbarTitle(options, id),
+        getToolbarLabel(options, locale, id),
+        getToolbarTitle(options, locale, id),
         () => getContext().fullscreen(),
         void 0,
         options.icons?.fullscreen
@@ -1132,8 +1137,8 @@ function createToolbar(toolbar, viewport, queue) {
     }
     if (id === "print" && options.print) {
       addButton(
-        getToolbarLabel(options, id),
-        getToolbarTitle(options, id),
+        getToolbarLabel(options, locale, id),
+        getToolbarTitle(options, locale, id),
         () => getContext().print(),
         void 0,
         options.icons?.print
@@ -1159,11 +1164,11 @@ function createToolbar(toolbar, viewport, queue) {
   const renderSearchControl = () => {
     const searchGroup = document.createElement("div");
     searchGroup.className = "ofv-toolbar-search";
-    searchGroup.title = getToolbarTitle(options, "search");
+    searchGroup.title = getToolbarTitle(options, locale, "search");
     const nextSearchInput = document.createElement("input");
     nextSearchInput.type = "search";
-    nextSearchInput.placeholder = getToolbarLabel(options, "search");
-    nextSearchInput.setAttribute("aria-label", getToolbarTitle(options, "search"));
+    nextSearchInput.placeholder = getToolbarLabel(options, locale, "search");
+    nextSearchInput.setAttribute("aria-label", getToolbarTitle(options, locale, "search"));
     const nextSearchCount = document.createElement("span");
     nextSearchCount.className = "ofv-toolbar-search-count";
     searchInput = nextSearchInput;
@@ -1218,7 +1223,7 @@ function createToolbar(toolbar, viewport, queue) {
     }
     setToolbarButtonContent(
       zoomResetButton,
-      currentZoom === void 0 ? getToolbarLabel(options, "zoom-reset") : formatToolbarZoom(currentZoom),
+      currentZoom === void 0 ? getToolbarLabel(options, locale, "zoom-reset") : formatToolbarZoom(currentZoom),
       options.icons?.["zoom-reset"]
     );
   }
@@ -1241,8 +1246,8 @@ function createToolbar(toolbar, viewport, queue) {
     const active = isFullscreenActive();
     const id = active ? "exit-fullscreen" : "fullscreen";
     const icon = active ? options.icons?.["exit-fullscreen"] ?? options.icons?.fullscreen : options.icons?.fullscreen;
-    setToolbarButtonContent(fullscreenButton, getToolbarLabel(options, id), icon);
-    const title = getToolbarTitle(options, id);
+    setToolbarButtonContent(fullscreenButton, getToolbarLabel(options, locale, id), icon);
+    const title = getToolbarTitle(options, locale, id);
     fullscreenButton.title = title;
     fullscreenButton.setAttribute("aria-label", title);
     fullscreenButton.setAttribute("aria-pressed", String(active));
@@ -1366,39 +1371,75 @@ function createToolbarContext({
     clearSearch: search.clear
   };
 }
-var defaultToolbarLabels = {
-  previous: "Prev",
-  next: "Next",
-  queue: "",
-  "zoom-out": "-",
-  "zoom-in": "+",
-  "zoom-reset": "100%",
-  "rotate-right": "Rotate",
-  download: "Download",
-  fullscreen: "Fullscreen",
-  "exit-fullscreen": "Exit 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",
-  "exit-fullscreen": "Exit fullscreen",
-  print: "Print preview",
-  search: "Search preview text"
+var defaultToolbarText = {
+  "zh-CN": {
+    ariaLabel: "\u6587\u4EF6\u9884\u89C8\u5DE5\u5177\u680F",
+    labels: {
+      previous: "\u4E0A\u4E00\u4E2A",
+      next: "\u4E0B\u4E00\u4E2A",
+      queue: "",
+      "zoom-out": "-",
+      "zoom-in": "+",
+      "zoom-reset": "100%",
+      "rotate-right": "\u65CB\u8F6C",
+      download: "\u4E0B\u8F7D",
+      fullscreen: "\u5168\u5C4F",
+      "exit-fullscreen": "\u9000\u51FA\u5168\u5C4F",
+      print: "\u6253\u5370",
+      search: "\u641C\u7D22"
+    },
+    titles: {
+      previous: "\u4E0A\u4E00\u4E2A\u6587\u4EF6",
+      next: "\u4E0B\u4E00\u4E2A\u6587\u4EF6",
+      queue: "\u5F53\u524D\u6587\u4EF6\u4F4D\u7F6E",
+      "zoom-out": "\u7F29\u5C0F",
+      "zoom-in": "\u653E\u5927",
+      "zoom-reset": "\u91CD\u7F6E\u7F29\u653E",
+      "rotate-right": "\u5411\u53F3\u65CB\u8F6C",
+      download: "\u4E0B\u8F7D\u6587\u4EF6",
+      fullscreen: "\u5168\u5C4F\u67E5\u770B\u9884\u89C8",
+      "exit-fullscreen": "\u9000\u51FA\u5168\u5C4F",
+      print: "\u6253\u5370\u9884\u89C8",
+      search: "\u641C\u7D22\u9884\u89C8\u6587\u672C"
+    }
+  },
+  "en-US": {
+    ariaLabel: "File preview toolbar",
+    labels: {
+      previous: "Prev",
+      next: "Next",
+      queue: "",
+      "zoom-out": "-",
+      "zoom-in": "+",
+      "zoom-reset": "100%",
+      "rotate-right": "Rotate",
+      download: "Download",
+      fullscreen: "Fullscreen",
+      "exit-fullscreen": "Exit fullscreen",
+      print: "Print",
+      search: "Search"
+    },
+    titles: {
+      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",
+      "exit-fullscreen": "Exit fullscreen",
+      print: "Print preview",
+      search: "Search preview text"
+    }
+  }
 };
-function getToolbarLabel(options, id) {
-  return options.labels?.[id] ?? defaultToolbarLabels[id];
+function getToolbarLabel(options, locale, id) {
+  return options.labels?.[id] ?? defaultToolbarText[locale].labels[id];
 }
-function getToolbarTitle(options, id) {
-  return options.titles?.[id] ?? options.labels?.[id] ?? defaultToolbarTitles[id];
+function getToolbarTitle(options, locale, id) {
+  return options.titles?.[id] ?? options.labels?.[id] ?? defaultToolbarText[locale].titles[id];
 }
 function formatToolbarZoom(zoom) {
   return `${Math.round(zoom * 100)}%`;
@@ -1550,7 +1591,7 @@ function isSafeToolbarIconAttribute(name, value) {
   return !/^\s*(?:javascript|data:text\/html|vbscript):/i.test(value);
 }
 function isBuiltInToolbarAction(id) {
-  return id in defaultToolbarLabels;
+  return id in defaultToolbarText["en-US"].labels;
 }
 function createSearchController(root) {
   const markerClass = "ofv-search-match";
@@ -9414,6 +9455,9 @@ function renderChartCard(chart) {
 function renderChartSvg(chart) {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg.setAttribute("viewBox", "0 0 640 380");
+  svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+  svg.setAttribute("text-rendering", "geometricPrecision");
+  svg.setAttribute("shape-rendering", "geometricPrecision");
   svg.setAttribute("role", "img");
   svg.setAttribute("aria-label", chart.title);
   svg.classList.add("ofv-chart-svg");
@@ -9459,16 +9503,7 @@ function renderChartSvg(chart) {
     const clusterWidth = groupWidth * 0.58;
     const barWidth = Math.max(5, Math.min(28, clusterWidth / Math.max(1, chart.series.length)));
     const zeroY = plot.y + plot.height - (0 - axisMin) / (axisMax - axisMin || 1) * plot.height;
-    categories.slice(0, categoryCount).forEach((category, index) => {
-      const x = plot.x + groupWidth * (index + 0.5);
-      const label = appendSvg(svg, "text", {
-        x: Number(x.toFixed(1)),
-        y: plot.y + plot.height + 22,
-        class: "ofv-chart-label",
-        "text-anchor": "middle"
-      });
-      label.textContent = truncateChartLabel(category);
-    });
+    appendChartCategoryLabels(svg, categories, plot, (index) => plot.x + groupWidth * (index + 0.5));
     chart.series.forEach((series, seriesIndex) => {
       const color = series.color || colors[seriesIndex % colors.length];
       series.values.forEach((value, index) => {
@@ -9486,6 +9521,8 @@ function renderChartSvg(chart) {
       });
     });
   } else {
+    const categoryStep = categories.length > 1 ? plot.width / (categories.length - 1) : plot.width;
+    appendChartCategoryLabels(svg, categories, plot, (index) => plot.x + index * categoryStep);
     chart.series.forEach((series, seriesIndex) => {
       const color = series.color || colors[seriesIndex % colors.length];
       const step = series.values.length > 1 ? plot.width / (series.values.length - 1) : plot.width;
@@ -9510,6 +9547,22 @@ function renderChartSvg(chart) {
   appendChartLegend(svg, chart, colors, 348);
   return svg;
 }
+function appendChartCategoryLabels(svg, categories, plot, getX) {
+  const interval = Math.max(1, Math.ceil(categories.length / 14));
+  categories.forEach((category, index) => {
+    if (index % interval !== 0 && index !== categories.length - 1) {
+      return;
+    }
+    const label = appendSvg(svg, "text", {
+      x: Number(getX(index).toFixed(1)),
+      y: plot.y + plot.height + 22,
+      class: "ofv-chart-label ofv-chart-category-label",
+      "data-axis": "category",
+      "text-anchor": "middle"
+    });
+    label.textContent = truncateChartLabel(category);
+  });
+}
 function appendChartLegend(svg, chart, colors, y) {
   const itemWidth = 86;
   const startX = 320 - chart.series.length * itemWidth / 2;