Improved fullscreen functionality.

- the requestFullScreen function now has two boolean arguments:
  "doLockPointer" and "doResizeCanvas"
- when using "doResizeCanvas", the SDL application gets notified via the
  "SDL_VIDEORESIZE" event of the new resolution, the old resolution setting
  is saved and gets restored when the canvas returns to windowed mode
- when setting "doLockPointer" to false the mouse pointer remains visible
  in fullscreen mode and allows e.g. RTS (Real Time Strategy) type games
- the SDL application can check via the "SDL_FULLSCREEN" flag in the flags
  field of the SDL_Surface struct whether the canvas is currently
  in fullscreen mode or not.
- depending on the browser the SDL application can switch out of the
  fullscreen mode with the "SDL_WM_ToggleFullScreen(SDL_Surface*);" call
  (currently chrome supports it, firefox does not)
- Also, the requestFullScreen has been fixed to avoid repeated adding of
  the event listeners every time requestFullScreen is called.
- src/shell.html got changed to demonstrate all variants to switch to
  fullscreen mode

Note:
Due to the security model of web browsers, the SDL model cannot be
fully supported.

What is not possible?
- Initiating the switch to fullscreen from the SDL application.
- Initiating the pointer lock from the SDL application when *not* in
  fullscreen mode

How to work around the limitations?
All the actions that cannot be initiated by the SDL application have to be
initiated by the web browser instead.

A good practice should be to start the application in windowed mode and
have a button situated close to the canvas which switches the canvas into
fullscreen mode and also changes the canvas size to fullscreen resolution.
This way, the SDL application receives a SDL_VIDEORESIZE event and can
check in the even handler whether it is now in fullscreen mode and take
further actions.
When leaving fullscreen mode the old windowed canvas resolution gets
restored and triggers another SDL_VIDEORESIZE event which - again - can be
used to adapt the application to windowed mode.

Signed-off-by: Michael Riss <Michael.Riss@gmx.de>

3 files changed, 86 insertions, 14 deletions

diff --git a/src/library_browser.js b/src/library_browser.js
index 5b19a360..d5ff4017 100644
--- a/src/library_browser.js
+++ b/src/library_browser.js
@@ -3,7 +3,7 @@
 // Utilities for browser environments
 
 mergeInto(LibraryManager.library, {
-  $Browser__postset: 'Module["requestFullScreen"] = function() { Browser.requestFullScreen() };\n' + // exports
+  $Browser__postset: 'Module["requestFullScreen"] = function(doLockPointer, doResizeCanvas) { Browser.requestFullScreen(doLockPointer, doResizeCanvas) };\n' + // exports
                      'Module["requestAnimationFrame"] = function(func) { Browser.requestAnimationFrame(func) };\n' +
                      'Module["pauseMainLoop"] = function() { Browser.mainLoop.pause() };\n' +
                      'Module["resumeMainLoop"] = function() { Browser.mainLoop.resume() };\n',
@@ -273,8 +273,15 @@ mergeInto(LibraryManager.library, {
       }
       return ctx;
     },
+
     destroyContext: function(canvas, useWebGL, setInModule) {},
-    requestFullScreen: function() {
+
+    storedFullScreenHandler: null,
+    storedPointerLockHandler: null,
+    requestFullScreen: function(doLockPointer, doResizeCanvas) {
+      if(typeof(doLockPointer)==='undefined') doLockPointer = true;
+      if(typeof(doResizeCanvas)==='undefined') doResizeCanvas = false;
+  
       var canvas = Module['canvas'];
       function fullScreenChange() {
         var isFullScreen = false;
@@ -284,25 +291,51 @@ mergeInto(LibraryManager.library, {
           canvas.requestPointerLock = canvas['requestPointerLock'] ||
                                       canvas['mozRequestPointerLock'] ||
                                       canvas['webkitRequestPointerLock'];
-          canvas.requestPointerLock();
+          canvas.exitPointerLock = document['exitPointerLock'] ||
+                                   document['mozExitPointerLock'] ||
+                                   document['webkitExitPointerLock'];
+          canvas.exitPointerLock = canvas.exitPointerLock.bind( document );
+          canvas.cancelFullScreen = document['cancelFullScreen'] ||
+                                    document['mozCancelFullScreen'] ||
+                                    document['webkitCancelFullScreen'];
+          canvas.cancelFullScreen = canvas.cancelFullScreen.bind( document );
+          if (doLockPointer) canvas.requestPointerLock();
           isFullScreen = true;
+          if(doResizeCanvas) Browser.setFullScreenCanvasSize();
+        } else if(doResizeCanvas){
+          Browser.setWindowedCanvasSize();
         }
         if (Module['onFullScreen']) Module['onFullScreen'](isFullScreen);
       }
 
-      document.addEventListener('fullscreenchange', fullScreenChange, false);
-      document.addEventListener('mozfullscreenchange', fullScreenChange, false);
-      document.addEventListener('webkitfullscreenchange', fullScreenChange, false);
-
       function pointerLockChange() {
         Browser.pointerLock = document['pointerLockElement'] === canvas ||
                               document['mozPointerLockElement'] === canvas ||
                               document['webkitPointerLockElement'] === canvas;
       }
+      
+      if( !(this.storedFullScreenHandler == null) ){
+        document.removeEventListener('fullscreenchange', this.storedFullScreenHandler, false);
+        document.removeEventListener('mozfullscreenchange', this.storedFullScreenHandler, false);
+        document.removeEventListener('webkitfullscreenchange', this.storedFullScreenHandler, false);
+        this.storedFullScreenHandler = null;
+      }
+      if( !(this.storedPointerLockHandler == null) ){
+        document.addEventListener('pointerlockchange', this.storedPointerLockHandler, false);
+        document.addEventListener('mozpointerlockchange', this.storedPointerLockHandler, false);
+        document.addEventListener('webkitpointerlockchange', this.storedPointerLockHandler, false);
+        this.storedPointerLockHandler = null;
+      }
+      
+      this.storedFullScreenHandler = fullScreenChange;
+      document.addEventListener('fullscreenchange', this.storedFullScreenHandler, false);
+      document.addEventListener('mozfullscreenchange', this.storedFullScreenHandler, false);
+      document.addEventListener('webkitfullscreenchange', this.storedFullScreenHandler, false);
 
-      document.addEventListener('pointerlockchange', pointerLockChange, false);
-      document.addEventListener('mozpointerlockchange', pointerLockChange, false);
-      document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
+      this.storedPointerLockHandler = pointerLockChange;
+      document.addEventListener('pointerlockchange', this.storedPointerLockHandler, false);
+      document.addEventListener('mozpointerlockchange', this.storedPointerLockHandler, false);
+      document.addEventListener('webkitpointerlockchange', this.storedPointerLockHandler, false);
 
       canvas.requestFullScreen = canvas['requestFullScreen'] ||
                                  canvas['mozRequestFullScreen'] ||
@@ -380,7 +413,32 @@ mergeInto(LibraryManager.library, {
       canvas.width = width;
       canvas.height = height;
       if (!noUpdates) Browser.updateResizeListeners();
+    },
+
+    windowedWidth: 0,
+    windowedHeight: 0,
+    setFullScreenCanvasSize: function() {
+      var canvas = Module['canvas'];
+      this.windowedWidth = canvas.width;
+      this.windowedHeight = canvas.height;
+      canvas.width = screen.width;
+      canvas.height = screen.height;
+      var flags = {{{ makeGetValue('SDL.screen+Runtime.QUANTUM_SIZE*0', '0', 'i32', 0, 1) }}};
+      flags = flags | 0x00800000;
+      {{{ makeSetValue('SDL.screen+Runtime.QUANTUM_SIZE*0', '0', 'flags', 'i32') }}}
+      Browser.updateResizeListeners();
+    },
+    
+    setWindowedCanvasSize: function() {
+      var canvas = Module['canvas'];
+      canvas.width = this.windowedWidth;
+      canvas.height = this.windowedHeight;
+      var flags = {{{ makeGetValue('SDL.screen+Runtime.QUANTUM_SIZE*0', '0', 'i32', 0, 1) }}};
+      flags = flags & ~0x00800000;
+      {{{ makeSetValue('SDL.screen+Runtime.QUANTUM_SIZE*0', '0', 'flags', 'i32') }}}
+      Browser.updateResizeListeners();
     }
+    
   },
 
   emscripten_async_wget: function(url, file, onload, onerror) {
diff --git a/src/library_sdl.js b/src/library_sdl.js
index d707a8bf..ec3c5455 100644
--- a/src/library_sdl.js
+++ b/src/library_sdl.js
@@ -661,8 +661,8 @@ var LibrarySDL = {
     {{{ makeSetValue('ret+Runtime.QUANTUM_SIZE*0', '0', '0', 'i32') }}} // TODO
     {{{ makeSetValue('ret+Runtime.QUANTUM_SIZE*1', '0', '0', 'i32') }}} // TODO
     {{{ makeSetValue('ret+Runtime.QUANTUM_SIZE*2', '0', '0', 'void*') }}}
-    {{{ makeSetValue('ret+Runtime.QUANTUM_SIZE*3', '0', 'SDL.defaults.width', 'i32') }}}
-    {{{ makeSetValue('ret+Runtime.QUANTUM_SIZE*4', '0', 'SDL.defaults.height', 'i32') }}}
+    {{{ makeSetValue('ret+Runtime.QUANTUM_SIZE*3', '0', 'Module[\'canvas\'].width', 'i32') }}}
+    {{{ makeSetValue('ret+Runtime.QUANTUM_SIZE*4', '0', 'Module[\'canvas\'].height', 'i32') }}}
     return ret;
   },
 
@@ -919,7 +919,11 @@ var LibrarySDL = {
   },
 
   SDL_ShowCursor: function(toggle) {
-    // TODO
+    if(toggle){
+      Module['canvas'].exitPointerLock();
+    } else {
+      Module['canvas'].requestPointerLock();
+    }
   },
 
   SDL_GetError: function() {
@@ -1075,6 +1079,10 @@ var LibrarySDL = {
   },
 
   SDL_WM_GrabInput: function() {},
+  
+  SDL_WM_ToggleFullScreen: function(surf) {
+    Module['canvas'].cancelFullScreen();
+  },
 
   // SDL_Image
 
diff --git a/src/shell.html b/src/shell.html
index 4f39b26a..3341e2b9 100644
--- a/src/shell.html
+++ b/src/shell.html
@@ -19,7 +19,13 @@
     </div>
     <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
     <hr/>
-    <div class="emscripten"><input type="button" value="fullscreen" onclick="Module.requestFullScreen()"></div>
+    <div class="emscripten">
+      <input type="button" value="only fullscreen" onclick="Module.requestFullScreen(false, false)">
+      <input type="button" value="fullscreen + resize" onclick="Module.requestFullScreen(false, true)">
+      <input type="button" value="fullscreen + pointerLock" onclick="Module.requestFullScreen()"> <!--default-->
+      <input type="button" value="fullscreen + pointerLock + resize" onclick="Module.requestFullScreen( true, true)">
+    </div>
+    
     <hr/>
     <textarea class="emscripten" id="output" rows="8"></textarea>
     <hr>