diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/slides.js | 58 |
1 files changed, 50 insertions, 8 deletions
diff --git a/js/slides.js b/js/slides.js index 3cb2852..c6fe1ed 100644 --- a/js/slides.js +++ b/js/slides.js | |||
@@ -42,14 +42,14 @@ SlideDeck.prototype.getCurrentSlideFromHash_ = function() { | |||
42 | * @private | 42 | * @private |
43 | */ | 43 | */ |
44 | SlideDeck.prototype.handleDomLoaded_ = function() { | 44 | SlideDeck.prototype.handleDomLoaded_ = function() { |
45 | this.slides_ = document.querySelectorAll('slide:not(.hidden)'); | 45 | this.slides_ = document.querySelectorAll('slide:not([hidden])'); |
46 | 46 | ||
47 | for (var i = 0, slide; slide = this.slides_[i]; ++i) { | 47 | for (var i = 0, slide; slide = this.slides_[i]; ++i) { |
48 | slide.dataset.slideNum = i + 1; | 48 | slide.dataset.slideNum = i + 1; |
49 | slide.dataset.totalSlides = this.slides_.length; | 49 | slide.dataset.totalSlides = this.slides_.length; |
50 | } | 50 | } |
51 | 51 | ||
52 | // Load config | 52 | // Load config. |
53 | this.loadConfig_(); | 53 | this.loadConfig_(); |
54 | this.addEventListeners_(); | 54 | this.addEventListeners_(); |
55 | this.updateSlides_(); | 55 | this.updateSlides_(); |
@@ -61,8 +61,13 @@ SlideDeck.prototype.handleDomLoaded_ = function() { | |||
61 | SlideDeck.prototype.addEventListeners_ = function() { | 61 | SlideDeck.prototype.addEventListeners_ = function() { |
62 | document.addEventListener('keydown', this.handleBodyKeyDown_.bind(this), | 62 | document.addEventListener('keydown', this.handleBodyKeyDown_.bind(this), |
63 | false); | 63 | false); |
64 | window.addEventListener('popstate', this.handlePopState_.bind(this), | 64 | window.addEventListener('popstate', this.handlePopState_.bind(this), false); |
65 | false); | 65 | |
66 | var self = this; | ||
67 | var titleSlide = document.querySelector('#title-slide'); | ||
68 | titleSlide.addEventListener('slideenter', function(e) { | ||
69 | self.buildNextItem_(); | ||
70 | }, false); | ||
66 | }; | 71 | }; |
67 | 72 | ||
68 | /** | 73 | /** |
@@ -253,6 +258,36 @@ SlideDeck.prototype.nextSlide = function(opt_dontPush) { | |||
253 | } | 258 | } |
254 | }; | 259 | }; |
255 | 260 | ||
261 | /* Slide events */ | ||
262 | |||
263 | /** | ||
264 | * Triggered when a slide enter/leave event should be dispatched. | ||
265 | * | ||
266 | * @param {string} type The type of event to trigger | ||
267 | * (e.g. 'onslideenter', 'onslideleave'). | ||
268 | * @param {number} slideNo The index of the slide that is being left. | ||
269 | */ | ||
270 | SlideDeck.prototype.triggerSlideEvent = function(type, slideNo) { | ||
271 | var el = this.getSlideEl_(slideNo); | ||
272 | if (!el) { | ||
273 | return; | ||
274 | } | ||
275 | |||
276 | // Call onslideenter/onslideleave if the attribute is defined on this slide. | ||
277 | var func = el.getAttribute(type); | ||
278 | if (func) { | ||
279 | new Function(func).call(el); // TODO: Don't use new Function() :( | ||
280 | } | ||
281 | |||
282 | // Dispatch event to listeners setup using addEventListener. | ||
283 | var evt = document.createEvent('Event'); | ||
284 | evt.initEvent(type.substring(2), true, true); | ||
285 | evt.slideNumber = slideNo + 1; // Make it readable | ||
286 | evt.slide = el; | ||
287 | |||
288 | el.dispatchEvent(evt); | ||
289 | }; | ||
290 | |||
256 | /** | 291 | /** |
257 | * @private | 292 | * @private |
258 | */ | 293 | */ |
@@ -283,8 +318,8 @@ SlideDeck.prototype.updateSlides_ = function(opt_dontPush) { | |||
283 | } | 318 | } |
284 | }; | 319 | }; |
285 | 320 | ||
286 | /*this.triggerLeaveEvent(curSlide - 1); | 321 | this.triggerSlideEvent('onslideleave', curSlide - 1); |
287 | triggerEnterEvent(curSlide);*/ | 322 | this.triggerSlideEvent('onslideenter', curSlide); |
288 | 323 | ||
289 | window.setTimeout(this.disableSlideFrames_.bind(this, curSlide - 2), 301); | 324 | window.setTimeout(this.disableSlideFrames_.bind(this, curSlide - 2), 301); |
290 | 325 | ||
@@ -389,9 +424,9 @@ SlideDeck.prototype.updateSlideClass_ = function(slideNo, className) { | |||
389 | * @private | 424 | * @private |
390 | */ | 425 | */ |
391 | SlideDeck.prototype.makeBuildLists_ = function () { | 426 | SlideDeck.prototype.makeBuildLists_ = function () { |
392 | for (var i = this.curSlide_, slide; slide = this.slides_[i]; i++) { | 427 | for (var i = this.curSlide_, slide; slide = this.slides_[i]; ++i) { |
393 | var items = slide.querySelectorAll('.build > *'); | 428 | var items = slide.querySelectorAll('.build > *'); |
394 | for (var j = 0, item; item = items[j]; j++) { | 429 | for (var j = 0, item; item = items[j]; ++j) { |
395 | if (item.classList) { | 430 | if (item.classList) { |
396 | item.classList.add('to-build'); | 431 | item.classList.add('to-build'); |
397 | if (item.parentNode.classList.contains('fade')) { | 432 | if (item.parentNode.classList.contains('fade')) { |
@@ -399,6 +434,13 @@ SlideDeck.prototype.makeBuildLists_ = function () { | |||
399 | } | 434 | } |
400 | } | 435 | } |
401 | } | 436 | } |
437 | // Setup Google Developer icon slide out bars. | ||
438 | var bars = slide.querySelectorAll('.gdbar'); | ||
439 | for (var j = 0, bar; bar = bars[j]; ++j) { | ||
440 | if (bar.classList) { | ||
441 | bar.classList.add('to-build'); | ||
442 | } | ||
443 | } | ||
402 | } | 444 | } |
403 | }; | 445 | }; |
404 | 446 | ||