blob: 70b361f56aa52c1f29e36174feec6057f262db90 [file] [log] [blame]
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +02001import { enterFullscreen } from '../utils/util.js'
2
3/**
4 * Handles all reveal.js keyboard interactions.
5 */
6export default class Keyboard {
7
8 constructor( Reveal ) {
9
10 this.Reveal = Reveal;
11
12 // A key:value map of keyboard keys and descriptions of
13 // the actions they trigger
14 this.shortcuts = {};
15
16 // Holds custom key code mappings
17 this.bindings = {};
18
19 this.onDocumentKeyDown = this.onDocumentKeyDown.bind( this );
20 this.onDocumentKeyPress = this.onDocumentKeyPress.bind( this );
21
22 }
23
24 /**
25 * Called when the reveal.js config is updated.
26 */
27 configure( config, oldConfig ) {
28
29 if( config.navigationMode === 'linear' ) {
30 this.shortcuts['→ , ↓ , SPACE , N , L , J'] = 'Next slide';
31 this.shortcuts['← , ↑ , P , H , K'] = 'Previous slide';
32 }
33 else {
34 this.shortcuts['N , SPACE'] = 'Next slide';
35 this.shortcuts['P'] = 'Previous slide';
36 this.shortcuts['← , H'] = 'Navigate left';
37 this.shortcuts['→ , L'] = 'Navigate right';
38 this.shortcuts['↑ , K'] = 'Navigate up';
39 this.shortcuts['↓ , J'] = 'Navigate down';
40 }
41
42 this.shortcuts['Home , Shift ←'] = 'First slide';
43 this.shortcuts['End , Shift →'] = 'Last slide';
44 this.shortcuts['B , .'] = 'Pause';
45 this.shortcuts['F'] = 'Fullscreen';
46 this.shortcuts['ESC, O'] = 'Slide overview';
47
48 }
49
50 /**
51 * Starts listening for keyboard events.
52 */
53 bind() {
54
55 document.addEventListener( 'keydown', this.onDocumentKeyDown, false );
56 document.addEventListener( 'keypress', this.onDocumentKeyPress, false );
57
58 }
59
60 /**
61 * Stops listening for keyboard events.
62 */
63 unbind() {
64
65 document.removeEventListener( 'keydown', this.onDocumentKeyDown, false );
66 document.removeEventListener( 'keypress', this.onDocumentKeyPress, false );
67
68 }
69
70 /**
71 * Add a custom key binding with optional description to
72 * be added to the help screen.
73 */
74 addKeyBinding( binding, callback ) {
75
76 if( typeof binding === 'object' && binding.keyCode ) {
77 this.bindings[binding.keyCode] = {
78 callback: callback,
79 key: binding.key,
80 description: binding.description
81 };
82 }
83 else {
84 this.bindings[binding] = {
85 callback: callback,
86 key: null,
87 description: null
88 };
89 }
90
91 }
92
93 /**
94 * Removes the specified custom key binding.
95 */
96 removeKeyBinding( keyCode ) {
97
98 delete this.bindings[keyCode];
99
100 }
101
102 /**
103 * Programmatically triggers a keyboard event
104 *
105 * @param {int} keyCode
106 */
107 triggerKey( keyCode ) {
108
109 this.onDocumentKeyDown( { keyCode } );
110
111 }
112
113 /**
114 * Registers a new shortcut to include in the help overlay
115 *
116 * @param {String} key
117 * @param {String} value
118 */
119 registerKeyboardShortcut( key, value ) {
120
121 this.shortcuts[key] = value;
122
123 }
124
125 getShortcuts() {
126
127 return this.shortcuts;
128
129 }
130
131 getBindings() {
132
133 return this.bindings;
134
135 }
136
137 /**
138 * Handler for the document level 'keypress' event.
139 *
140 * @param {object} event
141 */
142 onDocumentKeyPress( event ) {
143
144 // Check if the pressed key is question mark
145 if( event.shiftKey && event.charCode === 63 ) {
146 this.Reveal.toggleHelp();
147 }
148
149 }
150
151 /**
152 * Handler for the document level 'keydown' event.
153 *
154 * @param {object} event
155 */
156 onDocumentKeyDown( event ) {
157
158 let config = this.Reveal.getConfig();
159
160 // If there's a condition specified and it returns false,
161 // ignore this event
162 if( typeof config.keyboardCondition === 'function' && config.keyboardCondition(event) === false ) {
163 return true;
164 }
165
166 // If keyboardCondition is set, only capture keyboard events
167 // for embedded decks when they are focused
168 if( config.keyboardCondition === 'focused' && !this.Reveal.isFocused() ) {
169 return true;
170 }
171
172 // Shorthand
173 let keyCode = event.keyCode;
174
175 // Remember if auto-sliding was paused so we can toggle it
176 let autoSlideWasPaused = !this.Reveal.isAutoSliding();
177
178 this.Reveal.onUserInput( event );
179
180 // Is there a focused element that could be using the keyboard?
181 let activeElementIsCE = document.activeElement && document.activeElement.isContentEditable === true;
182 let activeElementIsInput = document.activeElement && document.activeElement.tagName && /input|textarea/i.test( document.activeElement.tagName );
183 let activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className);
184
185 // Whitelist specific modified + keycode combinations
186 let prevSlideShortcut = event.shiftKey && event.keyCode === 32;
187 let firstSlideShortcut = event.shiftKey && keyCode === 37;
188 let lastSlideShortcut = event.shiftKey && keyCode === 39;
189
190 // Prevent all other events when a modifier is pressed
191 let unusedModifier = !prevSlideShortcut && !firstSlideShortcut && !lastSlideShortcut &&
192 ( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey );
193
194 // Disregard the event if there's a focused element or a
195 // keyboard modifier key is present
196 if( activeElementIsCE || activeElementIsInput || activeElementIsNotes || unusedModifier ) return;
197
198 // While paused only allow resume keyboard events; 'b', 'v', '.'
199 let resumeKeyCodes = [66,86,190,191];
200 let key;
201
202 // Custom key bindings for togglePause should be able to resume
203 if( typeof config.keyboard === 'object' ) {
204 for( key in config.keyboard ) {
205 if( config.keyboard[key] === 'togglePause' ) {
206 resumeKeyCodes.push( parseInt( key, 10 ) );
207 }
208 }
209 }
210
211 if( this.Reveal.isPaused() && resumeKeyCodes.indexOf( keyCode ) === -1 ) {
212 return false;
213 }
214
215 // Use linear navigation if we're configured to OR if
216 // the presentation is one-dimensional
217 let useLinearMode = config.navigationMode === 'linear' || !this.Reveal.hasHorizontalSlides() || !this.Reveal.hasVerticalSlides();
218
219 let triggered = false;
220
221 // 1. User defined key bindings
222 if( typeof config.keyboard === 'object' ) {
223
224 for( key in config.keyboard ) {
225
226 // Check if this binding matches the pressed key
227 if( parseInt( key, 10 ) === keyCode ) {
228
229 let value = config.keyboard[ key ];
230
231 // Callback function
232 if( typeof value === 'function' ) {
233 value.apply( null, [ event ] );
234 }
235 // String shortcuts to reveal.js API
236 else if( typeof value === 'string' && typeof this.Reveal[ value ] === 'function' ) {
237 this.Reveal[ value ].call();
238 }
239
240 triggered = true;
241
242 }
243
244 }
245
246 }
247
248 // 2. Registered custom key bindings
249 if( triggered === false ) {
250
251 for( key in this.bindings ) {
252
253 // Check if this binding matches the pressed key
254 if( parseInt( key, 10 ) === keyCode ) {
255
256 let action = this.bindings[ key ].callback;
257
258 // Callback function
259 if( typeof action === 'function' ) {
260 action.apply( null, [ event ] );
261 }
262 // String shortcuts to reveal.js API
263 else if( typeof action === 'string' && typeof this.Reveal[ action ] === 'function' ) {
264 this.Reveal[ action ].call();
265 }
266
267 triggered = true;
268 }
269 }
270 }
271
272 // 3. System defined key bindings
273 if( triggered === false ) {
274
275 // Assume true and try to prove false
276 triggered = true;
277
278 // P, PAGE UP
279 if( keyCode === 80 || keyCode === 33 ) {
280 this.Reveal.prev();
281 }
282 // N, PAGE DOWN
283 else if( keyCode === 78 || keyCode === 34 ) {
284 this.Reveal.next();
285 }
286 // H, LEFT
287 else if( keyCode === 72 || keyCode === 37 ) {
288 if( firstSlideShortcut ) {
289 this.Reveal.slide( 0 );
290 }
291 else if( !this.Reveal.overview.isActive() && useLinearMode ) {
292 this.Reveal.prev();
293 }
294 else {
295 this.Reveal.left();
296 }
297 }
298 // L, RIGHT
299 else if( keyCode === 76 || keyCode === 39 ) {
300 if( lastSlideShortcut ) {
301 this.Reveal.slide( Number.MAX_VALUE );
302 }
303 else if( !this.Reveal.overview.isActive() && useLinearMode ) {
304 this.Reveal.next();
305 }
306 else {
307 this.Reveal.right();
308 }
309 }
310 // K, UP
311 else if( keyCode === 75 || keyCode === 38 ) {
312 if( !this.Reveal.overview.isActive() && useLinearMode ) {
313 this.Reveal.prev();
314 }
315 else {
316 this.Reveal.up();
317 }
318 }
319 // J, DOWN
320 else if( keyCode === 74 || keyCode === 40 ) {
321 if( !this.Reveal.overview.isActive() && useLinearMode ) {
322 this.Reveal.next();
323 }
324 else {
325 this.Reveal.down();
326 }
327 }
328 // HOME
329 else if( keyCode === 36 ) {
330 this.Reveal.slide( 0 );
331 }
332 // END
333 else if( keyCode === 35 ) {
334 this.Reveal.slide( Number.MAX_VALUE );
335 }
336 // SPACE
337 else if( keyCode === 32 ) {
338 if( this.Reveal.overview.isActive() ) {
339 this.Reveal.overview.deactivate();
340 }
341 if( event.shiftKey ) {
342 this.Reveal.prev();
343 }
344 else {
345 this.Reveal.next();
346 }
347 }
348 // TWO-SPOT, SEMICOLON, B, V, PERIOD, LOGITECH PRESENTER TOOLS "BLACK SCREEN" BUTTON
349 else if( keyCode === 58 || keyCode === 59 || keyCode === 66 || keyCode === 86 || keyCode === 190 || keyCode === 191 ) {
350 this.Reveal.togglePause();
351 }
352 // F
353 else if( keyCode === 70 ) {
354 enterFullscreen( config.embedded ? this.Reveal.getViewportElement() : document.documentElement );
355 }
356 // A
357 else if( keyCode === 65 ) {
358 if ( config.autoSlideStoppable ) {
359 this.Reveal.toggleAutoSlide( autoSlideWasPaused );
360 }
361 }
362 else {
363 triggered = false;
364 }
365
366 }
367
368 // If the input resulted in a triggered action we should prevent
369 // the browsers default behavior
370 if( triggered ) {
371 event.preventDefault && event.preventDefault();
372 }
373 // ESC or O key
374 else if( keyCode === 27 || keyCode === 79 ) {
375 if( this.Reveal.closeOverlay() === false ) {
376 this.Reveal.overview.toggle();
377 }
378
379 event.preventDefault && event.preventDefault();
380 }
381
382 // If auto-sliding is enabled we need to cue up
383 // another timeout
384 this.Reveal.cueAutoSlide();
385
386 }
387
388}