diff options
author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2020-05-11 09:15:02 +0200 |
---|---|---|
committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2020-05-11 09:15:02 +0200 |
commit | 664beff715d704f5305bdf81f4c094b3931fad3f (patch) | |
tree | 58e11adba584e38ab61c1844cc4fa46443114380 /js/controllers | |
parent | 57107ebe4c3a4bc1ab44fd8bd85a9c64e8ab4fec (diff) | |
download | fosdem-2021-minimalism-presentation-664beff715d704f5305bdf81f4c094b3931fad3f.tar fosdem-2021-minimalism-presentation-664beff715d704f5305bdf81f4c094b3931fad3f.tar.gz |
add focus controller, manages keyboard focus across multiple embedded decks
Diffstat (limited to 'js/controllers')
-rw-r--r-- | js/controllers/focus.js | 95 | ||||
-rw-r--r-- | js/controllers/keyboard.js | 6 |
2 files changed, 101 insertions, 0 deletions
diff --git a/js/controllers/focus.js b/js/controllers/focus.js new file mode 100644 index 0000000..8e2d8fa --- /dev/null +++ b/js/controllers/focus.js @@ -0,0 +1,95 @@ +/** + * 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 = event.target.closest( '.reveal' ); + if( !revealElement || revealElement !== this.Reveal.getRevealElement() ) { + this.blur(); + } + + } + +}
\ No newline at end of file diff --git a/js/controllers/keyboard.js b/js/controllers/keyboard.js index 17a415f..c05be38 100644 --- a/js/controllers/keyboard.js +++ b/js/controllers/keyboard.js @@ -151,6 +151,12 @@ export default class Keyboard { return true; } + // If keyboardCondition is set, only capture keyboard events + // for embedded decks when they are focused + if( config.keyboardCondition === 'focused' && !this.Reveal.isFocused() ) { + return true; + } + // Shorthand let keyCode = event.keyCode; |