Iframe style updates. All links open in new tab

4 files changed, 238 insertions, 131 deletions

diff --git a/js/slides.js b/js/slides.js
index 1a6bb57..eee44ee 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -45,15 +45,21 @@ SlideDeck.prototype.getCurrentSlideFromHash_ = function() {
 SlideDeck.prototype.onDomLoaded_ = function() {
   this.slides_ = document.querySelectorAll('slide:not([hidden])');
 
+  // Load config.
+  this.loadConfig_();
+  this.addEventListeners_();
+  this.updateSlides_();
+
+  // Add slide numbers and total slide count metadata to each slide.
   for (var i = 0, slide; slide = this.slides_[i]; ++i) {
     slide.dataset.slideNum = i + 1;
     slide.dataset.totalSlides = this.slides_.length;
   }
 
-  // Load config.
-  this.loadConfig_();
-  this.addEventListeners_();
-  this.updateSlides_();
+  // This is an app! Make all links open in a new tab.
+  [].forEach.call(document.querySelectorAll('a'), function(a) {
+    a.target = '_blank';
+  });
 };
 
 /**
@@ -175,7 +181,7 @@ SlideDeck.prototype.loadConfig_ = function() {
   }
 
   if (settings.title) {
-    document.title = settings.title + ' - Google IO 2012';
+    document.title = settings.title.replace(/<br\/?>/, ' ') + ' - Google IO 2012';
     document.querySelector('[data-config-title]').innerHTML = settings.title;
   }
 
@@ -193,14 +199,14 @@ SlideDeck.prototype.loadConfig_ = function() {
       html = [p.name, p.company].join('<br>');
 
       var gplus = p.gplus ? '<span>g+</span><a href="' + p.gplus +
-                            '" target="_blank">' + p.gplus + '</a>' : '';
+                            '">' + p.gplus + '</a>' : '';
 
       var twitter = p.twitter ? '<span>twitter</span>' +
-          '<a href="http://twitter.com/' + p.twitter + '" target="_blank">' +
+          '<a href="http://twitter.com/' + p.twitter + '">' +
           p.twitter + '</a>' : '';
 
      var www = p.www ? '<span>www</span><a href="' + p.www +
-                       '" target="_blank">' + p.www + '</a>' : '';
+                       '">' + p.www + '</a>' : '';
 
       var html2 = [gplus, twitter, www].join('<br>');
 
@@ -350,7 +356,6 @@ SlideDeck.prototype.updateSlides_ = function(opt_dontPush) {
     }
   };
 
-  //this.triggerSlideEvent('slideleave', curSlide - 1);
   this.triggerSlideEvent('slideleave', this.prevSlide_);
   this.triggerSlideEvent('slideenter', curSlide);
 
@@ -377,7 +382,7 @@ SlideDeck.prototype.enableSlideFrames_ = function(slideNo) {
     return;
   }
 
-  var frames = el.getElementsByTagName('iframe');
+  var frames = el.querySelectorAll('iframe');
   for (var i = 0, frame; frame = frames[i]; i++) {
     this.enableFrame_(frame);
   }
@@ -388,7 +393,7 @@ SlideDeck.prototype.enableSlideFrames_ = function(slideNo) {
  * @param {number} slideNo
  */
 SlideDeck.prototype.enableFrame_ = function(frame) {
-  var src = frame._src;
+  var src = frame.dataset.src;
   if (src && frame.src != src) {
     frame.src = src;
   }
@@ -404,7 +409,7 @@ SlideDeck.prototype.disableSlideFrames_ = function(slideNo) {
     return;
   }
 
-  var frames = el.getElementsByTagName('iframe');
+  var frames = el.querySelectorAll('iframe');
   for (var i = 0, frame; frame = frames[i]; i++) {
     this.disableFrame_(frame);
   }
diff --git a/template.html b/template.html
index ee762d9..d6a03ae 100644
--- a/template.html
+++ b/template.html
@@ -199,6 +199,21 @@ function helloWorld(world) {
     </article>
   </slide>
 
+  <slide>
+    <hgroup>
+      <h2>Slide with iframe</h2>
+    </hgroup>
+    <article>
+      <iframe data-src="http://www.google.com/doodle4google/history.html"></iframe>
+    </article>
+  </slide>
+
+  <slide>
+    <article>
+      <iframe data-src="http://www.google.com/doodle4google/history.html"></iframe>
+    </article>
+  </slide>
+
   <slide class="thank-you-slide segue nobackground">
     <aside class="gdbar right"><img src="images/google_developers_icon_128.png"></aside>
     <article class="flexbox vleft auto-fadein">
diff --git a/theme/css/default.css b/theme/css/default.css
index 0c9a7d3..75984cd 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -205,14 +205,58 @@ slide.fill img {
 /**
  * Theme Styles
  */
-/* line 38, ../sass/default.scss */
+/* line 40, ../sass/default.scss */
 ::selection {
   color: white;
   background-color: #ffd14d;
   text-shadow: none;
 }
 
-/* line 44, ../sass/default.scss */
+/* line 46, ../sass/default.scss */
+::-webkit-scrollbar {
+  height: 16px;
+  overflow: visible;
+  width: 16px;
+}
+
+/* line 51, ../sass/default.scss */
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.1);
+  background-clip: padding-box;
+  border: solid transparent;
+  min-height: 28px;
+  padding: 100px 0 0;
+  -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
+  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
+  -o-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
+  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
+  border-width: 1px 1px 1px 6px;
+}
+
+/* line 60, ../sass/default.scss */
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* line 63, ../sass/default.scss */
+::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+
+/* line 67, ../sass/default.scss */
+::-webkit-scrollbar-track {
+  background-clip: padding-box;
+  border: solid transparent;
+  border-width: 0 0 0 4px;
+}
+
+/* line 72, ../sass/default.scss */
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* line 76, ../sass/default.scss */
 body {
   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);
@@ -223,7 +267,7 @@ body {
   background-attachment: fixed;
 }
 
-/* line 50, ../sass/default.scss */
+/* line 82, ../sass/default.scss */
 slides > slide {
   width: 900px;
   height: 700px;
@@ -248,13 +292,13 @@ slides > slide {
   transition: all 0.3s ease-out;
 }
 
-/* line 66, ../sass/default.scss */
+/* line 98, ../sass/default.scss */
 slides.layout-widescreen > slide {
   margin-left: -550px;
   width: 1100px;
 }
 
-/* line 71, ../sass/default.scss */
+/* line 103, ../sass/default.scss */
 slides.layout-faux-widescreen > slide {
   margin-left: -550px;
   width: 1100px;
@@ -273,7 +317,7 @@ slides.nobackground slide:not(.fill)::before {