source: imaps-frontend/node_modules/screenfull/dist/screenfull.d.ts@ d565449

main
Last change on this file since d565449 was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

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