From 64c8d6328a9d0e4fe68a5899e3e8710342f3b7dd Mon Sep 17 00:00:00 2001 From: Eric Bidelman Date: Tue, 17 Apr 2012 18:59:07 -0700 Subject: Basic presenter mode working --- js/slide-controller.js | 54 +++++++ js/slides.js | 44 +++-- slide_config.js | 11 +- template.html | 23 ++- theme/css/default.css | 416 +++++++++++++++++++++++++++--------------------- theme/sass/_base.scss | 9 +- theme/sass/default.scss | 71 +++++++-- theme/sass/phone.scss | 4 +- 8 files changed, 408 insertions(+), 224 deletions(-) create mode 100644 js/slide-controller.js diff --git a/js/slide-controller.js b/js/slide-controller.js new file mode 100644 index 0000000..e2f8bf2 --- /dev/null +++ b/js/slide-controller.js @@ -0,0 +1,54 @@ +function SlideController(slideDeck) { + this.deck_ = slideDeck; + this.win_ = null; + + window.addEventListener('message', this.onMessage_.bind(this), false); + + // Close popups if we reload the main window. + window.addEventListener('beforeunload', function(e) { + this.win_.close() + }.bind(this), false); + + // Only open one new popup. The recursion popup opening! + if (!window.opener) { + this.win_ = window.open(location.href, 'mywindow'); + } +} + +SlideController.MOVE_LEFT = -1; +SlideController.MOVE_RIGHT = 1; + +SlideController.prototype.onMessage_ = function(e) { + var data = e.data; + + // It would be dope if FF implemented location.origin. + if (e.origin != location.protocol + '//' + location.host) { + alert('Someone tried to postMessage from an unknown origin'); + return; + } + + if (e.source.location.hostname != 'localhost') { + alert('Someone tried to postMessage from an unknown origin'); + return; + } + + if ('slideDirection' in data) { + if (data.slideDirection == SlideController.MOVE_LEFT) { + this.deck_.prevSlide(); + } else { + this.deck_.nextSlide(); + } + } +}; + +SlideController.prototype.sendMsg = function(msg) { + // // Send message to popup window. + // if (this.win_) { + // this.win_.postMessage(msg, location.protocol + '//' + location.host); + // } + // Send message to main window. + if (window.opener) { + // It would be dope if FF implemented location.origin. + window.opener.postMessage(msg, location.protocol + '//' + location.host); + } +}; diff --git a/js/slides.js b/js/slides.js index 20bb1bd..0faf06b 100644 --- a/js/slides.js +++ b/js/slides.js @@ -13,6 +13,7 @@ function SlideDeck() { this.prevSlide_ = 0; this.slides = []; this.config_ = null; + this.controller_ = null; this.getCurrentSlideFromHash_(); @@ -52,6 +53,9 @@ SlideDeck.prototype.getCurrentSlideFromHash_ = function() { * @private */ SlideDeck.prototype.onDomLoaded_ = function(e) { + // Fade in deck. + document.body.classList.add('loaded'); + this.slides_ = document.querySelectorAll('slide:not([hidden]):not(.backdrop)'); // If we're on a smartphone device, load phone.css. @@ -148,11 +152,11 @@ SlideDeck.prototype.onBodyKeyDown_ = function(e) { document.body.classList.toggle('highlight-code'); break; - case 78: // N + case 80: // P // If this slide contains notes, toggle them. - if (this.slides_[this.curSlide_].querySelector('.note')) { + //if (this.slides_[this.curSlide_].querySelector('.note')) { document.body.classList.toggle('with-notes'); - } + //} break; case 27: // ESC @@ -283,6 +287,10 @@ SlideDeck.prototype.loadConfig_ = function(config) { } }; } + + if (!!('enableSpeakerNotes' in settings) && settings.enableSpeakerNotes) { + this.controller_ = new SlideController(this); + } }; /** @@ -335,10 +343,17 @@ SlideDeck.prototype.buildNextItem_ = function() { */ SlideDeck.prototype.prevSlide = function(opt_dontPush) { if (this.curSlide_ > 0) { - // Toggle off speaker notes and/or highlighted code if they're showing. - var bodyClassList = document.body.classList; - bodyClassList.remove('with-notes'); - bodyClassList.remove('highlight-code'); + // Toggle off speaker notes and/or highlighted code if they're showing + // when we advanced. If we're the speaker notes popup, leave this put. + if (this.controller_ && !window.opener) { + var bodyClassList = document.body.classList; + bodyClassList.remove('with-notes'); + bodyClassList.remove('highlight-code'); + } + + if (this.controller_) { + this.controller_.sendMsg({slideDirection: SlideController.MOVE_LEFT}); + } this.prevSlide_ = this.curSlide_; this.curSlide_--; @@ -352,15 +367,22 @@ SlideDeck.prototype.prevSlide = function(opt_dontPush) { */ SlideDeck.prototype.nextSlide = function(opt_dontPush) { + if (this.controller_) { + this.controller_.sendMsg({slideDirection: SlideController.MOVE_RIGHT}); + } + if (this.buildNextItem_()) { return; } if (this.curSlide_ < this.slides_.length - 1) { - // Toggle off speaker notes and/or highlighted code if they're showing. - var bodyClassList = document.body.classList; - bodyClassList.remove('with-notes'); - bodyClassList.remove('highlight-code'); + // Toggle off speaker notes and/or highlighted code if they're showing + // when we advanced. If we're the speaker notes popup, leave this put. + if (this.controller_ && !window.opener) { + var bodyClassList = document.body.classList; + bodyClassList.remove('with-notes'); + bodyClassList.remove('highlight-code'); + } this.prevSlide_ = this.curSlide_; this.curSlide_++; diff --git a/slide_config.js b/slide_config.js index e8ff552..eab9ff8 100644 --- a/slide_config.js +++ b/slide_config.js @@ -4,11 +4,12 @@ var SLIDE_CONFIG = { title: 'Title Goes Here
Up To Two Lines', subtitle: 'Subtitle Goes Here', //theme: ['mytheme'], - hashtag: '#html5', //TODO - useBuilds: true, - usePrettify: true, - enableSideAreas: true, - enableTouch: true, // TODO: base this on media query instead. + //hashtag: '#html5', //TODO + useBuilds: true, // Default: true + usePrettify: true, // Default: true + enableSideAreas: true, // Default: true + enableTouch: true, // Default: true if device supports touch. + //enableSpeakerNotes: true, // Default: false analytics: 'UA-XXXXXXXX-1', favIcon: 'http://bleedinghtml5.appspot.com/images/chrome-logo-tiny2.png', onLoad: null, // TODO. function to call onload diff --git a/template.html b/template.html index 6bfb029..24dd7b8 100644 --- a/template.html +++ b/template.html @@ -13,11 +13,13 @@ URL: https://code.google.com/p/io-2012-slides + + - + @@ -64,7 +66,7 @@ URL: https://code.google.com/p/io-2012-slides

A list where items build:

Another list, but items fade as they build:

@@ -155,13 +157,23 @@ function helloWorld(world) {

Slide with Speaker Notes

- Press 'n' to show speaker notes on slides that define them. + Press 'p' to rock presenter mode.
@@ -366,14 +378,13 @@ function helloWorld(world) { - + -