revamp pdf printing to support per-slide backgrounds (closes #453)
This commit is contained in:
Hakim El Hattab
parent
ff35847fc6
commit
4d164dc5b6
@ -17,8 +17,9 @@
|
||||
|
||||
body {
|
||||
font-size: 18pt;
|
||||
width: auto;
|
||||
height: auto;
|
||||
width: 297mm;
|
||||
height: 229mm;
|
||||
margin: 0 auto !important;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
float: none !important;
|
||||
@ -88,10 +89,8 @@ ul, ol, div, p {
|
||||
|
||||
left: auto;
|
||||
top: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: auto;
|
||||
padding: auto;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
|
||||
overflow: visible;
|
||||
display: block;
|
||||
@ -113,18 +112,18 @@ ul, ol, div, p {
|
||||
page-break-after: always !important;
|
||||
|
||||
visibility: visible !important;
|
||||
position: static !important;
|
||||
position: relative !important;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
min-height: initial !important;
|
||||
height: 229mm !important;
|
||||
min-height: 229mm !important;
|
||||
display: block !important;
|
||||
overflow: visible !important;
|
||||
overflow: hidden !important;
|
||||
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
margin-left: 0px !important;
|
||||
margin-top: 50px !important;
|
||||
padding: 20px 0px !important;
|
||||
margin: 0 !important;
|
||||
padding: 2cm 1cm 0 1cm !important;
|
||||
box-sizing: border-box !important;
|
||||
|
||||
opacity: 1 !important;
|
||||
|
||||
@ -139,9 +138,11 @@ ul, ol, div, p {
|
||||
transform: none !important;
|
||||
}
|
||||
.reveal section.stack {
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
page-break-after: avoid !important;
|
||||
height: auto !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
.reveal section .fragment {
|
||||
opacity: 1 !important;
|
||||
@ -152,6 +153,17 @@ ul, ol, div, p {
|
||||
-ms-transform: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
.reveal section .slide-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
.reveal section>* {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.reveal img {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -1309,7 +1309,7 @@ body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.reveal>.background div {
|
||||
.reveal .slide-background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -1327,13 +1327,18 @@ body {
|
||||
-o-transition: all 650ms ease;
|
||||
transition: all 650ms ease;
|
||||
}
|
||||
.reveal>.background div.present {
|
||||
.reveal .slide-background.present {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.print-pdf .reveal .slide-background {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* Linear sliding transition style */
|
||||
.reveal[data-background-transition=linear]>.background div {
|
||||
.reveal[data-background-transition=linear]>.background .slide-background {
|
||||
opacity: 1;
|
||||
|
||||
-webkit-backface-visibility: hidden;
|
||||
@ -1341,14 +1346,14 @@ body {
|
||||
-ms-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.reveal[data-background-transition=linear]>.background div.past {
|
||||
.reveal[data-background-transition=linear]>.background .slide-background.past {
|
||||
-webkit-transform: translate(-100%, 0);
|
||||
-moz-transform: translate(-100%, 0);
|
||||
-ms-transform: translate(-100%, 0);
|
||||
-o-transform: translate(-100%, 0);
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
.reveal[data-background-transition=linear]>.background div.future {
|
||||
.reveal[data-background-transition=linear]>.background .slide-background.future {
|
||||
-webkit-transform: translate(100%, 0);
|
||||
-moz-transform: translate(100%, 0);
|
||||
-ms-transform: translate(100%, 0);
|
||||
@ -1356,14 +1361,14 @@ body {
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
|
||||
.reveal[data-background-transition=linear]>.background div>div.past {
|
||||
.reveal[data-background-transition=linear]>.background .slide-background>.slide-background.past {
|
||||
-webkit-transform: translate(0, -100%);
|
||||
-moz-transform: translate(0, -100%);
|
||||
-ms-transform: translate(0, -100%);
|
||||
-o-transform: translate(0, -100%);
|
||||
transform: translate(0, -100%);
|
||||
}
|
||||
.reveal[data-background-transition=linear]>.background div>div.future {
|
||||
.reveal[data-background-transition=linear]>.background .slide-background>.slide-background.future {
|
||||
-webkit-transform: translate(0, 100%);
|
||||
-moz-transform: translate(0, 100%);
|
||||
-ms-transform: translate(0, 100%);
|
||||
@ -1373,13 +1378,13 @@ body {
|
||||
|
||||
|
||||
/* Global transition speed settings */
|
||||
.reveal[data-transition-speed="fast"]>.background div {
|
||||
.reveal[data-transition-speed="fast"]>.background .slide-background {
|
||||
-webkit-transition-duration: 300ms;
|
||||
-moz-transition-duration: 300ms;
|
||||
-ms-transition-duration: 300ms;
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.reveal[data-transition-speed="slow"]>.background div {
|
||||
.reveal[data-transition-speed="slow"]>.background .slide-background {
|
||||
-webkit-transition-duration: 900ms;
|
||||
-moz-transition-duration: 900ms;
|
||||
-ms-transition-duration: 900ms;
|
||||
|
||||
2
css/reveal.min.css
vendored
2
css/reveal.min.css
vendored
File diff suppressed because one or more lines are too long
10
index.html
10
index.html
@ -201,19 +201,13 @@
|
||||
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
|
||||
</a>
|
||||
</section>
|
||||
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif">
|
||||
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
|
||||
<h2>Image Backgrounds</h2>
|
||||
<pre><code><section data-background="image.png"></code></pre>
|
||||
<a href="#" class="image navigate-down">
|
||||
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
|
||||
</a>
|
||||
</section>
|
||||
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" data-background-repeat="repeat" data-background-size="100px">
|
||||
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" data-background-repeat="repeat" data-background-size="100px">
|
||||
<h2>Repeated Image Backgrounds</h2>
|
||||
<pre><code style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre>
|
||||
<a href="#" class="image navigate-next">
|
||||
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);">
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
34
js/reveal.js
34
js/reveal.js
@ -254,6 +254,10 @@ var Reveal = (function(){
|
||||
*/
|
||||
function createBackgrounds() {
|
||||
|
||||
if( isPrintingPDF() ) {
|
||||
document.body.classList.add( 'print-pdf' );
|
||||
}
|
||||
|
||||
// Clear prior backgrounds
|
||||
dom.background.innerHTML = '';
|
||||
dom.background.classList.add( 'no-transition' );
|
||||
@ -271,6 +275,7 @@ var Reveal = (function(){
|
||||
};
|
||||
|
||||
var element = document.createElement( 'div' );
|
||||
element.className = 'slide-background';
|
||||
|
||||
if( data.background ) {
|
||||
// Auto-wrap image urls in url(...)
|
||||
@ -297,12 +302,24 @@ var Reveal = (function(){
|
||||
// Iterate over all horizontal slides
|
||||
toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) {
|
||||
|
||||
var backgroundStack = _createBackground( slideh, dom.background );
|
||||
var backgroundStack;
|
||||
|
||||
if( isPrintingPDF() ) {
|
||||
backgroundStack = _createBackground( slideh, slideh );
|
||||
}
|
||||
else {
|
||||
backgroundStack = _createBackground( slideh, dom.background );
|
||||
}
|
||||
|
||||
// Iterate over all vertical slides
|
||||
toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) {
|
||||
|
||||
if( isPrintingPDF() ) {
|
||||
_createBackground( slidev, slidev );
|
||||
}
|
||||
else {
|
||||
_createBackground( slidev, backgroundStack );
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
@ -597,6 +614,15 @@ var Reveal = (function(){
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if this instance is being used to print a PDF.
|
||||
*/
|
||||
function isPrintingPDF() {
|
||||
|
||||
return ( /print-pdf/gi ).test( window.location.search );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Causes the address bar to hide on mobile devices,
|
||||
* more vertical space ftw.
|
||||
@ -713,7 +739,7 @@ var Reveal = (function(){
|
||||
*/
|
||||
function layout() {
|
||||
|
||||
if( dom.wrapper ) {
|
||||
if( dom.wrapper && !isPrintingPDF() ) {
|
||||
|
||||
// Available space to scale within
|
||||
var availableWidth = dom.wrapper.offsetWidth,
|
||||
@ -1491,11 +1517,11 @@ var Reveal = (function(){
|
||||
// states of their slides (past/present/future)
|
||||
toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
|
||||
|
||||
backgroundh.className = ( h < indexh ? 'past' : h > indexh ? 'future' : 'present' );
|
||||
backgroundh.className = 'slide-background ' + ( h < indexh ? 'past' : h > indexh ? 'future' : 'present' );
|
||||
|
||||
toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) {
|
||||
|
||||
backgroundv.className = ( v < indexv ? 'past' : v > indexv ? 'future' : 'present' );
|
||||
backgroundv.className = 'slide-background ' + ( v < indexv ? 'past' : v > indexv ? 'future' : 'present' );
|
||||
|
||||
} );
|
||||
|
||||
|
||||
4
js/reveal.min.js
vendored
4
js/reveal.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user