diff options
author | Eric Bidelman | 2012-04-09 21:55:59 -0700 |
---|---|---|
committer | Eric Bidelman | 2012-04-09 21:55:59 -0700 |
commit | e14c8eaca6aa822bdac44de2147ad2b6285532bc (patch) | |
tree | 5c57424386dfd9c068afe65a94e02024a5bfada5 | |
parent | 3e6c68e22533bf589243cd5fdc95be819e4cb1ac (diff) | |
download | io-slides-remote-e14c8eaca6aa822bdac44de2147ad2b6285532bc.tar.gz |
Iframe style updates. All links open in new tab
-rw-r--r-- | js/slides.js | 29 | ||||
-rw-r--r-- | template.html | 15 | ||||
-rw-r--r-- | theme/css/default.css | 281 | ||||
-rw-r--r-- | theme/sass/default.scss | 44 |
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() { | |||
45 | SlideDeck.prototype.onDomLoaded_ = function() { | 45 | SlideDeck.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 | */ |
390 | SlideDeck.prototype.enableFrame_ = function(frame) { | 395 | SlideDeck.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 */ | ||
216 | body { | 260 | body { |
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 */ |
227 | slides > slide { | 271 | slides > 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 */ |
252 | slides.layout-widescreen > slide { | 296 | slides.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 */ |
258 | slides.layout-faux-widescreen > slide { | 302 | slides.layout-faux-widescreen > slide { |
259 | margin-left: -550px; | 303 | margin-left: -550px; |
260 | width: |