aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Bidelman2012-04-09 13:40:34 -0700
committerEric Bidelman2012-04-09 13:40:34 -0700
commita72619425c7b796a72c9e50ea06f6f8308e8703a (patch)
tree4bb7712f7147497ce0d882bcef5f66c969ed726d
parentd370b1d98b2a3375cb6093d70fcbf791c867b46d (diff)
downloadio-slides-remote-a72619425c7b796a72c9e50ea06f6f8308e8703a.tar.gz
auto fadein slide animations happen with css (no more js :))
-rw-r--r--js/slides.js59
-rw-r--r--template.html12
-rw-r--r--theme/css/default.css237
-rw-r--r--theme/sass/default.scss33
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 */
45SlideDeck.prototype.handleDomLoaded_ = function() { 45SlideDeck.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 */
62SlideDeck.prototype.addEventListeners_ = function() { 62SlideDeck.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 */
104SlideDeck.prototype.handlePopState_ = function(e) { 71SlideDeck.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 */
114SlideDeck.prototype.handleBodyKeyDown_ = function(e) { 81SlideDeck.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>&lt;Thanks You!&gt;</h2> 164 <h2>&lt;Thanks You!&gt;</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 */
362slides > slide.current .auto-fadein {
363 opacity: 1;
364}
365/* line 159, ../sass/default.scss */
366slides > slide.current .gdbar {
367 background-size: 100% 100%;
368}
369/* line 164, ../sass/default.scss */
362slides > slide.next { 370slides > 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 */
376slides > slide.far-next { 384slides > 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 */
390slides > slide.dark { 398slides > slide.dark {
391 background: #515151; 399 background: #515151;
392} 400}
393/* line 172, ../sass/default.scss */ 401/* line 180, ../sass/default.scss */
394slides > slide hgroup + article { 402slides > 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 */
398slides > slide > article { 406slides > slide > article {
399 margin-top: 2em; 407 margin-top: 2em;
400} 408}
401/* line 179, ../sass/default.scss */ 409/* line 187, ../sass/default.scss */
402slides > slide > article p { 410slides > 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 */
407slides.layout-widescreen > slide.far-past, 415slides.layout-widescreen > slide.far-past,
408slides.layout-faux-widescreen > slide.far-past { 416slides.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} 428}