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