slideleave now fires when navigating backwards

5 files changed, 228 insertions, 202 deletions

diff --git a/js/slides.js b/js/slides.js
index c6fe1ed..f6d5cc6 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -3,6 +3,7 @@
  */
 function SlideDeck() {
   this.curSlide_ = 0;
+  this.prevSlide_ = 0;
   this.slides = [];
   this.config_ = null;
 
@@ -63,10 +64,15 @@ SlideDeck.prototype.addEventListeners_ = function() {
                             false);
   window.addEventListener('popstate', this.handlePopState_.bind(this), false);
 
-  var self = this;
+  // Google Developer icon gray bar should reanimate on every slide enter.
   var titleSlide = document.querySelector('#title-slide');
   titleSlide.addEventListener('slideenter', function(e) {
-    self.buildNextItem_();
+    this.buildNextItem_();
+  }.bind(this), false);
+  titleSlide.addEventListener('slideleave', function(e) {
+    var bar = e.target.querySelector('.gdbar');
+    bar.classList.remove('build-current');
+    bar.classList.add('to-build');
   }, false);
 };
 
@@ -236,6 +242,7 @@ SlideDeck.prototype.buildNextItem_ = function() {
  */
 SlideDeck.prototype.prevSlide = function(opt_dontPush) {
   if (this.curSlide_ > 0) {
+    this.prevSlide_ = this.curSlide_;
     this.curSlide_--;
 
     this.updateSlides_(opt_dontPush);
@@ -252,6 +259,7 @@ SlideDeck.prototype.nextSlide = function(opt_dontPush) {
   }
 
   if (this.curSlide_ < this.slides_.length - 1) {
+    this.prevSlide_ = this.curSlide_;
     this.curSlide_++;
 
     this.updateSlides_(opt_dontPush);
@@ -264,7 +272,7 @@ SlideDeck.prototype.nextSlide = function(opt_dontPush) {
  * Triggered when a slide enter/leave event should be dispatched.
  *
  * @param {string} type The type of event to trigger
- *     (e.g. 'onslideenter', 'onslideleave').
+ *     (e.g. 'slideenter', 'slideleave').
  * @param {number} slideNo The index of the slide that is being left.
  */
 SlideDeck.prototype.triggerSlideEvent = function(type, slideNo) {
@@ -281,7 +289,7 @@ SlideDeck.prototype.triggerSlideEvent = function(type, slideNo) {
 
   // Dispatch event to listeners setup using addEventListener.
   var evt = document.createEvent('Event');
-  evt.initEvent(type.substring(2), true, true);
+  evt.initEvent(type, true, true);
   evt.slideNumber = slideNo + 1; // Make it readable
   evt.slide = el;
 
@@ -295,7 +303,7 @@ SlideDeck.prototype.updateSlides_ = function(opt_dontPush) {
   var dontPush = opt_dontPush || false;
 
   var curSlide = this.curSlide_;
-  for (var i = 0; i < this.slides_.length; i++) {
+  for (var i = 0; i < this.slides_.length; ++i) {
     switch (i) {
       case curSlide - 2:
         this.updateSlideClass_(i, 'far-past');
@@ -318,8 +326,9 @@ SlideDeck.prototype.updateSlides_ = function(opt_dontPush) {
     }
   };
 
-  this.triggerSlideEvent('onslideleave', curSlide - 1);
-  this.triggerSlideEvent('onslideenter', curSlide);
+  //this.triggerSlideEvent('slideleave', curSlide - 1);
+  this.triggerSlideEvent('slideleave', this.prevSlide_);
+  this.triggerSlideEvent('slideenter', curSlide);
 
   window.setTimeout(this.disableSlideFrames_.bind(this, curSlide - 2), 301);
 
@@ -413,7 +422,7 @@ SlideDeck.prototype.updateSlideClass_ = function(slideNo, className) {
     el.classList.add(className);
   }
 
-  for (var i = 0, slideClass; slideClass = this.SLIDE_CLASSES_[i]; i++) {
+  for (var i = 0, slideClass; slideClass = this.SLIDE_CLASSES_[i]; ++i) {
     if (className != slideClass) {
       el.classList.remove(slideClass);
     }
diff --git a/template.html b/template.html
index 365adea..a55f3fe 100644
--- a/template.html
+++ b/template.html
@@ -15,7 +15,6 @@
   </slide>
 
   <slide id="title-slide">
-    <!-- <aside class="bar"></aside> -->
     <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>
     <hgroup>
       <h1>Title Goes Here</h1>
@@ -29,10 +28,17 @@
 
   <slide>
     <h2>Presentation Bullet Slide Layout</h2>
-    <ul class="build">
-      <li>Bullet1</li>
-      <li>Bullet2</li>
-    </ul>
+    <article>
+      <ul>
+        <li>Bullet 1</li>
+        <li>Bullet 2
+          <ul>
+            <li>Bullet 3</li>
+          </ul>
+        </li>
+        <li>Bullet 4</li>
+      </ul>
+    </article>
   </slide>
 
   <slide>
@@ -40,14 +46,24 @@
       <h2>Presentation Bullet Slide Layout</h2>
       <h3>Subtitle Placeholder</h3>
     </hgroup>
+    <article>
+      A Slide2
+    </article>
   </slide>
 
   <slide hidden>
     A hidden slide
   </slide>
 
+  <!-- Slide with speaker notes. Press 'n' to display.-->
   <slide>
-    A Slide2
+    <aside class="note">
+      <section>Speaker notes can go here!</section>
+    </aside>
+    <h2>Presentation Bullet Slide Layout</h2>
+    <article>
+      A Slide2
+    </article>
   </slide>
 </slides>
 
diff --git a/theme/css/default.css b/theme/css/default.css
index 40b4f77..03e25d1 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -86,10 +86,10 @@ body {
   -moz-font-smoothing: antialiased;
   -ms-font-smoothing: antialiased;
   -o-font-smoothing: antialiased;
-  -moz-transition: opacity 600ms ease-in;
-  -webkit-transition: opacity 600ms ease-in;
-  -o-transition: opacity 600ms ease-in;
-  transition: opacity 600ms ease-in;
+  -moz-transition: opacity 800ms ease-in;
+  -webkit-transition: opacity 800ms ease-in;
+  -o-transition: opacity 800ms ease-in;
+  transition: opacity 800ms ease-in;
 }
 
 /* line 57, ../sass/_base.scss */
@@ -214,12 +214,12 @@ slide.fill img {
 
 /* line 44, ../sass/default.scss */
 body {
-  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #4387fd), color-stop(100%, #2a7cdf));
-  background-image: -webkit-radial-gradient(50% 50%, #4387fd 0%, #2a7cdf 600px);
-  background-image: -moz-radial-gradient(50% 50%, #4387fd 0%, #2a7cdf 600px);
-  background-image: -o-radial-gradient(50% 50%, #4387fd 0%, #2a7cdf 600px);
-  background-image: -ms-radial-gradient(50% 50%, #4387fd 0%, #2a7cdf 600px);
-  background-image: radial-gradient(50% 50%, #4387fd 0%, #2a7cdf 600px);
+  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #2a7cdf));
+  background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
+  background-image: -moz-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
+  background-image: -o-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
+  background-image: -ms-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
+  background-image: radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
   background-attachment: fixed;
 }
 
@@ -231,29 +231,30 @@ slides > slide {
   margin-top: -350px;
   padding: 40px 60px;
   background-color: white;
+  font-size: 26px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   -khtml-border-radius: 5px;
   border-radius: 5px;
-  -moz-box-shadow: 3px 3px 20px #515151;
-  -webkit-box-shadow: 3px 3px 20px #515151;
+  -moz-box-shadow: 5px 5px 20px #515151;
+  -webkit-box-shadow: 5px 5px 20px #515151;