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;
font-size: 18px;
Hakim El Hattab
a validé
}
#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;
z-index: 2;
}
.overlay-element {
height: 34px;
line-height: 34px;
padding: 0 10px;
text-shadow: none;
background: rgba( 220, 220, 220, 0.8 );
color: #222;
font-size: 14px;
}
.overlay-element.interactive:hover {
background: rgba( 220, 220, 220, 1 );
Hakim El Hattab
a validé
}
#current-slide {
position: absolute;
width: 60%;
height: 100%;
top: 0;
left: 0;
padding-right: 0;
Hakim El Hattab
a validé
}
width: 40%;
height: 40%;
Hakim El Hattab
a validé
}
/* Speaker controls */
Hakim El Hattab
a validé
position: absolute;
top: 40%;
right: 0;
width: 40%;
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;
cursor: pointer;
}
.speaker-controls-time .reset-button {
opacity: 0;
float: right;
color: #666;
text-decoration: none;
}
.speaker-controls-time:hover .reset-button {
opacity: 1;
}
.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 {
}
.speaker-controls-notes {
padding: 10px 16px;
}
.speaker-controls-notes .value {
margin-top: 5px;
line-height: 1.4;
font-size: 1.2em;
}
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
/* Layout selector */
#speaker-layout {
position: absolute;
top: 10px;
right: 10px;
color: #222;
z-index: 10;
}
#speaker-layout select {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 0;
box-shadow: 0;
cursor: pointer;
opacity: 0;
font-size: 1em;
background-color: transparent;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#speaker-layout select:focus {
outline: none;
box-shadow: none;
}
Hakim El Hattab
a validé
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
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
/* Speaker layout: Wide */
body[data-speaker-layout="wide"] #current-slide,
body[data-speaker-layout="wide"] #upcoming-slide {
width: 50%;
height: 45%;
padding: 6px;
}
body[data-speaker-layout="wide"] #current-slide {
top: 0;
left: 0;
}
body[data-speaker-layout="wide"] #upcoming-slide {
top: 0;
left: 50%;
}
body[data-speaker-layout="wide"] #speaker-controls {
top: 45%;
left: 0;
width: 100%;
height: 50%;
font-size: 1.25em;
}
/* Speaker layout: Tall */
body[data-speaker-layout="tall"] #current-slide,
body[data-speaker-layout="tall"] #upcoming-slide {
width: 45%;
height: 50%;
padding: 6px;
}
body[data-speaker-layout="tall"] #current-slide {
top: 0;
left: 0;
}
body[data-speaker-layout="tall"] #upcoming-slide {
top: 50%;
left: 0;
}
body[data-speaker-layout="tall"] #speaker-controls {
padding-top: 40px;
top: 0;
left: 45%;
width: 55%;
height: 100%;
font-size: 1.25em;
}
/* Speaker layout: Notes only */
body[data-speaker-layout="notes-only"] #current-slide,
body[data-speaker-layout="notes-only"] #upcoming-slide {
display: none;
}
body[data-speaker-layout="notes-only"] #speaker-controls {
padding-top: 40px;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.25em;
}
@media screen and (max-width: 1080px) {
body[data-speaker-layout="default"] #speaker-controls {
Hakim El Hattab
a validé
@media screen and (max-width: 900px) {
body[data-speaker-layout="default"] #speaker-controls {
Hakim El Hattab
a validé
@media screen and (max-width: 800px) {
body[data-speaker-layout="default"] #speaker-controls {
Hakim El Hattab
a validé
</style>
</head>
<body>
<div id="current-slide"></div>
<div id="upcoming-slide"><span class="overlay-element label">Upcoming</span></div>
<div id="speaker-controls">
<div class="speaker-controls-time">
<h4 class="label">Time <span class="reset-button">Click to Reset</span></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>
<div id="speaker-layout" class="overlay-element interactive">
<span class="speaker-layout-label"></span>
<select class="speaker-layout-dropdown"></select>
</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,
layoutLabel,
layoutDropdown,
Hakim El Hattab
a validé
connected = false;
var SPEAKER_LAYOUTS = {
'default': 'Default',
'wide': 'Wide',
'tall': 'Tall',
'notes-only': 'Notes only'
};
setupLayout();
Hakim El Hattab
a validé
window.addEventListener( 'message', function( event ) {
var data = JSON.parse( event.data );
// The overview mode is only useful to the reveal.js instance
// where navigation occurs so we don't sync it
if( data.state ) delete data.state.overview;
Hakim El Hattab
a validé
// 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|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
Hakim El Hattab
a validé
window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ]} ), '*' );
Hakim El Hattab
a validé
}
}
} );
/**
* Called when the main window is trying to establish a
* connection.
*/
function handleConnectMessage( data ) {
if( connected === false ) {
connected = true;
setupIframes( data );
setupKeyboard();
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' );
notesValue.style.whiteSpace = data.whitespace;
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 );
/**
* Forward keyboard events to the current slide window.
* This enables keyboard events to work even if focus
* isn't set on the current slide iframe.
*/
function setupKeyboard() {
document.addEventListener( 'keydown', function( event ) {
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
} );
}
Hakim El Hattab
a validé
/**
* Creates the preview iframes.
*/
function setupIframes( data ) {
Hakim El Hattab
a validé
var params = [
'receiver',
'progress=false',
'backgroundTransition=none'
].join( '&' );
var urlSeparator = /\?/.test(data.url) ? '&' : '?';
Hakim El Hattab
a validé
var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
var currentURL = data.url + urlSeparator + params + '&postMessageEvents=true' + hash;
var upcomingURL = data.url + urlSeparator + params + '&controls=false' + 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é
function _displayTime( hrEl, minEl, secEl, time) {
var hours = Math.floor( time / ( 1000 * 60 * 60 ) );
var minutes = Math.floor( ( time / ( 1000 * 60 ) ) % 60 );
var seconds = Math.floor( ( time / 1000 ) % 60 );
hrEl.innerHTML = zeroPadInteger( hours );
if (hours == 0) {
hrEl.classList.add( 'mute' );
}
else {
hrEl.classList.remove( 'mute' );
}
minEl.innerHTML = ':' + zeroPadInteger( minutes );
if (hours == 0 && minutes == 0) {
minEl.classList.add( 'mute' );
}
else {
minEl.classList.remove( 'mute' );
}
secEl.innerHTML = ':' + zeroPadInteger( seconds );
}
Hakim El Hattab
a validé
var diff, hours, minutes, seconds,
now = new Date();
diff = now.getTime() - start.getTime();
clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
_displayTime( hoursEl, minutesEl, secondsEl, diff );
Hakim El Hattab
a validé
}
// Update once directly
_updateTimer();
// Then update every second
setInterval( _updateTimer, 1000 );
timeEl.addEventListener( 'click', function() {
start = new Date();
_updateTimer();
return false;
} );
}
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
/**
* Sets up the speaker view layout and layout selector.
*/
function setupLayout() {
layoutDropdown = document.querySelector( '.speaker-layout-dropdown' );
layoutLabel = document.querySelector( '.speaker-layout-label' );
// Render the list of available layouts
for( var id in SPEAKER_LAYOUTS ) {
var option = document.createElement( 'option' );
option.setAttribute( 'value', id );
option.textContent = SPEAKER_LAYOUTS[ id ];
layoutDropdown.appendChild( option );
}
// Monitor the dropdown for changes
layoutDropdown.addEventListener( 'change', function( event ) {
setLayout( layoutDropdown.value );
}, false );
// Restore any currently persisted layout
setLayout( getLayout() );
}
/**
* Sets a new speaker view layout. The layout is persisted
* in local storage.
*/
function setLayout( value ) {
var title = SPEAKER_LAYOUTS[ value ];
layoutLabel.innerHTML = 'Layout' + ( title ? ( ': ' + title ) : '' );
layoutDropdown.value = value;
document.body.setAttribute( 'data-speaker-layout', value );
// Persist locally
if( window.localStorage ) {
window.localStorage.setItem( 'reveal-speaker-layout', value );
}
}
/**
* Returns the ID of the most recently set speaker layout
* or our default layout if none has been set.
*/
function getLayout() {
if( window.localStorage ) {
var layout = window.localStorage.getItem( 'reveal-speaker-layout' );
if( layout ) {
return layout;
}
}
// Default to the first record in the layouts hash
for( var id in SPEAKER_LAYOUTS ) {
return id;
}
}
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é
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
/**
* 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>