Skip to content
Snippets Groups Projects
Commit 784fa9d2 authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

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

parent ab3f4e5b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 84 additions and 62 deletions
plugin/notes/notes.html
+ 84
− 62
View file @ 784fa9d2
......@@ -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;
......@@ -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;
}
......@@ -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 {
......@@ -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 );
function zeroPadInteger( num ) {
var str = "00" + parseInt( num );
return str.substring( str.length - 2 );
}
</script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment