-
-
Notifications
You must be signed in to change notification settings - Fork 697
/
index.d.ts
175 lines (139 loc) · 4.6 KB
/
index.d.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
export type RawEventNames = {
readonly requestFullscreen: string;
readonly exitFullscreen: string;
readonly fullscreenElement: string;
readonly fullscreenEnabled: string;
readonly fullscreenchange: string;
readonly fullscreenerror: string;
};
export type EventName = 'change' | 'error';
/**
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: {
/**
Whether fullscreen is active.
*/
readonly isFullscreen: boolean;
/**
The element currently in fullscreen, otherwise `undefined`.
*/
readonly element: Element | undefined;
/**
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
```
import screenfull from 'screenfull';
if (screenfull.isEnabled) {
screenfull.request();
}
```
*/
readonly isEnabled: boolean;
/**
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 descendant.
@param options - [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions).
@returns A promise that resolves after the element enters fullscreen.
@example
```
import screenfull from 'screenfull';
// 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 options
const element = document.getElementById('target');
document.getElementById('button').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element, {navigationUI: 'hide'});
}
});
// 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, options?: FullscreenOptions): 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.
@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.
@param options - [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions).
@returns A promise that resolves after the element enters/exits fullscreen.
@example
```
import screenfull from 'screenfull';
// Toggle fullscreen on a image with jQuery
$('img').on('click', event => {
if (screenfull.isEnabled) {
screenfull.toggle(event.target);
}
});
```
*/
toggle(element?: Element, options?: FullscreenOptions): Promise<void>;
/**
Add a listener for when the browser switches in and out of fullscreen or when there is an error.
@example
```
import screenfull from 'screenfull';
// 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
```
import screenfull from 'screenfull';
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;
};
export default screenfull;