Add fullscreen with support to remote presentation controller (impress#712)

- F5 to enter/exit
- Escape to exit

Author: giflw

build.js

@@ -14,6 +14,7 @@ buildify()
            'src/plugins/blackout/blackout.js',
            'src/plugins/extras/extras.js',
            'src/plugins/form/form.js',
+           'src/plugins/fullscreen/fullscreen.js',
            'src/plugins/goto/goto.js',
            'src/plugins/help/help.js',
            'src/plugins/impressConsole/impressConsole.js',

js/impress.js

@@ -1668,6 +1668,64 @@
 } )( document );
 
 
+/**
+ * Fullscreen plugin
+ *
+ * Press F5 to enter fullscreen and ESC to exit fullscreen mode.
+ *
+ * Copyright 2019 @giflw
+ * Released under the MIT license.
+ */
+/* global document */
+
+( function( document ) {
+    "use strict";
+
+    function enterFullscreen() {
+        var elem = document.documentElement;
+        if ( !document.fullscreenElement ) {
+            elem.requestFullscreen();
+        }
+    }
+
+    function exitFullscreen() {
+        if ( document.fullscreenElement ) {
+            document.exitFullscreen();
+        }
+    }
+
+    // Wait for impress.js to be initialized
+    document.addEventListener( "impress:init", function( event ) {
+        var api = event.detail.api;
+        var root = event.target;
+        var gc = api.lib.gc;
+        var util = api.lib.util;
+
+        gc.addEventListener( document, "keydown", function( event ) {
+
+            // 116 (F5) is sent by presentation remote controllers
+            if ( event.code === "F5" ) {
+                event.preventDefault();
+                enterFullscreen();
+                util.triggerEvent( root.querySelector( ".active" ), "impress:steprefresh" );
+            }
+
+            // 27 (Escape) is sent by presentation remote controllers
+            if ( event.key === "Escape" || event.key === "F5" ) {
+                event.preventDefault();
+                exitFullscreen();
+                util.triggerEvent( root.querySelector( ".active" ), "impress:steprefresh" );
+            }
+        }, false );
+
+        util.triggerEvent( document, "impress:help:add",
+            { command: "F5 / ESC", text: "Fullscreen: Enter / Exit", row: 200 } );
+
+    }, false );
+
+} )( document );
+
+
 /**
  * Goto Plugin
  *

src/plugins/fullscreen/fullscreen.js

@@ -0,0 +1,57 @@
+/**
+ * Fullscreen plugin
+ *
+ * Press F5 to enter fullscreen and ESC to exit fullscreen mode.
+ *
+ * Copyright 2019 @giflw
+ * Released under the MIT license.
+ */
+/* global document */
+
+( function( document ) {
+    "use strict";
+
+    function enterFullscreen() {
+        var elem = document.documentElement;
+        if ( !document.fullscreenElement ) {
+            elem.requestFullscreen();
+        }
+    }
+
+    function exitFullscreen() {
+        if ( document.fullscreenElement ) {
+            document.exitFullscreen();
+        }
+    }
+
+    // Wait for impress.js to be initialized
+    document.addEventListener( "impress:init", function( event ) {
+        var api = event.detail.api;
+        var root = event.target;
+        var gc = api.lib.gc;
+        var util = api.lib.util;
+
+        gc.addEventListener( document, "keydown", function( event ) {
+
+            // 116 (F5) is sent by presentation remote controllers
+            if ( event.code === "F5" ) {
+                event.preventDefault();
+                enterFullscreen();
+                util.triggerEvent( root.querySelector( ".active" ), "impress:steprefresh" );
+            }
+
+            // 27 (Escape) is sent by presentation remote controllers
+            if ( event.key === "Escape" || event.key === "F5" ) {
+                event.preventDefault();
+                exitFullscreen();
+                util.triggerEvent( root.querySelector( ".active" ), "impress:steprefresh" );
+            }
+        }, false );
+
+        util.triggerEvent( document, "impress:help:add",
+            { command: "F5 / ESC", text: "Fullscreen: Enter / Exit", row: 200 } );
+
+    }, false );
+
+} )( document );
+