blob: 8af918c361b169b8c1fb9909852c13f1786c100e [file] [log] [blame]
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +02001/**
Marc Kupietz09b75752023-10-07 09:32:19 +02002 * Handles the showing of speaker notes
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +02003 */
4export default class Notes {
5
6 constructor( Reveal ) {
7
8 this.Reveal = Reveal;
9
10 }
11
12 render() {
13
14 this.element = document.createElement( 'div' );
15 this.element.className = 'speaker-notes';
16 this.element.setAttribute( 'data-prevent-swipe', '' );
17 this.element.setAttribute( 'tabindex', '0' );
18 this.Reveal.getRevealElement().appendChild( this.element );
19
20 }
21
22 /**
23 * Called when the reveal.js config is updated.
24 */
25 configure( config, oldConfig ) {
26
27 if( config.showNotes ) {
28 this.element.setAttribute( 'data-layout', typeof config.showNotes === 'string' ? config.showNotes : 'inline' );
29 }
30
31 }
32
33 /**
34 * Pick up notes from the current slide and display them
35 * to the viewer.
36 *
37 * @see {@link config.showNotes}
38 */
39 update() {
40
Marc Kupietz9c036a42024-05-14 13:17:25 +020041 if( this.Reveal.getConfig().showNotes &&
42 this.element && this.Reveal.getCurrentSlide() &&
43 !this.Reveal.isScrollView() &&
44 !this.Reveal.isPrintView()
45 ) {
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +020046 this.element.innerHTML = this.getSlideNotes() || '<span class="notes-placeholder">No notes on this slide.</span>';
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +020047 }
48
49 }
50
51 /**
52 * Updates the visibility of the speaker notes sidebar that
53 * is used to share annotated slides. The notes sidebar is
54 * only visible if showNotes is true and there are notes on
55 * one or more slides in the deck.
56 */
57 updateVisibility() {
58
Marc Kupietz9c036a42024-05-14 13:17:25 +020059 if( this.Reveal.getConfig().showNotes &&
60 this.hasNotes() &&
61 !this.Reveal.isScrollView() &&
62 !this.Reveal.isPrintView()
63 ) {
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +020064 this.Reveal.getRevealElement().classList.add( 'show-notes' );
65 }
66 else {
67 this.Reveal.getRevealElement().classList.remove( 'show-notes' );
68 }
69
70 }
71
72 /**
73 * Checks if there are speaker notes for ANY slide in the
74 * presentation.
75 */
76 hasNotes() {
77
78 return this.Reveal.getSlidesElement().querySelectorAll( '[data-notes], aside.notes' ).length > 0;
79
80 }
81
82 /**
83 * Checks if this presentation is running inside of the
84 * speaker notes window.
85 *
86 * @return {boolean}
87 */
88 isSpeakerNotesWindow() {
89
90 return !!window.location.search.match( /receiver/gi );
91
92 }
93
94 /**
95 * Retrieves the speaker notes from a slide. Notes can be
96 * defined in two ways:
97 * 1. As a data-notes attribute on the slide <section>
Marc Kupietz09b75752023-10-07 09:32:19 +020098 * 2. With <aside class="notes"> elements inside the slide
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +020099 *
100 * @param {HTMLElement} [slide=currentSlide]
101 * @return {(string|null)}
102 */
103 getSlideNotes( slide = this.Reveal.getCurrentSlide() ) {
104
105 // Notes can be specified via the data-notes attribute...
106 if( slide.hasAttribute( 'data-notes' ) ) {
107 return slide.getAttribute( 'data-notes' );
108 }
109
Marc Kupietz09b75752023-10-07 09:32:19 +0200110 // ... or using <aside class="notes"> elements
111 let notesElements = slide.querySelectorAll( 'aside.notes' );
112 if( notesElements ) {
113 return Array.from(notesElements).map( notesElement => notesElement.innerHTML ).join( '\n' );
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200114 }
115
116 return null;
117
118 }
119
Marc Kupietz09b75752023-10-07 09:32:19 +0200120 destroy() {
121
122 this.element.remove();
123
124 }
125
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200126}