aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Bidelman2012-04-08 18:39:24 -0700
committerEric Bidelman2012-04-08 18:39:24 -0700
commitd370b1d98b2a3375cb6093d70fcbf791c867b46d (patch)
tree46bb07c49ac509b92d89b8c7431fe2105f0f25f9
parent79c730f664bd8bda196c13282c5650f4ab282b25 (diff)
downloadio-slides-remote-d370b1d98b2a3375cb6093d70fcbf791c867b46d.tar.gz
Segue slides animate on ever slide enter
-rw-r--r--js/slides.js22
-rw-r--r--template.html12
-rw-r--r--theme/css/default.css225
-rw-r--r--theme/sass/default.scss43
4 files changed, 196 insertions, 106 deletions
diff --git a/js/slides.js b/js/slides.js
index dab51f9..e48924c 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -64,24 +64,42 @@ SlideDeck.prototype.addEventListeners_ = function() {
64 false); 64 false);
65 window.addEventListener('popstate', this.handlePopState_.bind(this), false); 65 window.addEventListener('popstate', this.handlePopState_.bind(this), false);
66 66
67 // Google Developer icon gray bar should reanimate on every slide enter. 67 // Google Developer icon gray bar and segue slide titles should reanimate on
68 // every slide enter.
68 var gbars = document.querySelectorAll('slide > .gdbar'); 69 var gbars = document.querySelectorAll('slide > .gdbar');
69 for (var i = 0, gbar; gbar = gbars[i]; ++i) { 70 for (var i = 0, gbar; gbar = gbars[i]; ++i) {
70 var slide = gbar.parentElement; 71 var slide = gbar.parentElement;
72
71 slide.addEventListener('slideenter', function(e) { 73 slide.addEventListener('slideenter', function(e) {
72 this.buildNextItem_(); 74 this.buildNextItem_();
75 if (e.target.classList.contains('segue')) {
76 e.target.querySelector('hgroup').classList.add('on');
77 }
73 }.bind(this), false); 78 }.bind(this), false);
79
74 slide.addEventListener('slideleave', function(e) { 80 slide.addEventListener('slideleave', function(e) {
75 var bar = e.target.querySelector('.gdbar'); 81 var bar = e.target.querySelector('.gdbar');
76 bar.classList.remove('build-current'); 82 bar.classList.remove('build-current');
77 bar.classList.add('to-build'); 83 bar.classList.add('to-build');
84 if (e.target.classList.contains('segue')) {
85 e.target.querySelector('hgroup').classList.remove('on');
86 }
78 }, false); 87 }, false);
79 } 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);
80}; 98};
81 99
82/** 100/**
83 * @private 101 * @private
84 * @param {Event} e 102 * @param {Event} e The pop event.
85 */ 103 */
86SlideDeck.prototype.handlePopState_ = function(e) { 104SlideDeck.prototype.handlePopState_ = function(e) {
87 if (e.state != null) { 105 if (e.state != null) {
diff --git a/template.html b/template.html
index 3ac5bf0..a69caae 100644
--- a/template.html
+++ b/template.html
@@ -148,10 +148,20 @@ function helloWorld(world) {
148 </article> 148 </article>
149 </slide> 149 </slide>
150 150
151 <slide class="segue dark nobackground">
152 <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>
153 <article class="flexbox vleft">
154 <hgroup>
155 <h2>Segue Slide</h2>
156 <h3>Subtitle Placeholder</h3>
157 </hgroup>
158 </article>
159 </slide>
160
151 <slide class="thank-you-slide nobackground"> 161 <slide class="thank-you-slide nobackground">
152 <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>
153 <section class="flexbox vleft"> 163 <section class="flexbox vleft">
154 <h1>&lt;Thanks You!&gt;</h1> 164 <h2>&lt;Thanks You!&gt;</h2>
155 <p>Important contact information goes here.</p> 165 <p>Important contact information goes here.</p>
156 </section> 166 </section>
157 <p> 167 <p>
diff --git a/theme/css/default.css b/theme/css/default.css
index 714af1c..c2022de 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -387,19 +387,23 @@ slides > slide.far-next {
387 transform: translate3d(2040px, 0, 0); 387 transform: translate3d(2040px, 0, 0);
388} 388}
389/* line 168, ../sass/default.scss */ 389/* line 168, ../sass/default.scss */
390slides > slide.dark {
391 background: #515151;
392}
393/* line 172, ../sass/default.scss */
390slides > slide hgroup + article { 394slides > slide hgroup + article {
391 margin-top: 1.5em; 395 margin-top: 1.5em;
392} 396}
393/* line 172, ../sass/default.scss */ 397/* line 176, ../sass/default.scss */
394slides > slide > article { 398slides > slide > article {
395 margin-top: 2em; 399 margin-top: 2em;
396} 400}
397/* line 175, ../sass/default.scss */ 401/* line 179, ../sass/default.scss */
398slides > slide > article p { 402slides > slide > article p {
399 margin-bottom: 1em; 403 margin-bottom: 1em;
400} 404}
401 405
402/* line 186, ../sass/default.scss */ 406/* line 190, ../sass/default.scss */
403slides.layout-widescreen > slide.far-past, 407slides.layout-widescreen > slide.far-past,
404slides.layout-faux-widescreen > slide.far-past { 408slides.layout-faux-widescreen > slide.far-past {
405 display: block; 409 display: block;
@@ -414,7 +418,7 @@ slides.layout-faux-widescreen > slide.far-past {
414 -ms-transform: translate3d(-2260px, 0, 0); 418 -ms-transform: translate3d(-2260px, 0, 0);
415 transform: translate3d(-2260px, 0, 0); 419 transform: translate3d(-2260px, 0, 0);
416} 420}
417/* line 192, ../sass/default.scss */ 421/* line 196, ../sass/default.scss */
418slides.layout-widescreen > slide.past, 422slides.layout-widescreen > slide.past,
419slides.layout-faux-widescreen > slide.past { 423slides.layout-faux-widescreen > slide.past {
420 display: block; 424 display: block;
@@ -429,7 +433,7 @@ slides.layout-faux-widescreen > slide.past {
429 -ms-transform: translate3d(-1130px, 0, 0); 433 -ms-transform: translate3d(-1130px, 0, 0);
430 transform: translate3d(-1130px, 0, 0); 434 transform: translate3d(-1130px, 0, 0);
431} 435}
432/* line 198, ../sass/default.scss */ 436/* line 202, ../sass/default.scss */
433slides.layout-widescreen > slide.current, 437slides.layout-widescreen > slide.current,
434slides.layout-faux-widescreen > slide.current { 438slides.layout-faux-widescreen > slide.current {
435 display: block; 439 display: block;
@@ -444,7 +448,7 @@ slides.layout-faux-widescreen > slide.current {
444 -ms-transform: translate3d(0, 0, 0); 448 -ms-transform: translate3d(0, 0, 0);
445 transform: translate3d(0, 0, 0); 449 transform: translate3d(0, 0, 0);
446} 450}
447/* line 204, ../sass/default.scss */ 451/* line 208, ../sass/default.scss */
448slides.layout-widescreen > slide.next, 452slides.layout-widescreen > slide.next,
449slides.layout-faux-widescreen > slide.next { 453slides.layout-faux-widescreen > slide.next {
450 display: block; 454 display: block;
@@ -459,7 +463,7 @@ slides.layout-faux-widescreen > slide.next {
459 -ms-transform: translate3d(1130px, 0, 0); 463 -ms-transform: translate3d(1130px, 0, 0);
460 transform: translate3d(1130px, 0, 0); 464 transform: translate3d(1130px, 0, 0);
461} 465}
462/* line 210, ../sass/default.scss */ 466/* line 214, ../sass/default.scss */
463slides.layout-widescreen > slide.far-next, 467slides.layout-widescreen > slide.far-next,
464slides.layout-faux-widescreen > slide.far-next { 468slides.layout-faux-widescreen > slide.far-next {
465 display: block; 469 display: block;
@@ -475,30 +479,30 @@ slides.layout-faux-widescreen > slide.far-next {
475 transform: translate3d(2260px, 0, 0); 479 transform: translate3d(2260px, 0, 0);
476} 480}
477 481
478/* line 217, ../sass/default.scss */ 482/* line 221, ../sass/default.scss */
479b { 483b {
480 font-weight: 600; 484 font-weight: 600;
481} 485}
482 486
483/* line 221, ../sass/default.scss */ 487/* line 225, ../sass/default.scss */
484a { 488a {
485 color: #0066cc; 489 color: #0066cc;
486} 490}
487/* line 224, ../sass/default.scss */ 491/* line 228, ../sass/default.scss */
488a:visited { 492a:visited {
489 color: rgba(0, 102, 204, 0.75); 493 color: rgba(0, 102, 204, 0.75);
490} 494}
491/* line 228, ../sass/default.scss */ 495/* line 232, ../sass/default.scss */
492a:hover { 496a:hover {
493 color: black; 497 color: black;
494} 498}
495 499
496/* line 233, ../sass/default.scss */ 500/* line 237, ../sass/default.scss */
497h1, h2, h3 { 501h1, h2, h3 {
498 font-weight: 600; 502 font-weight: 600;
499} 503}
500 504
501/* line 237, ../sass/default.scss */ 505/* line 241, ../sass/default.scss */
502h2 { 506h2 {
503 font-size: 45px; 507 font-size: 45px;
504 line-height: 45px; 508 line-height: 45px;
@@ -506,7 +510,7 @@ h2 {
506 color: #515151; 510 color: #515151;
507} 511}
508 512
509/* line 244, ../sass/default.scss */ 513/* line 248, ../sass/default.scss */
510h3 { 514h3 {
511 font-size: 30px; 515 font-size: 30px;
512 letter-spacing: -1px; 516 letter-spacing: -1px;
@@ -515,38 +519,38 @@ h3 {
515 color: #797979; 519 color: #797979;
516} 520}
517 521
518/* line 252, ../sass/default.scss */ 522/* line 256, ../sass/default.scss */
519ul { 523ul {
520 margin-left: 1.2em; 524 margin-left: 1.2em;
521 margin-bottom: 1em; 525 margin-bottom: 1em;
522} 526}
523/* line 256, ../sass/default.scss */ 527/* line 260, ../sass/default.scss */