aboutsummaryrefslogtreecommitdiff
path: root/js/slides.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/slides.js')
-rw-r--r--js/slides.js99
1 files changed, 64 insertions, 35 deletions
diff --git a/js/slides.js b/js/slides.js
index deaceb8..42d5329 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -1,18 +1,15 @@
1// Function.bind polyfill for Safari < 5.1.4 and iOS.
2// From https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
3Function.prototype.bind||(Function.prototype.bind=function(c){if("function"!==typeof this)throw new TypeError("Function.prototype.bind - binding an object that is not callable");var d=Array.prototype.slice.call(arguments,1),e=this,a=function(){},b=function(){return e.apply(this instanceof a?this:c||window,d.concat(Array.prototype.slice.call(arguments)))};a.prototype=this.prototype;b.prototype=new a;return b});
4
5document.cancelFullScreen = document.webkitCancelFullScreen || 1document.cancelFullScreen = document.webkitCancelFullScreen ||
6 document.mozCancelFullScreen; 2 document.mozCancelFullScreen;
7 3
8/** 4/**
9 * @constructor 5 * @constructor
10 */ 6 */
11function SlideDeck() { 7function SlideDeck(el) {
12 this.curSlide_ = 0; 8 this.curSlide_ = 0;
13 this.prevSlide_ = 0; 9 this.prevSlide_ = 0;
14 this.slides = [];
15 this.config_ = null; 10 this.config_ = null;
11 this.container = el || document.querySelector('slides');
12 this.slides = [];
16 this.controller = null; 13 this.controller = null;
17 14
18 this.getCurrentSlideFromHash_(); 15 this.getCurrentSlideFromHash_();
@@ -56,10 +53,10 @@ SlideDeck.prototype.onDomLoaded_ = function(e) {
56 // Fade in deck. 53 // Fade in deck.
57 document.body.classList.add('loaded'); 54 document.body.classList.add('loaded');
58 55
59 this.slides_ = document.querySelectorAll('slide:not([hidden]):not(.backdrop)'); 56 this.slides = this.container.querySelectorAll('slide:not([hidden]):not(.backdrop)');
60 57
61 // If we're on a smartphone device, load phone.css. 58 // If we're on a smartphone device, load phone.css.
62 if (window.matchMedia('only screen and (max-device-width: 480px)').matches) { 59 if (Modernizr.mq('only screen and (max-device-width: 480px)')) {
63 // var style = document.createElement('link'); 60 // var style = document.createElement('link');
64 // style.rel = 'stylesheet'; 61 // style.rel = 'stylesheet';
65 // style.type = 'text/css'; 62 // style.type = 'text/css';
@@ -67,7 +64,7 @@ SlideDeck.prototype.onDomLoaded_ = function(e) {
67 // document.querySelector('head').appendChild(style); 64 // document.querySelector('head').appendChild(style);
68 65
69 // Remove widescreen if it's applied. 66 // Remove widescreen if it's applied.
70 document.querySelector('slides').classList.remove('layout-widescreen'); 67 this.container.classList.remove('layout-widescreen');
71 } 68 }
72 69
73 this.loadConfig_(SLIDE_CONFIG); 70 this.loadConfig_(SLIDE_CONFIG);
@@ -75,9 +72,9 @@ SlideDeck.prototype.onDomLoaded_ = function(e) {
75 this.updateSlides_(); 72 this.updateSlides_();
76 73
77 // Add slide numbers and total slide count metadata to each slide. 74 // Add slide numbers and total slide count metadata to each slide.
78 for (var i = 0, slide; slide = this.slides_[i]; ++i) { 75 for (var i = 0, slide; slide = this.slides[i]; ++i) {
79 slide.dataset.slideNum = i + 1; 76 slide.dataset.slideNum = i + 1;
80 slide.dataset.totalSlides = this.slides_.length; 77 slide.dataset.totalSlides = this.slides.length;
81 } 78 }
82 79
83 // Note: this needs to come after addEventListeners_(), which adds a 80 // Note: this needs to come after addEventListeners_(), which adds a
@@ -97,6 +94,35 @@ SlideDeck.prototype.onDomLoaded_ = function(e) {
97SlideDeck.prototype.addEventListeners_ = function() { 94SlideDeck.prototype.addEventListeners_ = function() {
98 document.addEventListener('keydown', this.onBodyKeyDown_.bind(this), false); 95 document.addEventListener('keydown', this.onBodyKeyDown_.bind(this), false);
99 window.addEventListener('popstate', this.onPopState_.bind(this), false); 96 window.addEventListener('popstate', this.onPopState_.bind(this), false);
97
98 // var transEndEventNames = {
99 // 'WebkitTransition': 'webkitTransitionEnd',
100 // 'MozTransition': 'transitionend',
101 // 'OTransition': 'oTransitionEnd',
102 // 'msTransition': 'MSTransitionEnd',
103 // 'transition': 'transitionend'
104 // };
105 //
106 // // Find the correct transitionEnd vendor prefix.
107 // window.transEndEventName = transEndEventNames[
108 // Modernizr.prefixed('transition')];
109 //
110 // // When slides are done transitioning, kickoff loading iframes.
111 // // Note: we're only looking at a single transition (on the slide). This
112 // // doesn't include autobuilds the slides may have. Also, if the slide
113 // // transitions on multiple properties (e.g. not just 'all'), this doesn't
114 // // handle that case.
115 // this.container.addEventListener(transEndEventName, function(e) {
116 // this.enableSlideFrames_(this.curSlide_);
117 // }.bind(this), false);
118
119 // document.addEventListener('slideenter', function(e) {
120 // var slide = e.target;
121 // window.setTimeout(function() {
122 // this.enableSlideFrames_(e.slideNumber);
123 // this.enableSlideFrames_(e.slideNumber + 1);
124 // }.bind(this), 300);
125 // }.bind(this), false);
100}; 126};
101 127
102/** 128/**
@@ -272,28 +298,26 @@ SlideDeck.prototype.loadConfig_ = function(config) {
272 document.querySelector('[data-config-presenter]').innerHTML = html; 298 document.querySelector('[data-config-presenter]').innerHTML = html;
273 } 299 }
274 300
275 var slides = document.querySelector('slides');
276
277 /* Left/Right tap areas. Default to including. */ 301 /* Left/Right tap areas. Default to including. */
278 if (!!!('enableSideAreas' in settings) || settings.enableSideAreas) { 302 if (!!!('enableSideAreas' in settings) || settings.enableSideAreas) {
279 var el = document.createElement('div'); 303 var el = document.createElement('div');
280 el.classList.add('slide-area'); 304 el.classList.add('slide-area');
281 el.id = 'prev-slide-area'; 305 el.id = 'prev-slide-area';
282 el.addEventListener('click', this.prevSlide.bind(this), false); 306 el.addEventListener('click', this.prevSlide.bind(this), false);
283 slides.appendChild(el); 307 this.container.appendChild(el);
284 308
285 var el = document.createElement('div'); 309 var el = document.createElement('div');
286 el.classList.add('slide-area'); 310 el.classList.add('slide-area');
287 el.id = 'next-slide-area'; 311 el.id = 'next-slide-area';
288 el.addEventListener('click', this.nextSlide.bind(this), false); 312 el.addEventListener('click', this.nextSlide.bind(this), false);
289 slides.appendChild(el); 313 this.container.appendChild(el);
290 } 314 }
291 315
292 if (Modernizr.touch && (!!!('enableTouch' in settings) || 316 if (Modernizr.touch && (!!!('enableTouch' in settings) ||
293 settings.enableTouch)) { 317 settings.enableTouch)) {
294 var self = this; 318 var self = this;
295 319
296 var hammer = new Hammer(slides); 320 var hammer = new Hammer(this.container);
297 hammer.ondragend = function(e) { 321 hammer.ondragend = function(e) {
298 if (e.direction == 'right' || e.direction == 'down') { 322 if (e.direction == 'right' || e.direction == 'down') {
299 self.prevSlide(); 323 self.prevSlide();
@@ -320,7 +344,7 @@ SlideDeck.prototype.addFonts_ = function(fonts) {
320 * @private 344 * @private
321 */ 345 */
322SlideDeck.prototype.buildNextItem_ = function() { 346SlideDeck.prototype.buildNextItem_ = function() {
323 var slide = this.slides_[this.curSlide_]; 347 var slide = this.slides[this.curSlide_];
324 var toBuild = slide.querySelector('.to-build'); 348 var toBuild = slide.querySelector('.to-build');
325 var built = slide.querySelector('.build-current'); 349 var built = slide.querySelector('.build-current');
326 350
@@ -389,7 +413,7 @@ SlideDeck.prototype.nextSlide = function(opt_dontPush) {
389 return; 413 return;
390 } 414 }
391 415
392 if (this.curSlide_ < this.slides_.length - 1) { 416 if (this.curSlide_ < this.slides.length - 1) {
393 var bodyClassList = document.body.classList; 417 var bodyClassList = document.body.classList;
394 bodyClassList.remove('highlight-code'); 418 bodyClassList.remove('highlight-code');
395 419
@@ -445,7 +469,7 @@ SlideDeck.prototype.updateSlides_ = function(opt_dontPush) {
445 var dontPush = opt_dontPush || false; 469 var dontPush = opt_dontPush || false;
446 470
447 var curSlide = this.curSlide_; 471 var curSlide = this.curSlide_;
448 for (var i = 0; i < this.slides_.length; ++i) { 472 for (var i = 0; i < this.slides.length; ++i) {
449 switch (i) { 473 switch (i) {
450 case curSlide - 2: 474 case curSlide - 2:
451 this.updateSlideClass_(i, 'far-past'); 475 this.updateSlideClass_(i, 'far-past');
@@ -471,11 +495,18 @@ SlideDeck.prototype.updateSlides_ = function(opt_dontPush) {
471 this.triggerSlideEvent('slideleave', this.prevSlide_); 495 this.triggerSlideEvent('slideleave', this.prevSlide_);
472 this.triggerSlideEvent('slideenter', curSlide); 496 this.triggerSlideEvent('slideenter', curSlide);
473 497
474 window.setTimeout(this.disableSlideFrames_.bind(this, curSlide - 2), 301); 498// window.setTimeout(this.disableSlideFrames_.bind(this, curSlide - 2), 301);
499//
500// this.enableSlideFrames_(curSlide - 1); // Previous slide.
501// this.enableSlideFrames_(curSlide + 1); // Current slide.
502// this.enableSlideFrames_(curSlide + 2); // Next slide.
475 503
476 this.enableSlideFrames_(curSlide - 1); 504 // Enable current slide's iframes (needed for page loat at current slide).
477 this.enableSlideFrames_(curSlide + 1); 505 this.enableSlideFrames_(curSlide + 1);
478 this.enableSlideFrames_(curSlide + 2); 506
507 // No way to tell when all slide transitions + auto builds are done.
508 // Give ourselves a good buffer to preload the next slide's iframes.
509 window.setTimeout(this.enableSlideFrames_.bind(this, curSlide + 2), 1000);
479 510
480 /*if (isChromeVoxActive()) { 511 /*if (isChromeVoxActive()) {
481 speakAndSyncToNode(slideEls[curSlide]); 512 speakAndSyncToNode(slideEls[curSlide]);
@@ -489,7 +520,7 @@ SlideDeck.prototype.updateSlides_ = function(opt_dontPush) {
489 * @param {number} slideNo 520 * @param {number} slideNo
490 */ 521 */
491SlideDeck.prototype.enableSlideFrames_ = function(slideNo) { 522SlideDeck.prototype.enableSlideFrames_ = function(slideNo) {
492 var el = this.slides_[slideNo - 1]; 523 var el = this.slides[slideNo - 1];
493 if (!el) { 524 if (!el) {
494 return; 525 return;
495 } 526 }
@@ -516,7 +547,7 @@ SlideDeck.prototype.enableFrame_ = function(frame) {
516 * @param {number} slideNo 547 * @param {number} slideNo
517 */ 548 */
518SlideDeck.prototype.disableSlideFrames_ = function(slideNo) { 549SlideDeck.prototype.disableSlideFrames_ = function(slideNo) {
519 var el = this.slides_[slideNo - 1]; 550 var el = this.slides[slideNo - 1];
520 if (!el) { 551 if (!el) {
521 return; 552 return;
522 } 553 }
@@ -540,10 +571,10 @@ SlideDeck.prototype.disableFrame_ = function(frame) {
540 * @param {number} slideNo 571 * @param {number} slideNo
541 */ 572 */
542SlideDeck.prototype.getSlideEl_ = function(no) { 573SlideDeck.prototype.getSlideEl_ = function(no) {
543 if ((no < 0) || (no >= this.slides_.length)) { 574 if ((no < 0) || (no >= this.slides.length)) {
544 return null; 575 return null;
545 } else { 576 } else {
546 return this.slides_[no]; 577 return this.slides[no];
547 } 578 }
548};