Toggle-fullscreen NPM

toggle-fullscreen

Promise based Fullscreen API for cross-browser.

async function() {
  const element = document.querySelector('some element');
  await toggleFullscreen(element);
  await otherFunc();
}

Install

npm install --save toggle-fullscreen

API

toggleFullscreen(target) ⇒ Promise<>

Requests Fullscreen API. Request to exit fullscreen mode if target is already fullscreen.

Param	Type	Description
target	Element	target element to change fullscreen

Usage:

var target = document.querySelector('#target');
toggleFullscreen(target);

For jQuery:

$('#target').on('click', event => {
	toggleFullscreen(event.target);
});

fullscreenChange(callback) ⇒ Promise<>

Add a listener for when the browser switches in and out of fullscreen.

Param	Type	Description
callback	function	function to be called when the browser switches in and out of fullscreen

Usage:

fullscreenChange(function() {
  console.log('switch fullscreen');
});

isFullscreen() ⇒ Boolean

Check whether fullscreen is active. Usage:

if (isFullscreen()) {
  console.log('fullscreen is active');
} else {
  console.log('fullscreen is not active');
}

Example

import toggleFullscreen, {
  fullscreenChange,
  isFullscreen,
} from 'toggle-fullscreen';

onChangeFullScreen = () => {
  const element = document.getElementById('something');
  toggleFullscreen(element)
    .then(() => {
      return fullscreenChange(() => {
        const isFullScreen = isFullscreen();
        if (isFullScreen) {
          // any process in fullscreen mode
          // e.g.document.addEventListener('keydown', keydownFunction);
        } else {
          // any process in non-fullscreen mode
          // e.g.document.removeEventListener('keydown', keydownFunction);
        }
      });
    })
    .then(() => {
      console.log('successed!');
    })
    .catch(() => {
      console.log('failed!');
    });
};

Or use Promise.all()

import toggleFullscreen, {
  fullscreenChange,
  isFullscreen,
} from 'toggle-fullscreen';

onChangeFullScreen = () => {
  // target element
  const element = document.getElementById('something');
  // callback function when fullscreen change is detected.
  const callback = () => {
    const isFullScreen = isFullscreen();
    this.setState({isFullScreen: isFullScreen});
    if (isFullScreen) {
      document.addEventListener('keydown', this.keydownEvent);
      element.style.width = '70%';
    } else {
      document.removeEventListener('keydown', this.keydownEvent);
      element.style.width = '100%';
    }
  };
  // execute toggle-fullscreen and add listener when fullscreen change detected asynchronously
  Promise.all([toggleFullscreen(element), fullscreenChange(callback)]);
};

For async/await:

import toggleFullscreen, {
  fullscreenChange,
  isFullscreen,
} from 'toggle-fullscreen';

onChangeFullScreen = async () => {
  const element = document.getElementById('something');
  await toggleFullscreen(element);
  await fullscreenChange(() => {
    const isFullScreen = isFullscreen();
    if (isFullScreen) {
      // any process in fullscreen mode
      // e.g.document.addEventListener('keydown', keydownFunction);
    } else {
      // any process in non-fullscreen mode
      // e.g.document.removeEventListener('keydown', keydownFunction);
    }
  });
  console.log('successed!');
};

For callback (use if something is wrong with Promise) :

const toggleFullscreen = require('toggle-fullscreen');
onChangeFullScreen = function() {
  const element = document.getElementById('something');
  toggleFullscreen(element, function(isFullScreen) {
    if (isFullScreen) {
      // any process in fullscreen mode
      // e.g.document.addEventListener('keydown', this.keydownEvent);
    } else {
      // any process in non-fullscreen mode
      // e.g.document.removeEventListener('keydown', this.keydownEvent);
    }
  });
};