Newer
Older
Hakim El Hattab
a validé
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Slide Notes</title>
<style>
body {
font-family: Helvetica;
}
#speaker-controls {
padding: 6px;
box-sizing: border-box;
-moz-box-sizing: border-box;
Hakim El Hattab
a validé
}
width: 100%;
height: 100%;
border: 1px solid #ddd;
Hakim El Hattab
a validé
}
position: absolute;
top: 10px;
left: 10px;
font-weight: bold;
font-size: 14px;
z-index: 2;
color: rgba( 255, 255, 255, 0.9 );
Hakim El Hattab
a validé
}
#current-slide {
position: absolute;
width: 65%;
height: 100%;
top: 0;
left: 0;
padding-right: 0;
Hakim El Hattab
a validé
}
position: absolute;
width: 35%;
height: 40%;
right: 0;
top: 0;
Hakim El Hattab
a validé
}
Hakim El Hattab
a validé
position: absolute;
top: 40%;
right: 0;
width: 35%;
height: 60%;
}
.speaker-controls-time.hidden,
.speaker-controls-notes.hidden {
display: none;
}
.speaker-controls-time .label,
.speaker-controls-notes .label {
text-transform: uppercase;
font-weight: normal;
font-size: 0.66em;
color: #666;
margin: 0;
}
.speaker-controls-time {
border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
margin-bottom: 10px;
padding: 10px 16px;
padding-bottom: 20px;
}
.speaker-controls-time .timer,
.speaker-controls-time .clock {
width: 50%;
font-size: 1.9em;
}
.speaker-controls-time .timer {
float: left;
}
Hakim El Hattab
a validé
.speaker-controls-time .clock {
float: right;
text-align: right;
}
.speaker-controls-time span.mute {
color: #bbb;
}
.speaker-controls-notes {
padding: 10px 16px;
}
.speaker-controls-notes .value {
margin-top: 5px;
line-height: 1.4;
font-size: 1.2em;
}
.clear {
clear: both;
Hakim El Hattab
a validé
@media screen and (max-width: 1080px) {
#speaker-controls {
font-size: 16px;
}
Hakim El Hattab
a validé
@media screen and (max-width: 900px) {
#speaker-controls {
font-size: 14px;
}
Hakim El Hattab
a validé
@media screen and (max-width: 800px) {
#speaker-controls {
font-size: 12px;
}
Hakim El Hattab
a validé
</style>
</head>
<body>
<div id="current-slide"></div>
<div id="upcoming-slide"><span class="label">UPCOMING:</span></div>
<div id="speaker-controls">
<div class="speaker-controls-time">
<h4 class="label">Time</h4>
<div class="clock">
<span class="clock-value">0:00 AM</span>
</div>
<div class="timer">
<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
</div>
<div class="clear"></div>
<div class="speaker-controls-notes hidden">
<h4 class="label">Notes</h4>
<div class="value"></div>
Hakim El Hattab
a validé
<script src="../../plugin/markdown/marked.js"></script>
Hakim El Hattab
a validé
<script>
Hakim El Hattab
a validé
Hakim El Hattab
a validé
(function() {
var notes,
Hakim El Hattab
a validé
currentState,
currentSlide,
Hakim El Hattab
a validé
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
connected = false;
window.addEventListener( 'message', function( event ) {
var data = JSON.parse( event.data );
// Messages sent by the notes plugin inside of the main window
if( data && data.namespace === 'reveal-notes' ) {
if( data.type === 'connect' ) {
handleConnectMessage( data );
}
else if( data.type === 'state' ) {
handleStateMessage( data );
}
}
// Messages sent by the reveal.js inside of the current slide preview
else if( data && data.namespace === 'reveal' ) {
if( /ready/.test( data.eventName ) ) {
// Send a message back to notify that the handshake is complete
window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'connected'} ), '*' );
}
else if( /slidechanged|fragmentshown|fragmenthidden|overviewshown|overviewhidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ]} ), '*' );
}
}
} );
/**
* Called when the main window is trying to establish a
* connection.
*/
function handleConnectMessage( data ) {
if( connected === false ) {
connected = true;
setupIframes( data );
Hakim El Hattab
a validé
setupTimer();
}
Hakim El Hattab
a validé
Hakim El Hattab
a validé
}
Hakim El Hattab
a validé
/**
* Called when the main window sends an updated state.
*/
function handleStateMessage( data ) {
Hakim El Hattab
a validé
// Store the most recently set state to avoid circular loops
// applying the same state
currentState = JSON.stringify( data.state );
Hakim El Hattab
a validé
// No need for updating the notes in case of fragment changes
if ( data.notes ) {
notes.classList.remove( 'hidden' );
Hakim El Hattab
a validé
if( data.markdown ) {
notesValue.innerHTML = marked( data.notes );
Hakim El Hattab
a validé
}
else {
notesValue.innerHTML = data.notes;
Hakim El Hattab
a validé
}
Hakim El Hattab
a validé
}
else {
notes.classList.add( 'hidden' );
}
Hakim El Hattab
a validé
// Update the note slides
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'next' }), '*' );
Hakim El Hattab
a validé
Hakim El Hattab
a validé
}
// Limit to max one state update per X ms
handleStateMessage = debounce( handleStateMessage, 200 );
Hakim El Hattab
a validé
/**
* Creates the preview iframes.
*/
function setupIframes( data ) {
Hakim El Hattab
a validé
'receiver',
'progress=false',
'history=false',
'postMessageEvents=true'
].join( '&' );
var upcomingParams = [
'receiver',
'progress=false',
'history=false',
'controls=false',
'transition=none',
'backgroundTransition=none'
].join( '&' );
Hakim El Hattab
a validé
var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
var currentURL = data.url + '?' + currentParams + hash;
var upcomingURL = data.url + '?' + upcomingParams + hash;
Hakim El Hattab
a validé
currentSlide = document.createElement( 'iframe' );
currentSlide.setAttribute( 'width', 1280 );
currentSlide.setAttribute( 'height', 1024 );
currentSlide.setAttribute( 'src', currentURL );
document.querySelector( '#current-slide' ).appendChild( currentSlide );
Hakim El Hattab
a validé
upcomingSlide = document.createElement( 'iframe' );
upcomingSlide.setAttribute( 'width', 640 );
upcomingSlide.setAttribute( 'height', 512 );
upcomingSlide.setAttribute( 'src', upcomingURL );
document.querySelector( '#upcoming-slide' ).appendChild( upcomingSlide );
}
/**
* Setup the notes UI.
*/
function setupNotes() {
notes = document.querySelector( '.speaker-controls-notes' );
notesValue = document.querySelector( '.speaker-controls-notes .value' );
Hakim El Hattab
a validé
}
Hakim El Hattab
a validé
/**
* Create the timer and clock and start updating them
* at an interval.
*/
function setupTimer() {
Hakim El Hattab
a validé
var start = new Date(),
timeEl = document.querySelector( '.speaker-controls-time' ),
clockEl = timeEl.querySelector( '.clock-value' ),
hoursEl = timeEl.querySelector( '.hours-value' ),
minutesEl = timeEl.querySelector( '.minutes-value' ),
secondsEl = timeEl.querySelector( '.seconds-value' );
Hakim El Hattab
a validé
Hakim El Hattab
a validé
var diff, hours, minutes, seconds,
now = new Date();
diff = now.getTime() - start.getTime();
Thomas Rosenau
a validé
hours = Math.floor( diff / ( 1000 * 60 * 60 ) );
minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
seconds = Math.floor( ( diff / 1000 ) % 60 );
Hakim El Hattab
a validé
clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
Hakim El Hattab
a validé
hoursEl.innerHTML = zeroPadInteger( hours );
Hakim El Hattab
a validé
hoursEl.className = hours > 0 ? '' : 'mute';
minutesEl.innerHTML = ':' + zeroPadInteger( minutes );
minutesEl.className = minutes > 0 ? '' : 'mute';
secondsEl.innerHTML = ':' + zeroPadInteger( seconds );
Hakim El Hattab
a validé
}
// Update once directly
_updateTimer();
// Then update every second
setInterval( _updateTimer, 1000 );
}
Hakim El Hattab
a validé
function zeroPadInteger( num ) {
Hakim El Hattab
a validé
Hakim El Hattab
a validé
var str = '00' + parseInt( num );
return str.substring( str.length - 2 );
Hakim El Hattab
a validé
}
Hakim El Hattab
a validé
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
/**
* Limits the frequency at which a function can be called.
*/
function debounce( fn, ms ) {
var lastTime = 0,
timeout;
return function() {
var args = arguments;
var context = this;
clearTimeout( timeout );
var timeSinceLastCall = Date.now() - lastTime;
if( timeSinceLastCall > ms ) {
fn.apply( context, args );
lastTime = Date.now();
}
else {
timeout = setTimeout( function() {
fn.apply( context, args );
lastTime = Date.now();
}, ms - timeSinceLastCall );
}
}
}
Hakim El Hattab
a validé
})();
Hakim El Hattab
a validé
Hakim El Hattab
a validé
</script>
</body>
</html>