wholescreen.js/dist/wholescreen.umd.js

Minimal cross-browser wrapper of the Fullscreen API. Handles vendor prefixes for you!

/*! wholescreen.js v0.3.1 | (c) 2018 Albin Larsson | Licensed under MIT */
(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
	typeof define === 'function' && define.amd ? define(factory) :
	(global.wholescreen = factory());
}(this, (function () { 'use strict';

	var prefix = ['', 'webkit', 'moz', 'ms', 'MS'];
	var fullscreen = ['fullscreen', 'Fullscreen', 'FullScreen'];
	function combine(parts) {
	    return parts.reduce(function (a, b) { return [].concat.apply([], a.map(function (str1) { return b.map(function (str2) { return "" + str1 + str2; }); })); }, ['']);
	}
	function getProp(props, path) {
	    if (typeof document !== 'object') {
	        return '';
	    }
	    var container = path ? document[path] : document;
	    return combine(props).find(function (prop) { return Boolean(container && prop && prop in container); }) || '';
	}
	var props = {
	    element: getProp([prefix, fullscreen, ['Element']]),
	    exit: getProp([prefix, ['Exit', 'exit', 'Cancel', 'cancel'], fullscreen]),
	    request: getProp([prefix, ['request', 'Request'], fullscreen], 'body'),
	    supported: getProp([prefix, fullscreen, ['Enabled']]),
	};
	var events = {
	    change: getProp([['on'], prefix, fullscreen, ['change', 'Change']]).slice(2),
	    error: getProp([['on'], prefix, fullscreen, ['error', 'Error']]).slice(2),
	};

	var wholescreen = {
	    get active() {
	        return Boolean(document[props.element]);
	    },
	    get element() {
	        return document[props.element] || null;
	    },
	    events: events,
	    exit: function () { return props.exit && document[props.exit](); },
	    off: function (type, listener, options) { return events[type] && document.removeEventListener(events[type], listener, options); },
	    on: function (type, listener, options) { return events[type] && document.addEventListener(events[type], listener, options); },
	    props: props,
	    request: function (element) { return props.request && (element || document.documentElement)[props.request](); },
	    get supported() {
	        return Boolean(document[props.supported]);
	    },
	    toggle: function (element, enable) {
	        if (enable === void 0) { enable = !wholescreen.element; }
	        return (enable ? wholescreen.request(element) : wholescreen.exit());
	    },
	};

	return wholescreen;

})));