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
|
import { closest } from '../utils/util.js'
/**
* Manages focus when a presentation is embedded. This
* helps us only capture keyboard from the presentation
* a user is currently interacting with in a page where
* multiple presentations are embedded.
*/
const STATE_FOCUS = 'focus';
const STATE_BLUR = 'blur';
export default class Focus {
constructor( Reveal ) {
this.Reveal = Reveal;
this.onRevealPointerDown = this.onRevealPointerDown.bind( this );
this.onDocumentPointerDown = this.onDocumentPointerDown.bind( this );
}
/**
* Called when the reveal.js config is updated.
*/
configure( config, oldConfig ) {
if( config.embedded ) {
this.blur();
}
else {
this.focus();
this.unbind();
}
}
bind() {
if( this.Reveal.getConfig().embedded ) {
this.Reveal.getRevealElement().addEventListener( 'pointerdown', this.onRevealPointerDown, false );
}
}
unbind() {
this.Reveal.getRevealElement().removeEventListener( 'pointerdown', this.onRevealPointerDown, false );
document.removeEventListener( 'pointerdown', this.onDocumentPointerDown, false );
}
focus() {
if( this.state !== STATE_FOCUS ) {
this.Reveal.getRevealElement().classList.add( 'focused' );
document.addEventListener( 'pointerdown', this.onDocumentPointerDown, false );
}
this.state = STATE_FOCUS;
}
blur() {
if( this.state !== STATE_BLUR ) {
this.Reveal.getRevealElement().classList.remove( 'focused' );
document.removeEventListener( 'pointerdown', this.onDocumentPointerDown, false );
}
this.state = STATE_BLUR;
}
isFocused() {
return this.state === STATE_FOCUS;
}
onRevealPointerDown( event ) {
this.focus();
}
onDocumentPointerDown( event ) {
let revealElement = closest( event.target, '.reveal' );
if( !revealElement || revealElement !== this.Reveal.getRevealElement() ) {
this.blur();
}
}
}
|