Skip to content

Commit

Permalink
merge in timer in notes window, timer now stays hidden until initial …
Browse files Browse the repository at this point in the history 
…time is set
  • Loading branch information
@hakimel
hakimel committed Jan 26, 2013
1 parent ab3f4e5 commit 784fa9d
Showing 1 changed file with 84 additions and 62 deletions.
146 changes: 84 additions & 62 deletions plugin/notes/notes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,10 +95,22 @@
.error code {
font-family: monospace;
}

.time {
width: 448px;
margin: 30px 0 0 10px;
float: left;
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;
font-size: 2em;
text-align: center;
Expand All @@ -107,12 +119,15 @@
background-color: #eee;
border-radius: 10px;
}
.elapsed h2, .clock h2 {

.elapsed h2,
.clock h2 {
font-size: 0.8em;
line-height: 100%;
margin: 0;
color: #aaa;
}

.elapsed .mute {
color: #ddd;
}
Expand All @@ -130,61 +145,85 @@
<script>document.write( '<iframe width="640" height="512" id="next-slide" src="'+ window.opener.location.href +'"></iframe>' );</script>
<span>UPCOMING:</span>
</div>
<div class='time'>
<div class='clock'>

<div class="time">
<div class="clock">
<h2>Time</h2>
<span id='clock'>0:00:00 AM</span>
<span id="clock">0:00:00 AM</span>
</div>
<div class='elapsed'>
<div class="elapsed">
<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 id="notes"></div>

<script src="../../plugin/markdown/showdown.js"></script>
<script>
function zeroPadInteger(num) {
var str = "00" + parseInt(num);
return str.substring(str.length - 2);
}

window.addEventListener( 'load', function() {

if( window.opener && window.opener.location && window.opener.location.href ) {

(function( window, undefined ) {
var notes = document.getElementById( 'notes' ),
currentSlide = document.getElementById( 'current-slide' ),
nextSlide = document.getElementById( 'next-slide' );

window.addEventListener( 'message', function( event ) {
var data = JSON.parse( event.data );
// No need for updating the notes in case of fragment changes
if ( data.notes !== undefined) {
if( data.markdown ) {
notes.innerHTML = (new Showdown.converter()).makeHtml( data.notes );
}
else {
notes.innerHTML = data.notes;
}
}
var notes = document.getElementById( 'notes' ),
currentSlide = document.getElementById( 'current-slide' ),
nextSlide = document.getElementById( 'next-slide' );

// Showing and hiding fragments
if( data.fragment === 'next' ) {
currentSlide.contentWindow.Reveal.nextFragment();
}
else if( data.fragment === 'prev' ) {
currentSlide.contentWindow.Reveal.prevFragment();
window.addEventListener( 'message', function( event ) {
var data = JSON.parse( event.data );
// No need for updating the notes in case of fragment changes
if ( data.notes !== undefined) {
if( data.markdown ) {
notes.innerHTML = (new Showdown.converter()).makeHtml( data.notes );
}
else {
// Update the note slides
currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv );
nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv );
notes.innerHTML = data.notes;
}

}, false );

})( window );
}

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

}, 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 {
Expand All @@ -193,31 +232,14 @@ <h2>Elapsed</h2>

}

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

function zeroPadInteger( num ) {
var str = "00" + parseInt( num );
return str.substring( str.length - 2 );
}

</script>
</body>
</html>

0 comments on commit 784fa9d

Please sign in to comment.