feat: 更改 FullScreen 为服务

Author: ArgoZhang

src/BootstrapBlazor/Components/FullScreen/FullScreenService.cs renamed to 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.InvokeAsync<string?>("toggle", token, option);
+    }
 }

src/BootstrapBlazor/wwwroot/modules/fullscreen.js

@@ -1,63 +1,47 @@
 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 function toggle(options) {
+    let el = null;
+    options = options || {};
+    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()
+            exit();
         }
         else {
-            fs.enter()
+            enterFullscreen(el);
         }
     }
+}
 
-    fs.enter = () => {
-        fs.toggleElement.requestFullscreen() ||
-            fs.toggleElement.webkitRequestFullscreen ||
-            fs.toggleElement.mozRequestFullScreen ||
-            fs.toggleElement.msRequestFullscreen
+const enterFullscreen = el => {
+    el.requestFullscreen() || el.webkitRequestFullscreen || el.mozRequestFullScreen || el.msRequestFullscreen
 
-        // 处理 ESC 按键退出全屏
-        var handler = setTimeout(() => {
-            clearTimeout(handler);
+    // 处理 ESC 按键退出全屏
+    var handler = setTimeout(() => {
+        clearTimeout(handler);
 
-            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);
-                }
+        const fullscreenCheck = () => {
+            if (!isFullscreen()) {
+                el.classList.remove('bb-fs-open');
+                document.documentElement.classList.remove('bb-fs-open');
             }
-            requestAnimationFrame(fullscreenCheck);
-        }, 200);
-    }
-}
-
-export function execute(id, options) {
-    const fs = Data.get(id)
-    if (fs) {
-        fs.toggle(options);
-    }
-}
-
-export function dispose(id) {
-    Data.remove(id)
+            else {
+                el.classList.add('bb-fs-open')
+                requestAnimationFrame(fullscreenCheck);
+            }
+        }
+        requestAnimationFrame(fullscreenCheck);
+    }, 200);
 }
 
 const isFullscreen = () => {