diff options
author | Pacien TRAN-GIRARD | 2014-05-12 21:40:42 +0200 |
---|---|---|
committer | Pacien TRAN-GIRARD | 2014-05-12 21:40:42 +0200 |
commit | 765d63c299db8b75217b578b3a295fbce5d7abd3 (patch) | |
tree | b055b96d69467a696c5a062c69b8886b8c6ea4b5 /js/slide-deck.js | |
parent | a94a99dad32b86e04d70f18f5b49401e43fc0a1d (diff) | |
download | io-slides-remote-765d63c299db8b75217b578b3a295fbce5d7abd3.tar.gz |
Import and format code
Diffstat (limited to 'js/slide-deck.js')
-rw-r--r-- | js/slide-deck.js | 1229 |
1 files changed, 635 insertions, 594 deletions
diff --git a/js/slide-deck.js b/js/slide-deck.js index d792ddd..67aa4f2 100644 --- a/js/slide-deck.js +++ b/js/slide-deck.js | |||
@@ -3,32 +3,32 @@ | |||
3 | * @authors Eric Bidelman | 3 | * @authors Eric Bidelman |
4 | * @fileoverview TODO | 4 | * @fileoverview TODO |
5 | */ | 5 | */ |
6 | document.cancelFullScreen = document.webkitCancelFullScreen || | 6 | document.cancelFullScreen = document.webkitCancelFullScreen |
7 | document.mozCancelFullScreen; | 7 | || document.mozCancelFullScreen; |
8 | 8 | ||
9 | /** | 9 | /** |
10 | * @constructor | 10 | * @constructor |
11 | */ | 11 | */ |
12 | function SlideDeck(el) { | 12 | function SlideDeck(el) { |
13 | this.curSlide_ = 0; | 13 | this.curSlide_ = 0; |
14 | this.prevSlide_ = 0; | 14 | this.prevSlide_ = 0; |
15 | this.config_ = null; | 15 | this.config_ = null; |
16 | this.container = el || document.querySelector('slides'); | 16 | this.container = el || document.querySelector('slides'); |
17 | this.slides = []; | 17 | this.slides = []; |
18 | this.controller = null; | 18 | this.controller = null; |
19 | 19 | ||
20 | this.getCurrentSlideFromHash_(); | 20 | this.getCurrentSlideFromHash_(); |
21 | 21 | ||
22 | // Call this explicitly. Modernizr.load won't be done until after DOM load. | 22 | // Call this explicitly. Modernizr.load won't be done until after DOM load. |
23 | this.onDomLoaded_.bind(this)(); | 23 | this.onDomLoaded_.bind(this)(); |
24 | } | 24 | } |
25 | 25 | ||
26 | /** | 26 | /** |
27 | * @const | 27 | * @const |
28 | * @private | 28 | * @private |
29 | */ | 29 | */ |
30 | SlideDeck.prototype.SLIDE_CLASSES_ = [ | 30 | SlideDeck.prototype.SLIDE_CLASSES_ = [ 'far-past', 'past', 'current', 'next', |
31 | 'far-past', 'past', 'current', 'next', 'far-next']; | 31 | 'far-next' ]; |
32 | 32 | ||
33 | /** | 33 | /** |
34 | * @const | 34 | * @const |
@@ -40,744 +40,785 @@ SlideDeck.prototype.CSS_DIR_ = 'theme/css/'; | |||
40 | * @private | 40 | * @private |
41 | */ | 41 | */ |
42 | SlideDeck.prototype.getCurrentSlideFromHash_ = function() { | 42 | SlideDeck.prototype.getCurrentSlideFromHash_ = function() { |
43 | var slideNo = parseInt(document.location.hash.substr(1)); | 43 | var slideNo = parseInt(document.location.hash.substr(1)); |
44 | 44 | ||
45 | if (slideNo) { | 45 | if (slideNo) { |
46 | this.curSlide_ = slideNo - 1; | 46 | this.curSlide_ = slideNo - 1; |
47 | } else { | 47 | } else { |
48 | this.curSlide_ = 0; | 48 | this.curSlide_ = 0; |
49 | } | 49 | } |
50 | }; | 50 | }; |
51 | 51 | ||
52 | /** | 52 | /** |
53 | * @param {number} slideNo | 53 | * @param {number} |
54 | * slideNo | ||
54 | */ | 55 | */ |
55 | SlideDeck.prototype.loadSlide = function(slideNo) { | 56 | SlideDeck.prototype.loadSlide = function(slideNo) { |
56 | if (slideNo) { | 57 | if (slideNo) { |
57 | this.curSlide_ = slideNo - 1; | 58 | this.curSlide_ = slideNo - 1; |
58 | this.updateSlides_(); | 59 | this.updateSlides_(); |
59 | } | 60 | } |
60 | }; | 61 | }; |
61 | 62 | ||
62 | /** | 63 | /** |
63 | * @private | 64 | * @private |
64 | */ | 65 | */ |
65 | SlideDeck.prototype.onDomLoaded_ = function(e) { | 66 | SlideDeck.prototype.onDomLoaded_ = function(e) { |
66 | document.body.classList.add('loaded'); // Add loaded class for templates to use. | 67 | document.body.classList.add('loaded'); // Add loaded class for templates to |
67 | 68 | // use. | |
68 | this.slides = this.container.querySelectorAll('slide:not([hidden]):not(.hidden):not(.backdrop)'); | 69 | |
69 | 70 | this.slides = this.container | |
70 | // If we're on a smartphone, apply special sauce. | 71 | .querySelectorAll('slide:not([hidden]):not(.hidden):not(.backdrop)'); |
71 | if (Modernizr.mq('only screen and (max-device-width: 480px)')) { | 72 | |
72 | // var style = document.createElement('link'); | 73 | // If we're on a smartphone, apply special sauce. |
73 | // style.rel = 'stylesheet'; | 74 | if (Modernizr.mq('only screen and (max-device-width: 480px)')) { |
74 | // style.type = 'text/css'; | 75 | // var style = document.createElement('link'); |
75 | // style.href = this.CSS_DIR_ + 'phone.css'; | 76 | // style.rel = 'stylesheet'; |
76 | // document.querySelector('head').appendChild(style); | 77 | // style.type = 'text/css'; |
77 | 78 | // style.href = this.CSS_DIR_ + 'phone.css'; | |
78 | // No need for widescreen layout on a phone. | 79 | // document.querySelector('head').appendChild(style); |
79 | this.container.classList.remove('layout-widescreen'); | 80 | |
80 | } | 81 | // No need for widescreen layout on a phone. |
81 | 82 | this.container.classList.remove('layout-widescreen'); | |
82 | this.loadConfig_(SLIDE_CONFIG); | 83 | } |
83 | this.addEventListeners_(); | 84 | |
84 | this.updateSlides_(); | 85 | this.loadConfig_(SLIDE_CONFIG); |
85 | 86 | this.addEventListeners_(); | |
86 | // Add slide numbers and total slide count metadata to each slide. | 87 | this.updateSlides_(); |
87 | var that = this; | 88 | |
88 | for (var i = 0, slide; slide = this.slides[i]; ++i) { | 89 | // Add slide numbers and total slide count metadata to each slide. |
89 | slide.dataset.slideNum = i + 1; | 90 | var that = this; |
90 | slide.dataset.totalSlides = this.slides.length; | 91 | for (var i = 0, slide; slide = this.slides[i]; ++i) { |
91 | 92 | slide.dataset.slideNum = i + 1; | |
92 | slide.addEventListener('click', function(e) { | 93 | slide.dataset.totalSlides = this.slides.length; |
93 | if (document.body.classList.contains('overview')) { | 94 | |
94 | that.loadSlide(this.dataset.slideNum); | 95 | slide.addEventListener('click', function(e) { |
95 | e.preventDefault(); | 96 | if (document.body.classList.contains('overview')) { |
96 | window.setTimeout(function() { | 97 | that.loadSlide(this.dataset.slideNum); |
97 | that.toggleOverview(); | 98 | e.preventDefault(); |
98 | }, 500); | 99 | window.setTimeout(function() { |
99 | } | 100 | that.toggleOverview(); |
100 | }, false); | 101 | }, 500); |
101 | } | 102 | } |
102 | 103 | }, false); | |
103 | // Note: this needs to come after addEventListeners_(), which adds a | 104 | } |
104 | // 'keydown' listener that this controller relies on. | 105 | |
105 | 106 | // Note: this needs to come after addEventListeners_(), which adds a | |
106 | // Modernizr.touch isn't a sufficient check for devices that support both | 107 | // 'keydown' listener that this controller relies on. |
107 | // touch and mouse. Create the controller in all cases. | 108 | |
108 | // // Also, no need to set this up if we're on mobile. | 109 | // Modernizr.touch isn't a sufficient check for devices that support both |
109 | // if (!Modernizr.touch) { | 110 | // touch and mouse. Create the controller in all cases. |
110 | this.controller = new SlideController(this); | 111 | // // Also, no need to set this up if we're on mobile. |
111 | if (this.controller.isPopup) { | 112 | // if (!Modernizr.touch) { |
112 | document.body.classList.add('popup'); | 113 | this.controller = new SlideController(this); |
113 | } | 114 | if (this.controller.isPopup) { |
114 | //} | 115 | document.body.classList.add('popup'); |
116 | } | ||
117 | // } | ||
115 | }; | 118 | }; |
116 | 119 | ||
117 | /** | 120 | /** |
118 | * @private | 121 | * @private |
119 | */ | 122 | */ |
120 | SlideDeck.prototype.addEventListeners_ = function() { | 123 | SlideDeck.prototype.addEventListeners_ = function() { |
121 | document.addEventListener('keydown', this.onBodyKeyDown_.bind(this), false); | 124 | document.addEventListener('keydown', this.onBodyKeyDown_.bind(this), false); |
122 | window.addEventListener('popstate', this.onPopState_.bind(this), false); | 125 | window.addEventListener('popstate', this.onPopState_.bind(this), false); |
123 | 126 | ||
124 | // var transEndEventNames = { | 127 | // var transEndEventNames = { |
125 | // 'WebkitTransition': 'webkitTransitionEnd', | 128 | // 'WebkitTransition': 'webkitTransitionEnd', |
126 | // 'MozTransition': 'transitionend', | 129 | // 'MozTransition': 'transitionend', |
127 | // 'OTransition': 'oTransitionEnd', | 130 | // 'OTransition': 'oTransitionEnd', |
128 | // 'msTransition': 'MSTransitionEnd', | 131 | // 'msTransition': 'MSTransitionEnd', |
129 | // 'transition': 'transitionend' | 132 | // 'transition': 'transitionend' |
130 | // }; | 133 | // }; |
131 | // | 134 | // |
132 | // // Find the correct transitionEnd vendor prefix. | 135 | // // Find the correct transitionEnd vendor prefix. |
133 | // window.transEndEventName = transEndEventNames[ | 136 | // window.transEndEventName = transEndEventNames[ |
134 | // Modernizr.prefixed('transition')]; | 137 | // Modernizr.prefixed('transition')]; |
135 | // | 138 | // |
136 | // // When slides are done transitioning, kickoff loading iframes. | 139 | // // When slides are done transitioning, kickoff loading iframes. |
137 | // // Note: we're only looking at a single transition (on the slide). This | 140 | // // Note: we're only looking at a single transition (on the slide). This |
138 | // // doesn't include autobuilds the slides may have. Also, if the slide | 141 | // // doesn't include autobuilds the slides may have. Also, if the slide |
139 | // // transitions on multiple properties (e.g. not just 'all'), this doesn't | 142 | // // transitions on multiple properties (e.g. not just 'all'), this doesn't |
140 | // // handle that case. | 143 | // // handle that case. |
141 | // this.container.addEventListener(transEndEventName, function(e) { | 144 | // this.container.addEventListener(transEndEventName, function(e) { |
142 | // this.enableSlideFrames_(this.curSlide_); | 145 | // this.enableSlideFrames_(this.curSlide_); |
143 | // }.bind(this), false); | 146 | // }.bind(this), false); |
144 | 147 | ||
145 | // document.addEventListener('slideenter', function(e) { | 148 | // document.addEventListener('slideenter', function(e) { |
146 | // var slide = e.target; | 149 | // var slide = e.target; |
147 | // window.setTimeout(function() { | 150 | // window.setTimeout(function() { |
148 | // this.enableSlideFrames_(e.slideNumber); | 151 | // this.enableSlideFrames_(e.slideNumber); |
149 | // this.enableSlideFrames_(e.slideNumber + 1); | 152 | // this.enableSlideFrames_(e.slideNumber + 1); |
150 | // }.bind(this), 300); | 153 | // }.bind(this), 300); |
151 | // }.bind(this), false); | 154 | // }.bind(this), false); |
152 | }; | 155 | }; |
153 | 156 | ||
154 | /** | 157 | /** |
155 | * @private | 158 | * @private |