Fullscreen plugin

.gitignore

@@ -3,6 +3,7 @@ node_modules
 docs
 .grunt
 .env
+.DS_Store
 e2e/client.js
 local.log
 .DS_Store

CHANGELOG.md

@@ -7,4 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [2.1.1] - UNRELEASED
 ### Added
 - This CHANGELOG
-- update NPM modules to remove security vulnerabilities
+- Fullscreen Plugin. The ability to add in a fullscreen button within container
+- Fullscreen Plugin Automated Testing
+- Fullscreen Plugin Documentation
+
+
+- update NPM modules to remove security vulnerabilities

README.md

@@ -359,6 +359,56 @@ container.openPath('game.html');
 any unsupported values. See [the SpringRoll Application Class docs](https://github.com/SpringRoll/SpringRoll/tree/v2/src#handling-state-change)
 for more information on the request format.
 
+### Fullscreen Plugin
+The fullscreen plugin hooks up an element or elements to set the iframe to full screen then communicates this through Bellhop. The plugin will also add the class ```'--fullScreen'``` to the element(s) given
+
+```javascript
+import { FullScreenPlugin, Container } from  'springroll-container';
+
+const container = new Container('#game', {
+
+  plugins: [
+    // FullScreenPlugin expects the selector for the element(s) to hook onto
+    new FullScreenPlugin('#fullScreenButton'),
+  ]
+  });
+
+container.openPath('game.html');
+
+```
+
+The plugin will accept either a selector or an array of selectors as a parameter
+
+```javascript
+new FullScreenPlugin('#fullScreenButton');
+new FullScreenPlugin(['#fullScreenButton', '.fullScreenButtonSideNav']);
+
+// It will also accept one string with all selectors each seperated by a comma
+new FullScreenPlugin('#fullScreenButton, .fullScreenButtonSideNav');
+
+
+```
+
+The typical html can look something like this however, the element may be positioned anywhere in the html as long as it is not inside the iframe
+
+
+```html
+
+<nav>
+  <!-- May be a button or any other element that can create an onclick event -->
+  <button id='fullScreenButton'>Fullscreen</button>
+</nav>
+<!-- The element cannot be inside the source file -->
+<iframe id="game" scrolling="no"></iframe>
+
+
+```
+isFullScreen returns true if there is a fullscreen element
+`` FullScreenPlugin.isFullScreen ``
+
+
+---
+
 ### Multiple Plugin Controls
 All Plugins accept one or more HTML elements as controls in their constructor.
 For example the SoundPlugin can accept more than one volume slider or button if your set up requires it:

src/plugins/FullScreenPlugin.js

@@ -0,0 +1,121 @@
+import { ButtonPlugin } from '../base-plugins/ButtonPlugin';
+import { Button } from '../ui-elements';
+
+/**
+ * A Springroll plugin to easily set up togglable fullscreen
+ */
+export class FullScreenPlugin extends ButtonPlugin {
+
+  /**
+   *  Creates an instance of FullscreenPlugin
+   * 
+   * @param {string | string[]} buttonSelector The selector for the element to be made fullscreen
+   */
+  constructor(buttonSelector) {
+    super({
+      name: FullScreenPlugin.fullscreenKey
+    }); 
+
+    this._toggleButtons = [];
+    this.iFrame = null;
+
+    this.sendAllProperties = this.sendAllProperties.bind(this);
+
+    if (Array.isArray(buttonSelector)) {
+      // If input is an array, join the selectors into one string
+      buttonSelector = buttonSelector.join(', ');
+    }
+
+    console.log(buttonSelector);
+
+    this.toggleButton = document.querySelectorAll(buttonSelector);
+
+
+    this.toggleButton.forEach((button) => {
+      this._toggleButtons.push(new Button({
+        button: button,
+        onClick: this.toggleFullScreen.bind(this),
+        channel: FullScreenPlugin.fullscreenKey
+      }));
+    });
+
+
+    document.addEventListener('fullscreenchange',  () => {
+      this.sendAllProperties();
+
+      this._toggleButtons.forEach((button) => {
+        button.button.classList.toggle('--fullScreen');
+      });
+
+    });
+  }
+
+  /**
+   * @memberof FullScreenPlugin
+   */
+  init({ iframe }) {
+    this.iFrame = iframe;
+    // Handle the features request
+    this.client.on(
+      'features',
+      function($event) {
+        for (let i = 0; i < this.fullscreenElement; i ++) {
+          this._toggleButtons[i].displayButton($event.data);
+        }
+
+      }.bind(this)
+    );
+  }
+  /**
+  * @memberof FullScreenPlugin
+  */
+  start() {
+    this.client.on('loaded', this.sendAllProperties);
+    this.client.on('loadDone', this.sendAllProperties);
+  }
+
+  /**
+  *
+  * Sends initial fullScreen properties to the application
+  * @memberof FullScreenTogglePlugin
+  */
+  sendAllProperties() {
+    this.sendProperty(FullScreenPlugin.fullscreenKey, document.fullscreenElement != null ? 'true' : 'false');
+  }
+
+  /**
+   * Toggles fullscreen on this.iFrame. Must be from a user generated event
+   */
+  toggleFullScreen() {
+    if (!document.fullscreenElement) {
+      this.iFrame.requestFullscreen().then(() => {
+        this.sendAllProperties();
+      }).catch((err) => {
+        console.log(err);
+      });
+    } else {
+      document.exitFullscreen();
+      this.sendAllProperties();
+    }
+  }
+
+  /**
+   * Returns true if there is a fullscreen element and false if not
+   * @returns { boolean } 
+   */
+  get isFullScreen() {
+    return (document.fullscreenElement || // basic
+      document.webkitIsFullscreen || //Webkit browsers
+      document.mozFullScreen ) // Firefox
+      != true; // Ensure boolean output
+  }
+
+  /** 
+   * @readonly
+   * @static
+   * @memberof FullscreenPlugin
+   */
+  static get fullscreenKey() {
+    return 'fullScreen';
+  }
+}

src/plugins/FullScreenPlugin.spec.js

@@ -0,0 +1,57 @@
+import { Container, FullScreenPlugin } from '../index';
+import { makeButton } from '../../TestingUtils';
+import { Bellhop } from 'bellhop-iframe';
+
+describe('FullScreenPlugin', () => {
+  let fs;
+  let iframe;
+
+  before(() => {
+    document.body.innerHTML = '';
+    const toggleButton = makeButton('toggleButton');
+    document.body.append(toggleButton);
+  });
+
+  it('construct', () => {
+    iframe = document.createElement('iframe');
+
+    iframe.id = 'fullscreen-plugin-iframe';
+    iframe.setAttribute('allow', 'fullscreen');
+
+    document.body.appendChild(iframe);
+
+    fs = new FullScreenPlugin('#toggleButton');
+
+    new Container('#fullscreen-plugin-iframe', {plugins: [fs]}).client.trigger(
+      'features'
+    );
+
+    fs.init(document.getElementById('fullscreen-plugin-iframe'));
+    fs.preload({ client: new Bellhop() });
+
+  });
+
+  it('Plugin should work without any controls', () => {
+    //set up empty plugin
+    fs = new FullScreenPlugin();
+    fs.preload({ client: new Bellhop() });
+    fs.init(document.getElementById('fullscreen-plugin-iframe'));
+    fs.client.trigger('features', {});
+  });
+
+
+  it('Plugin should respond to the click event', () => {
+
+    document.body.appendChild(iframe);
+    const buttonOne = makeButton('toggleButton');
+    document.body.appendChild(buttonOne);
+
+    fs = new FullScreenPlugin('toggleButton');
+    fs.preload({ client: new Bellhop() });
+
+    fs.init(document.getElementById('fullscreen-plugin-iframe'));
+
+    buttonOne.click();
+
+  });
+});

src/plugins/UserDataPlugin.js

@@ -57,4 +57,4 @@ export class UserDataPlugin extends BasePlugin {
   onUserDataWrite({ type, data: { name, value } }) {
     SavedDataHandler.write(name, value, () => this.client.send(type));
   }
-}
+}

src/plugins/index.js

@@ -19,4 +19,5 @@ export * from './CompletionPercentagePlugin';
 export * from './SpeedScalePlugin';
 export * from './TimersScalePlugin';
 export * from './InputCountPlugin';
+export * from './FullScreenPlugin';
 

src/plugins/index.spec.js

@@ -20,4 +20,5 @@ import './ObjectCountPlugin.spec';
 import './CompletionPercentagePlugin.spec';
 import './SpeedScalePlugin.spec';
 import './TimersScalePlugin.spec';
-import './InputCountPlugin.spec';
+import './InputCountPlugin.spec';
+import './FullScreenPlugin.spec';

typings/plugins/FullScreenPlugin.d.ts

@@ -0,0 +1,18 @@
+
+import { ButtonPlugin } from '../base-plugins';
+import { Button } from'../ui-elements';
+
+export class FullScreenPlugin extends ButtonPlugin {
+  constructor(buttonSelector: string | string[]);
+  toggleButton: HTMLButtonElement | HTMLButtonElement[];
+  targetElement: HTMLElement;
+
+  get toggleButton(): HTMLButtonElement;
+  get targetElement(): HTMLButtonElement;
+
+  init(): void;
+  start(): void;
+
+  toggleFullScreen():void;
+  isFullscreen():void;
+}

typings/plugins/index.d.ts

@@ -19,3 +19,4 @@ export * from './CompletionPercentagePlugin';
 export * from './SpeedScalePlugin';
 export * from './TimersScalePlugin';
 export * from './InputCountPlugin';
+export * from './FullScreenPlugin';