add docs

masastack · Aug 15, 2024 · 41d7079 · 41d7079
1 parent bfeb63e
commit 41d7079
Show file tree

Hide file tree

Showing 16 changed files with 101 additions and 3 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/pdfjs-dist@4.5.136/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/Components/Pdfjs/MPdfMobileViewer.razor.cs b/src/Masa.Blazor/Components/Pdfjs/MPdfMobileViewer.razor.cs
@@ -24,13 +24,31 @@ public partial class MPdfMobileViewer : MasaComponentBase
 
     private IJSObjectReference? _jsObjectReference;
 
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+
+        Url.ThrowIfNull(ComponentName);
+    }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await base.OnAfterRenderAsync(firstRender);
 
         if (firstRender)
         {
-            _jsObjectReference = await JsModule.Init(Ref, Url, MaxCanvasPixels);
+            if (string.IsNullOrWhiteSpace(Url))
+            {
+                return;
+            }
+
+            string url = Url;
+            if (url.StartsWith("_content") is true)
+            {
+                url = "/" + url;
+            }
+
+            _jsObjectReference = await JsModule.Init(Ref, url, MaxCanvasPixels);
         }
     }
 

diff --git a/src/Masa.Try.Server/Pages/_Host.cshtml b/src/Masa.Try.Server/Pages/_Host.cshtml
@@ -26,6 +26,7 @@
     <link href="https://cdn.masastack.com/npm/gridstack.js/7.2.1/gridstack.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">
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/>
 </head>
 <body>

diff --git a/src/Masa.Try.WebAssembly/wwwroot/index.html b/src/Masa.Try.WebAssembly/wwwroot/index.html
@@ -21,6 +21,7 @@
     <link href="https://cdn.masastack.com/npm/vditor/3.8.12/dist/index.css" rel="stylesheet">
     <link href="https://cdn.masastack.com/npm/gridstack.js/7.2.1/gridstack.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">
     <style>
         .gegga {
             width: 0;