Browse Source

全屏按钮

vian 5 năm trước cách đây
mục cha
commit
636a71507a

+ 17 - 0
public/common_util.js

@@ -44,6 +44,22 @@
         }
     }
 
+    // 控制全屏(浏览器有限制)
+    // Element.requestFullscreen的全屏和“F11”的全屏是不一样的。前者是将相关Element变成全屏显示。后者是将浏览器导航、标签等隐藏。
+    // Fullscreen API对于全屏的判断和监听都是基于Element.requestFullscreen的,比如Document.fullscreenElement。通过F11触发的全屏Document.fullscreenElement返回null,无法正确返回全屏状态。
+    // F11全屏后,无法通过Fullscreen API对全屏状态判断,会导致F11全屏后点击按钮变成了再次调用api全屏。因此,使用window.innerHeight和window.screen.height作为判断。(打开了控制台后,此方法可能会失效:无法正确或缺innerHeight)
+    // 通过F11打开全屏后,没有办法通过代码退出全屏,只能通过F11退出:
+    // https://stackoverflow.com/questions/51114885/combining-requestfullscreen-and-f11; https://stackoverflow.com/questions/43392583/fullscreen-api-not-working-if-triggered-with-f11/44368592#44368592;
+    function handleFullscreen() {
+        const isFullscreen = window.innerHeight === window.screen.height;
+        if (isFullscreen) {
+            const p = document.exitFullscreen();
+            p.catch(() => alert('按F11即可退出全屏模式'));
+        } else {
+            document.documentElement.requestFullscreen();
+        }
+    }
+
     // 给数值加上分割
     // eg: 1234567.00 => 1,234,567.00
     function standardNumber(str) {
@@ -70,6 +86,7 @@
         isDef,
         isEmptyVal,
         getSortedTreeData,
+        handleFullscreen,
         standardNumber,
     };
 });

+ 15 - 10
public/web/syntax-detection.js

@@ -150,6 +150,11 @@ function checkSyntax() {
             }
         }
 
+        // DOM
+        if (typeof document.documentElement.requestFullscreen !== 'function') {
+            throw new TypeError('document.documentElement.requestFullscreen is not a function');
+        }
+
     } catch (err) {
         console.log(err);
         return false;
@@ -161,16 +166,16 @@ function showBrowserTip() {
     var html = '<div class="modal fade" id="browser" data-backdrop="static">' +
         '<div class="modal-dialog modal-lg" role="document">' +
         '<div class="modal-content">' +
-            '<div class="modal-body">' +
-                '<h5>浏览器版本过低,可能会有安全风险;</h5>' +
-                '<h5>请更新 「浏览器」 或者 使用 「纵横Z+造价工作平台」 登录。</h5>' +
-                '<div class="row my-4">' +
-                    '<div class="col-6">' +
-                        '<div class="text-center"><a href="https://www.microsoft.com/zh-cn/edge" class="btn btn-primary" target="_blank">下载 Microsoft Edge</a></div>' +
-                    '</div>' +
-                    '<div class="col-6">' +
-                        '<div class="text-center"><a href="https://smartcost.com.cn/downloadzplus" class="btn btn-primary" target="_blank">下载 纵横Z+造价工作平台</a></div>' +
-                    '</div></div></div></div></div></div>';
+        '<div class="modal-body">' +
+        '<h5>浏览器版本过低,可能会有安全风险;</h5>' +
+        '<h5>请更新 「浏览器」 或者 使用 「纵横Z+造价工作平台」 登录。</h5>' +
+        '<div class="row my-4">' +
+        '<div class="col-6">' +
+        '<div class="text-center"><a href="https://www.microsoft.com/zh-cn/edge" class="btn btn-primary" target="_blank">下载 Microsoft Edge</a></div>' +
+        '</div>' +
+        '<div class="col-6">' +
+        '<div class="text-center"><a href="https://smartcost.com.cn/downloadzplus" class="btn btn-primary" target="_blank">下载 纵横Z+造价工作平台</a></div>' +
+        '</div></div></div></div></div></div>';
     $('body').append(html);
     $('#browser').modal('show');
 }

+ 0 - 3
web/building_saas/main/js/views/project_view.js

@@ -1325,7 +1325,6 @@ var projectObj = {
                 },
                 "insertBills": {
                     type: projectObj.registerFlexibleInsertBillMenu(insertBillsName),
-                    icon: 'fa-sign-in',
                     disabled: function () {
                         if (projectReadOnly) {
                             return true;
@@ -1347,8 +1346,6 @@ var projectObj = {
                 "spr1": '--------',
                 "insertRation": {
                     type: projectObj.registerFlexibleInsertRatoinMenu(),
-                    name: "插入定额",
-                    icon: 'fa-sign-in',
                     disabled: function () {
                         if (projectReadOnly) {
                             return true;

+ 3 - 0
web/common/html/header.html

@@ -36,6 +36,9 @@
                     <a class="dropdown-item" href="/logout">退出登录</a>
                 </div>
             </li>
+            <li class="nav-item">
+                <a id="fullscreen-a" href="javascript:void(0);" class="nav-link" onclick="commonUtil.handleFullscreen()"><span><i class="fa fa-window-maximize "></i> 全屏</span></a>
+            </li>
             <% if (!versionName.includes('免费')) {%>
             <li class="nav-item">
               <a href="user/buy" target="_blank"><img src="/web/building_saas/img/vip.png" data-toggle="tooltip" data-placement="bottom" data-original-title="专业版用户"></a>