diff options
author | Eric Bidelman | 2012-04-09 13:40:34 -0700 |
---|---|---|
committer | Eric Bidelman | 2012-04-09 13:40:34 -0700 |
commit | a72619425c7b796a72c9e50ea06f6f8308e8703a (patch) | |
tree | 4bb7712f7147497ce0d882bcef5f66c969ed726d | |
parent | d370b1d98b2a3375cb6093d70fcbf791c867b46d (diff) | |
download | io-slides-remote-a72619425c7b796a72c9e50ea06f6f8308e8703a.tar.gz |
auto fadein slide animations happen with css (no more js :))
-rw-r--r-- | js/slides.js | 59 | ||||
-rw-r--r-- | template.html | 12 | ||||
-rw-r--r-- | theme/css/default.css | 237 | ||||
-rw-r--r-- | theme/sass/default.scss | 33 |
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() { | |||
10 | this.getCurrentSlideFromHash_(); | 10 | this.getCurrentSlideFromHash_(); |
11 | 11 | ||
12 | document.addEventListener('DOMContentLoaded', | 12 | document.addEventListener('DOMContentLoaded', |
13 | this.handleDomLoaded_.bind(this), false); | 13 | this.onDomLoaded_.bind(this), false); |
14 | } | 14 | } |
15 | 15 | ||
16 | /** | 16 | /** |
@@ -42,7 +42,7 @@ SlideDeck.prototype.getCurrentSlideFromHash_ = function() { | |||
42 | /** | 42 | /** |
43 | * @private | 43 | * @private |
44 | */ | 44 | */ |
45 | SlideDeck.prototype.handleDomLoaded_ = 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 | for (var i = 0, slide; slide = this.slides_[i]; ++i) { | 48 | for (var i = 0, slide; slide = this.slides_[i]; ++i) { |
@@ -60,48 +60,15 @@ SlideDeck.prototype.handleDomLoaded_ = function() { | |||
60 | * @private | 60 | * @private |
61 | */ | 61 | */ |
62 | SlideDeck.prototype.addEventListeners_ = function() { | 62 | SlideDeck.prototype.addEventListeners_ = function() { |
63 | document.addEventListener('keydown', this.handleBodyKeyDown_.bind(this), | 63 | document.addEventListener('keydown', this.onBodyKeyDown_.bind(this), false); |
64 | false); | 64 | window.addEventListener('popstate', this.onPopState_.bind(this), false); |
65 | window.addEventListener('popstate', this.handlePopState_.bind(this), false); | ||
66 | |||
67 | // Google Developer icon gray bar and segue slide titles should reanimate on | ||
68 | // every slide enter. | ||
69 | var gbars = document.querySelectorAll('slide > .gdbar'); | ||
70 | for (var i = 0, gbar; gbar = gbars[i]; ++i) { | ||
71 | var slide = gbar.parentElement; | ||
72 | |||
73 | slide.addEventListener('slideenter', function(e) { | ||
74 | this.buildNextItem_(); | ||
75 | if (e.target.classList.contains('segue')) { | ||
76 | e.target.querySelector('hgroup').classList.add('on'); | ||
77 | } | ||
78 | }.bind(this), false); | ||
79 | |||
80 | slide.addEventListener('slideleave', function(e) { | ||
81 | var bar = e.target.querySelector('.gdbar'); | ||
82 | bar.classList.remove('build-current'); | ||
83 | bar.classList.add('to-build'); | ||
84 | if (e.target.classList.contains('segue')) { | ||
85 | e.target.querySelector('hgroup').classList.remove('on'); | ||
86 | } | ||
87 | }, false); | ||
88 | } | ||
89 | |||
90 | // document.addEventListener('webkitTransitionEnd', function(e) { | ||
91 | // var el = e.target; | ||
92 | // var property = e.propertyName; | ||
93 | // if (el.classList.contains('gdbar') && property == 'background-size') { | ||
94 | // console.log('done'); | ||
95 | // el.parentElement.parentElement.querySelector('article hgroup').classList.add('on'); | ||
96 | // } | ||
97 | // }, false); | ||
98 | }; | 65 | }; |
99 | 66 | ||
100 | /** | 67 | /** |
101 | * @private | 68 | * @private |
102 | * @param {Event} e The pop event. | 69 | * @param {Event} e The pop event. |
103 | */ | 70 | */ |
104 | SlideDeck.prototype.handlePopState_ = function(e) { | 71 | SlideDeck.prototype.onPopState_ = function(e) { |
105 | if (e.state != null) { | 72 | if (e.state != null) { |
106 | this.curSlide_ = e.state; | 73 | this.curSlide_ = e.state; |
107 | this.updateSlides_(true); | 74 | this.updateSlides_(true); |
@@ -111,7 +78,7 @@ SlideDeck.prototype.handlePopState_ = function(e) { | |||
111 | /** | 78 | /** |
112 | * @param {Event} e | 79 | * @param {Event} e |
113 | */ | 80 | */ |
114 | SlideDeck.prototype.handleBodyKeyDown_ = function(e) { | 81 | SlideDeck.prototype.onBodyKeyDown_ = function(e) { |
115 | if (/^(input|textarea)$/i.test(e.target.nodeName) || | 82 | if (/^(input|textarea)$/i.test(e.target.nodeName) || |
116 | e.target.isContentEditable) { | 83 | e.target.isContentEditable) { |
117 | return; | 84 | return; |
@@ -463,13 +430,13 @@ SlideDeck.prototype.makeBuildLists_ = function () { | |||
463 | } | 430 | } |
464 | } | 431 | } |
465 | } | 432 | } |
466 | // Setup Google Developer icon slide out bars. | 433 | // // Setup Google Developer icon slide out bars. |
467 | var bars = slide.querySelectorAll('.gdbar'); | 434 | // var bars = slide.querySelectorAll('.gdbar'); |
468 | for (var j = 0, bar; bar = bars[j]; ++j) { | 435 | // for (var j = 0, bar; bar = bars[j]; ++j) { |
469 | if (bar.classList) { | 436 | // if (bar.classList) { |
470 | bar.classList.add('to-build'); | 437 | // bar.classList.add('to-build'); |
471 | } | 438 | // } |
472 | } | 439 | // } |
473 | } | 440 | } |
474 | }; | 441 | }; |
475 | 442 | ||
diff --git a/template.html b/template.html index a69caae..821cb47 100644 --- a/template.html +++ b/template.html | |||
@@ -15,9 +15,9 @@ | |||
15 | </section> | 15 | </section> |
16 | </slide> | 16 | </slide> |
17 | 17 | ||
18 | <slide id="title-slide" class="nobackground"> | 18 | <slide class="title-slide segue nobackground"> |
19 | <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> | 19 | <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> |
20 | <hgroup> | 20 | <hgroup class="auto-fadein"> |
21 | <h1>Title Goes Here</h1> | 21 | <h1>Title Goes Here</h1> |
22 | <h2>Subtitle Goes Here</h2> | 22 | <h2>Subtitle Goes Here</h2> |
23 | <p> | 23 | <p> |
@@ -151,20 +151,20 @@ function helloWorld(world) { | |||
151 | <slide class="segue dark nobackground"> | 151 | <slide class="segue dark nobackground"> |
152 | <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> | 152 | <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> |
153 | <article class="flexbox vleft"> | 153 | <article class="flexbox vleft"> |
154 | <hgroup> | 154 | <hgroup class="auto-fadein"> |
155 | <h2>Segue Slide</h2> | 155 | <h2>Segue Slide</h2> |
156 | <h3>Subtitle Placeholder</h3> | 156 | <h3>Subtitle Placeholder</h3> |
157 | </hgroup> | 157 | </hgroup> |
158 | </article> | 158 | </article> |
159 | </slide> | 159 | </slide> |
160 | 160 | ||
161 | <slide class="thank-you-slide nobackground"> | 161 | <slide class="thank-you-slide segue nobackground"> |
162 | <aside class="gdbar right"><img src="images/google_developers_icon_128.png"></aside> | 162 | <aside class="gdbar right"><img src="images/google_developers_icon_128.png"></aside> |
163 | <section class="flexbox vleft"> | 163 | <section class="flexbox vleft auto-fadein"> |
164 | <h2><Thanks You!></h2> | 164 | <h2><Thanks You!></h2> |
165 | <p>Important contact information goes here.</p> | 165 | <p>Important contact information goes here.</p> |
166 | </section> | 166 | </section> |
167 | <p> | 167 | <p class="auto-fadein"> |
168 | Insert contact info<br> | 168 | Insert contact info<br> |
169 | Insert contact info<br> | 169 | Insert contact info<br> |
170 | Insert contact info | 170 | 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 { | |||
358 | -ms-transform: translate3d(0, 0, 0); | 358 | -ms-transform: translate3d(0, 0, 0); |
359 | transform: translate3d(0, 0, 0); | 359 | transform: translate3d(0, 0, 0); |
360 | } | 360 | } |
361 | /* line 156, ../sass/default.scss */ | 361 | /* line 155, ../sass/default.scss */ |
362 | slides > slide.current .auto-fadein { | ||
363 | opacity: 1; | ||
364 | } | ||
365 | /* line 159, ../sass/default.scss */ | ||
366 | slides > slide.current .gdbar { | ||
367 | background-size: 100% 100%; | ||
368 | } | ||
369 | /* line 164, ../sass/default.scss */ | ||
362 | slides > slide.next { | 370 | slides > slide.next { |
363 | display: block; | 371 | display: block; |
364 | -moz-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); | 372 | -moz-transform: translate(1020px) rotateY(-30deg) rotateX(45deg); |
@@ -372,7 +380,7 @@ slides > slide.next { | |||
372 | -ms-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); | 380 | -ms-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); |
373 | transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); | 381 | transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg); |
374 | } | 382 | } |
375 | /* line 162, ../sass/default.scss */ | 383 | /* line 170, ../sass/default.scss */ |
376 | slides > slide.far-next { | 384 | slides > slide.far-next { |
377 | display: block; | 385 | display: block; |
378 | -moz-transform: translate(2040px); | 386 | -moz-transform: translate(2040px); |
@@ -386,24 +394,24 @@ slides > slide.far-next { | |||
386 | -ms-transform: translate3d(2040px, 0, 0); | 394 | -ms-transform: translate3d(2040px, 0, 0); |
387 | transform: translate3d(2040px, 0, 0); | 395 | transform: translate3d(2040px, 0, 0); |
388 | } | 396 | } |
389 | /* line 168, ../sass/default.scss */ | 397 | /* line 176, ../sass/default.scss */ |
390 | slides > slide.dark { | 398 | slides > slide.dark { |
391 | background: #515151; | 399 | background: #515151; |
392 | } | 400 | } |
393 | /* line 172, ../sass/default.scss */ | 401 | /* line 180, ../sass/default.scss */ |
394 | slides > slide hgroup + article { | 402 | slides > slide hgroup + article { |
395 | margin-top: 1.5em; | 403 | margin-top: 1.5em; |
396 | } | 404 | } |
397 | /* line 176, ../sass/default.scss */ | 405 | /* line 184, ../sass/default.scss */ |
398 | slides > slide > article { | 406 | slides > slide > article { |
399 | margin-top: 2em; | 407 | margin-top: 2em; |
400 | } | 408 | } |
401 | /* line 179, ../sass/default.scss */ | 409 | /* line 187, ../sass/default.scss */ |
402 | slides > slide > article p { | 410 | slides > slide > article p { |
403 | margin-bottom: 1em; | 411 | margin-bottom: 1em; |
404 | } | 412 | } |
405 | 413 | ||
406 | /* line 190, ../sass/default.scss */ | 414 | /* line 198, ../sass/default.scss */ |
407 | slides.layout-widescreen > slide.far-past, | 415 | slides.layout-widescreen > slide.far-past, |
408 | slides.layout-faux-widescreen > slide.far-past { | 416 | slides.layout-faux-widescreen > slide.far-past { |
409 | display: block; | 417 | display: block; |
@@ -418,7 +426,7 @@ slides.layout-faux-widescreen > slide.far-past { | |||
418 | -ms-transform: translate3d(-2260px, 0, 0); | 426 | -ms-transform: translate3d(-2260px, 0, 0); |
419 | transform: translate3d(-2260px, 0, 0); | 427 | transform: translate3d(-2260px, 0, 0); |
420 | } |