index.d.ts 4.6 KB

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