feat(custom-block): 新增全屏显示功能 | Add full-screen display function.

Zuoqiu-Yingyi · Jul 6, 2023 · b1d6dbd · b1d6dbd
1 parent d9d54ec
commit b1d6dbd
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 - 新增显示块轮廓功能 | Add display block outline function.
 - 新增全宽显示功能 | Add full-width display function.
+- 新增全屏显示功能 | Add full-screen display function.
 
 ## 2023-07-05
 

diff --git a/workspace/plugins/custom-block/public/i18n/en_US.json b/workspace/plugins/custom-block/public/i18n/en_US.json
@@ -1,6 +1,9 @@
 {
     "displayName": "Custom Block Style",
     "menu": {
+        "custom-block-fullscreen": {
+            "label": "Full-screen Display"
+        },
         "custom-block-render-content": {
             "label": "Display Block Content"
         },

diff --git a/workspace/plugins/custom-block/public/i18n/zh_CHT.json b/workspace/plugins/custom-block/public/i18n/zh_CHT.json
@@ -1,6 +1,9 @@
 {
     "displayName": "自定義塊樣式",
     "menu": {
+        "custom-block-fullscreen": {
+            "label": "全屏顯示"
+        },
         "custom-block-render-content": {
             "label": "顯示塊內容"
         },

diff --git a/workspace/plugins/custom-block/public/i18n/zh_CN.json b/workspace/plugins/custom-block/public/i18n/zh_CN.json
@@ -1,6 +1,9 @@
 {
     "displayName": "自定义块样式",
     "menu": {
+        "custom-block-fullscreen": {
+            "label": "全屏显示"
+        },
         "custom-block-render-content": {
             "label": "显示块内容"
         },

diff --git a/workspace/plugins/custom-block/src/configs/default.ts b/workspace/plugins/custom-block/src/configs/default.ts
@@ -80,6 +80,18 @@ export const DEFAULT_CONFIG: IConfig = {
                 },
             ],
         },
+        { // 全屏显示
+            id: "custom-block-fullscreen",
+            enable: true,
+            mode: MenuItemMode.button,
+            multi: false,
+            icon: "iconFullscreen",
+            tasks: [
+                {
+                    type: TaskType.fullscreen,
+                },
+            ],
+        },
         { // 分割线
             id: "custom-block-separator-1",
             enable: true,

diff --git a/workspace/plugins/custom-block/src/types/task.d.ts b/workspace/plugins/custom-block/src/types/task.d.ts
@@ -18,7 +18,7 @@
 import { TaskType } from "@/utils/enums";
 
 /* 块菜单任务 */
-export type Task = IEditTask | IToggleTask;
+export type Task = IEditTask | IToggleTask | iconFullscreen;
 
 /* 块菜单任务 */
 export interface ITask {
@@ -42,3 +42,8 @@ export interface IToggleTask extends ITask {
         token: string, // 需要增删的 token
     },
 }
+
+/* 全屏任务 */
+export interface IFullscreenTask extends ITask {
+    type: TaskType, // 任务类型
+}
diff --git a/workspace/plugins/custom-block/src/utils/enums.ts b/workspace/plugins/custom-block/src/utils/enums.ts
@@ -33,4 +33,6 @@ export enum TaskType {
     remove, // 移除块属性 (在块属性中移除一个 Token)
     toggle, // 切换块属性 (在块属性中增删一个 Token)
     replace, // 替换块属性 (在块属性中替换一个 Token)
+
+    fullscreen, // 全屏
 }
diff --git a/workspace/plugins/custom-block/src/utils/handlers.ts b/workspace/plugins/custom-block/src/utils/handlers.ts
@@ -99,6 +99,33 @@ export default {
             }
         });
     },
+    /* 全屏/取消全屏 */
+    [TaskType.fullscreen]: async (plugin, _feature, context, _params: any) => {
+        if (context.isDocumentBlock) {
+            /* 文档块 */
+            context.element.parentElement.parentElement.classList.toggle('fullscreen');
+        }
+        else {
+            /* 非文档块 */
+            let element;
+            switch (context.element.dataset.type) {
+                case 'NodeVideo':
+                    element = context.element.querySelector('video');
+                    break;
+                case 'NodeIFrame':
+                case 'NodeWidget':
+                    element = context.element.querySelector('iframe');
+                    break;
+                case 'NodeHTMLBlock':
+                    element = context.element.querySelector('protyle-html');
+                    break;
+                default:
+                    element = context.element;
+                    break;
+            }
+            element.requestFullscreen();
+        }
+    },
 } as Record<TaskType, (
     plugin: InstanceType<typeof CustomBlockPlugin>, // 插件对象
     feature: IFeature, // 菜单功能定义