Presentations
/
Openfest2013-UlteoOVDPresentation
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

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

embed 2.2.0
Hakim El Hattab 12 years ago
parent
ab3f4e5ba3
commit
784fa9d2e3
1 changed files with 84 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 146
      plugin/notes/notes.html

146
plugin/notes/notes.html
View File

@ -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>

Write Preview
Loading…
Cancel
Save