blob: 7256425e46cc06327eca0ca152320650d20ee333 [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
41 if( this.Reveal.getConfig().showNotes && this.element && this.Reveal.getCurrentSlide() && !this.Reveal.print.isPrintingPDF() ) {
42
43 this.element.innerHTML = this.getSlideNotes() || '<span class="notes-placeholder">No notes on this slide.</span>';
44
45 }
46
47 }
48
49 /**
50 * Updates the visibility of the speaker notes sidebar that
51 * is used to share annotated slides. The notes sidebar is
52 * only visible if showNotes is true and there are notes on
53 * one or more slides in the deck.
54 */
55 updateVisibility() {
56
57 if( this.Reveal.getConfig().showNotes && this.hasNotes() && !this.Reveal.print.isPrintingPDF() ) {
58 this.Reveal.getRevealElement().classList.add( 'show-notes' );
59 }
60 else {
61 this.Reveal.getRevealElement().classList.remove( 'show-notes' );
62 }
63
64 }
65
66 /**
67 * Checks if there are speaker notes for ANY slide in the
68 * presentation.
69 */
70 hasNotes() {
71
72 return this.Reveal.getSlidesElement().querySelectorAll( '[data-notes], aside.notes' ).length > 0;
73
74 }
75
76 /**
77 * Checks if this presentation is running inside of the
78 * speaker notes window.
79 *
80 * @return {boolean}
81 */
82 isSpeakerNotesWindow() {
83
84 return !!window.location.search.match( /receiver/gi );
85
86 }
87
88 /**
89 * Retrieves the speaker notes from a slide. Notes can be
90 * defined in two ways:
91 * 1. As a data-notes attribute on the slide <section>
Marc Kupietz09b75752023-10-07 09:32:19 +020092 * 2. With <aside class="notes"> elements inside the slide
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +020093 *
94 * @param {HTMLElement} [slide=currentSlide]
95 * @return {(string|null)}
96 */
97 getSlideNotes( slide = this.Reveal.getCurrentSlide() ) {
98
99 // Notes can be specified via the data-notes attribute...
100 if( slide.hasAttribute( 'data-notes' ) ) {
101 return slide.getAttribute( 'data-notes' );
102 }
103
Marc Kupietz09b75752023-10-07 09:32:19 +0200104 // ... or using <aside class="notes"> elements
105 let notesElements = slide.querySelectorAll( 'aside.notes' );
106 if( notesElements ) {
107 return Array.from(notesElements).map( notesElement => notesElement.innerHTML ).join( '\n' );
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200108 }
109
110 return null;
111
112 }
113
Marc Kupietz09b75752023-10-07 09:32:19 +0200114 destroy() {
115
116 this.element.remove();
117
118 }
119
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200120}