123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- /// <reference lib="dom"/>
- declare namespace screenfull {
- type RawEventNames = {
- readonly requestFullscreen: string;
- readonly exitFullscreen: string;
- readonly fullscreenElement: string;
- readonly fullscreenEnabled: string;
- readonly fullscreenchange: string;
- readonly fullscreenerror: string;
- };
- type EventName = 'change' | 'error';
- interface Screenfull {
- /**
- Whether fullscreen is active.
- */
- readonly isFullscreen: boolean;
- /**
- The element currently in fullscreen, otherwise `null`.
- */
- readonly element: Element | null;
- /**
- 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`).
- @example
- ```
- if (screenfull.isEnabled) {
- screenfull.request();
- }
- ```
- */
- readonly isEnabled: true;
- /**
- Exposes the raw properties (prefixed if needed) used internally.
- */
- raw: RawEventNames;
- /**
- Make an element fullscreen.
- If your page is inside an `<iframe>` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`).
- Keep in mind that the browser will only enter fullscreen when initiated by user events like click, touch, key.
- @param element - Default is `<html>`. If called with another element than the currently active, it will switch to that if it's a decendant.
- @returns A promise that resolves after the element enters fullscreen.
- @example
- ```
- // Fullscreen the page
- document.getElementById('button').addEventListener('click', () => {
- if (screenfull.isEnabled) {
- screenfull.request();
- } else {
- // Ignore or do something else
- }
- });
- // Fullscreen an element
- const element = document.getElementById('target');
- document.getElementById('button').addEventListener('click', () => {
- if (screenfull.isEnabled) {
- screenfull.request(element);
- }
- });
- // Fullscreen an element with jQuery
- const element = $('#target')[0]; // Get DOM element from jQuery collection
- $('#button').on('click', () => {
- if (screenfull.isEnabled) {
- screenfull.request(element);
- }
- });
- ```
- */
- request(element?: Element): Promise<void>;
- /**
- Brings you out of fullscreen.
- @returns A promise that resolves after the element exits fullscreen.
- */
- exit(): Promise<void>;
- /**
- Requests fullscreen if not active, otherwise exits.
- @returns A promise that resolves after the element enters/exits fullscreen.
- @example
- ```
- // Toggle fullscreen on a image with jQuery
- $('img').on('click', event => {
- if (screenfull.isEnabled) {
- screenfull.toggle(event.target);
- }
- });
- ```
- */
- toggle(element?: Element): Promise<void>;
- /**
- Add a listener for when the browser switches in and out of fullscreen or when there is an error.
- @example
- ```
- // Detect fullscreen change
- if (screenfull.isEnabled) {
- screenfull.on('change', () => {
- console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
- });
- }
- // Detect fullscreen error
- if (screenfull.isEnabled) {
- screenfull.on('error', event => {
- console.error('Failed to enable fullscreen', event);
- });
- }
- ```
- */
- on(name: EventName, handler: (event: Event) => void): void;
- /**
- Remove a previously registered event listener.
- @example
- ```
- screenfull.off('change', callback);
- ```
- */
- off(name: EventName, handler: (event: Event) => void): void;
- /**
- Alias for `.on('change', function)`.
- */
- onchange(handler: (event: Event) => void): void;
- /**
- Alias for `.on('error', function)`.
- */
- onerror(handler: (event: Event) => void): void;
- }
- }
- /**
- 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.
- */
- declare const screenfull: screenfull.Screenfull | {isEnabled: false};
- export = screenfull;
- export as namespace screenfull;
|