major cleanup and Mozilla style

README

@@ -1,24 +1,21 @@
-=== Hot new web technologies and how to promote them === 
+=== Hot new web technologies and how to promote them ===
 
 At this year's Mozilla All Hands one of the sessions was this one. Instead of
-sharing slides in Keynote or Powerpoint format we decided to make this a 
-re-usable way of advocating technologies. 
+sharing slides in Keynote or Powerpoint format we decided to make this a
+re-usable way of advocating technologies.
 
-For starters, we set up a wiki page on Mozilla where we'll keep screencasts, 
+For starters, we set up a wiki page on Mozilla where we'll keep screencasts,
 explanations and demos to pick and mix for your own presentations:
 
 https://wiki.mozilla.org/Engagement/Developer_Engagement/Grab_bag
 
-This here, however is going further. It is an HTML5 presentation based on 
+This here, however is going further. It is an HTML5 presentation based on
 DZSlides that allows you to pick and mix and show the final presentation at
-the same time. 
+the same time.
 
 You can see it in action at:
 
 http://icant.co.uk/talks/opentech/
 
-Just uncheck the slides you want not to show, and hit the start presentation 
-button.
-
-
-
+Just uncheck the slides you want not to show, and hit the start presentation
+button.

index.html

@@ -653,8 +653,8 @@ <h1>Local Storage / Offline</h1>
 
 <section class="image">
   <h1>Old school storage</h1>
-  <img src="cookies.jpg" alt="Cookie monster">
-  <p class="byline"><a href="www.flickr.com/photos/simplebitsdan/480696708">Photo by Dan Cederholm</a></p>
+  <img src="img/cookies.jpg" alt="Cookie monster">
+  <p class="byline"><a href="http://www.flickr.com/photos/simplebitsdan/480696708">Photo by Dan Cederholm</a></p>
   <div class="notes">In the past all we could do to store content on the user's computer for re-use or for keeping the state of an application was using cookies.</div>
 </section>
 
@@ -807,15 +807,15 @@ <h1><a href="http://evolutionofweb.appspot.com/">Evolution of the web</a></h1>
 </section>
 
 <section class="site">
-  <h1><a class="external" 
-     href="https://developer.mozilla.org/en-US/events">Go forth and talk!</a></h1>
+  <h1><a href="https://developer.mozilla.org/en-US/events">Go forth and talk!</a></h1>
    <ul class="features">
      <li>Use these slides to show and explain open technology</li>
      <li>Download them from GitHub to change them if you need</li>
-     <li>These slides are HTML5, based on <a href="paulrouget.com/dzslides/">DZSlides</a></li>
+     <li>These slides are HTML5, based on <a href="http://paulrouget.com/dzslides/">DZSlides</a> by Paul Rouget and Antony Ricaud.</li>
    </ul>
 
   <div class="notes">
+   <p>At the where's Mozilla page you will see where we currently are and you can request a speaker. As a Mozillian you can ask for sponsorship to attend an event.</p>
     <p>That's it! Now use these slides and the information in it to spread the word about the open web. Thanks for that!</p>
   </div>   
 </section>

js/dzslides.js

@@ -2,48 +2,66 @@
  * DZSlides by Paul Rouget @paulrouget
  * heavily modified by Chris Heilmann @codepo8
  **/
-var friendWindows = [];
-var idx = 1;
-var slides;
+
+
+friendWindows = [];
+idx = 1;
+slides = null;
 
 /* Handle keys */
 
-window.onkeydown = function( e ) {
-  // Don't intercept keyboard shortcuts
+function handlekeys( e ) {
+    // Don't intercept keyboard shortcuts
+
   if ( e.altKey || e.ctrlKey || e.metaKey || e.shiftKey ) {
     return;
   }
   if ( e.keyCode == 37 // left arrow
     || e.keyCode == 38 // up arrow
     || e.keyCode == 33 // page up
   ) {
-    e.preventDefault();
-    back();
+    if( presenting ) {
+      e.preventDefault();
+      back();
+    }
   }
   if ( e.keyCode == 39 // right arrow
     || e.keyCode == 40 // down arrow
     || e.keyCode == 34 // page down
   ) {
-    e.preventDefault();
-    forward();
+    if( presenting ) {
+      e.preventDefault();
+      forward();
+    }
   }
 
   if ( e.keyCode == 32) { // space
       e.preventDefault();
       toggleContent();
   }
+
+  if ( e.keyCode == 27 ) { // ESC
+    e.preventDefault();
+    presenting = false;
+    document.querySelectorAll( 'link' )[0].disabled = false;
+    document.querySelectorAll( 'link' )[1].disabled = true;
+    document.body.style.MozTransform = 'scale(1)';
+  }
+
   if ( e.keyCode == 78 ) {
     if(document.body.className.indexOf('shownotes') === -1){
       document.body.className = 'loaded shownotes';
     } else {
       document.body.className = 'loaded';
     }
   }
+
 };
 
 /* Touch Events */
 
 function setupTouchEvents() {
+
   var orgX, orgY;
   var newX, newY;
 
@@ -72,11 +90,13 @@ function setupTouchEvents() {
       }
     }
   }
+
 }
 
 /* Adapt the size of the slides to the window */
 
-window.onresize = function() {
+function resize() {
+
   var sx = document.body.clientWidth / window.innerWidth;
   var sy = document.body.clientHeight / window.innerHeight;
   var transform = "scale(" + ( 1 / Math.max(sx, sy ) ) + ")";
@@ -85,14 +105,19 @@ window.onresize = function() {
   document.body.style.OTransform = transform;
   document.body.style.msTransform = transform;
   document.body.style.transform = transform;
+
 };
 
 function getDetails( idx ) {
+
   var s = document.querySelector( "section:nth-of-type(" + idx + ")" );
   var d = s.querySelector( "details" );
   return d ? d.innerHTML : "";
+
 }
-window.onmessage = function( e ) {
+
+function messagein( e ) {
+
   msg = e.data;
   win = e.source;
   if ( msg === "register" ) {
@@ -120,9 +145,11 @@ window.onmessage = function( e ) {
       idx = r[1];
       setSlide();
   }
+
 };
 
 function toggleContent() {
+
   var s = document.querySelector( "section[aria-selected]" );
   if ( s ) {
       var video = s.querySelector( "video" );
@@ -134,27 +161,41 @@ function toggleContent() {
           }
       }
   }
+
 }
 
 window.onhashchange = function( e ) {
+
   var newidx = ~~window.location.hash.split( "#" )[ 1 ];
   if ( !newidx ) { newidx = 1; }
   if ( newidx == idx ) { return; }
   idx = newidx;
   setSlide();
+
 };
 
 function back() {
-  if ( idx == 1 ) { return; }
-  idx--;
-  setSlide();
+
+  if( presenting ) {
+    if ( idx == 1 ) { return; }
+    idx--;
+    setSlide();
+  }
+
 }
+
 function forward() {
-  if ( idx >= slides.length ) { return; }
-  idx++;
-  setSlide();
+
+  if( presenting ) {
+    if ( idx >= slides.length ) { return; }
+    idx++;
+    setSlide();
+  }
+
 }
+
 function setSlide() {
+
   var old = document.querySelector( "section[aria-selected]" );
   var next = document.querySelector( "section:nth-of-type("+ idx +")" );
   if ( old ) {
@@ -199,6 +240,7 @@ function setSlide() {
       }
     }
   }
+
   window.location.hash = idx;
   for ( i = 0; i < friendWindows.length; i++ ) {
     friendWindows[ i ].postMessage(
@@ -211,15 +253,22 @@ function setSlide() {
       ),"*"
     );
   }
+
 }
 
 function init() {
+
   slides = document.querySelectorAll( "body > section" );
   onhashchange();
   setSlide();
   document.body.className = "loaded";
   setupTouchEvents();
-  window.resizeBy(1,1);
-  onresize();
+  window.addEventListener( 'message', messagein, false );
+  window.addEventListener( 'keydown', handlekeys, false );
+  window.addEventListener( 'resize', resize, false );
+  presenting = true;
+  resize();
+
 }
+
 init();

js/makepresentation.js

@@ -1,49 +1,59 @@
 (function(){
+
   var slides = document.querySelectorAll( 'body > section' );
   var newidx = ~~window.location.hash.split( "#" )[ 1 ];
-  if ( newidx ) {
-    setup();
-  } else {
-    for(var i = 1; slides[i]; i++) {
-      slides[i].innerHTML += '<input type="checkbox" checked class="check">';
-      slides[i].className += ' active';
-    }
-    slides[0].innerHTML += '<p class="presentationinfo">Uncheck the slides below that you don\'t want to include and press the button below to start the presentation. In presentation mode press the N key to toggle the display of notes. <button>Start Presentation</button></p>'; 
 
-    var button = slides[ 0 ].querySelector( 'button' );
-
-    button.addEventListener( 'click', setup ,false );
-
+  for(var i = 1; slides[i]; i++) {
+    slides[i].innerHTML += '<input type="checkbox" checked class="check">';
+    slides[i].className += ' active';
   }
 
+  slides[0].innerHTML += ''+
+    '<p class="presentationinfo">Uncheck the slides below that you don\'t '+
+    'want to include and press the button below to start the presentation.'+
+    ' In presentation mode press the N key to toggle the display of notes.'+
+    ' <button>Start Presentation</button></p>'; 
+
+  var button = slides[ 0 ].querySelector( 'button' );
+  button.addEventListener( 'click', setup ,false );
+  if ( newidx ) {
+    setup();
+  } 
   function setup( ev ) {
+
     for ( var i = 1; slides[i]; i++ ) {
       if ( slides[ i ].className.indexOf( 'remove' ) !== -1 ) {
         slides[ i ].parentNode.removeChild( slides[ i ] );
       }
     }
-    var info = document.querySelector( '.presentationinfo' );
-    if ( info ) { info.style.display = 'none'; }
+
     document.querySelector( 'link' ).disabled = true;
+
     var link = document.createElement( 'link' );
     link.href = 'styles/styles.css';
     link.rel = 'StyleSheet';
     document.querySelector( 'head' ).appendChild( link );
+
     var s = document.createElement( 'script' );
     s.src = 'js/dzslides.js';
     document.querySelector( 'head' ).appendChild( s );
+
     if(ev){ ev.preventDefault(); }
+
   }
 
   document.addEventListener( 'click', function( ev ) {
+
     var t = ev.target;
     if( t.tagName === 'INPUT' && t.className.indexOf( 'check' ) !== -1 ) {
       var mom = t.parentNode;
-      if( mom.className.indexOf('active') !== -1 ) {
+      if( mom.className.indexOf( 'active' ) !== -1 ) {
         mom.className = mom.className.replace( 'active', 'remove' );
       } else {
         mom.className = mom.className.replace( 'remove', 'active' );
       }
     }
+
   }, false );
+
 })();