From a0800da4c1b4e96c4e09fe134299871a7cfa3764 Mon Sep 17 00:00:00 2001 From: Madhura Jayaratne Date: Sun, 9 Dec 2012 06:22:59 +0530 Subject: [PATCH] Fullscreen mode for the designer --- js/jquery/jquery.fullscreen.js | 60 +++++++++++++++++++ js/pmd/move.js | 37 ++++++++++++ pmd_general.php | 10 ++++ themes/pmahomme/css/common.css.php | 4 ++ themes/pmahomme/css/pmd.css.php | 2 + themes/pmahomme/img/pmd/exitFullscreen.png | Bin 0 -> 444 bytes themes/pmahomme/img/pmd/viewInFullscreen.png | Bin 0 -> 472 bytes 7 files changed, 113 insertions(+) create mode 100644 js/jquery/jquery.fullscreen.js create mode 100644 themes/pmahomme/img/pmd/exitFullscreen.png create mode 100644 themes/pmahomme/img/pmd/viewInFullscreen.png diff --git a/js/jquery/jquery.fullscreen.js b/js/jquery/jquery.fullscreen.js new file mode 100644 index 0000000000..248e8ffde0 --- /dev/null +++ b/js/jquery/jquery.fullscreen.js @@ -0,0 +1,60 @@ +// jQuery.FullScreen plugin + +// Triple-licensed: Public Domain, MIT and WTFPL license - share and enjoy! + +(function($) { + function isFullScreen() { + return document[!prefix ? 'fullScreen' : + 'webkit' === prefix ? 'webkitIsFullScreen' : + prefix + 'FullScreen']; + } + function cancelFullScreen() { + return document[prefix ? prefix + 'CancelFullScreen' + : 'cancelFullScreen'](); + } + + var supported = typeof document.cancelFullScreen !== 'undefined' + , prefixes = ['webkit', 'moz', 'o', 'ms', 'khtml'] + , prefix = '' + , noop = function() {} + , i + ; + + if (!supported) { + for (i = 0; prefix = prefixes[i]; i++) { + if (typeof document[prefix + 'CancelFullScreen'] !== 'undefined') { + supported = true; + break; + } + } + } + + if (supported) { + $.fn.requestFullScreen = function() { + return this.each(function() { + return this[prefix ? prefix + 'RequestFullScreen' + : 'requestFullScreen'](); + }); + }; + $.fn.fullScreenChange = function(fn) { + var ar = [prefix + 'fullscreenchange'].concat([].slice.call(arguments, 0)) + , $e = $(this); + return $e.bind.apply($e, ar); + }; + $.FullScreen = + { isFullScreen: isFullScreen + , cancelFullScreen: cancelFullScreen + , prefix: prefix + , supported: supported + }; + } + else { + $.fn.requestFullScreen = $.fn.fullScreenChange = noop; + $.FullScreen = + { isFullScreen: function() { return false; } + , cancelFullScreen: noop + , prefix: prefix + , supported: supported + }; + } +})(jQuery); diff --git a/js/pmd/move.js b/js/pmd/move.js index c3697b4c23..03fab01a0f 100644 --- a/js/pmd/move.js +++ b/js/pmd/move.js @@ -12,6 +12,27 @@ var _staying = 0; // variable to check if the user stayed after seeing the confirmation prompt. var show_relation_lines = true; +AJAX.registerTeardown('pmd/move.js', function() { + if ($.FullScreen.supported) { + $(document).unbind($.FullScreen.prefix + 'fullscreenchange'); + } +}); + +AJAX.registerOnload('pmd/move.js', function() { + $('#exitFullscreen').hide(); + if ($.FullScreen.supported) { + $(document).fullScreenChange(function() { + if (! $.FullScreen.isFullScreen()) { + $('#canvas_outer').css({'width': 'auto', 'height': 'auto'}); + $('#enterFullscreen').show(); + $('#exitFullscreen').hide(); + } + }); + } else { + $('#enterFullscreen').hide(); + } +}); + // Below is the function to bind onbeforeunload events with the content_frame as well as the top window. /* @@ -461,7 +482,23 @@ function Rect(x1, y1, w, h, color) ctx.fillStyle = color; ctx.fillRect(x1, y1, w, h); } +//--------------------------- FULLSCREEN ------------------------------------- +function Enter_fullscreen() +{ + if (! $.FullScreen.isFullScreen()) { + $('#canvas_outer').css({'width': screen.width - 5, 'height': screen.height - 28}); + $('#enterFullscreen').hide(); + $('#exitFullscreen').show(); + $('#page_content').requestFullScreen(); + } +} +function Exit_fullscreen() +{ + if ($.FullScreen.isFullScreen()) { + $.FullScreen.cancelFullScreen(); + } +} //------------------------------ SAVE ------------------------------------------ function Save(url) // (del?) no for pdf { diff --git a/pmd_general.php b/pmd_general.php index 2971dd25a5..f3fb52f758 100644 --- a/pmd_general.php +++ b/pmd_general.php @@ -49,6 +49,7 @@ $scripts->addFile('pmd/history.js'); $scripts->addFile('pmd/move.js'); $scripts->addFile('pmd/iecanvas.js', true); $scripts->addFile('pmd/init.js'); +$scripts->addFile('jquery/jquery.fullscreen.js'); require 'libraries/db_common.inc.php'; require 'libraries/db_info.inc.php'; @@ -81,6 +82,15 @@ echo ''; v + + + + + + + diff --git a/themes/pmahomme/css/common.css.php b/themes/pmahomme/css/common.css.php index 939551fcca..c89a6bba15 100644 --- a/themes/pmahomme/css/common.css.php +++ b/themes/pmahomme/css/common.css.php @@ -2713,6 +2713,10 @@ fieldset .disabled-field td { background: #DDD; } +#page_content { + background-color: white; +} + .navigation { margin: .8em 0; diff --git a/themes/pmahomme/css/pmd.css.php b/themes/pmahomme/css/pmd.css.php index 2b130c49bc..ed8b318d3b 100644 --- a/themes/pmahomme/css/pmd.css.php +++ b/themes/pmahomme/css/pmd.css.php @@ -21,6 +21,8 @@ if (! defined('PMA_MINIMUM_COMMON') && ! defined('TESTSUITE')) { #canvas_outer { position: relative; + overflow: auto; + float: left; } #canvas { diff --git a/themes/pmahomme/img/pmd/exitFullscreen.png b/themes/pmahomme/img/pmd/exitFullscreen.png new file mode 100644 index 0000000000000000000000000000000000000000..1683d55a096e0753aa4ae80c688439c578cbc0ab GIT binary patch literal 444 zcmV;t0Ym${PJKJS=Q+>w>3R8dT&{of%+Af=C$R;}asf9FIh0Bz9#xeqwOtbF zM-=jTF))+OA%67)|KTN{plK?Ds1MUlloP1B&Wvo7iI z!fJtL%;QkmTL>%~1`MNEHIWia-QzT!{nW4P8jlcYclgnZyGnh=pmt*%0Z9$BwkqWa zSi3b+gOsZ6ceFyc<(5eex&X6H-yE&5V=Rc~flV~_m7$~tDP_V)tM2L0_kc^=35+iu zp>tw~x5-CRgOoDG?wZ`il6P)NklY>q_X~48hSe60HG;<4eT_aQ&x{isJD0U(-T*O`wi@zdz^^C>cOOlyLCM}9q zem{kEQ`-|n%XkRmiwC?bRy@0PhK|WFYPy45nE$pRX+_%-s=HRx