You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

notes.js 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. /**
  2. * Handles the showing of speaker notes
  3. */
  4. export default class Notes {
  5. constructor( Reveal ) {
  6. this.Reveal = Reveal;
  7. }
  8. render() {
  9. this.element = document.createElement( 'div' );
  10. this.element.className = 'speaker-notes';
  11. this.element.setAttribute( 'data-prevent-swipe', '' );
  12. this.element.setAttribute( 'tabindex', '0' );
  13. this.Reveal.getRevealElement().appendChild( this.element );
  14. }
  15. /**
  16. * Called when the reveal.js config is updated.
  17. */
  18. configure( config, oldConfig ) {
  19. if( config.showNotes ) {
  20. this.element.setAttribute( 'data-layout', typeof config.showNotes === 'string' ? config.showNotes : 'inline' );
  21. }
  22. }
  23. /**
  24. * Pick up notes from the current slide and display them
  25. * to the viewer.
  26. *
  27. * @see {@link config.showNotes}
  28. */
  29. update() {
  30. if( this.Reveal.getConfig().showNotes && this.element && this.Reveal.getCurrentSlide() && !this.Reveal.print.isPrintingPDF() ) {
  31. this.element.innerHTML = this.getSlideNotes() || '<span class="notes-placeholder">No notes on this slide.</span>';
  32. }
  33. }
  34. /**
  35. * Updates the visibility of the speaker notes sidebar that
  36. * is used to share annotated slides. The notes sidebar is
  37. * only visible if showNotes is true and there are notes on
  38. * one or more slides in the deck.
  39. */
  40. updateVisibility() {
  41. if( this.Reveal.getConfig().showNotes && this.hasNotes() && !this.Reveal.print.isPrintingPDF() ) {
  42. this.Reveal.getRevealElement().classList.add( 'show-notes' );
  43. }
  44. else {
  45. this.Reveal.getRevealElement().classList.remove( 'show-notes' );
  46. }
  47. }
  48. /**
  49. * Checks if there are speaker notes for ANY slide in the
  50. * presentation.
  51. */
  52. hasNotes() {
  53. return this.Reveal.getSlidesElement().querySelectorAll( '[data-notes], aside.notes' ).length > 0;
  54. }
  55. /**
  56. * Checks if this presentation is running inside of the
  57. * speaker notes window.
  58. *
  59. * @return {boolean}
  60. */
  61. isSpeakerNotesWindow() {
  62. return !!window.location.search.match( /receiver/gi );
  63. }
  64. /**
  65. * Retrieves the speaker notes from a slide. Notes can be
  66. * defined in two ways:
  67. * 1. As a data-notes attribute on the slide <section>
  68. * 2. With <aside class="notes"> elements inside the slide
  69. *
  70. * @param {HTMLElement} [slide=currentSlide]
  71. * @return {(string|null)}
  72. */
  73. getSlideNotes( slide = this.Reveal.getCurrentSlide() ) {
  74. // Notes can be specified via the data-notes attribute...
  75. if( slide.hasAttribute( 'data-notes' ) ) {
  76. return slide.getAttribute( 'data-notes' );
  77. }
  78. // ... or using <aside class="notes"> elements
  79. let notesElements = slide.querySelectorAll( 'aside.notes' );
  80. if( notesElements ) {
  81. return Array.from(notesElements).map( notesElement => notesElement.innerHTML ).join( '\n' );
  82. }
  83. return null;
  84. }
  85. destroy() {
  86. this.element.remove();
  87. }
  88. }