screenfull.d.ts 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  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 decendant.
  40. @returns A promise that resolves after the element enters fullscreen.
  41. @example
  42. ```
  43. // Fullscreen the page
  44. document.getElementById('button').addEventListener('click', () => {
  45. if (screenfull.isEnabled) {
  46. screenfull.request();
  47. } else {
  48. // Ignore or do something else
  49. }
  50. });
  51. // Fullscreen an element
  52. const element = document.getElementById('target');
  53. document.getElementById('button').addEventListener('click', () => {
  54. if (screenfull.isEnabled) {
  55. screenfull.request(element);
  56. }
  57. });
  58. // Fullscreen an element with jQuery
  59. const element = $('#target')[0]; // Get DOM element from jQuery collection
  60. $('#button').on('click', () => {
  61. if (screenfull.isEnabled) {
  62. screenfull.request(element);
  63. }
  64. });
  65. ```
  66. */
  67. request(element?: Element): Promise<void>;
  68. /**
  69. Brings you out of fullscreen.
  70. @returns A promise that resolves after the element exits fullscreen.
  71. */
  72. exit(): Promise<void>;
  73. /**
  74. Requests fullscreen if not active, otherwise exits.
  75. @returns A promise that resolves after the element enters/exits fullscreen.
  76. @example
  77. ```
  78. // Toggle fullscreen on a image with jQuery
  79. $('img').on('click', event => {
  80. if (screenfull.isEnabled) {
  81. screenfull.toggle(event.target);
  82. }
  83. });
  84. ```
  85. */
  86. toggle(element?: Element): Promise<void>;
  87. /**
  88. Add a listener for when the browser switches in and out of fullscreen or when there is an error.
  89. @example
  90. ```
  91. // Detect fullscreen change
  92. if (screenfull.isEnabled) {
  93. screenfull.on('change', () => {
  94. console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
  95. });
  96. }
  97. // Detect fullscreen error
  98. if (screenfull.isEnabled) {
  99. screenfull.on('error', event => {
  100. console.error('Failed to enable fullscreen', event);
  101. });
  102. }
  103. ```
  104. */
  105. on(name: EventName, handler: (event: Event) => void): void;
  106. /**
  107. Remove a previously registered event listener.
  108. @example
  109. ```
  110. screenfull.off('change', callback);
  111. ```
  112. */
  113. off(name: EventName, handler: (event: Event) => void): void;
  114. /**
  115. Alias for `.on('change', function)`.
  116. */
  117. onchange(handler: (event: Event) => void): void;
  118. /**
  119. Alias for `.on('error', function)`.
  120. */
  121. onerror(handler: (event: Event) => void): void;
  122. }
  123. }
  124. /**
  125. 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.
  126. */
  127. declare const screenfull: screenfull.Screenfull | {isEnabled: false};
  128. export = screenfull;
  129. export as namespace screenfull;