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 /js/slides.js | |
parent | d370b1d98b2a3375cb6093d70fcbf791c867b46d (diff) | |
download | io-slides-remote-a72619425c7b796a72c9e50ea06f6f8308e8703a.tar.gz |
auto fadein slide animations happen with css (no more js :))
Diffstat (limited to 'js/slides.js')
-rw-r--r-- | js/slides.js | 59 |
1 files changed, 13 insertions, 46 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 | ||