添加全屏切换功能

src/components/Footer.ts

@@ -7,6 +7,8 @@ import { UAIEditorEventListener, UAIEditorOptions } from "../core/UAIEditor.ts";
 import { ToggleToc } from "./menus/toolbar/page/ToggleToc";
 import { CharacterCount } from "./menus/statusbar/CharacterCount.ts";
 
+import { Fullscreen } from "./menus/statusbar/Fullscreen.ts";
+
 /**
  * 编辑器底部状态栏
  */
@@ -19,12 +21,17 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
     // 字数统计
     characterCount!: CharacterCount;
 
+    // 全屏功能
+    fullscreen!: Fullscreen;
+
     constructor() {
         super();
 
         // 创建状态栏菜单
         this.toggleToc = new ToggleToc({ menuType: "button", enable: true });
         this.characterCount = new CharacterCount();
+
+        this.fullscreen = new Fullscreen({ menuType: "button", enable: true });
     }
 
     /**
@@ -36,6 +43,7 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
         // 初始化状态栏菜单
         this.toggleToc.onCreate(event, options);
         this.characterCount.onCreate(event, options);
+        this.fullscreen.onCreate(event, options);
 
         this.container = document.createElement("div");
         this.container.classList.add("uai-footer");
@@ -58,10 +66,14 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
 
         this.toggleToc.classList.add("uai-status-bar-button");
 
+        this.fullscreen.classList.add("uai-status-bar-button");
+
         // 状态栏中添加功能菜单按钮
         statusBarLeft.appendChild(this.toggleToc);
         statusBarLeft.appendChild(this.createSplit());
         statusBarLeft.appendChild(this.characterCount);
+
+        statusBarRight.appendChild(this.fullscreen);
     }
 
     /**
@@ -82,10 +94,14 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
     onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
         this.toggleToc.onTransaction(event, options);
         this.characterCount.onTransaction(event, options);
+
+        this.fullscreen.onTransaction(event, options);
     }
 
     onEditableChange(editable: boolean) {
         this.toggleToc.onEditableChange(editable);
         this.characterCount.onEditableChange(editable);
+
+        this.fullscreen.onEditableChange(editable);
     }
 }

src/components/index.ts

@@ -98,6 +98,8 @@ import { AudioBubbleMenu } from "./menus/bubble/AudioBubbleMenu.ts";
 
 import { CharacterCount } from "./menus/statusbar/CharacterCount.ts";
 
+import { Fullscreen } from "./menus/statusbar/Fullscreen.ts";
+
 // 注册组件
 defineCustomElement('uai-editor-header', Header);
 defineCustomElement('uai-editor-editor', Editor);
@@ -186,6 +188,8 @@ defineCustomElement('uai-editor-export-menu-image', ExportImage);
 
 defineCustomElement('uai-editor-statusbar-menu-character-count', CharacterCount);
 
+defineCustomElement('uai-editor-statusbar-menu-fullscreen', Fullscreen);
+
 defineCustomElement('uai-editor-bubble-menu-text-selection', TextSelectionBubbleMenu);
 
 defineCustomElement('uai-editor-bubble-menu-image', ImageBubbleMenu);

src/components/menus/statusbar/Fullscreen.ts

@@ -0,0 +1,121 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
+import fullIcon from "../../../assets/icons/full-screen.svg";
+import exitIcon from "../../../assets/icons/full-screen-exit.svg";
+import { t } from "i18next";
+import { InnerEditor, UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 状态栏菜单：全屏
+ */
+export class Fullscreen extends HTMLElement implements UAIEditorEventListener {
+    // 全屏按钮选项
+    fullButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: fullIcon,
+        hideText: true,
+        text: t('fullscreen.title'),
+        tooltip: t('fullscreen.title'),
+    }
+    // 退出全屏按钮选项
+    exitButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: exitIcon,
+        hideText: true,
+        text: t('fullscreen.disable'),
+        tooltip: t('fullscreen.disable'),
+    }
+
+    // 全屏功能按钮
+    fullButton: MenuButton;
+    // 退出全屏功能按钮
+    exitButton: MenuButton;
+
+    constructor(options: MenuButtonOptions) {
+        super();
+
+        // 初始化功能按钮选项
+        this.fullButtonOptions = { ...this.fullButtonOptions, ...options };
+        this.exitButtonOptions = { ...this.exitButtonOptions, ...options };
+
+        // 创建功能按钮
+        this.fullButton = new MenuButton(this.fullButtonOptions);
+        this.exitButton = new MenuButton(this.exitButtonOptions);
+    }
+
+    /**
+     * 定义创建方法
+     * @param event 
+     * @param options 
+     */
+    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+        this.fullButton.onCreate(event, options);
+        this.exitButton.onCreate(event, options);
+        this.appendChild(this.fullButton);
+
+        // 定义按钮点击事件，全屏展示
+        this.fullButton.addEventListener("click", () => {
+            if (this.fullButtonOptions.enable) {
+                (event.editor as InnerEditor).uaiEditor.container.requestFullscreen();
+                this.removeChild(this.fullButton);
+                this.appendChild(this.exitButton);
+            }
+        });
+        // 定义按钮点击事件，退出全屏展示
+        this.exitButton.addEventListener("click", () => {
+            if (this.exitButtonOptions.enable) {
+                document.exitFullscreen();
+                this.removeChild(this.exitButton);
+                this.appendChild(this.fullButton);
+            }
+        });
+        // 定义退出全屏事件，需要同时切换按钮状态
+        document.addEventListener("fullscreenchange", () => {
+            this.click();
+        });
+    }
+
+    /**
+     * 定义按钮点击功能
+     */
+    click() {
+        // 如果当前不是全屏，就展示全屏按钮
+        if (!document.fullscreenElement) {
+            try {
+                this.removeChild(this.exitButton);
+            } catch (error) {
+            }
+            this.appendChild(this.fullButton);
+        } else {
+            // 否则就展示退出全屏按钮
+            try {
+                this.removeChild(this.fullButton);
+            } catch (error) {
+            }
+            this.appendChild(this.exitButton);
+        }
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.fullButton.onTransaction(event, options);
+        this.exitButton.onTransaction(event, options);
+    }
+
+    onEditableChange(editable: boolean) {
+        this.fullButtonOptions.enable = editable;
+        this.fullButton.onEditableChange(editable);
+        this.exitButtonOptions.enable = editable;
+        this.exitButton.onEditableChange(editable);
+    }
+}
+