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

diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html
index f8e7f700e00272777a447b201355d2345659c8ea..af2fbfc908032feb504ac0023c02f0c471083fef 100644 (file)
--- a/plugin/notes/notes.html
+++ b/plugin/notes/notes.html
@@ -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>