tiny-essentials/dist/v1/basics/fullScreen.cjs

Collection of small, essential scripts designed to be used across various projects. These simple utilities are crafted for speed, ease of use, and versatility.

'use strict';

/**
 * Checks if the document is currently in fullscreen mode.
 *
 * @returns {boolean}
 */
const documentIsFullScreen = () =>
  !!(
    document.fullscreenElement ||
    // @ts-ignore
    document.webkitFullscreenElement ||
    // @ts-ignore
    document.mozFullScreenElement ||
    // @ts-ignore
    document.msFullscreenElement ||
    // @ts-ignore
    document.webkitIsFullScreen ||
    // @ts-ignore
    document.mozFullScreen
  );

/**
 * Checks if the window occupies the entire screen dimensions.
 *
 * @returns {boolean}
 */
const isScreenFilled = () =>
  window.innerHeight === screen.height && window.innerWidth === screen.width;

/**
 * Checks if fullscreen mode is active either via document API or by matching screen dimensions.
 *
 * @returns {boolean}
 */
const isFullScreenMode = () => documentIsFullScreen() || isScreenFilled();

/**
 * Requests fullscreen mode for the document.
 *
 * @param {FullscreenOptions} [ops]
 * @returns {Promise<void>}
 */
const requestFullScreen = (ops) =>
  new Promise(async (resolve, reject) => {
    const docElm = document.documentElement;
    try {
      if (docElm.requestFullscreen) {
        await docElm.requestFullscreen(ops);
        // @ts-ignore
      } else if (docElm.mozRequestFullScreen) {
        // @ts-ignore
        docElm.mozRequestFullScreen(ops);
        // @ts-ignore
      } else if (docElm.webkitRequestFullScreen) {
        // @ts-ignore
        docElm.webkitRequestFullScreen(ops);
        // @ts-ignore
      } else if (docElm.msRequestFullscreen) {
        // @ts-ignore
        docElm.msRequestFullscreen(ops);
      }
      resolve();
    } catch (err) {
      reject(err);
    }
  });

/**
 * Exits fullscreen mode.
 *
 * @returns {Promise<void>}
 */
const exitFullScreen = () =>
  new Promise((resolve, reject) => {
    if (document.exitFullscreen) {
      document.exitFullscreen().then(resolve).catch(reject);
    } else {
      try {
        // @ts-ignore
        if (document.mozCancelFullScreen) document.mozCancelFullScreen();
        // @ts-ignore
        else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen();
        // @ts-ignore
        else if (document.msExitFullscreen) document.msExitFullscreen();
        else throw new Error('Fullscreen API is not supported');
        resolve();
      } catch (err) {
        reject(err);
      }
    }
  });

/** @type {readonly string[]} */
const fullScreenEvents = [
  'fullscreenchange',
  'webkitfullscreenchange',
  'mozfullscreenchange',
  'MSFullscreenChange',
];

/**
 * Attaches a listener to fullscreen change events.
 *
 * @param {EventListenerOrEventListenerObject} listener
 * @param {boolean|AddEventListenerOptions} [ops]
 * @returns {void}
 */
const onFullScreenChange = (listener, ops) => {
  fullScreenEvents.forEach((event) => {
    document.addEventListener(event, listener, ops);
  });
};

/**
 * Removes a listener from fullscreen change events.
 *
 * @param {EventListenerOrEventListenerObject} listener
 * @param {boolean|AddEventListenerOptions} [ops]
 * @returns {void}
 */
const offFullScreenChange = (listener, ops) => {
  fullScreenEvents.forEach((event) => {
    document.removeEventListener(event, listener, ops);
  });
};

exports.documentIsFullScreen = documentIsFullScreen;
exports.exitFullScreen = exitFullScreen;
exports.isFullScreenMode = isFullScreenMode;
exports.isScreenFilled = isScreenFilled;
exports.offFullScreenChange = offFullScreenChange;
exports.onFullScreenChange = onFullScreenChange;
exports.requestFullScreen = requestFullScreen;