diff options
Diffstat (limited to 'js/slide-deck.js')
-rw-r--r-- | js/slide-deck.js | 116 |
1 files changed, 88 insertions, 28 deletions
diff --git a/js/slide-deck.js b/js/slide-deck.js index a5308b9..50b9dc5 100644 --- a/js/slide-deck.js +++ b/js/slide-deck.js | |||
@@ -1,5 +1,6 @@ | |||
1 | /** | 1 | /** |
2 | * @authors TODO | 2 | * @authors Luke Mahe |
3 | * @authors Eric Bidelman | ||
3 | * @fileoverview TODO | 4 | * @fileoverview TODO |
4 | */ | 5 | */ |
5 | document.cancelFullScreen = document.webkitCancelFullScreen || | 6 | document.cancelFullScreen = document.webkitCancelFullScreen || |
@@ -49,6 +50,16 @@ SlideDeck.prototype.getCurrentSlideFromHash_ = function() { | |||
49 | }; | 50 | }; |
50 | 51 | ||
51 | /** | 52 | /** |
53 | * @param {number} slideNo | ||
54 | */ | ||
55 | SlideDeck.prototype.loadSlide = function(slideNo) { | ||
56 | if (slideNo) { | ||
57 | this.curSlide_ = slideNo - 1; | ||
58 | this.updateSlides_(); | ||
59 | } | ||
60 | }; | ||
61 | |||
62 | /** | ||
52 | * @private | 63 | * @private |
53 | */ | 64 | */ |
54 | SlideDeck.prototype.onDomLoaded_ = function(e) { | 65 | SlideDeck.prototype.onDomLoaded_ = function(e) { |
@@ -73,9 +84,20 @@ SlideDeck.prototype.onDomLoaded_ = function(e) { | |||
73 | this.updateSlides_(); | 84 | this.updateSlides_(); |
74 | 85 | ||
75 | // Add slide numbers and total slide count metadata to each slide. | 86 | // Add slide numbers and total slide count metadata to each slide. |
87 | var that = this; | ||
76 | for (var i = 0, slide; slide = this.slides[i]; ++i) { | 88 | for (var i = 0, slide; slide = this.slides[i]; ++i) { |
77 | slide.dataset.slideNum = i + 1; | 89 | slide.dataset.slideNum = i + 1; |
78 | slide.dataset.totalSlides = this.slides.length; | 90 | slide.dataset.totalSlides = this.slides.length; |
91 | |||
92 | slide.addEventListener('click', function(e) { | ||
93 | if (document.body.classList.contains('overview')) { | ||
94 | that.loadSlide(this.dataset.slideNum); | ||
95 | e.preventDefault(); | ||
96 | window.setTimeout(function() { | ||
97 | that.toggleOverview(); | ||
98 | }, 500); | ||
99 | } | ||
100 | }, false); | ||
79 | } | 101 | } |
80 | 102 | ||
81 | // Note: this needs to come after addEventListeners_(), which adds a | 103 | // Note: this needs to come after addEventListeners_(), which adds a |
@@ -152,6 +174,12 @@ SlideDeck.prototype.onBodyKeyDown_ = function(e) { | |||
152 | } | 174 | } |
153 | 175 | ||
154 | switch (e.keyCode) { | 176 | switch (e.keyCode) { |
177 | case 13: // Enter | ||
178 | if (document.body.classList.contains('overview')) { | ||
179 | this.toggleOverview(); | ||
180 | } | ||
181 | break; | ||
182 | |||
155 | case 39: // right arrow | 183 | case 39: // right arrow |
156 | case 32: // space | 184 | case 32: // space |
157 | case 34: // PgDn | 185 | case 34: // PgDn |
@@ -167,20 +195,12 @@ SlideDeck.prototype.onBodyKeyDown_ = function(e) { | |||
167 | break; | 195 | break; |
168 | 196 | ||
169 | case 40: // down arrow | 197 | case 40: // down arrow |
170 | //if (this.isChromeVoxActive()) { | 198 | this.nextSlide(); |
171 | // speakNextItem(); | ||
172 | //} else { | ||
173 | this.nextSlide(); | ||
174 | //} | ||
175 | e.preventDefault(); | 199 | e.preventDefault(); |
176 | break; | 200 | break; |
177 | 201 | ||
178 | case 38: // up arrow | 202 | case 38: // up arrow |
179 | //if (this.isChromeVoxActive()) { | 203 | this.prevSlide(); |
180 | // speakPrevItem(); | ||
181 | //} else { | ||
182 | this.prevSlide(); | ||
183 | //} | ||
184 | e.preventDefault(); | 204 | e.preventDefault(); |
185 | break; | 205 | break; |
186 | 206 | ||
@@ -188,6 +208,10 @@ SlideDeck.prototype.onBodyKeyDown_ = function(e) { | |||
188 | document.body.classList.toggle('highlight-code'); | 208 | document.body.classList.toggle('highlight-code'); |
189 | break; | 209 | break; |
190 | 210 | ||
211 | case 79: // O: Toggle overview | ||
212 | this.toggleOverview(); | ||
213 | break; | ||
214 | |||
191 | case 80: // P | 215 | case 80: // P |
192 | if (this.controller && this.controller.isPopup) { | 216 | if (this.controller && this.controller.isPopup) { |
193 | document.body.classList.toggle('with-notes'); | 217 | document.body.classList.toggle('with-notes'); |
@@ -203,6 +227,10 @@ SlideDeck.prototype.onBodyKeyDown_ = function(e) { | |||
203 | case 27: // ESC: Hide notes and highlighting | 227 | case 27: // ESC: Hide notes and highlighting |
204 | document.body.classList.remove('with-notes'); | 228 | document.body.classList.remove('with-notes'); |
205 | document.body.classList.remove('highlight-code'); | 229 | document.body.classList.remove('highlight-code'); |
230 | |||
231 | if (document.body.classList.contains('overview')) { | ||
232 | this.toggleOverview(); | ||
233 | } | ||
206 | break; | 234 | break; |
207 | 235 | ||
208 | case 70: // F: Toggle fullscreen | 236 | case 70: // F: Toggle fullscreen |
@@ -230,6 +258,27 @@ SlideDeck.prototype.onBodyKeyDown_ = function(e) { | |||
230 | }; | 258 | }; |
231 | 259 | ||
232 | /** | 260 | /** |
261 | * | ||
262 | */ | ||
263 | SlideDeck.prototype.focusOverview_ = function() { | ||
264 | var overview = document.body.classList.contains('overview'); | ||
265 | |||
266 | for (var i = 0, slide; slide = this.slides[i]; i++) { | ||
267 | slide.style[Modernizr.prefixed('transform')] = overview ? | ||
268 | 'translateZ(-2500px) translate(' + (( i - this.curSlide_ ) * 105) + | ||
269 | '%, 0%)' : ''; | ||
270 | } | ||
271 | }; | ||
272 | |||
273 | /** | ||
274 | */ | ||
275 | SlideDeck.prototype.toggleOverview = function() { | ||
276 | document.body.classList.toggle('overview'); | ||
277 | |||
278 | this.focusOverview_(); | ||
279 | }; | ||
280 | |||
281 | /** | ||
233 | * @private | 282 | * @private |
234 | */ | 283 | */ |
235 | SlideDeck.prototype.loadConfig_ = function(config) { | 284 | SlideDeck.prototype.loadConfig_ = function(config) { |
@@ -276,34 +325,46 @@ SlideDeck.prototype.loadConfig_ = function(config) { | |||
276 | 325 | ||
277 | if (this.config_.presenters) { | 326 | if (this.config_.presenters) { |
278 | var presenters = this.config_.presenters; | 327 | var presenters = this.config_.presenters; |
328 | var dataConfigContact = document.querySelector('[data-config-contact]'); | ||
279 | 329 | ||
280 | var html = []; | 330 | var html = []; |
281 | if (presenters.length == 1) { | 331 | if (presenters.length == 1) { |
282 | var p = presenters[0] | 332 | var p = presenters[0]; |
283 | 333 | ||
284 | html = [p.name, p.company].join('<br>'); | 334 | html = [p.name, p.company].join('<br>'); |
285 | 335 | ||
286 | var gplus = p.gplus ? '<span>g+</span><a href="' + p.gplus + | 336 | var gplus = p.gplus ? '<span>g+</span><a href="' + p.gplus + |
287 | '">' + p.gplus.replace('http://', '') + '</a>' : ''; | 337 | '">' + p.gplus.replace(/https?:\/\//, '') + '</a>' : ''; |
288 | 338 | ||
289 | var twitter = p.twitter ? '<span>twitter</span>' + | 339 | var twitter = p.twitter ? '<span>twitter</span>' + |
290 | '<a href="http://twitter.com/' + p.twitter + '">' + | 340 | '<a href="http://twitter.com/' + p.twitter + '">' + |
291 | p.twitter + '</a>' : ''; | 341 | p.twitter + '</a>' : ''; |
292 | 342 | ||
293 | var www = p.www ? '<span>www</span><a href="' + p.www + | 343 | var www = p.www ? '<span>www</span><a href="' + p.www + |
294 | '">' + p.www.replace('http://', '') + '</a>' : ''; | 344 | '">' + p.www.replace(/https?:\/\//, '') + '</a>' : ''; |
295 | 345 | ||
296 | var html2 = [gplus, twitter, www].join('<br>'); | 346 | var github = p.github ? '<span>github</span><a href="' + p.github + |
347 | '">' + p.github.replace(/https?:\/\//, '') + '</a>' : ''; | ||
297 | 348 | ||
298 | document.querySelector('[data-config-contact]').innerHTML = html2; | 349 | var html2 = [gplus, twitter, www, github].join('<br>'); |
350 | |||
351 | if (dataConfigContact) { | ||
352 | dataConfigContact.innerHTML = html2; | ||
353 | } | ||
299 | } else { | 354 | } else { |
300 | for (var i = 0, p; p = presenters[i]; ++i) { | 355 | for (var i = 0, p; p = presenters[i]; ++i) { |
301 | html.push(p.name + ' - ' + p.company); | 356 | html.push(p.name + ' - ' + p.company); |
302 | } | 357 | } |
303 | html = html.join('<br>'); | 358 | html = html.join('<br>'); |
359 | if (dataConfigContact) { | ||
360 | dataConfigContact.innerHTML = html; | ||
361 | } | ||
304 | } | 362 | } |
305 | 363 | ||
306 | document.querySelector('[data-config-presenter]').innerHTML = html; | 364 | var dataConfigPresenter = document.querySelector('[data-config-presenter]'); |
365 | if (dataConfigPresenter) { | ||
366 | document.querySelector('[data-config-presenter]').innerHTML = html; | ||
367 | } | ||
307 | } | 368 | } |
308 | 369 | ||
309 | /* Left/Right tap areas. Default to including. */ | 370 | /* Left/Right tap areas. Default to including. */ |
@@ -349,7 +410,8 @@ SlideDeck.prototype.loadConfig_ = function(config) { | |||
349 | SlideDeck.prototype.addFonts_ = function(fonts) { | 410 | SlideDeck.prototype.addFonts_ = function(fonts) { |
350 | var el = document.createElement('link'); | 411 | var el = document.createElement('link'); |
351 | el.rel = 'stylesheet'; | 412 | el.rel = 'stylesheet'; |
352 | el.href = 'http://fonts.googleapis.com/css?family=' + fonts.join('|') + '&v2'; | 413 | el.href = ('https:' == document.location.protocol ? 'https' : 'http') + |
414 | '://fonts.googleapis.com/css?family=' + fonts.join('|') + '&v2'; | ||
353 | document.querySelector('head').appendChild(el); | 415 | document.querySelector('head').appendChild(el); |
354 | }; | 416 | }; |
355 | 417 | ||
@@ -379,10 +441,6 @@ SlideDeck.prototype.buildNextItem_ = function() { | |||
379 | toBuild.classList.remove('to-build'); | 441 | toBuild.classList.remove('to-build'); |
380 | toBuild.classList.add('build-current'); | 442 | toBuild.classList.add('build-current'); |
381 | 443 | ||
382 | /*if (isChromeVoxActive()) { | ||
383 | speakAndSyncToNode(toBuild); | ||
384 | }*/ | ||
385 | |||
386 | return true; | 444 | return true; |
387 | }; | 445 | }; |
388 | 446 | ||
@@ -412,7 +470,7 @@ SlideDeck.prototype.prevSlide = function(opt_dontPush) { | |||
412 | * @param {boolean=} opt_dontPush | 470 | * @param {boolean=} opt_dontPush |