screenfull.d.ts 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. /// <reference lib="dom"/>
  2. declare namespace screenfull {
  3. type RawEventNames = {
  4. readonly requestFullscreen: string;
  5. readonly exitFullscreen: string;
  6. readonly fullscreenElement: string;
  7. readonly fullscreenEnabled: string;
  8. readonly fullscreenchange: string;
  9. readonly fullscreenerror: string;
  10. };
  11. type EventName = 'change' | 'error';
  12. interface Screenfull {
  13. /**
  14. Whether fullscreen is active.
  15. */
  16. readonly isFullscreen: boolean;
  17. /**
  18. The element currently in fullscreen, otherwise `null`.
  19. */
  20. readonly element: Element | null;
  21. /**
  22. Whether you are allowed to enter fullscreen. If your page is inside an `<iframe>` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`).
  23. @example
  24. ```
  25. if (screenfull.isEnabled) {
  26. screenfull.request();
  27. }
  28. ```
  29. */
  30. readonly isEnabled: true;
  31. /**
  32. Exposes the raw properties (prefixed if needed) used internally.
  33. */
  34. raw: RawEventNames;
  35. /**
  36. Make an element fullscreen.
  37. If your page is inside an `<iframe>` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`).
  38. Keep in mind that the browser will only enter fullscreen when initiated by user events like click, touch, key.
  39. @param element - Default is `<html>`. If called with another element than the currently active, it will switch to that if it's a descendant.
  40. @param options - [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions).
  41. @returns A promise that resolves after the element enters fullscreen.
  42. @example
  43. ```
  44. // Fullscreen the page
  45. document.getElementById('button').addEventListener('click', () => {
  46. if (screenfull.isEnabled) {
  47. screenfull.request();
  48. } else {
  49. // Ignore or do something else
  50. }
  51. });
  52. // Fullscreen an element
  53. const element = document.getElementById('target');
  54. document.getElementById('button').addEventListener('click', () => {
  55. if (screenfull.isEnabled) {
  56. screenfull.request(element);
  57. }
  58. });
  59. // Fullscreen an element with options
  60. const element = document.getElementById('target');
  61. document.getElementById('button').addEventListener('click', () => {
  62. if (screenfull.isEnabled) {
  63. screenfull.request(element, {navigationUI: 'hide'});
  64. }
  65. });
  66. // Fullscreen an element with jQuery
  67. const element = $('#target')[0]; // Get DOM element from jQuery collection
  68. $('#button').on('click', () => {
  69. if (screenfull.isEnabled) {
  70. screenfull.request(element);
  71. }
  72. });
  73. ```
  74. */
  75. request(element?: Element, options?: FullscreenOptions): Promise<void>;
  76. /**
  77. Brings you out of fullscreen.
  78. @returns A promise that resolves after the element exits fullscreen.
  79. */
  80. exit(): Promise<void>;
  81. /**
  82. Requests fullscreen if not active, otherwise exits.
  83. @param element - Default is `<html>`. If called with another element than the currently active, it will switch to that if it's a descendant.
  84. @param options - [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions).
  85. @returns A promise that resolves after the element enters/exits fullscreen.
  86. @example
  87. ```
  88. // Toggle fullscreen on a image with jQuery
  89. $('img').on('click', event => {
  90. if (screenfull.isEnabled) {
  91. screenfull.toggle(event.target);
  92. }
  93. });
  94. ```
  95. */
  96. toggle(element?: Element, options?: FullscreenOptions): Promise<void>;
  97. /**
  98. Add a listener for when the browser switches in and out of fullscreen or when there is an error.
  99. @example
  100. ```
  101. // Detect fullscreen change
  102. if (screenfull.isEnabled) {
  103. screenfull.on('change', () => {
  104. console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
  105. });
  106. }
  107. // Detect fullscreen error
  108. if (screenfull.isEnabled) {
  109. screenfull.on('error', event => {
  110. console.error('Failed to enable fullscreen', event);
  111. });
  112. }
  113. ```
  114. */
  115. on(name: EventName, handler: (event: Event) => void): void;
  116. /**
  117. Remove a previously registered event listener.
  118. @example
  119. ```
  120. screenfull.off('change', callback);
  121. ```
  122. */
  123. off(name: EventName, handler: (event: Event) => void): void;
  124. /**
  125. Alias for `.on('change', function)`.
  126. */
  127. onchange(handler: (event: Event) => void): void;
  128. /**
  129. Alias for `.on('error', function)`.
  130. */
  131. onerror(handler: (event: Event) => void): void;
  132. }
  133. }
  134. /**
  135. Simple wrapper for cross-browser usage of the JavaScript [Fullscreen API](https://developer.mozilla.org/en/DOM/Using_full-screen_mode), which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have to.
  136. */
  137. declare const screenfull: screenfull.Screenfull;
  138. export = screenfull;
  139. export as namespace screenfull;