diff --git a/src/components/Footer.ts b/src/components/Footer.ts index e721c19..ac54cb2 100644 --- a/src/components/Footer.ts +++ b/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); } } \ No newline at end of file diff --git a/src/components/index.ts b/src/components/index.ts index 8b1146d..e3d04cf 100644 --- a/src/components/index.ts +++ b/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); diff --git a/src/components/menus/statusbar/Fullscreen.ts b/src/components/menus/statusbar/Fullscreen.ts new file mode 100644 index 0000000..0574cf6 --- /dev/null +++ b/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); + } +} +