feat: add new component MPdfMobileViewer (#2103)

* worked! * missing firstElementChild * toolbar * working on toolbar ui * done * remove unused css * add docs
masastack · Aug 15, 2024 · b8ef861 · b8ef861
1 parent 813bed3
commit b8ef861
Show file tree

Hide file tree

Showing 31 changed files with 664 additions and 5 deletions.
diff --git a/docs/Masa.Blazor.Docs/Examples/labs/pdf-mobile-viewer/Usage.razor b/docs/Masa.Blazor.Docs/Examples/labs/pdf-mobile-viewer/Usage.razor
@@ -0,0 +1,6 @@
+<div class="text-center">
+    <iframe src="/blazor/examples/pdf-mobile-viewer"
+            style="width: 375px; height: 667px; border: none;"
+            width="100%">
+    </iframe>
+</div>
diff --git a/docs/Masa.Blazor.Docs/Pages/PdfMobileViewer.razor b/docs/Masa.Blazor.Docs/Pages/PdfMobileViewer.razor
@@ -0,0 +1,4 @@
+@page "/blazor/examples/pdf-mobile-viewer"
+@layout EmptyLayout
+
+<MPdfMobileViewer Url="_content/Masa.Blazor.Docs/img/compressed.tracemonkey-pldi-09.pdf" /> 
diff --git a/docs/Masa.Blazor.Docs/Shared/EmptyLayout.razor b/docs/Masa.Blazor.Docs/Shared/EmptyLayout.razor
@@ -0,0 +1,7 @@
+@inherits LayoutComponentBase
+
+<MApp>
+    <MMain>
+        @Body
+    </MMain>
+</MApp>
diff --git a/docs/Masa.Blazor.Docs/wwwroot/data/apis/pdf-mobile-viewer/MPdfMobileViewer-en-US.json b/docs/Masa.Blazor.Docs/wwwroot/data/apis/pdf-mobile-viewer/MPdfMobileViewer-en-US.json
@@ -0,0 +1,7 @@
+{
+  "props": {
+    "hideToolbar": "Hide the toolbar",
+    "maxCanvasPixels": "The maximum supported canvas size in total pixels, i.e.width* height. Use `-1` for no limit, or `0` for CSS-only zooming",
+    "url": "The URL of PDF file to display."
+  }
+}
diff --git a/docs/Masa.Blazor.Docs/wwwroot/data/apis/pdf-mobile-viewer/MPdfMobileViewer-zh-CN.json b/docs/Masa.Blazor.Docs/wwwroot/data/apis/pdf-mobile-viewer/MPdfMobileViewer-zh-CN.json
@@ -0,0 +1,7 @@
+{
+  "props": {
+    "hideToolbar": "隐藏底部工具栏",
+    "maxCanvasPixels": "支持的最大画布大小（以总像素计算，即宽度 * 高度）。使用 -1 表示不限制，使用 0 表示仅使用 CSS 进行缩放。",
+    "url": "PDF 文件的路径"
+  }
+}
diff --git a/docs/Masa.Blazor.Docs/wwwroot/data/nav.json b/docs/Masa.Blazor.Docs/wwwroot/data/nav.json
@@ -324,6 +324,11 @@
         "state": "new",
         "releasedOn": "v1.5.0"
       },
+      {
+        "title": "pdf-mobile-viewer",
+        "state": "new",
+        "releasedOn": "v1.7.0"
+      },
       {
         "title": "pull-refresh",
         "state": "new",

diff --git a/docs/Masa.Blazor.Docs/wwwroot/img/compressed.tracemonkey-pldi-09.pdf b/docs/Masa.Blazor.Docs/wwwroot/img/compressed.tracemonkey-pldi-09.pdf
diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/labs/pdf-mobile-viewer/en-US.md b/docs/Masa.Blazor.Docs/wwwroot/pages/labs/pdf-mobile-viewer/en-US.md
@@ -0,0 +1,18 @@
+---
+title: PDF Mobile Viewer
+desc: "A PDF viewer designed for mobile."
+---
+
+Before using, you need to include the style sheet:
+
+``` html
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/web/pdf_viewer.min.css" rel="stylesheet">
+```
+
+## Usage
+
+<masa-example file="Examples.labs.pdf_mobile_viewer.Usage" no-actions="true"></masa-example>
+
+```razor
+<MPdfMobileViewer Url="_content/Masa.Blazor.Docs/img/compressed.tracemonkey-pldi-09.pdf" /> 
+```
diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/labs/pdf-mobile-viewer/zh-CN.md b/docs/Masa.Blazor.Docs/wwwroot/pages/labs/pdf-mobile-viewer/zh-CN.md
@@ -0,0 +1,18 @@
+---
+title: PDF Mobile Viewer（PDF 移动端查看器）
+desc: "专为移动设备设计的 PDF 查看器。"
+---
+
+在使用之前，需要引入样式表：
+
+``` html
+<link href="https://cdn.masastack.com/npm/pdfjs-dist/4.5.136/web/pdf_viewer.min.css" rel="stylesheet">
+```
+
+## 使用
+
+<masa-example file="Examples.labs.pdf_mobile_viewer.Usage" no-actions="true"></masa-example>
+
+```razor
+<MPdfMobileViewer Url="_content/Masa.Blazor.Docs/img/compressed.tracemonkey-pldi-09.pdf" /> 
+```
diff --git a/docs/Masa.Docs.Server/Pages/_Host.cshtml b/docs/Masa.Docs.Server/Pages/_Host.cshtml
@@ -31,6 +31,7 @@
     <link href="https://cdn.masastack.com/npm/drawflow/0.0.59/drawflow.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css" rel="stylesheet">
     <link href="https://cdn.masastack.com/npm/xgplayer/3.0.11/xgplayer.min.css" rel="stylesheet">
+    <link href="https://cdn.masastack.com/npm/pdfjs-dist/4.5.136/web/pdf_viewer.min.css" rel="stylesheet">
     <link href="_content/Masa.Docs.Shared/prism/prism-material-dark-for-masa.css" rel="stylesheet">
     <link href="_content/Masa.Docs.Shared/prism/prism-line-highlight.min.css" rel="stylesheet">
     <link href="_content/Masa.Docs.Shared/css/docs.css" rel="stylesheet">

diff --git a/docs/Masa.Docs.Shared/wwwroot/locale/en-US.json b/docs/Masa.Docs.Shared/wwwroot/locale/en-US.json
@@ -125,7 +125,7 @@
   "ViewSource": "View source",
   "Toc": "Contents",
   "SeniorSponsor": "Senior sponsor",
-  "enableI18n-demo":{
+  "enableI18n-demo": {
     "name": "User name",
     "email": "Email address",
     "item": "Item",
@@ -227,6 +227,7 @@
   "page-tabs": "Page tabs",
   "page-stack": "Page stack",
   "paginations": "Paginations",
+  "pdf-mobile-viewer": "PDF mobile viewer",
   "pickers": "Pickers",
   "date-pickers": "Date pickers",
   "date-pickers-month": "Date pickers month",
@@ -420,6 +421,7 @@
     "page-tabs": "The PageTabs is used to record the visited pages",
     "page-stack": "Provides a container similar to a page stack, mainly for mobile",
     "paginations": "The Pagination component is used to separate long sets of data",
+    "pdf-mobile-viewer": "A PDF viewer designed for the mobile",
     "date-pickers": "DatePickers is a fully featured date selection component that lets users select a date, or range of dates",
     "date-pickers-month": "DatePicker can be used as a standalone month picker component",
     "time-pickers": "The MTimePicker is stand-alone component that can be utilized in many existing MASA Blazor components",

diff --git a/docs/Masa.Docs.Shared/wwwroot/locale/zh-CN.json b/docs/Masa.Docs.Shared/wwwroot/locale/zh-CN.json
@@ -126,7 +126,7 @@
   "Toc": "目录",
   "SeniorSponsor": "高级赞助商",
   "Sponsor": "赞助商",
-  "enableI18n-demo":{
+  "enableI18n-demo": {
     "name": "姓名",
     "email": "邮箱地址",
     "item": "项目",
@@ -223,6 +223,7 @@
   "page-tabs": "Page tabs（页面选项卡）",
   "page-stack": "Page stack（页面堆栈）",
   "paginations": "Paginations（分页）",
+  "pdf-mobile-viewer": "PDF mobile viewer（PDF移动端查看器）",
   "pickers": "Pickers（选择器）",
   "date-pickers": "Date pickers（日期选择器）",
   "date-pickers-month": "Date pickers month（月份选择器）",
@@ -532,6 +533,7 @@
     "page-tabs": "页面选项卡用于记录访问过的页面",
     "page-stack": "提供了一个累死页面堆栈的容器，主要用于移动的",
     "paginations": "分页组件用于分离长数据集",
+    "pdf-mobile-viewer": "PDF移动端查看器",
     "date-pickers": "功能齐全的日期选择组件",
     "date-pickers-month": "可以用作一个独立的月份选择器组件",
     "time-pickers": "为用户提供了选择时间的视觉表现",

diff --git a/docs/Masa.Docs.WebAssembly/wwwroot/index.html b/docs/Masa.Docs.WebAssembly/wwwroot/index.html
@@ -27,6 +27,7 @@
     <link href="https://cdn.masastack.com/npm/drawflow/0.0.59/drawflow.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css" rel="stylesheet">
     <link href="https://cdn.masastack.com/npm/xgplayer/3.0.11/xgplayer.min.css" rel="stylesheet">
+    <link href="https://cdn.masastack.com/npm/pdfjs-dist/4.5.136/web/pdf_viewer.min.css" rel="stylesheet">
     <link href="_content/Masa.Docs.Shared/prism/prism-material-dark-for-masa.css" rel="stylesheet">
     <link href="_content/Masa.Docs.Shared/prism/prism-line-highlight.min.css" rel="stylesheet">
     <link href="_content/Masa.Docs.Shared/css/docs.css" rel="stylesheet">

diff --git a/src/Masa.Blazor.JS/package.json b/src/Masa.Blazor.JS/package.json
@@ -32,7 +32,8 @@
     "build:scrollToTarget": "rollup --config rollup.config.scrollToTargetJSInterop.ts",
     "build:pageStack": "rollup --config rollup.config.pageStack.ts",
     "build:sortable": "rollup --config rollup.config.sortable.ts",
-    "build:transition": "rollup --config rollup.config.transition.ts"
+    "build:transition": "rollup --config rollup.config.transition.ts",
+    "build:pdfjs": "rollup --config rollup.config.pdfjs.ts"
   },
   "author": "",
   "license": "MIT",
@@ -60,6 +61,7 @@
     "markdown-it-header-sections": "^1.0.0",
     "markdown-it-todo": "^1.0.5",
     "monaco-editor": "^0.36.1",
+    "pdfjs-dist": "^4.5.136",
     "punycode": "^2.1.1",
     "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",

diff --git a/src/Masa.Blazor.JS/rollup.config.pdfjs.ts b/src/Masa.Blazor.JS/rollup.config.pdfjs.ts
@@ -0,0 +1,28 @@
+import { defineConfig } from "rollup";
+import { terser } from "rollup-plugin-terser";
+
+import resolve from "@rollup/plugin-node-resolve";
+import typescript from "@rollup/plugin-typescript";
+
+export default defineConfig({
+  input: [
+    "./src/proxies/pdf.js/mobile-viewer.ts",
+    "pdfjs-dist/legacy/build/pdf.worker.min.mjs"
+  ],
+  output: [
+    {
+      dir: "../Masa.Blazor/wwwroot/js/proxies/pdf-mobile-viewer",
+      entryFileNames: "[name].js",
+      format: "esm",
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    typescript(),
+    resolve(),
+    terser(),
+  ],
+  watch: {
+    exclude: "node_modules/**",
+  },
+});