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.

print.js 7.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. import { SLIDES_SELECTOR } from '../utils/constants.js'
  2. import { queryAll, createStyleSheet } from '../utils/util.js'
  3. /**
  4. * Setups up our presentation for printing/exporting to PDF.
  5. */
  6. export default class Print {
  7. constructor( Reveal ) {
  8. this.Reveal = Reveal;
  9. }
  10. /**
  11. * Configures the presentation for printing to a static
  12. * PDF.
  13. */
  14. async setupPDF() {
  15. const config = this.Reveal.getConfig();
  16. const slides = queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR )
  17. // Compute slide numbers now, before we start duplicating slides
  18. const injectPageNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );
  19. const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
  20. // Dimensions of the PDF pages
  21. const pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ),
  22. pageHeight = Math.floor( slideSize.height * ( 1 + config.margin ) );
  23. // Dimensions of slides within the pages
  24. const slideWidth = slideSize.width,
  25. slideHeight = slideSize.height;
  26. await new Promise( requestAnimationFrame );
  27. // Let the browser know what page size we want to print
  28. createStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0px;}' );
  29. // Limit the size of certain elements to the dimensions of the slide
  30. createStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' );
  31. document.documentElement.classList.add( 'print-pdf' );
  32. document.body.style.width = pageWidth + 'px';
  33. document.body.style.height = pageHeight + 'px';
  34. const viewportElement = document.querySelector( '.reveal-viewport' );
  35. let presentationBackground;
  36. if( viewportElement ) {
  37. const viewportStyles = window.getComputedStyle( viewportElement );
  38. if( viewportStyles && viewportStyles.background ) {
  39. presentationBackground = viewportStyles.background;
  40. }
  41. }
  42. // Make sure stretch elements fit on slide
  43. await new Promise( requestAnimationFrame );
  44. this.Reveal.layoutSlideContents( slideWidth, slideHeight );
  45. // Batch scrollHeight access to prevent layout thrashing
  46. await new Promise( requestAnimationFrame );
  47. const slideScrollHeights = slides.map( slide => slide.scrollHeight );
  48. const pages = [];
  49. const pageContainer = slides[0].parentNode;
  50. let slideNumber = 1;
  51. // Slide and slide background layout
  52. slides.forEach( function( slide, index ) {
  53. // Vertical stacks are not centred since their section
  54. // children will be
  55. if( slide.classList.contains( 'stack' ) === false ) {
  56. // Center the slide inside of the page, giving the slide some margin
  57. let left = ( pageWidth - slideWidth ) / 2;
  58. let top = ( pageHeight - slideHeight ) / 2;
  59. const contentHeight = slideScrollHeights[ index ];
  60. let numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 );
  61. // Adhere to configured pages per slide limit
  62. numberOfPages = Math.min( numberOfPages, config.pdfMaxPagesPerSlide );
  63. // Center slides vertically
  64. if( numberOfPages === 1 && config.center || slide.classList.contains( 'center' ) ) {
  65. top = Math.max( ( pageHeight - contentHeight ) / 2, 0 );
  66. }
  67. // Wrap the slide in a page element and hide its overflow
  68. // so that no page ever flows onto another
  69. const page = document.createElement( 'div' );
  70. pages.push( page );
  71. page.className = 'pdf-page';
  72. page.style.height = ( ( pageHeight + config.pdfPageHeightOffset ) * numberOfPages ) + 'px';
  73. // Copy the presentation-wide background to each individual
  74. // page when printing
  75. if( presentationBackground ) {
  76. page.style.background = presentationBackground;
  77. }
  78. page.appendChild( slide );
  79. // Position the slide inside of the page
  80. slide.style.left = left + 'px';
  81. slide.style.top = top + 'px';
  82. slide.style.width = slideWidth + 'px';
  83. this.Reveal.slideContent.layout( slide );
  84. if( slide.slideBackgroundElement ) {
  85. page.insertBefore( slide.slideBackgroundElement, slide );
  86. }
  87. // Inject notes if `showNotes` is enabled
  88. if( config.showNotes ) {
  89. // Are there notes for this slide?
  90. const notes = this.Reveal.getSlideNotes( slide );
  91. if( notes ) {
  92. const notesSpacing = 8;
  93. const notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline';
  94. const notesElement = document.createElement( 'div' );
  95. notesElement.classList.add( 'speaker-notes' );
  96. notesElement.classList.add( 'speaker-notes-pdf' );
  97. notesElement.setAttribute( 'data-layout', notesLayout );
  98. notesElement.innerHTML = notes;
  99. if( notesLayout === 'separate-page' ) {
  100. pages.push( notesElement );
  101. }
  102. else {
  103. notesElement.style.left = notesSpacing + 'px';
  104. notesElement.style.bottom = notesSpacing + 'px';
  105. notesElement.style.width = ( pageWidth - notesSpacing*2 ) + 'px';
  106. page.appendChild( notesElement );
  107. }
  108. }
  109. }
  110. // Inject page numbers if `slideNumbers` are enabled
  111. if( injectPageNumbers ) {
  112. const numberElement = document.createElement( 'div' );
  113. numberElement.classList.add( 'slide-number' );
  114. numberElement.classList.add( 'slide-number-pdf' );
  115. numberElement.innerHTML = slideNumber++;
  116. page.appendChild( numberElement );
  117. }
  118. // Copy page and show fragments one after another
  119. if( config.pdfSeparateFragments ) {
  120. // Each fragment 'group' is an array containing one or more
  121. // fragments. Multiple fragments that appear at the same time
  122. // are part of the same group.
  123. const fragmentGroups = this.Reveal.fragments.sort( page.querySelectorAll( '.fragment' ), true );
  124. let previousFragmentStep;
  125. fragmentGroups.forEach( function( fragments, index ) {
  126. // Remove 'current-fragment' from the previous group
  127. if( previousFragmentStep ) {
  128. previousFragmentStep.forEach( function( fragment ) {
  129. fragment.classList.remove( 'current-fragment' );
  130. } );
  131. }
  132. // Show the fragments for the current index
  133. fragments.forEach( function( fragment ) {
  134. fragment.classList.add( 'visible', 'current-fragment' );
  135. }, this );
  136. // Create a separate page for the current fragment state
  137. const clonedPage = page.cloneNode( true );
  138. // Inject unique page numbers for fragments
  139. if( injectPageNumbers ) {
  140. const numberElement = clonedPage.querySelector( '.slide-number-pdf' );
  141. const fragmentNumber = index + 1;
  142. numberElement.innerHTML += '.' + fragmentNumber;
  143. }
  144. pages.push( clonedPage );
  145. previousFragmentStep = fragments;
  146. }, this );
  147. // Reset the first/original page so that all fragments are hidden
  148. fragmentGroups.forEach( function( fragments ) {
  149. fragments.forEach( function( fragment ) {
  150. fragment.classList.remove( 'visible', 'current-fragment' );
  151. } );
  152. } );
  153. }
  154. // Show all fragments
  155. else {
  156. queryAll( page, '.fragment:not(.fade-out)' ).forEach( function( fragment ) {
  157. fragment.classList.add( 'visible' );
  158. } );
  159. }
  160. }
  161. }, this );
  162. await new Promise( requestAnimationFrame );
  163. pages.forEach( page => pageContainer.appendChild( page ) );
  164. // Re-run JS-based content layout after the slide is added to page DOM
  165. this.Reveal.slideContent.layout( this.Reveal.getSlidesElement() );
  166. // Notify subscribers that the PDF layout is good to go
  167. this.Reveal.dispatchEvent({ type: 'pdf-ready' });
  168. }
  169. /**
  170. * Checks if this instance is being used to print a PDF.
  171. */
  172. isPrintingPDF() {
  173. return ( /print-pdf/gi ).test( window.location.search );
  174. }
  175. }