diff --git a/ruoyi-admin/src/main/resources/static/ajax/libs/fullscreen/jquery.fullscreen.js b/ruoyi-admin/src/main/resources/static/ajax/libs/fullscreen/jquery.fullscreen.js index 1b5d91b6..cc7fd51c 100644 --- a/ruoyi-admin/src/main/resources/static/ajax/libs/fullscreen/jquery.fullscreen.js +++ b/ruoyi-admin/src/main/resources/static/ajax/libs/fullscreen/jquery.fullscreen.js @@ -3,149 +3,180 @@ * 新增支持IE全屏显示 * Copyright (c) 2019 ruoyi */ - -/*jshint browser: true, jquery: true */ -(function($){ - "use strict"; - - // These helper functions available only to our plugin scope. - function supportFullScreen(){ - var doc = document.documentElement; - - return ('requestFullscreen' in doc) || - ('msRequestFullscreen' in doc) || - ('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) || - ('webkitRequestFullScreen' in doc); - } - - function requestFullScreen(elem){ - if (elem.requestFullscreen) { - elem.requestFullscreen(); - } else if (elem.mozRequestFullScreen) { - elem.mozRequestFullScreen(); - } else if (elem.webkitRequestFullScreen) { - elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); - } else if (elem.msRequestFullscreen) { - elem.msRequestFullscreen(); - } - } - - function fullScreenStatus(){ - return document.fullscreen || - document.mozFullScreen || - document.webkitIsFullScreen || - document.msFullscreenElement || - false; - } - - function cancelFullScreen(){ - if (document.exitFullscreen) { - document.exitFullscreen(); - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } else if (document.webkitCancelFullScreen) { - document.webkitCancelFullScreen(); - } else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } - } - - function onFullScreenEvent(callback){ - $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function(){ - // The full screen status is automatically - // passed to our callback as an argument. - callback(fullScreenStatus()); - }); - } - - // Adding a new test to the jQuery support object - $.support.fullscreen = supportFullScreen(); - - // Creating the plugin - $.fn.fullScreen = function(props){ - if(!$.support.fullscreen || this.length !== 1) { - // The plugin can be called only - // on one element at a time - - return this; - } - - if(fullScreenStatus()){ - // if we are already in fullscreen, exit - cancelFullScreen(); - return this; - } - - // You can potentially pas two arguments a color - // for the background and a callback function - - var options = $.extend({ - 'background' : '#111', - 'callback' : $.noop( ), - 'fullscreenClass' : 'fullScreen' - }, props), - - elem = this, - - // This temporary div is the element that is - // actually going to be enlarged in full screen - - fs = $('
', { - 'css' : { - 'overflow-y' : 'auto', - 'background' : options.background, - 'width' : '100%', - 'height' : '100%' - } - }) - .insertBefore(elem) - .append(elem); - - // You can use the .fullScreen class to - // apply styling to your element - elem.addClass( options.fullscreenClass ); - - // Inserting our element in the temporary - // div, after which we zoom it in fullscreen - - requestFullScreen(fs.get(0)); - - fs.click(function(e){ - if(e.target == this){ - // If the black bar was clicked - cancelFullScreen(); - } - }); - - elem.cancel = function(){ - cancelFullScreen(); - return elem; - }; - - onFullScreenEvent(function(fullScreen){ - if(!fullScreen){ - // We have exited full screen. - // Detach event listener - $(document).off( 'fullscreenchange mozfullscreenchange webkitfullscreenchange' ); - // Remove the class and destroy - // the temporary div - - elem.removeClass( options.fullscreenClass ).insertBefore(fs); - fs.remove(); - } - - // Calling the facultative user supplied callback - if(options.callback) { - options.callback(fullScreen); - } - }); - - return elem; - }; - - $.fn.cancelFullScreen = function( ) { - cancelFullScreen(); - - return this; - }; -}(jQuery)); +(function(jQuery) { + + /** + * Sets or gets the fullscreen state. + * + * @param {boolean=} state + * True to enable fullscreen mode, false to disable it. If not + * specified then the current fullscreen state is returned. + * @return {boolean|Element|jQuery|null} + * When querying the fullscreen state then the current fullscreen + * element (or true if browser doesn't support it) is returned + * when browser is currently in full screen mode. False is returned + * if browser is not in full screen mode. Null is returned if + * browser doesn't support fullscreen mode at all. When setting + * the fullscreen state then the current jQuery selection is + * returned for chaining. + * @this {jQuery} + */ + function fullScreen(state) + { + var e, func, doc; + + // Do nothing when nothing was selected + if (!this.length) return this; + + // We only use the first selected element because it doesn't make sense + // to fullscreen multiple elements. + e = (/** @type {Element} */ this[0]); + + // Find the real element and the document (Depends on whether the + // document itself or a HTML element was selected) + if (e.ownerDocument) + { + doc = e.ownerDocument; + } + else + { + doc = e; + e = doc.documentElement; + } + + // When no state was specified then return the current state. + if (state == null) + { + // When fullscreen mode is not supported then return null + if (!((/** @type {?Function} */ doc["exitFullscreen"]) + || (/** @type {?Function} */ doc["webkitExitFullscreen"]) + || (/** @type {?Function} */ doc["webkitCancelFullScreen"]) + || (/** @type {?Function} */ doc["msExitFullscreen"]) + || (/** @type {?Function} */ doc["mozCancelFullScreen"]))) + { + return null; + } + + // Check fullscreen state + state = !!doc["fullscreenElement"] + || !!doc["msFullscreenElement"] + || !!doc["webkitIsFullScreen"] + || !!doc["mozFullScreen"]; + if (!state) return state; + + // Return current fullscreen element or "true" if browser doesn't + // support this + return (/** @type {?Element} */ doc["fullscreenElement"]) + || (/** @type {?Element} */ doc["webkitFullscreenElement"]) + || (/** @type {?Element} */ doc["webkitCurrentFullScreenElement"]) + || (/** @type {?Element} */ doc["msFullscreenElement"]) + || (/** @type {?Element} */ doc["mozFullScreenElement"]) + || state; + } + + // When state was specified then enter or exit fullscreen mode. + if (state) + { + // Enter fullscreen + func = (/** @type {?Function} */ e["requestFullscreen"]) + || (/** @type {?Function} */ e["webkitRequestFullscreen"]) + || (/** @type {?Function} */ e["webkitRequestFullScreen"]) + || (/** @type {?Function} */ e["msRequestFullscreen"]) + || (/** @type {?Function} */ e["mozRequestFullScreen"]); + if (func) + { + func.call(e); + } + return this; + } + else + { + // Exit fullscreen + func = (/** @type {?Function} */ doc["exitFullscreen"]) + || (/** @type {?Function} */ doc["webkitExitFullscreen"]) + || (/** @type {?Function} */ doc["webkitCancelFullScreen"]) + || (/** @type {?Function} */ doc["msExitFullscreen"]) + || (/** @type {?Function} */ doc["mozCancelFullScreen"]); + if (func) func.call(doc); + return this; + } + } + + /** + * Toggles the fullscreen mode. + * + * @return {!jQuery} + * The jQuery selection for chaining. + * @this {jQuery} + */ + function toggleFullScreen() + { + return (/** @type {!jQuery} */ fullScreen.call(this, + !fullScreen.call(this))); + } + + /** + * Handles the browser-specific fullscreenchange event and triggers + * a jquery event for it. + * + * @param {?Event} event + * The fullscreenchange event. + */ + function fullScreenChangeHandler(event) + { + jQuery(document).trigger(new jQuery.Event("fullscreenchange")); + } + + /** + * Handles the browser-specific fullscreenerror event and triggers + * a jquery event for it. + * + * @param {?Event} event + * The fullscreenerror event. + */ + function fullScreenErrorHandler(event) + { + jQuery(document).trigger(new jQuery.Event("fullscreenerror")); + } + + /** + * Installs the fullscreenchange event handler. + */ + function installFullScreenHandlers() + { + var e, change, error; + + // Determine event name + e = document; + if (e["webkitCancelFullScreen"]) + { + change = "webkitfullscreenchange"; + error = "webkitfullscreenerror"; + } + else if (e["msExitFullscreen"]) + { + change = "MSFullscreenChange"; + error = "MSFullscreenError"; + } + else if (e["mozCancelFullScreen"]) + { + change = "mozfullscreenchange"; + error = "mozfullscreenerror"; + } + else + { + change = "fullscreenchange"; + error = "fullscreenerror"; + } + + // Install the event handlers + jQuery(document).bind(change, fullScreenChangeHandler); + jQuery(document).bind(error, fullScreenErrorHandler); + } + + jQuery.fn["fullScreen"] = fullScreen; + jQuery.fn["toggleFullScreen"] = toggleFullScreen; + installFullScreenHandlers(); + + })(jQuery); + \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/static/css/style.css b/ruoyi-admin/src/main/resources/static/css/style.css index 37ccc88c..dc2752ec 100644 --- a/ruoyi-admin/src/main/resources/static/css/style.css +++ b/ruoyi-admin/src/main/resources/static/css/style.css @@ -3313,7 +3313,7 @@ nav.page-tabs .page-tabs-content { } .roll-right.tabRight { - right: 140px; + right: 60px; } .roll-right.btn-group { diff --git a/ruoyi-admin/src/main/resources/static/ruoyi/index.js b/ruoyi-admin/src/main/resources/static/ruoyi/index.js index 0c238db6..9e361475 100644 --- a/ruoyi-admin/src/main/resources/static/ruoyi/index.js +++ b/ruoyi-admin/src/main/resources/static/ruoyi/index.js @@ -139,14 +139,14 @@ $(function() { //查看左侧隐藏的选项卡 function scrollTabLeft() { - var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')) + 50); + var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left'))); // 可视区域非tab宽度 var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs")); //可视区域tab宽度 var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth; //实际滚动宽度 var scrollVal = 0; - if (($(".page-tabs-content").width() + 50) < visibleWidth) { + if (($(".page-tabs-content").width()) < visibleWidth) { return false; } else { var tabElement = $(".menuTab:first"); @@ -425,7 +425,7 @@ $(function() { // 全屏显示 $('#fullScreen').on('click', function () { - $('#wrapper').fullScreen(); + $(document).toggleFullScreen(); }); // 刷新按钮 @@ -533,7 +533,8 @@ $(function() { icon: "fa-arrows-alt", callback: function(key, opt) { setActiveTab(this); - opt.$trigger.find('i').trigger("dblclick"); + var target = $('.RuoYi_iframe[data-id="' + this.data('id') + '"]'); + target.fullScreen(true); } }, "refresh": { diff --git a/ruoyi-admin/src/main/resources/templates/index.html b/ruoyi-admin/src/main/resources/templates/index.html index 923fc6f4..504998ef 100644 --- a/ruoyi-admin/src/main/resources/templates/index.html +++ b/ruoyi-admin/src/main/resources/templates/index.html @@ -55,7 +55,7 @@
  • - + 一级菜单 @@ -86,7 +86,7 @@