diff --git a/admin/data/menu.json b/admin/data/menu.json index 61bccc5b0fa9fbe73ddcbcfd7aea2995c0c77351..232b0064b687561876c9201493dc01bb1fca960f 100644 --- a/admin/data/menu.json +++ b/admin/data/menu.json @@ -249,6 +249,13 @@ "type": 1, "openType": "_iframe", "href": "view/document/watermark.html" + }, + { + "id": 2047, + "title": "全屏组件", + "type": 1, + "openType": "_iframe", + "href": "view/document/fullscreen.html" } ] }] diff --git a/component/pear/css/module/fullscreen.css b/component/pear/css/module/fullscreen.css new file mode 100644 index 0000000000000000000000000000000000000000..c49058939706c580a8ebcff3c733a2dd948f9100 --- /dev/null +++ b/component/pear/css/module/fullscreen.css @@ -0,0 +1,12 @@ +html:-moz-full-screen { + background: grey; +} +html:-webkit-full-screen { + background: grey; +} +html:fullscreen { + background: grey; +} +:not(:root):fullscreen::backdrop{ + background:whitesmoke; +} \ No newline at end of file diff --git a/component/pear/css/pear.css b/component/pear/css/pear.css index 14efcc35b478f78aae77f3c9865c8f0b9146ef8e..d3ed538416b9f49cdf2905b59cf84b925dbebe4b 100644 --- a/component/pear/css/pear.css +++ b/component/pear/css/pear.css @@ -25,4 +25,5 @@ @import url("module/step.css"); @import url("module/card.css"); @import url("module/tab.css"); -@import url("module/tag.css"); \ No newline at end of file +@import url("module/tag.css"); +@import url("module/fullscreen.css"); \ No newline at end of file diff --git a/component/pear/module/admin.js b/component/pear/module/admin.js index 8f45be1eecdd708acba24ba59bad0695002276b0..69770f77bd07bf8061e507cf4abad225bc0f7d8b 100644 --- a/component/pear/module/admin.js +++ b/component/pear/module/admin.js @@ -1,4 +1,4 @@ -layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'menu', 'frame', 'theme', 'convert'], +layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'menu', 'frame', 'theme', 'convert','fullscreen'], function(exports) { "use strict"; @@ -11,7 +11,8 @@ layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'm pearMenu = layui.menu, pearFrame = layui.frame, pearTheme = layui.theme, - message = layui.message; + message = layui.message, + fullscreen=layui.fullscreen; var bodyFrame; var sideMenu; @@ -87,7 +88,10 @@ layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'm accordion: param.menu.accordion, url: param.menu.data, data: param.menu.data, - parseData: false, + parseData: function(data){ + data = data.data; + return data; + }, change: function() { compatible(); }, @@ -657,11 +661,11 @@ layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'm body.on("click", ".fullScreen", function() { if ($(this).hasClass("layui-icon-screen-restore")) { - screenFun(2).then(function() { + fullscreen.fullClose().then(function() { $(".fullScreen").eq(0).removeClass("layui-icon-screen-restore"); }); } else { - screenFun(1).then(function() { + fullscreen.fullScreen().then(function() { $(".fullScreen").eq(0).addClass("layui-icon-screen-restore"); }); } @@ -931,46 +935,6 @@ layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'm } } - function screenFun(num) { - num = num || 1; - num = num * 1; - var docElm = document.documentElement; - switch (num) { - case 1: - if (docElm.requestFullscreen) { - docElm.requestFullscreen(); - } else if (docElm.mozRequestFullScreen) { - docElm.mozRequestFullScreen(); - } else if (docElm.webkitRequestFullScreen) { - docElm.webkitRequestFullScreen(); - } else if (docElm.msRequestFullscreen) { - docElm.msRequestFullscreen(); - } - break; - case 2: - if (document.exitFullscreen) { - document.exitFullscreen(); - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } else if (document.webkitCancelFullScreen) { - document.webkitCancelFullScreen(); - } else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } - break; - } - return new Promise(function(res, rej) { - res("返回值"); - }); - } - - function isFullscreen() { - return document.fullscreenElement || - document.msFullscreenElement || - document.mozFullScreenElement || - document.webkitFullscreenElement || false; - } - function isControl(option) { if (option.theme.allowCustom) { if (localStorage.getItem("control") != null) { @@ -1008,13 +972,13 @@ layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'm } window.onresize = function() { - if (!isFullscreen()) { + if (!fullscreen.isFullscreen()) { $(".fullScreen").eq(0).removeClass("layui-icon-screen-restore"); } } $(window).on('resize', debounce(function () { - if (!sideMenu.isCollapse && $(window).width() <= 768) { + if (sideMenu && !sideMenu.isCollapse && $(window).width() <= 768) { collapse(); } },50)); diff --git a/component/pear/module/frame.js b/component/pear/module/frame.js index d9e60b087cfc951f5a2192ccab5da755c8652740..3f5af1919553d98d3f82868e41149e837b91f7a5 100644 --- a/component/pear/module/frame.js +++ b/component/pear/module/frame.js @@ -45,7 +45,7 @@ layui.define(['jquery', 'element'], function (exports) { } function createFrameHTML(option) { - var iframe = ""; + var iframe = ""; var loading = '
' + '
' + '' + diff --git a/component/pear/module/fullscreen.js b/component/pear/module/fullscreen.js new file mode 100644 index 0000000000000000000000000000000000000000..ebec40bf4e5b82c06d700454815a2b56fecce4b3 --- /dev/null +++ b/component/pear/module/fullscreen.js @@ -0,0 +1,46 @@ +layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'menu', 'frame', 'theme', 'convert'], + function(exports) { + "use strict"; + + var $ = layui.jquery; + var fullScreen = new function() { + this.fullScreen = function(dom){ + return new Promise(function(res, rej) { + var docElm = dom && document.querySelector(dom) || document.documentElement; + if (docElm.requestFullscreen) { + docElm.requestFullscreen(); + } else if (docElm.mozRequestFullScreen) { + docElm.mozRequestFullScreen(); + } else if (docElm.webkitRequestFullScreen) { + docElm.webkitRequestFullScreen(); + } else if (docElm.msRequestFullscreen) { + docElm.msRequestFullscreen(); + }else{ + rej(""); + } + res("返回值"); + }); + } + this.fullClose = function(){ + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.webkitCancelFullScreen) { + document.webkitCancelFullScreen(); + } else if (document.msExitFullscreen) { + document.msExitFullscreen(); + } + return new Promise(function(res, rej) { + res("返回值"); + }); + } + this.isFullscreen = function(){ + return document.fullscreenElement || + document.msFullscreenElement || + document.mozFullScreenElement || + document.webkitFullscreenElement || false; + } + }; + exports('fullscreen', fullScreen); + }) diff --git a/component/pear/module/tab.js b/component/pear/module/tab.js index 7efc73047f2d6e056088b560d7f10264822def0f..4284f45d668e4951af17b1f9d385fc7df84d27cd 100644 --- a/component/pear/module/tab.js +++ b/component/pear/module/tab.js @@ -182,7 +182,7 @@ layui.define(['jquery', 'element'], function(exports) { title: title, content: '', + opt.url + '" style="width:100%;height:100%;" allowfullscreen="true">', id: opt.id }); tabData.push(opt); @@ -255,7 +255,7 @@ layui.define(['jquery', 'element'], function(exports) { title: title, content: '', + opt.url + '" style="width:100%;height:100%;" allowfullscreen="true">', id: opt.id }); if (time != false && time != 0) { @@ -276,7 +276,7 @@ layui.define(['jquery', 'element'], function(exports) { title: title, content: '', + opt.url + '" style="width:100%;height:100%;" allowfullscreen="true">', id: opt.id }); if (time != false && time != 0) { @@ -307,7 +307,7 @@ layui.define(['jquery', 'element'], function(exports) { title: title, content: '', + opt.url + '" style="width:100%;height:100%;" allowfullscreen="true">', id: opt.id }); if (time != false && time != 0) { @@ -342,7 +342,7 @@ layui.define(['jquery', 'element'], function(exports) { title: title, content: '', + opt.url + '" style="width:100%;height:100%;" allowfullscreen="true">', id: opt.id }); if (time != false && time != 0) { @@ -487,7 +487,7 @@ layui.define(['jquery', 'element'], function(exports) { content += '
' + '" frameborder="no" border="0" marginwidth="0" marginheight="0" style="width: 100%;height: 100%;" allowfullscreen="true">
' } else { if (!option.preload) { item.url = "about:blank"; @@ -496,7 +496,7 @@ layui.define(['jquery', 'element'], function(exports) { content += '
' + '" frameborder="no" border="0" marginwidth="0" marginheight="0" style="width: 100%;height: 100%;" allowfullscreen="true">
' } index++; }); diff --git a/component/pear/pear.js b/component/pear/pear.js index d6d215df454f957258285dd74d5cf7ff4156fc3a..a4d910fb66195c303034fc6adf14fb29add41ed2 100644 --- a/component/pear/pear.js +++ b/component/pear/pear.js @@ -41,7 +41,8 @@ layui.config({ toast: "toast", // 消息通知 iconPicker: "iconPicker",// 图标选择 nprogress: "nprogress", // 进度过渡 - watermark:"watermark/watermark" //水印 + watermark:"watermark/watermark", //水印 + fullscreen:"fullscreen" //全屏组件 }).use(['layer', 'theme'], function () { layui.theme.changeTheme(window, false); }); \ No newline at end of file diff --git a/view/document/fullscreen.html b/view/document/fullscreen.html new file mode 100644 index 0000000000000000000000000000000000000000..3f6d1949d4cc98113cedba9f732a063c033b0d4e --- /dev/null +++ b/view/document/fullscreen.html @@ -0,0 +1,119 @@ + + + + + 全屏组件 + + + + +
+
+
+
开发环境
+
+ fullscreen 用于控制页面或元素全屏 +
+
+
+
+
+
+

显示代码

+
+ 
+								
+								 并
+								
+								 并
+								
+
+
+
+
+
+
+
+
全屏控制
+
+ + + +
+
+
+
+
+
+

显示代码

+
+ 
+								layui.use(['fullscreen'], function() {
+								    var fullscreen = layui.fullscreen;
+
+								    fullscreen.fullScreen();
+                                    fullscreen.fullClose();
+                                    fullscreen.fullScreen("#fulltarget");
+                                    fullscreen.isFullscreen();
+
+								})
+
+
+
+
+
+
+
+
指定容器全屏
+
+
+ + +
+
+
+
+
+ + + + +