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,29 +145,27 @@
<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' );
@ -184,24 +197,20 @@
}, false ); }, false );
})( window );
}
else {
document.body.innerHTML = '<p class="error">Unable to access <code>window.opener.location</code>.<br>Make sure the presentation is running on a web server.</p>';
}
var start = new Date(), var start = new Date(),
timeEl = document.querySelector( '.time' ),
clockEl = document.getElementById( 'clock' ), clockEl = document.getElementById( 'clock' ),
hoursEl = document.getElementById( 'hours' ), hoursEl = document.getElementById( 'hours' ),
minutesEl = document.getElementById( 'minutes' ), minutesEl = document.getElementById( 'minutes' ),
secondsEl = document.getElementById( 'seconds' ); secondsEl = document.getElementById( 'seconds' );
setInterval( function() { setInterval( function() {
timeEl.style.opacity = 1;
var diff, hours, minutes, seconds, var diff, hours, minutes, seconds,
now = new Date(); now = new Date();
diff = now.getTime() - start.getTime(); diff = now.getTime() - start.getTime();
hours = parseInt( diff / ( 1000 * 60 * 60 ) ); hours = parseInt( diff / ( 1000 * 60 * 60 ) );
minutes = parseInt( ( diff / ( 1000 * 60 ) ) % 60 ); minutes = parseInt( ( diff / ( 1000 * 60 ) ) % 60 );
@ -213,11 +222,24 @@
minutesEl.innerHTML = ":" + zeroPadInteger( minutes ); minutesEl.innerHTML = ":" + zeroPadInteger( minutes );
minutesEl.className = minutes > 0 ? "" : "mute"; minutesEl.className = minutes > 0 ? "" : "mute";
secondsEl.innerHTML = ":" + zeroPadInteger( seconds ); secondsEl.innerHTML = ":" + zeroPadInteger( seconds );
}, 1000 ); }, 1000 );
}
else {
document.body.innerHTML = '<p class="error">Unable to access <code>window.opener.location</code>.<br>Make sure the presentation is running on a web server.</p>';
}
}, false ); }, false );
function zeroPadInteger( num ) {
var str = "00" + parseInt( num );
return str.substring( str.length - 2 );
}
</script> </script>
</body> </body>
</html> </html>