print.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  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. setupPDF() {
  15. let config = this.Reveal.getConfig();
  16. let slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
  17. // Dimensions of the PDF pages
  18. let pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ),
  19. pageHeight = Math.floor( slideSize.height * ( 1 + config.margin ) );
  20. // Dimensions of slides within the pages
  21. let slideWidth = slideSize.width,
  22. slideHeight = slideSize.height;
  23. // Let the browser know what page size we want to print
  24. createStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0px;}' );
  25. // Limit the size of certain elements to the dimensions of the slide
  26. createStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' );
  27. document.documentElement.classList.add( 'print-pdf' );
  28. document.body.style.width = pageWidth + 'px';
  29. document.body.style.height = pageHeight + 'px';
  30. // Make sure stretch elements fit on slide
  31. this.Reveal.layoutSlideContents( slideWidth, slideHeight );
  32. // Compute slide numbers now, before we start duplicating slides
  33. let doingSlideNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );
  34. queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR ).forEach( function( slide ) {
  35. slide.setAttribute( 'data-slide-number', this.Reveal.slideNumber.getSlideNumber( slide ) );
  36. }, this );
  37. // Slide and slide background layout
  38. queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR ).forEach( function( slide ) {
  39. // Vertical stacks are not centred since their section
  40. // children will be
  41. if( slide.classList.contains( 'stack' ) === false ) {
  42. // Center the slide inside of the page, giving the slide some margin
  43. let left = ( pageWidth - slideWidth ) / 2,
  44. top = ( pageHeight - slideHeight ) / 2;
  45. // Re-run the slide layout so that r-fit-text is applied based on
  46. // the printed slide size
  47. this.Reveal.slideContent.layout( slide );
  48. let contentHeight = slide.scrollHeight;
  49. let numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 );
  50. // Adhere to configured pages per slide limit
  51. numberOfPages = Math.min( numberOfPages, config.pdfMaxPagesPerSlide );
  52. // Center slides vertically
  53. if( numberOfPages === 1 && config.center || slide.classList.contains( 'center' ) ) {
  54. top = Math.max( ( pageHeight - contentHeight ) / 2, 0 );
  55. }
  56. // Wrap the slide in a page element and hide its overflow
  57. // so that no page ever flows onto another
  58. let page = document.createElement( 'div' );
  59. page.className = 'pdf-page';
  60. page.style.height = ( ( pageHeight + config.pdfPageHeightOffset ) * numberOfPages ) + 'px';
  61. slide.parentNode.insertBefore( page, slide );
  62. page.appendChild( slide );
  63. // Position the slide inside of the page
  64. slide.style.left = left + 'px';
  65. slide.style.top = top + 'px';
  66. slide.style.width = slideWidth + 'px';
  67. if( slide.slideBackgroundElement ) {
  68. page.insertBefore( slide.slideBackgroundElement, slide );
  69. }
  70. // Inject notes if `showNotes` is enabled
  71. if( config.showNotes ) {
  72. // Are there notes for this slide?
  73. let notes = this.Reveal.getSlideNotes( slide );
  74. if( notes ) {
  75. let notesSpacing = 8;
  76. let notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline';
  77. let notesElement = document.createElement( 'div' );
  78. notesElement.classList.add( 'speaker-notes' );
  79. notesElement.classList.add( 'speaker-notes-pdf' );
  80. notesElement.setAttribute( 'data-layout', notesLayout );
  81. notesElement.innerHTML = notes;
  82. if( notesLayout === 'separate-page' ) {
  83. page.parentNode.insertBefore( notesElement, page.nextSibling );
  84. }
  85. else {
  86. notesElement.style.left = notesSpacing + 'px';
  87. notesElement.style.bottom = notesSpacing + 'px';
  88. notesElement.style.width = ( pageWidth - notesSpacing*2 ) + 'px';
  89. page.appendChild( notesElement );
  90. }
  91. }
  92. }
  93. // Inject slide numbers if `slideNumbers` are enabled
  94. if( doingSlideNumbers ) {
  95. let numberElement = document.createElement( 'div' );
  96. numberElement.classList.add( 'slide-number' );
  97. numberElement.classList.add( 'slide-number-pdf' );
  98. numberElement.innerHTML = slide.getAttribute( 'data-slide-number' );
  99. page.appendChild( numberElement );
  100. }
  101. // Copy page and show fragments one after another
  102. if( config.pdfSeparateFragments ) {
  103. // Each fragment 'group' is an array containing one or more
  104. // fragments. Multiple fragments that appear at the same time
  105. // are part of the same group.
  106. let fragmentGroups = this.Reveal.fragments.sort( page.querySelectorAll( '.fragment' ), true );
  107. let previousFragmentStep;
  108. let previousPage;
  109. fragmentGroups.forEach( function( fragments ) {
  110. // Remove 'current-fragment' from the previous group
  111. if( previousFragmentStep ) {
  112. previousFragmentStep.forEach( function( fragment ) {
  113. fragment.classList.remove( 'current-fragment' );
  114. } );
  115. }
  116. // Show the fragments for the current index
  117. fragments.forEach( function( fragment ) {
  118. fragment.classList.add( 'visible', 'current-fragment' );
  119. }, this );
  120. // Create a separate page for the current fragment state
  121. let clonedPage = page.cloneNode( true );
  122. page.parentNode.insertBefore( clonedPage, ( previousPage || page ).nextSibling );
  123. previousFragmentStep = fragments;
  124. previousPage = clonedPage;
  125. }, this );
  126. // Reset the first/original page so that all fragments are hidden
  127. fragmentGroups.forEach( function( fragments ) {
  128. fragments.forEach( function( fragment ) {
  129. fragment.classList.remove( 'visible', 'current-fragment' );
  130. } );
  131. } );
  132. }
  133. // Show all fragments
  134. else {
  135. queryAll( page, '.fragment:not(.fade-out)' ).forEach( function( fragment ) {
  136. fragment.classList.add( 'visible' );
  137. } );
  138. }
  139. }
  140. }, this );
  141. // Notify subscribers that the PDF layout is good to go
  142. this.Reveal.dispatchEvent({ type: 'pdf-ready' });
  143. }
  144. /**
  145. * Checks if this instance is being used to print a PDF.
  146. */
  147. isPrintingPDF() {
  148. return ( /print-pdf/gi ).test( window.location.search );
  149. }
  150. }