Fullscreen.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. import defined from "./defined.js";
  2. let _supportsFullscreen;
  3. const _names = {
  4. requestFullscreen: undefined,
  5. exitFullscreen: undefined,
  6. fullscreenEnabled: undefined,
  7. fullscreenElement: undefined,
  8. fullscreenchange: undefined,
  9. fullscreenerror: undefined,
  10. };
  11. /**
  12. * Browser-independent functions for working with the standard fullscreen API.
  13. *
  14. * @namespace Fullscreen
  15. *
  16. * @see {@link http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html|W3C Fullscreen Living Specification}
  17. */
  18. const Fullscreen = {};
  19. Object.defineProperties(Fullscreen, {
  20. /**
  21. * The element that is currently fullscreen, if any. To simply check if the
  22. * browser is in fullscreen mode or not, use {@link Fullscreen#fullscreen}.
  23. * @memberof Fullscreen
  24. * @type {object}
  25. * @readonly
  26. */
  27. element: {
  28. get: function () {
  29. if (!Fullscreen.supportsFullscreen()) {
  30. return undefined;
  31. }
  32. return document[_names.fullscreenElement];
  33. },
  34. },
  35. /**
  36. * The name of the event on the document that is fired when fullscreen is
  37. * entered or exited. This event name is intended for use with addEventListener.
  38. * In your event handler, to determine if the browser is in fullscreen mode or not,
  39. * use {@link Fullscreen#fullscreen}.
  40. * @memberof Fullscreen
  41. * @type {string}
  42. * @readonly
  43. */
  44. changeEventName: {
  45. get: function () {
  46. if (!Fullscreen.supportsFullscreen()) {
  47. return undefined;
  48. }
  49. return _names.fullscreenchange;
  50. },
  51. },
  52. /**
  53. * The name of the event that is fired when a fullscreen error
  54. * occurs. This event name is intended for use with addEventListener.
  55. * @memberof Fullscreen
  56. * @type {string}
  57. * @readonly
  58. */
  59. errorEventName: {
  60. get: function () {
  61. if (!Fullscreen.supportsFullscreen()) {
  62. return undefined;
  63. }
  64. return _names.fullscreenerror;
  65. },
  66. },
  67. /**
  68. * Determine whether the browser will allow an element to be made fullscreen, or not.
  69. * For example, by default, iframes cannot go fullscreen unless the containing page
  70. * adds an "allowfullscreen" attribute (or prefixed equivalent).
  71. * @memberof Fullscreen
  72. * @type {boolean}
  73. * @readonly
  74. */
  75. enabled: {
  76. get: function () {
  77. if (!Fullscreen.supportsFullscreen()) {
  78. return undefined;
  79. }
  80. return document[_names.fullscreenEnabled];
  81. },
  82. },
  83. /**
  84. * Determines if the browser is currently in fullscreen mode.
  85. * @memberof Fullscreen
  86. * @type {boolean}
  87. * @readonly
  88. */
  89. fullscreen: {
  90. get: function () {
  91. if (!Fullscreen.supportsFullscreen()) {
  92. return undefined;
  93. }
  94. return Fullscreen.element !== null;
  95. },
  96. },
  97. });
  98. /**
  99. * Detects whether the browser supports the standard fullscreen API.
  100. *
  101. * @returns {boolean} <code>true</code> if the browser supports the standard fullscreen API,
  102. * <code>false</code> otherwise.
  103. */
  104. Fullscreen.supportsFullscreen = function () {
  105. if (defined(_supportsFullscreen)) {
  106. return _supportsFullscreen;
  107. }
  108. _supportsFullscreen = false;
  109. const body = document.body;
  110. if (typeof body.requestFullscreen === "function") {
  111. // go with the unprefixed, standard set of names
  112. _names.requestFullscreen = "requestFullscreen";
  113. _names.exitFullscreen = "exitFullscreen";
  114. _names.fullscreenEnabled = "fullscreenEnabled";
  115. _names.fullscreenElement = "fullscreenElement";
  116. _names.fullscreenchange = "fullscreenchange";
  117. _names.fullscreenerror = "fullscreenerror";
  118. _supportsFullscreen = true;
  119. return _supportsFullscreen;
  120. }
  121. //check for the correct combination of prefix plus the various names that browsers use
  122. const prefixes = ["webkit", "moz", "o", "ms", "khtml"];
  123. let name;
  124. for (let i = 0, len = prefixes.length; i < len; ++i) {
  125. const prefix = prefixes[i];
  126. // casing of Fullscreen differs across browsers
  127. name = `${prefix}RequestFullscreen`;
  128. if (typeof body[name] === "function") {
  129. _names.requestFullscreen = name;
  130. _supportsFullscreen = true;
  131. } else {
  132. name = `${prefix}RequestFullScreen`;
  133. if (typeof body[name] === "function") {
  134. _names.requestFullscreen = name;
  135. _supportsFullscreen = true;
  136. }
  137. }
  138. // disagreement about whether it's "exit" as per spec, or "cancel"
  139. name = `${prefix}ExitFullscreen`;
  140. if (typeof document[name] === "function") {
  141. _names.exitFullscreen = name;
  142. } else {
  143. name = `${prefix}CancelFullScreen`;
  144. if (typeof document[name] === "function") {
  145. _names.exitFullscreen = name;
  146. }
  147. }
  148. // casing of Fullscreen differs across browsers
  149. name = `${prefix}FullscreenEnabled`;
  150. if (document[name] !== undefined) {
  151. _names.fullscreenEnabled = name;
  152. } else {
  153. name = `${prefix}FullScreenEnabled`;
  154. if (document[name] !== undefined) {
  155. _names.fullscreenEnabled = name;
  156. }
  157. }
  158. // casing of Fullscreen differs across browsers
  159. name = `${prefix}FullscreenElement`;
  160. if (document[name] !== undefined) {
  161. _names.fullscreenElement = name;
  162. } else {
  163. name = `${prefix}FullScreenElement`;
  164. if (document[name] !== undefined) {
  165. _names.fullscreenElement = name;
  166. }
  167. }
  168. // thankfully, event names are all lowercase per spec
  169. name = `${prefix}fullscreenchange`;
  170. // event names do not have 'on' in the front, but the property on the document does
  171. if (document[`on${name}`] !== undefined) {
  172. //except on IE
  173. if (prefix === "ms") {
  174. name = "MSFullscreenChange";
  175. }
  176. _names.fullscreenchange = name;
  177. }
  178. name = `${prefix}fullscreenerror`;
  179. if (document[`on${name}`] !== undefined) {
  180. //except on IE
  181. if (prefix === "ms") {
  182. name = "MSFullscreenError";
  183. }
  184. _names.fullscreenerror = name;
  185. }
  186. }
  187. return _supportsFullscreen;
  188. };
  189. /**
  190. * Asynchronously requests the browser to enter fullscreen mode on the given element.
  191. * If fullscreen mode is not supported by the browser, does nothing.
  192. *
  193. * @param {object} element The HTML element which will be placed into fullscreen mode.
  194. * @param {object} [vrDevice] The HMDVRDevice device.
  195. *
  196. * @example
  197. * // Put the entire page into fullscreen.
  198. * Cesium.Fullscreen.requestFullscreen(document.body)
  199. *
  200. * // Place only the Cesium canvas into fullscreen.
  201. * Cesium.Fullscreen.requestFullscreen(scene.canvas)
  202. */
  203. Fullscreen.requestFullscreen = function (element, vrDevice) {
  204. if (!Fullscreen.supportsFullscreen()) {
  205. return;
  206. }
  207. element[_names.requestFullscreen]({ vrDisplay: vrDevice });
  208. };
  209. /**
  210. * Asynchronously exits fullscreen mode. If the browser is not currently
  211. * in fullscreen, or if fullscreen mode is not supported by the browser, does nothing.
  212. */
  213. Fullscreen.exitFullscreen = function () {
  214. if (!Fullscreen.supportsFullscreen()) {
  215. return;
  216. }
  217. document[_names.exitFullscreen]();
  218. };
  219. //For unit tests
  220. Fullscreen._names = _names;
  221. export default Fullscreen;