aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Bidelman2012-04-09 21:55:59 -0700
committerEric Bidelman2012-04-09 21:55:59 -0700
commite14c8eaca6aa822bdac44de2147ad2b6285532bc (patch)
tree5c57424386dfd9c068afe65a94e02024a5bfada5
parent3e6c68e22533bf589243cd5fdc95be819e4cb1ac (diff)
downloadio-slides-remote-e14c8eaca6aa822bdac44de2147ad2b6285532bc.tar.gz
Iframe style updates. All links open in new tab
-rw-r--r--js/slides.js29
-rw-r--r--template.html15
-rw-r--r--theme/css/default.css281
-rw-r--r--theme/sass/default.scss44
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() {
45SlideDeck.prototype.onDomLoaded_ = function() { 45SlideDeck.prototype.onDomLoaded_ = function() {
46 this.slides_ = document.querySelectorAll('slide:not([hidden])'); 46 this.slides_ = document.querySelectorAll('slide:not([hidden])');
47 47
48 // Load config.
49 this.loadConfig_();
50 this.addEventListeners_();
51 this.updateSlides_();
52
53 // Add slide numbers and total slide count metadata to each slide.
48 for (var i = 0, slide; slide = this.slides_[i]; ++i) { 54 for (var i = 0, slide; slide = this.slides_[i]; ++i) {
49 slide.dataset.slideNum = i + 1; 55 slide.dataset.slideNum = i + 1;
50 slide.dataset.totalSlides = this.slides_.length; 56 slide.dataset.totalSlides = this.slides_.length;
51 } 57 }
52 58
53 // Load config. 59 // This is an app! Make all links open in a new tab.
54 this.loadConfig_(); 60 [].forEach.call(document.querySelectorAll('a'), function(a) {
55 this.addEventListeners_(); 61 a.target = '_blank';
56 this.updateSlides_(); 62 });
57}; 63};
58 64
59/** 65/**
@@ -175,7 +181,7 @@ SlideDeck.prototype.loadConfig_ = function() {
175 } 181 }
176 182
177 if (settings.title) { 183 if (settings.title) {
178 document.title = settings.title + ' - Google IO 2012'; 184 document.title = settings.title.replace(/<br\/?>/, ' ') + ' - Google IO 2012';
179 document.querySelector('[data-config-title]').innerHTML = settings.title; 185 document.querySelector('[data-config-title]').innerHTML = settings.title;
180 } 186 }
181 187
@@ -193,14 +199,14 @@ SlideDeck.prototype.loadConfig_ = function() {
193 html = [p.name, p.company].join('<br>'); 199 html = [p.name, p.company].join('<br>');
194 200
195 var gplus = p.gplus ? '<span>g+</span><a href="' + p.gplus + 201 var gplus = p.gplus ? '<span>g+</span><a href="' + p.gplus +
196 '" target="_blank">' + p.gplus + '</a>' : ''; 202 '">' + p.gplus + '</a>' : '';
197 203
198 var twitter = p.twitter ? '<span>twitter</span>' + 204 var twitter = p.twitter ? '<span>twitter</span>' +
199 '<a href="http://twitter.com/' + p.twitter + '" target="_blank">' + 205 '<a href="http://twitter.com/' + p.twitter + '">' +
200 p.twitter + '</a>' : ''; 206 p.twitter + '</a>' : '';
201 207
202 var www = p.www ? '<span>www</span><a href="' + p.www + 208 var www = p.www ? '<span>www</span><a href="' + p.www +
203 '" target="_blank">' + p.www + '</a>' : ''; 209 '">' + p.www + '</a>' : '';
204 210
205 var html2 = [gplus, twitter, www].join('<br>'); 211 var html2 = [gplus, twitter, www].join('<br>');
206 212
@@ -350,7 +356,6 @@ SlideDeck.prototype.updateSlides_ = function(opt_dontPush) {
350 } 356 }
351 }; 357 };
352 358
353 //this.triggerSlideEvent('slideleave', curSlide - 1);
354 this.triggerSlideEvent('slideleave', this.prevSlide_); 359 this.triggerSlideEvent('slideleave', this.prevSlide_);
355 this.triggerSlideEvent('slideenter', curSlide); 360 this.triggerSlideEvent('slideenter', curSlide);
356 361
@@ -377,7 +382,7 @@ SlideDeck.prototype.enableSlideFrames_ = function(slideNo) {
377 return; 382 return;
378 } 383 }
379 384
380 var frames = el.getElementsByTagName('iframe'); 385 var frames = el.querySelectorAll('iframe');
381 for (var i = 0, frame; frame = frames[i]; i++) { 386 for (var i = 0, frame; frame = frames[i]; i++) {
382 this.enableFrame_(frame); 387 this.enableFrame_(frame);
383 } 388 }
@@ -388,7 +393,7 @@ SlideDeck.prototype.enableSlideFrames_ = function(slideNo) {
388 * @param {number} slideNo 393 * @param {number} slideNo
389 */ 394 */
390SlideDeck.prototype.enableFrame_ = function(frame) { 395SlideDeck.prototype.enableFrame_ = function(frame) {
391 var src = frame._src; 396 var src = frame.dataset.src;
392 if (src && frame.src != src) { 397 if (src && frame.src != src) {
393 frame.src = src; 398 frame.src = src;
394 } 399 }
@@ -404,7 +409,7 @@ SlideDeck.prototype.disableSlideFrames_ = function(slideNo) {
404 return; 409 return;
405 } 410 }
406 411
407 var frames = el.getElementsByTagName('iframe'); 412 var frames = el.querySelectorAll('iframe');
408 for (var i = 0, frame; frame = frames[i]; i++) { 413 for (var i = 0, frame; frame = frames[i]; i++) {
409 this.disableFrame_(frame); 414 this.disableFrame_(frame);
410 } 415 }
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) {
199 </article> 199 </article>
200 </slide> 200 </slide>
201 201
202 <slide>
203 <hgroup>
204 <h2>Slide with iframe</h2>
205 </hgroup>
206 <article>
207 <iframe data-src="http://www.google.com/doodle4google/history.html"></iframe>
208 </article>
209 </slide>
210
211 <slide>
212 <article>
213 <iframe data-src="http://www.google.com/doodle4google/history.html"></iframe>
214 </article>
215 </slide>
216
202 <slide class="thank-you-slide segue nobackground"> 217 <slide class="thank-you-slide segue nobackground">
203 <aside class="gdbar right"><img src="images/google_developers_icon_128.png"></aside> 218 <aside class="gdbar right"><img src="images/google_developers_icon_128.png"></aside>
204 <article class="flexbox vleft auto-fadein"> 219 <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 {
205/** 205/**
206 * Theme Styles 206 * Theme Styles
207 */ 207 */
208/* line 38, ../sass/default.scss */ 208/* line 40, ../sass/default.scss */
209::selection { 209::selection {
210 color: white; 210 color: white;
211 background-color: #ffd14d; 211 background-color: #ffd14d;
212 text-shadow: none; 212 text-shadow: none;
213} 213}
214 214
215/* line 44, ../sass/default.scss */ 215/* line 46, ../sass/default.scss */
216::-webkit-scrollbar {
217 height: 16px;
218 overflow: visible;
219 width: 16px;
220}
221
222/* line 51, ../sass/default.scss */
223::-webkit-scrollbar-thumb {
224 background-color: rgba(0, 0, 0, 0.1);
225 background-clip: padding-box;
226 border: solid transparent;
227 min-height: 28px;
228 padding: 100px 0 0;
229 -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
230 -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
231 -o-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
232 box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
233 border-width: 1px 1px 1px 6px;
234}
235
236/* line 60, ../sass/default.scss */
237::-webkit-scrollbar-thumb:hover {
238 background-color: rgba(0, 0, 0, 0.5);
239}
240
241/* line 63, ../sass/default.scss */
242::-webkit-scrollbar-button {
243 height: 0;
244 width: 0;
245}
246
247/* line 67, ../sass/default.scss */
248::-webkit-scrollbar-track {
249 background-clip: padding-box;
250 border: solid transparent;
251 border-width: 0 0 0 4px;
252}
253
254/* line 72, ../sass/default.scss */
255::-webkit-scrollbar-corner {
256 background: transparent;
257}
258
259/* line 76, ../sass/default.scss */
216body { 260body {
217 background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #2a7cdf)); 261 background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #2a7cdf));
218 background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px); 262 background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
@@ -223,7 +267,7 @@ body {
223 background-attachment: fixed; 267 background-attachment: fixed;
224} 268}
225 269
226/* line 50, ../sass/default.scss */ 270/* line 82, ../sass/default.scss */
227slides > slide { 271slides > slide {
228 width: 900px; 272 width: 900px;
229 height: 700px; 273 height: 700px;
@@ -248,13 +292,13 @@ slides > slide {
248 transition: all 0.3s ease-out; 292 transition: all 0.3s ease-out;
249} 293}
250 294
251/* line 66, ../sass/default.scss */ 295/* line 98, ../sass/default.scss */
252slides.layout-widescreen > slide { 296slides.layout-widescreen > slide {
253 margin-left: -550px; 297 margin-left: -550px;
254 width: 1100px; 298 width: 1100px;
255} 299}
256 300
257/* line 71, ../sass/default.scss */ 301/* line 103, ../sass/default.scss */
258slides.layout-faux-widescreen > slide { 302slides.layout-faux-widescreen > slide {
259 margin-left: -550px; 303