Fullscreen mode for the designer

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);

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
 {

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 '</div>';
         <img id='key_Show_left_menu' title="<?php echo __('Show/Hide left menu'); ?>" alt="v"
             src="<?php echo $_SESSION['PMA_Theme']->getImgPath('pmd/downarrow2_m.png'); ?>" />
     </a>
+    <a href="#" id="enterFullscreen" onclick="Enter_fullscreen(); return false" class="M_butt" target="_self">
+        <img title="<?php echo __('View in fullscreen') ?>" alt=""
+            src="<?php echo $_SESSION['PMA_Theme']->getImgPath('pmd/viewInFullscreen.png'); ?>" />
+    </a>
+    <a href="#" id="exitFullscreen" onclick="Exit_fullscreen(); return false" class="M_butt hide" target="_self">
+        <img title="<?php echo __('Exit fullscreen') ?>" alt=""
+            src="<?php echo $_SESSION['PMA_Theme']->getImgPath('pmd/exitFullscreen.png'); ?>" />
+    </a>
+    <img class="M_bord" src="<?php echo $_SESSION['PMA_Theme']->getImgPath('pmd/bord.png'); ?>" alt="" />
     <a href="#" onclick="Save2(); return false" class="M_butt" target="_self">
         <img title="<?php echo __('Save position') ?>" alt=""
             src="<?php echo $_SESSION['PMA_Theme']->getImgPath('pmd/save.png'); ?>" />

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;
 

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 {