feat(FullScreen): remove FullScreen component

src/BootstrapBlazor/Components/BaseComponents/BootstrapBlazorRoot.razor

@@ -4,7 +4,6 @@
 @RenderBody()
 
 <EyeDropper></EyeDropper>
-<FullScreen></FullScreen>
 <Clipboard></Clipboard>
 <Title></Title>
 

src/BootstrapBlazor/Components/FullScreen/FullScreenService.cs → src/BootstrapBlazor/Services/FullScreenService.cs

@@ -8,12 +8,20 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// FullScreen 服务
 /// </summary>
-public class FullScreenService : BootstrapServiceBase<FullScreenOption>
+public class FullScreenService(IJSRuntime jSRuntime)
 {
+    [NotNull]
+    private JSModule? _module = null;
+
     /// <summary>
     /// 全屏方法，已经全屏时再次调用后退出全屏
     /// </summary>
     /// <param name="option"></param>
+    /// <param name="token"></param>
     /// <returns></returns>
-    public Task Toggle(FullScreenOption? option = null) => Invoke(option ?? new());
+    public async Task Toggle(FullScreenOption? option = null, CancellationToken token = default)
+    {
+        _module ??= await jSRuntime.LoadModule("./_content/BootstrapBlazor/modules/fullscreen.js");
+        await _module.InvokeVoidAsync("toggle", token, option);
+    }
 }

src/BootstrapBlazor/wwwroot/modules/fullscreen.js

@@ -1,84 +1,39 @@
 import { isElement } from "./utility.js"
-import Data from "./data.js"
 
-export function init(id) {
-    const fs = { toggleElement: null };
-    Data.set(id, fs)
-
-    fs.toggle = options => {
-        if (options.id) {
-            fs.toggleElement = document.getElementById(options.id)
-        }
-        else if (options.element && isElement(options.element)) {
-            fs.toggleElement = el
-        }
-        else {
-            fs.toggleElement = document.documentElement
-        }
+export async function toggle(options) {
+    let el = null;
+    if (options?.id) {
+        el = document.getElementById(options.id);
+    }
+    else if (options?.element && isElement(options.element)) {
+        el = options.element;
+    }
+    else {
+        el = document.documentElement
+    }
 
+    if (el !== null) {
         if (isFullscreen()) {
-            exit()
+            await document.exitFullscreen()
         }
         else {
-            fs.enter()
+            await enterFullscreen(el);
         }
     }
+}
 
-    fs.enter = () => {
-        fs.toggleElement.requestFullscreen() ||
-            fs.toggleElement.webkitRequestFullscreen ||
-            fs.toggleElement.mozRequestFullScreen ||
-            fs.toggleElement.msRequestFullscreen
-
-        // 处理 ESC 按键退出全屏
-        var handler = setTimeout(() => {
-            clearTimeout(handler);
+const enterFullscreen = async el => {
+    await el.requestFullscreen();
 
-            const fullscreenCheck = () => {
-                if (!isFullscreen()) {
-                    fs.toggleElement.classList.remove('bb-fs-open');
-                    document.documentElement.classList.remove('bb-fs-open');
-                }
-                else {
-                    fs.toggleElement.classList.add('bb-fs-open')
-                    requestAnimationFrame(fullscreenCheck);
-                }
-            }
-            requestAnimationFrame(fullscreenCheck);
-        }, 200);
+    if (!isFullscreen()) {
+        el.classList.remove('bb-fs-open');
+        document.documentElement.classList.remove('bb-fs-open');
     }
-}
-
-export function execute(id, options) {
-    const fs = Data.get(id)
-    if (fs) {
-        fs.toggle(options);
+    else {
+        el.classList.add('bb-fs-open')
     }
 }
 
-export function dispose(id) {
-    Data.remove(id)
-}
-
 const isFullscreen = () => {
-    return document.fullscreen ||
-        document.webkitIsFullScreen ||
-        document.webkitFullScreen ||
-        document.mozFullScreen ||
-        document.msFullScreent
-}
-
-const exit = () => {
-    if (document.exitFullscreen) {
-        document.exitFullscreen()
-    }
-    else if (document.mozCancelFullScreen) {
-        document.mozCancelFullScreen()
-    }
-    else if (document.webkitExitFullscreen) {
-        document.webkitExitFullscreen()
-    }
-    else if (document.msExitFullscreen) {
-        document.msExitFullscreen()
-    }
+    return document.fullscreenElement !== null;
 }