Merge pull request #84 from solilokiam/create-fullscreen-key

Fullscreen mode

src/js/modules/webslides.js

@@ -417,6 +417,32 @@ export default class WebSlides {
     return this.el.classList.contains(CLASSES.DISABLED);
   }
 
+  /**
+   * Puts the browser into fullscreen
+   */
+  fullscreen() {
+    const el = document.documentElement;
+    const isFullscreen = document.fullscreen
+      || document.webkitIsFullScreen
+      || document.mozFullScreen
+      || document.msFullScreenElement;
+
+    if(!isFullscreen) {
+      const requestFullscreen = el.requestFullscreen
+          || el.webkitRequestFullScreen
+          || el.mozRequestFullScreen
+          || el.msRequestFullscreen;
+      requestFullscreen.call(el);
+    } else {
+      const cancelFullscreen = document.exitFullScreen
+        || document.webkitCancelFullScreen
+        || document.mozCancelFullScreen
+        || document.msExitFullscreen;
+
+      cancelFullscreen.call(document);
+    }
+  }
+
   /**
    * Registers a plugin to be loaded when the instance is created. It allows
    * (on purpose) to replace default plugins.

src/js/plugins/keyboard.js

@@ -61,6 +61,9 @@ export default class Keyboard {
       case Keys.RIGHT:
         method = !this.ws_.isVertical ? this.ws_.goNext : null;
         break;
+      case Keys.F:
+        method = this.ws_.fullscreen;
+        break;
     }
 
     if (method) {

src/js/utils/keys.js

@@ -11,7 +11,8 @@ const Keys = {
   DOWN: 40,
   PLUS: [107, 171],
   MINUS: [109, 173],
-  ESCAPE: 27
+  ESCAPE: 27,
+  F: 70
 };
 
 export default Keys;

test/modules/webslides.test.js

@@ -72,4 +72,14 @@ test('WebSlides utility', () => {
   expect(webslides.isDisabled()).toBe(true);
   webslides.enable();
   expect(webslides.isDisabled()).toBe(false);
+
+
+  document.fullscreen = false;
+  document.documentElement.requestFullscreen = jest.fn();
+  document.exitFullScreen = jest.fn();
+  webslides.fullscreen();
+  expect(document.documentElement.requestFullscreen.mock.calls.length).toBe(1);
+  document.fullscreen = true;
+  webslides.fullscreen();
+  expect(document.exitFullScreen.mock.calls.length).toBe(1);
 });

test/plugins/keyboard.test.js

@@ -22,6 +22,7 @@ test('Keyboard plugin', () => {
   const goto = jest.fn();
   const next = jest.fn();
   const prev = jest.fn();
+  const fullscreen = jest.fn();
   const ws = document.getElementById('webslides');
 
   let disabled = true;
@@ -31,6 +32,7 @@ test('Keyboard plugin', () => {
     goNext: next,
     goPrev: prev,
     isVertical: false,
+    fullscreen: fullscreen,
     isDisabled: () => disabled,
     el: ws
   };
@@ -61,4 +63,6 @@ test('Keyboard plugin', () => {
   expect(prev.mock.calls.length).toBe(2);
   simulateKeyEvent(document, Keys.RIGHT);
   expect(next.mock.calls.length).toBe(3);
+  simulateKeyEvent(document, Keys.F);
+  expect(fullscreen.mock.calls.length).toBe(1);
 });