import defined from './defined.js'; import defineProperties from './defineProperties.js'; var _supportsFullscreen; var _names = { requestFullscreen : undefined, exitFullscreen : undefined, fullscreenEnabled : undefined, fullscreenElement : undefined, fullscreenchange : undefined, fullscreenerror : undefined }; /** * Browser-independent functions for working with the standard fullscreen API. * * @exports Fullscreen * @namespace * * @see {@link http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html|W3C Fullscreen Living Specification} */ var Fullscreen = {}; defineProperties(Fullscreen, { /** * The element that is currently fullscreen, if any. To simply check if the * browser is in fullscreen mode or not, use {@link Fullscreen#fullscreen}. * @memberof Fullscreen * @type {Object} * @readonly */ element : { get : function() { if (!Fullscreen.supportsFullscreen()) { return undefined; } return document[_names.fullscreenElement]; } }, /** * The name of the event on the document that is fired when fullscreen is * entered or exited. This event name is intended for use with addEventListener. * In your event handler, to determine if the browser is in fullscreen mode or not, * use {@link Fullscreen#fullscreen}. * @memberof Fullscreen * @type {String} * @readonly */ changeEventName : { get : function() { if (!Fullscreen.supportsFullscreen()) { return undefined; } return _names.fullscreenchange; } }, /** * The name of the event that is fired when a fullscreen error * occurs. This event name is intended for use with addEventListener. * @memberof Fullscreen * @type {String} * @readonly */ errorEventName : { get : function() { if (!Fullscreen.supportsFullscreen()) { return undefined; } return _names.fullscreenerror; } }, /** * Determine whether the browser will allow an element to be made fullscreen, or not. * For example, by default, iframes cannot go fullscreen unless the containing page * adds an "allowfullscreen" attribute (or prefixed equivalent). * @memberof Fullscreen * @type {Boolean} * @readonly */ enabled : { get : function() { if (!Fullscreen.supportsFullscreen()) { return undefined; } return document[_names.fullscreenEnabled]; } }, /** * Determines if the browser is currently in fullscreen mode. * @memberof Fullscreen * @type {Boolean} * @readonly */ fullscreen : { get : function() { if (!Fullscreen.supportsFullscreen()) { return undefined; } return Fullscreen.element !== null; } } }); /** * Detects whether the browser supports the standard fullscreen API. * * @returns {Boolean} true if the browser supports the standard fullscreen API, * false otherwise. */ Fullscreen.supportsFullscreen = function() { if (defined(_supportsFullscreen)) { return _supportsFullscreen; } _supportsFullscreen = false; var body = document.body; if (typeof body.requestFullscreen === 'function') { // go with the unprefixed, standard set of names _names.requestFullscreen = 'requestFullscreen'; _names.exitFullscreen = 'exitFullscreen'; _names.fullscreenEnabled = 'fullscreenEnabled'; _names.fullscreenElement = 'fullscreenElement'; _names.fullscreenchange = 'fullscreenchange'; _names.fullscreenerror = 'fullscreenerror'; _supportsFullscreen = true; return _supportsFullscreen; } //check for the correct combination of prefix plus the various names that browsers use var prefixes = ['webkit', 'moz', 'o', 'ms', 'khtml']; var name; for (var i = 0, len = prefixes.length; i < len; ++i) { var prefix = prefixes[i]; // casing of Fullscreen differs across browsers name = prefix + 'RequestFullscreen'; if (typeof body[name] === 'function') { _names.requestFullscreen = name; _supportsFullscreen = true; } else { name = prefix + 'RequestFullScreen'; if (typeof body[name] === 'function') { _names.requestFullscreen = name; _supportsFullscreen = true; } } // disagreement about whether it's "exit" as per spec, or "cancel" name = prefix + 'ExitFullscreen'; if (typeof document[name] === 'function') { _names.exitFullscreen = name; } else { name = prefix + 'CancelFullScreen'; if (typeof document[name] === 'function') { _names.exitFullscreen = name; } } // casing of Fullscreen differs across browsers name = prefix + 'FullscreenEnabled'; if (document[name] !== undefined) { _names.fullscreenEnabled = name; } else { name = prefix + 'FullScreenEnabled'; if (document[name] !== undefined) { _names.fullscreenEnabled = name; } } // casing of Fullscreen differs across browsers name = prefix + 'FullscreenElement'; if (document[name] !== undefined) { _names.fullscreenElement = name; } else { name = prefix + 'FullScreenElement'; if (document[name] !== undefined) { _names.fullscreenElement = name; } } // thankfully, event names are all lowercase per spec name = prefix + 'fullscreenchange'; // event names do not have 'on' in the front, but the property on the document does if (document['on' + name] !== undefined) { //except on IE if (prefix === 'ms') { name = 'MSFullscreenChange'; } _names.fullscreenchange = name; } name = prefix + 'fullscreenerror'; if (document['on' + name] !== undefined) { //except on IE if (prefix === 'ms') { name = 'MSFullscreenError'; } _names.fullscreenerror = name; } } return _supportsFullscreen; }; /** * Asynchronously requests the browser to enter fullscreen mode on the given element. * If fullscreen mode is not supported by the browser, does nothing. * * @param {Object} element The HTML element which will be placed into fullscreen mode. * @param {HMDVRDevice} [vrDevice] The VR device. * * @example * // Put the entire page into fullscreen. * Cesium.Fullscreen.requestFullscreen(document.body) * * // Place only the Cesium canvas into fullscreen. * Cesium.Fullscreen.requestFullscreen(scene.canvas) */ Fullscreen.requestFullscreen = function(element, vrDevice) { if (!Fullscreen.supportsFullscreen()) { return; } element[_names.requestFullscreen]({ vrDisplay: vrDevice }); }; /** * Asynchronously exits fullscreen mode. If the browser is not currently * in fullscreen, or if fullscreen mode is not supported by the browser, does nothing. */ Fullscreen.exitFullscreen = function() { if (!Fullscreen.supportsFullscreen()) { return; } document[_names.exitFullscreen](); }; //For unit tests Fullscreen._names = _names; export default Fullscreen;