auto fadein slide animations happen with css (no more js :))

4 files changed, 155 insertions, 186 deletions

diff --git a/js/slides.js b/js/slides.js
index e48924c..4f88a96 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -10,7 +10,7 @@ function SlideDeck() {
   this.getCurrentSlideFromHash_();
 
   document.addEventListener('DOMContentLoaded',
-      this.handleDomLoaded_.bind(this), false);
+                            this.onDomLoaded_.bind(this), false);
 }
 
 /**
@@ -42,7 +42,7 @@ SlideDeck.prototype.getCurrentSlideFromHash_ = function() {
 /**
  * @private
  */
-SlideDeck.prototype.handleDomLoaded_ = function() {
+SlideDeck.prototype.onDomLoaded_ = function() {
   this.slides_ = document.querySelectorAll('slide:not([hidden])');
 
   for (var i = 0, slide; slide = this.slides_[i]; ++i) {
@@ -60,48 +60,15 @@ SlideDeck.prototype.handleDomLoaded_ = function() {
  * @private
  */
 SlideDeck.prototype.addEventListeners_ = function() {
-  document.addEventListener('keydown', this.handleBodyKeyDown_.bind(this),
-                            false);
-  window.addEventListener('popstate', this.handlePopState_.bind(this), false);
-
-  // Google Developer icon gray bar and segue slide titles should reanimate on
-  // every slide enter.
-  var gbars = document.querySelectorAll('slide > .gdbar');
-  for (var i = 0, gbar; gbar = gbars[i]; ++i) {
-    var slide = gbar.parentElement;
-
-    slide.addEventListener('slideenter', function(e) {
-      this.buildNextItem_();
-      if (e.target.classList.contains('segue')) {
-        e.target.querySelector('hgroup').classList.add('on');
-      }
-    }.bind(this), false);
-
-    slide.addEventListener('slideleave', function(e) {
-      var bar = e.target.querySelector('.gdbar');
-      bar.classList.remove('build-current');
-      bar.classList.add('to-build');
-      if (e.target.classList.contains('segue')) {
-        e.target.querySelector('hgroup').classList.remove('on');
-      }
-    }, false);
-  }
-
-  // document.addEventListener('webkitTransitionEnd', function(e) {
-  //   var el = e.target;
-  //   var property = e.propertyName;
-  //   if (el.classList.contains('gdbar') && property == 'background-size') {
-  //     console.log('done');
-  //     el.parentElement.parentElement.querySelector('article hgroup').classList.add('on');
-  //   }
-  // }, false);
+  document.addEventListener('keydown', this.onBodyKeyDown_.bind(this), false);
+  window.addEventListener('popstate', this.onPopState_.bind(this), false);
 };
 
 /**
  * @private
  * @param {Event} e The pop event.
  */
-SlideDeck.prototype.handlePopState_ = function(e) {
+SlideDeck.prototype.onPopState_ = function(e) {
   if (e.state != null) {
     this.curSlide_ = e.state;
     this.updateSlides_(true);
@@ -111,7 +78,7 @@ SlideDeck.prototype.handlePopState_ = function(e) {
 /**
  * @param {Event} e
  */
-SlideDeck.prototype.handleBodyKeyDown_ = function(e) {
+SlideDeck.prototype.onBodyKeyDown_ = function(e) {
   if (/^(input|textarea)$/i.test(e.target.nodeName) ||
       e.target.isContentEditable) {
     return;
@@ -463,13 +430,13 @@ SlideDeck.prototype.makeBuildLists_ = function () {
         }
       }
     }
-    // Setup Google Developer icon slide out bars.
-    var bars = slide.querySelectorAll('.gdbar');
-    for (var j = 0, bar; bar = bars[j]; ++j) {
-      if (bar.classList) {
-        bar.classList.add('to-build');
-      }
-    }
+    // // Setup Google Developer icon slide out bars.
+    // var bars = slide.querySelectorAll('.gdbar');
+    // for (var j = 0, bar; bar = bars[j]; ++j) {
+    //   if (bar.classList) {
+    //     bar.classList.add('to-build');
+    //   }
+    // }
   }
 };
 
diff --git a/template.html b/template.html
index a69caae..821cb47 100644
--- a/template.html
+++ b/template.html
@@ -15,9 +15,9 @@
     </section>
   </slide>
 
-  <slide id="title-slide" class="nobackground">
+  <slide class="title-slide segue nobackground">
     <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>
-    <hgroup>
+    <hgroup class="auto-fadein">
       <h1>Title Goes Here</h1>
       <h2>Subtitle Goes Here</h2>
       <p>
@@ -151,20 +151,20 @@ function helloWorld(world) {
   <slide class="segue dark nobackground">
     <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>
     <article class="flexbox vleft">
-      <hgroup>
+      <hgroup class="auto-fadein">
         <h2>Segue Slide</h2>
         <h3>Subtitle Placeholder</h3>
       </hgroup>
     </article>
   </slide>
 
-  <slide class="thank-you-slide nobackground">
+  <slide class="thank-you-slide segue nobackground">
     <aside class="gdbar right"><img src="images/google_developers_icon_128.png"></aside>
-    <section class="flexbox vleft">
+    <section class="flexbox vleft auto-fadein">
       <h2>&lt;Thanks You!&gt;</h2>
       <p>Important contact information goes here.</p>
     </section>
-    <p>
+    <p class="auto-fadein">
       Insert contact info<br>
       Insert contact info<br>
       Insert contact info
diff --git a/theme/css/default.css b/theme/css/default.css
index c2022de..f9a91b0 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -358,7 +358,15 @@ slides > slide.current {
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
-/* line 156, ../sass/default.scss */
+/* line 155, ../sass/default.scss */
+slides > slide.current .auto-fadein {
+  opacity: 1;
+}
+/* line 159, ../sass/default.scss */
+slides > slide.current .gdbar {
+  background-size: 100% 100%;
+}
+/* line 164, ../sass/default.scss */
 slides > slide.next {
   display: block;
   -moz-transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
@@ -372,7 +380,7 @@ slides > slide.next {
   -ms-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
   transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
 }
-/* line 162, ../sass/default.scss */
+/* line 170, ../sass/default.scss */
 slides > slide.far-next {
   display: block;
   -moz-transform: translate(2040px);
@@ -386,24 +394,24 @@ slides > slide.far-next {
   -ms-transform: translate3d(2040px, 0, 0);
   transform: translate3d(2040px, 0, 0);
 }
-/* line 168, ../sass/default.scss */
+/* line 176, ../sass/default.scss */
 slides > slide.dark {
   background: #515151;
 }
-/* line 172, ../sass/default.scss */
+/* line 180, ../sass/default.scss */
 slides > slide hgroup + article {
   margin-top: 1.5em;
 }
-/* line 176, ../sass/default.scss */
+/* line 184, ../sass/default.scss */
 slides > slide > article {
   margin-top: 2em;
 }
-/* line 179, ../sass/default.scss */
+/* line 187, ../sass/default.scss */
 slides > slide > article p {
   margin-bottom: 1em;
 }
 
-/* line 190, ../sass/default.scss */
+/* line 198, ../sass/default.scss */
 slides.layout-widescreen > slide.far-past,
 slides.layout-faux-widescreen > slide.far-past {
   display: block;
@@ -418,7 +426,7 @@ slides.layout-faux-widescreen > slide.far-past {
   -ms-transform: translate3d(-2260px, 0, 0);
   transform: translate3d(-2260px, 0, 0);
 }