添加全屏显示

Author: deatil

resources/assets/css/index.css

@@ -76,6 +76,7 @@
     padding-right: 138px;
     height: 40px;
     border-bottom: 1px solid #e2e2e2;
+    background: #fff;
 }
 .lake-admin .lake-admin-top-tabs-box .tab-right {
     background: #fff;

resources/assets/js/layui-extend/lake-admin/lakeAdmin.js

@@ -1,5 +1,5 @@
 /*!
- * lakeAdmin.js v1.0.2
+ * lakeAdmin.js v1.0.3
  * https://github.com/deatil/lake-admin
  * 
  * Apache License 2.0 © Deatil
@@ -330,6 +330,15 @@ layui.define([
 
                 $(document).find('div.lake-admin-contextmenu').remove();
             });
+
+            // 全屏显示
+            $(document).on("click", ".lake-admin-page-fullscreen", function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                
+                var el = document.getElementById('body_frame');
+                screenfull.toggle(el);
+            });
 
             // 顶部鼠标移上显示
             var top_nav_layer_tips;

resources/assets/js/screenfull.js

@@ -0,0 +1,158 @@
+/* eslint-disable promise/prefer-await-to-then */
+
+const methodMap = [
+    [
+        'requestFullscreen',
+        'exitFullscreen',
+        'fullscreenElement',
+        'fullscreenEnabled',
+        'fullscreenchange',
+        'fullscreenerror',
+    ],
+    // New WebKit
+    [
+        'webkitRequestFullscreen',
+        'webkitExitFullscreen',
+        'webkitFullscreenElement',
+        'webkitFullscreenEnabled',
+        'webkitfullscreenchange',
+        'webkitfullscreenerror',
+
+    ],
+    // Old WebKit
+    [
+        'webkitRequestFullScreen',
+        'webkitCancelFullScreen',
+        'webkitCurrentFullScreenElement',
+        'webkitCancelFullScreen',
+        'webkitfullscreenchange',
+        'webkitfullscreenerror',
+
+    ],
+    [
+        'mozRequestFullScreen',
+        'mozCancelFullScreen',
+        'mozFullScreenElement',
+        'mozFullScreenEnabled',
+        'mozfullscreenchange',
+        'mozfullscreenerror',
+    ],
+    [
+        'msRequestFullscreen',
+        'msExitFullscreen',
+        'msFullscreenElement',
+        'msFullscreenEnabled',
+        'MSFullscreenChange',
+        'MSFullscreenError',
+    ],
+];
+
+const nativeAPI = (() => {
+    if (typeof document === 'undefined') {
+        return false;
+    }
+
+    const unprefixedMethods = methodMap[0];
+    const returnValue = {};
+
+    for (const methodList of methodMap) {
+        const exitFullscreenMethod = methodList?.[1];
+        if (exitFullscreenMethod in document) {
+            for (const [index, method] of methodList.entries()) {
+                returnValue[unprefixedMethods[index]] = method;
+            }
+
+            return returnValue;
+        }
+    }
+
+    return false;
+})();
+
+const eventNameMap = {
+    change: nativeAPI.fullscreenchange,
+    error: nativeAPI.fullscreenerror,
+};
+
+// eslint-disable-next-line import/no-mutable-exports
+let screenfull = {
+    // eslint-disable-next-line default-param-last
+    request(element = document.documentElement, options) {
+        return new Promise((resolve, reject) => {
+            const onFullScreenEntered = () => {
+                screenfull.off('change', onFullScreenEntered);
+                resolve();
+            };
+
+            screenfull.on('change', onFullScreenEntered);
+
+            const returnPromise = element[nativeAPI.requestFullscreen](options);
+
+            if (returnPromise instanceof Promise) {
+                returnPromise.then(onFullScreenEntered).catch(reject);
+            }
+        });
+    },
+    exit() {
+        return new Promise((resolve, reject) => {
+            if (!screenfull.isFullscreen) {
+                resolve();
+                return;
+            }
+
+            const onFullScreenExit = () => {
+                screenfull.off('change', onFullScreenExit);
+                resolve();
+            };
+
+            screenfull.on('change', onFullScreenExit);
+
+            const returnPromise = document[nativeAPI.exitFullscreen]();
+
+            if (returnPromise instanceof Promise) {
+                returnPromise.then(onFullScreenExit).catch(reject);
+            }
+        });
+    },
+    toggle(element, options) {
+        return screenfull.isFullscreen ? screenfull.exit() : screenfull.request(element, options);
+    },
+    onchange(callback) {
+        screenfull.on('change', callback);
+    },
+    onerror(callback) {
+        screenfull.on('error', callback);
+    },
+    on(event, callback) {
+        const eventName = eventNameMap[event];
+        if (eventName) {
+            document.addEventListener(eventName, callback, false);
+        }
+    },
+    off(event, callback) {
+        const eventName = eventNameMap[event];
+        if (eventName) {
+            document.removeEventListener(eventName, callback, false);
+        }
+    },
+    raw: nativeAPI,
+};
+
+Object.defineProperties(screenfull, {
+    isFullscreen: {
+        get: () => Boolean(document[nativeAPI.fullscreenElement]),
+    },
+    element: {
+        enumerable: true,
+        get: () => document[nativeAPI.fullscreenElement] ?? undefined,
+    },
+    isEnabled: {
+        enumerable: true,
+        // Coerce to boolean in case of old WebKit.
+        get: () => Boolean(document[nativeAPI.fullscreenEnabled]),
+    },
+});
+
+if (!nativeAPI) {
+    screenfull = {isEnabled: false};
+}

resources/views/index/index.html

@@ -190,6 +190,11 @@
                                         <i class="iconfont icon-richangqingli"></i> 关闭全部
                                     </a>
                                 </dd>
+                                <dd>
+                                    <a href="javascript:;" class="lake-admin-page-fullscreen" title="全屏显示">
+                                        <i class="iconfont icon-fullscreen"></i> 全屏显示
+                                    </a>
+                                </dd>
 
                                 <hr>
 
@@ -219,6 +224,7 @@
         </div>
     </div>
 
+    <script src="{:laket_assets('js/screenfull.js')}"></script>
     <script src="{:laket_assets('js/layui/layui.js')}"></script>
     {:do_action('admin_index_script_before')}
     <script type="text/javascript">

src/Admin.php

@@ -18,12 +18,12 @@ class Admin
     /**
      * 版本号
      */
-    const VERSION = "1.6.2";
+    const VERSION = "1.6.3";
 
     /**
      * 发布号
      */
-    const RELEASE = "20241126";
+    const RELEASE = "20250110";
 
     /**
      * 插件