Presentations
/
Openfest2013-UlteoOVDPresentation
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

revamp pdf printing to support per-slide backgrounds (closes #453)

embed
Hakim El Hattab 12 years ago
parent
ff35847fc6
commit
4d164dc5b6
6 changed files with 77 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 42
      css/print/pdf.css
  2. 23
      css/reveal.css
  3. 2
      css/reveal.min.css
  4. 10
      index.html
  5. 36
      js/reveal.js
  6. 4
      js/reveal.min.js

42
css/print/pdf.css
View File

@ -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;
}

23
css/reveal.css
View File

@ -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
View File

File diff suppressed because one or more lines are too long

10
index.html
View File

@ -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>&lt;section data-background="image.png"&gt;</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;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</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>

36
js/reveal.js
View File

@ -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 ) {
_createBackground( slidev, backgroundStack );
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
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save