merge in timer in notes window, timer now stays hidden until initial time is set

This commit is contained in:
Hakim El Hattab 2013-01-26 13:32:07 -05:00
parent ab3f4e5ba3
commit 784fa9d2e3
1 changed files with 82 additions and 60 deletions

View File

@ -95,10 +95,22 @@
.error code { .error code {
font-family: monospace; font-family: monospace;
} }
.time { .time {
width: 448px;
margin: 30px 0 0 10px;
float: left;
text-align: center; text-align: center;
opacity: 0;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
} }
.elapsed, .clock {
.elapsed,
.clock {
color: #333; color: #333;
font-size: 2em; font-size: 2em;
text-align: center; text-align: center;
@ -107,12 +119,15 @@
background-color: #eee; background-color: #eee;
border-radius: 10px; border-radius: 10px;
} }
.elapsed h2, .clock h2 {
.elapsed h2,
.clock h2 {
font-size: 0.8em; font-size: 0.8em;
line-height: 100%; line-height: 100%;
margin: 0; margin: 0;
color: #aaa; color: #aaa;
} }
.elapsed .mute { .elapsed .mute {
color: #ddd; color: #ddd;
} }
@ -130,61 +145,85 @@
<script>document.write( '<iframe width="640" height="512" id="next-slide" src="'+ window.opener.location.href +'"></iframe>' );</script> <script>document.write( '<iframe width="640" height="512" id="next-slide" src="'+ window.opener.location.href +'"></iframe>' );</script>
<span>UPCOMING:</span> <span>UPCOMING:</span>
</div> </div>
<div class='time'>
<div class='clock'> <div class="time">
<div class="clock">
<h2>Time</h2> <h2>Time</h2>
<span id='clock'>0:00:00 AM</span> <span id="clock">0:00:00 AM</span>
</div> </div>
<div class='elapsed'> <div class="elapsed">
<h2>Elapsed</h2> <h2>Elapsed</h2>
<span id='hours'>00</span><span id='minutes'>:00</span><span id='seconds'>:00</span> <span id="hours">00</span><span id="minutes">:00</span><span id="seconds">:00</span>
</div> </div>
</div> </div>
<div id="notes"></div> <div id="notes"></div>
<script src="../../plugin/markdown/showdown.js"></script> <script src="../../plugin/markdown/showdown.js"></script>
<script> <script>
function zeroPadInteger(num) {
var str = "00" + parseInt(num);
return str.substring(str.length - 2);
}
window.addEventListener( 'load', function() { window.addEventListener( 'load', function() {
if( window.opener && window.opener.location && window.opener.location.href ) { if( window.opener && window.opener.location && window.opener.location.href ) {
(function( window, undefined ) { var notes = document.getElementById( 'notes' ),
var notes = document.getElementById( 'notes' ), currentSlide = document.getElementById( 'current-slide' ),
currentSlide = document.getElementById( 'current-slide' ), nextSlide = document.getElementById( 'next-slide' );
nextSlide = document.getElementById( 'next-slide' );
window.addEventListener( 'message', function( event ) { window.addEventListener( 'message', function( event ) {
var data = JSON.parse( event.data ); var data = JSON.parse( event.data );
// No need for updating the notes in case of fragment changes // No need for updating the notes in case of fragment changes
if ( data.notes !== undefined) { if ( data.notes !== undefined) {
if( data.markdown ) { if( data.markdown ) {
notes.innerHTML = (new Showdown.converter()).makeHtml( data.notes ); notes.innerHTML = (new Showdown.converter()).makeHtml( data.notes );
}
else {
notes.innerHTML = data.notes;
}
}
// Showing and hiding fragments
if( data.fragment === 'next' ) {
currentSlide.contentWindow.Reveal.nextFragment();
}
else if( data.fragment === 'prev' ) {
currentSlide.contentWindow.Reveal.prevFragment();
} }
else { else {
// Update the note slides notes.innerHTML = data.notes;
currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv );
nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv );
} }
}
}, false ); // Showing and hiding fragments
if( data.fragment === 'next' ) {
currentSlide.contentWindow.Reveal.nextFragment();
}
else if( data.fragment === 'prev' ) {
currentSlide.contentWindow.Reveal.prevFragment();
}
else {
// Update the note slides
currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv );
nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv );
}
})( window ); }, false );
var start = new Date(),
timeEl = document.querySelector( '.time' ),
clockEl = document.getElementById( 'clock' ),
hoursEl = document.getElementById( 'hours' ),
minutesEl = document.getElementById( 'minutes' ),
secondsEl = document.getElementById( 'seconds' );
setInterval( function() {
timeEl.style.opacity = 1;
var diff, hours, minutes, seconds,
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 );
clockEl.innerHTML = now.toLocaleTimeString();
hoursEl.innerHTML = zeroPadInteger( hours );
hoursEl.className = hours > 0 ? "" : "mute";
minutesEl.innerHTML = ":" + zeroPadInteger( minutes );
minutesEl.className = minutes > 0 ? "" : "mute";
secondsEl.innerHTML = ":" + zeroPadInteger( seconds );
}, 1000 );
} }
else { else {
@ -193,31 +232,14 @@
} }
var start = new Date(),
clockEl = document.getElementById('clock'),
hoursEl = document.getElementById('hours'),
minutesEl = document.getElementById('minutes'),
secondsEl = document.getElementById('seconds');
setInterval(function() {
var diff, hours, minutes, seconds,
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);
clockEl.innerHTML = now.toLocaleTimeString();
hoursEl.innerHTML = zeroPadInteger(hours);
hoursEl.className = hours > 0 ? "" : "mute";
minutesEl.innerHTML = ":" + zeroPadInteger(minutes);
minutesEl.className = minutes > 0 ? "" : "mute";
secondsEl.innerHTML = ":" + zeroPadInteger(seconds);
}, 1000);
}, false ); }, false );
function zeroPadInteger( num ) {
var str = "00" + parseInt( num );
return str.substring( str.length - 2 );
}
</script> </script>
</body> </body>
</html> </html>