/
Fullscreen.ts
81 lines (72 loc) · 2.13 KB
/
Fullscreen.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
import { isElement } from 'underscore';
import { CommandObject } from './CommandAbstract';
export default {
/**
* Check if fullscreen mode is enabled
* @return {Boolean}
*/
isEnabled() {
const d = document;
// @ts-ignore
if (d.fullscreenElement || d.webkitFullscreenElement || d.mozFullScreenElement) {
return true;
}
return false;
},
/**
* Enable fullscreen mode and return browser prefix
* @param {HTMLElement} el
* @return {string}
*/
enable(el: any) {
let pfx = '';
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.webkitRequestFullscreen) {
pfx = 'webkit';
el.webkitRequestFullscreen();
} else if (el.mozRequestFullScreen) {
pfx = 'moz';
el.mozRequestFullScreen();
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
}
return pfx;
},
/**
* Disable fullscreen mode
*/
disable() {
const d: any = document;
if (this.isEnabled()) {
if (d.exitFullscreen) d.exitFullscreen();
else if (d.webkitExitFullscreen) d.webkitExitFullscreen();
else if (d.mozCancelFullScreen) d.mozCancelFullScreen();
else if (d.msExitFullscreen) d.msExitFullscreen();
}
},
/**
* Triggered when the state of the fullscreen is changed. Inside detects if
* it's enabled
* @param {strinf} pfx Browser prefix
* @param {Event} e
*/
fsChanged(pfx: string) {
if (!this.isEnabled()) {
this.stopCommand({ sender: this.sender });
document.removeEventListener(`${pfx || ''}fullscreenchange`, this.fsChanged);
}
},
run(editor, sender, opts = {}) {
this.sender = sender;
const { target } = opts;
const targetEl = isElement(target) ? target : document.querySelector(target!);
const pfx = this.enable(targetEl || editor.getContainer());
this.fsChanged = this.fsChanged.bind(this, pfx);
document.addEventListener(pfx + 'fullscreenchange', this.fsChanged);
},
stop(editor, sender) {
if (sender && sender.set) sender.set('active', false);
this.disable();
},
} as CommandObject<{ target?: HTMLElement | string }, { [k: string]: any }>;