blallo
/
presentazione-papero
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

merge conflicts w preview & backgrounds

master
Hakim El Hattab 2013-06-10 16:53:41 -04:00
parent 8b355eaba0 424f8ee961
commit 7094f44eb9
14 changed files with 509 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
README.md
View File

File diff suppressed because one or more lines are too long

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

113
css/reveal.css
View File

@ -1252,17 +1252,18 @@ body {
left: 0;
}
.no-transition {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
.reveal .no-transition,
.reveal .no-transition * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
/*********************************************
* BACKGROUND STATES
* BACKGROUND STATES [DEPRECATED]
*********************************************/
.reveal .state-background {
@ -1306,6 +1307,104 @@ body {
}
/*********************************************
*
*********************************************/
.reveal>.backgrounds {
position: absolute;
width: 100%;
height: 100%;
}
.reveal .slide-background {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
background-color: rgba( 0, 0, 0, 0 );
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
.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]>.backgrounds .slide-background {
opacity: 1;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition-duration: 800ms;
-moz-transition-duration: 800ms;
-ms-transition-duration: 800ms;
-o-transition-duration: 800ms;
transition-duration: 800ms;
}
.reveal[data-background-transition=linear]>.backgrounds .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]>.backgrounds .slide-background.future {
-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]>.backgrounds .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]>.backgrounds .slide-background>.slide-background.future {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
}
/* Global transition speed settings */
.reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
-webkit-transition-duration: 400ms;
-moz-transition-duration: 400ms;
-ms-transition-duration: 400ms;
transition-duration: 400ms;
}
.reveal[data-transition-speed="slow"]>.backgrounds .slide-background {
-webkit-transition-duration: 1200ms;
-moz-transition-duration: 1200ms;
-ms-transition-duration: 1200ms;
transition-duration: 1200ms;
}
/*********************************************
* RTL SUPPORT
*********************************************/

2
css/reveal.min.css vendored
View File

File diff suppressed because one or more lines are too long

49
index.html
View File

@ -183,29 +183,12 @@
</section>
<section>
<section data-state="alert">
<h2>Global State</h2>
<p>
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
will be added as a class to the document element when the slide is open. This lets you
apply broader style changes, like switching the background.
</p>
<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-state="blackout">
<h2>"blackout"</h2>
<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-state="soothe">
<h2>"soothe"</h2>
<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>
<h2>Global State</h2>
<p>
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
will be added as a class to the document element when the slide is open. This lets you
apply broader style changes, like switching the background.
</p>
</section>
<section data-state="customevent">
@ -220,6 +203,26 @@ Reveal.addEventListener( 'customevent', function() {
</code></pre>
</section>
<section>
<section data-background="#007777">
<h2>Slide Backgrounds</h2>
<p>
Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported.
</p>
<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/arrow.png">
<h2>Image Backgrounds</h2>
<pre><code>&lt;section data-background="image.png"&gt;</code></pre>
</section>
<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>
</section>
</section>
<section>
<h2>Clever Quotes</h2>
<p>

159
js/reveal.js
View File

@ -82,6 +82,9 @@ var Reveal = (function(){
// Transition speed
transitionSpeed: 'default', // default/fast/slow
// Transition style for full page slide backgrounds
backgroundTransition: 'default', // default/linear
// Script dependencies to load
dependencies: []
},
@ -189,6 +192,13 @@ var Reveal = (function(){
dom.wrapper = document.querySelector( '.reveal' );
dom.slides = document.querySelector( '.reveal .slides' );
// Background element
if( !document.querySelector( '.reveal .backgrounds' ) ) {
dom.background = document.createElement( 'div' );
dom.background.classList.add( 'backgrounds' );
dom.wrapper.appendChild( dom.background );
}
// Progress bar
if( !dom.wrapper.querySelector( '.progress' ) ) {
var progressElement = document.createElement( 'div' );
@ -208,11 +218,11 @@ var Reveal = (function(){
dom.wrapper.appendChild( controlsElement );
}
// Presentation background element
// State background element [DEPRECATED]
if( !dom.wrapper.querySelector( '.state-background' ) ) {
var backgroundElement = document.createElement( 'div' );
backgroundElement.classList.add( 'state-background' );
dom.wrapper.appendChild( backgroundElement );
var stateBackgroundElement = document.createElement( 'div' );
stateBackgroundElement.classList.add( 'state-background' );
dom.wrapper.appendChild( stateBackgroundElement );
}
// Overlay graphic which is displayed during the paused mode
@ -240,6 +250,86 @@ var Reveal = (function(){
}
/**
* Creates the slide background elements and appends them
* to the background container. One element is created per
* slide no matter if the given slide has visible background.
*/
function createBackgrounds() {
if( isPrintingPDF() ) {
document.body.classList.add( 'print-pdf' );
}
// Clear prior backgrounds
dom.background.innerHTML = '';
dom.background.classList.add( 'no-transition' );
// Helper method for creating a background element for the
// given slide
function _createBackground( slide, container ) {
var data = {
background: slide.getAttribute( 'data-background' ),
backgroundSize: slide.getAttribute( 'data-background-size' ),
backgroundColor: slide.getAttribute( 'data-background-color' ),
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
backgroundPosition: slide.getAttribute( 'data-background-position' )
};
var element = document.createElement( 'div' );
element.className = 'slide-background';
if( data.background ) {
// Auto-wrap image urls in url(...)
if( /\.(png|jpg|jpeg|gif|bmp)$/gi.test( data.background ) ) {
element.style.backgroundImage = 'url('+ data.background +')';
}
else {
element.style.background = data.background;
}
}
// Additional and optional background properties
if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize;
if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
container.appendChild( element );
return element;
}
// Iterate over all horizontal slides
toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) {
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 );
}
} );
} );
}
/**
* Hides the address bar if we're on a mobile device.
*/
@ -351,6 +441,7 @@ var Reveal = (function(){
dom.wrapper.classList.add( config.transition );
dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
dom.wrapper.setAttribute( 'data-background-transition', config.backgroundTransition );
if( dom.controls ) {
dom.controls.style.display = ( config.controls && dom.controls ) ? 'block' : 'none';
@ -570,6 +661,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.
@ -770,7 +870,7 @@ var Reveal = (function(){
*/
function layout() {
if( dom.wrapper ) {
if( dom.wrapper && !isPrintingPDF() ) {
// Available space to scale within
var availableWidth = dom.wrapper.offsetWidth,
@ -1262,7 +1362,8 @@ var Reveal = (function(){
}
// Dispatch an event if the slide changed
if( indexh !== indexhBefore || indexv !== indexvBefore ) {
var slideChanged = ( indexh !== indexhBefore || indexv !== indexvBefore );
if( slideChanged ) {
dispatchEvent( 'slidechanged', {
'indexh': indexh,
'indexv': indexv,
@ -1299,11 +1400,14 @@ var Reveal = (function(){
}
// Handle embedded content
stopEmbeddedContent( previousSlide );
startEmbeddedContent( currentSlide );
if( slideChanged ) {
stopEmbeddedContent( previousSlide );
startEmbeddedContent( currentSlide );
}
updateControls();
updateProgress();
updateBackground();
}
@ -1327,8 +1431,12 @@ var Reveal = (function(){
// Start auto-sliding if it's enabled
cueAutoSlide();
// Re-create the slide backgrounds
createBackgrounds();
updateControls();
updateProgress();
updateBackground();
}
@ -1385,6 +1493,9 @@ var Reveal = (function(){
element.classList.remove( 'present' );
element.classList.remove( 'future' );
// http://www.w3.org/html/wg/drafts/html/master/editing.html#the-hidden-attribute
element.setAttribute( 'hidden', '' );
if( i < index ) {
// Any element previous to index is given the 'past' class
element.classList.add( reverse ? 'future' : 'past' );
@ -1402,6 +1513,7 @@ var Reveal = (function(){
// Mark the current slide as present
slides[index].classList.add( 'present' );
slides[index].removeAttribute( 'hidden' );
// If this slide has a state associated with it, add it
// onto the current state of the deck
@ -1533,6 +1645,37 @@ var Reveal = (function(){
}
/**
* Updates the background elements to reflect the current
* slide.
*/
function updateBackground() {
// Update the classes of all backgrounds to match the
// states of their slides (past/present/future)
toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
// Reverse past/future classes when in RTL mode
var horizontalPast = config.rtl ? 'future' : 'past',
horizontalFuture = config.rtl ? 'past' : 'future';
backgroundh.className = 'slide-background ' + ( h < indexh ? horizontalPast : h > indexh ? horizontalFuture : 'present' );
toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) {
backgroundv.className = 'slide-background ' + ( v < indexv ? 'past' : v > indexv ? 'future' : 'present' );
} );
} );
// Allow the first background to apply without transition
setTimeout( function() {
dom.background.classList.remove( 'no-transition' );
}, 1 );
}
/**
* Determine what available routes there are for navigation.
*

4
js/reveal.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
plugin/multiplex/index.js
View File

@ -30,6 +30,7 @@ app.configure(function() {
});
app.get("/", function(req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
});

1
plugin/notes-server/index.js
View File

@ -30,6 +30,7 @@ app.configure(function() {
});
app.get("/", function(req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
});

6
plugin/notes/notes.html
View File

@ -213,9 +213,9 @@
now = new Date();
diff = now.getTime() - start.getTime();
hours = parseInt( diff / ( 1000 * 60 * 60 ) );
minutes = parseInt( ( diff / ( 1000 * 60 ) ) % 60 );
seconds = parseInt( ( diff / 1000 ) % 60 );
hours = Math.floor( diff / ( 1000 * 60 * 60 ) );
minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
seconds = Math.floor( ( diff / 1000 ) % 60 );
clockEl.innerHTML = now.toLocaleTimeString();
hoursEl.innerHTML = zeroPadInteger( hours );

BIN
test/assets/image1.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
test/assets/image2.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

95
test/background.html 100644
View File

@ -0,0 +1,95 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../css/reveal.min.css">
<link rel="stylesheet" href="../css/theme/serif.css" id="theme">
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background="#00ffff">
<h2>data-background: #00ffff</h2>
</section>
<section data-background="#bb00bb">
<h2>data-background: #bb00bb</h2>
</section>
<section>
<section data-background="#ff0000">
<h2>data-background: #ff0000</h2>
</section>
<section data-background="rgba(0, 0, 0, 0.2)">
<h2>data-background: rgba(0, 0, 0, 0.2)</h2>
</section>
<section data-background="salmon">
<h2>data-background: salmon</h2>
</section>
</section>
<section data-background="rgba(0, 100, 100, 0.2)">
<section>
<h2>Background applied to stack</h2>
</section>
<section>
<h2>Background applied to stack</h2>
</section>
<section data-background="rgba(100, 0, 0, 0.2)">
<h2>Background applied to slide inside of stack</h2>
</section>
</section>
<section data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)">
<h2>Background image</h2>
</section>
<section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111" style="background: rgba(255,255,255,0.9)">
<h2>Background image</h2>
<pre>data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre>
</section>
<section data-background="#888888">
<h2>Same background twice (1/2)</h2>
</section>
<section data-background="#888888">
<h2>Same background twice (2/2)</h2>
</section>
</div>
</div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
// rtl: true,
transition: 'linear',
// transitionSpeed: 'slow',
// backgroundTransition: 'linear'
});
</script>
</body>
</html>

58
test/media.html 100644
View File

@ -0,0 +1,58 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../css/reveal.min.css">
<link rel="stylesheet" href="../css/theme/default.css" id="theme">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h2>Embedded Media Test</h2>
</section>
<section>
<iframe data-autoplay width="420" height="345" src="http://www.youtube.com/embed/l3RQZ4mcr1c"></iframe>
</section>
<section>
<h2>Empty Slide</h2>
</section>
</div>
</div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'linear',
// transitionSpeed: 'slow',
// backgroundTransition: 'linear'
});
</script>
</body>
</html>