123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249 |
- import defined from "./defined.js";
- let _supportsFullscreen;
- const _names = {
- requestFullscreen: undefined,
- exitFullscreen: undefined,
- fullscreenEnabled: undefined,
- fullscreenElement: undefined,
- fullscreenchange: undefined,
- fullscreenerror: undefined,
- };
- /**
- * Browser-independent functions for working with the standard fullscreen API.
- *
- * @namespace Fullscreen
- *
- * @see {@link http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html|W3C Fullscreen Living Specification}
- */
- const Fullscreen = {};
- Object.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} <code>true</code> if the browser supports the standard fullscreen API,
- * <code>false</code> otherwise.
- */
- Fullscreen.supportsFullscreen = function () {
- if (defined(_supportsFullscreen)) {
- return _supportsFullscreen;
- }
- _supportsFullscreen = false;
- const 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
- const prefixes = ["webkit", "moz", "o", "ms", "khtml"];
- let name;
- for (let i = 0, len = prefixes.length; i < len; ++i) {
- const 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 {object} [vrDevice] The HMDVRDevice 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;
|