aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/slides.js25
-rw-r--r--template.html28
-rw-r--r--theme/css/default.css289
-rw-r--r--theme/sass/_base.scss2
-rw-r--r--theme/sass/default.scss86
5 files changed, 228 insertions, 202 deletions
diff --git a/js/slides.js b/js/slides.js
index c6fe1ed..f6d5cc6 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -3,6 +3,7 @@
3 */ 3 */
4function SlideDeck() { 4function SlideDeck() {
5 this.curSlide_ = 0; 5 this.curSlide_ = 0;
6 this.prevSlide_ = 0;
6 this.slides = []; 7 this.slides = [];
7 this.config_ = null; 8 this.config_ = null;
8 9
@@ -63,10 +64,15 @@ SlideDeck.prototype.addEventListeners_ = function() {
63 false); 64 false);
64 window.addEventListener('popstate', this.handlePopState_.bind(this), false); 65 window.addEventListener('popstate', this.handlePopState_.bind(this), false);
65 66
66 var self = this; 67 // Google Developer icon gray bar should reanimate on every slide enter.
67 var titleSlide = document.querySelector('#title-slide'); 68 var titleSlide = document.querySelector('#title-slide');
68 titleSlide.addEventListener('slideenter', function(e) { 69 titleSlide.addEventListener('slideenter', function(e) {
69 self.buildNextItem_(); 70 this.buildNextItem_();
71 }.bind(this), false);
72 titleSlide.addEventListener('slideleave', function(e) {
73 var bar = e.target.querySelector('.gdbar');
74 bar.classList.remove('build-current');
75 bar.classList.add('to-build');
70 }, false); 76 }, false);
71}; 77};
72 78
@@ -236,6 +242,7 @@ SlideDeck.prototype.buildNextItem_ = function() {
236 */ 242 */
237SlideDeck.prototype.prevSlide = function(opt_dontPush) { 243SlideDeck.prototype.prevSlide = function(opt_dontPush) {
238 if (this.curSlide_ > 0) { 244 if (this.curSlide_ > 0) {
245 this.prevSlide_ = this.curSlide_;
239 this.curSlide_--; 246 this.curSlide_--;
240 247
241 this.updateSlides_(opt_dontPush); 248 this.updateSlides_(opt_dontPush);
@@ -252,6 +259,7 @@ SlideDeck.prototype.nextSlide = function(opt_dontPush) {
252 } 259 }
253 260
254 if (this.curSlide_ < this.slides_.length - 1) { 261 if (this.curSlide_ < this.slides_.length - 1) {
262 this.prevSlide_ = this.curSlide_;
255 this.curSlide_++; 263 this.curSlide_++;
256 264
257 this.updateSlides_(opt_dontPush); 265 this.updateSlides_(opt_dontPush);
@@ -264,7 +272,7 @@ SlideDeck.prototype.nextSlide = function(opt_dontPush) {
264 * Triggered when a slide enter/leave event should be dispatched. 272 * Triggered when a slide enter/leave event should be dispatched.
265 * 273 *
266 * @param {string} type The type of event to trigger 274 * @param {string} type The type of event to trigger
267 * (e.g. 'onslideenter', 'onslideleave'). 275 * (e.g. 'slideenter', 'slideleave').
268 * @param {number} slideNo The index of the slide that is being left. 276 * @param {number} slideNo The index of the slide that is being left.
269 */ 277 */
270SlideDeck.prototype.triggerSlideEvent = function(type, slideNo) { 278SlideDeck.prototype.triggerSlideEvent = function(type, slideNo) {
@@ -281,7 +289,7 @@ SlideDeck.prototype.triggerSlideEvent = function(type, slideNo) {
281 289
282 // Dispatch event to listeners setup using addEventListener. 290 // Dispatch event to listeners setup using addEventListener.
283 var evt = document.createEvent('Event'); 291 var evt = document.createEvent('Event');
284 evt.initEvent(type.substring(2), true, true); 292 evt.initEvent(type, true, true);
285 evt.slideNumber = slideNo + 1; // Make it readable 293 evt.slideNumber = slideNo + 1; // Make it readable
286 evt.slide = el; 294 evt.slide = el;
287 295
@@ -295,7 +303,7 @@ SlideDeck.prototype.updateSlides_ = function(opt_dontPush) {
295 var dontPush = opt_dontPush || false; 303 var dontPush = opt_dontPush || false;
296 304
297 var curSlide = this.curSlide_; 305 var curSlide = this.curSlide_;
298 for (var i = 0; i < this.slides_.length; i++) { 306 for (var i = 0; i < this.slides_.length; ++i) {
299 switch (i) { 307 switch (i) {
300 case curSlide - 2: 308 case curSlide - 2:
301 this.updateSlideClass_(i, 'far-past'); 309 this.updateSlideClass_(i, 'far-past');
@@ -318,8 +326,9 @@ SlideDeck.prototype.updateSlides_ = function(opt_dontPush) {
318 } 326 }
319 }; 327 };
320 328
321 this.triggerSlideEvent('onslideleave', curSlide - 1); 329 //this.triggerSlideEvent('slideleave', curSlide - 1);
322 this.triggerSlideEvent('onslideenter', curSlide); 330 this.triggerSlideEvent('slideleave', this.prevSlide_);
331 this.triggerSlideEvent('slideenter', curSlide);
323 332
324 window.setTimeout(this.disableSlideFrames_.bind(this, curSlide - 2), 301); 333 window.setTimeout(this.disableSlideFrames_.bind(this, curSlide - 2), 301);
325 334
@@ -413,7 +422,7 @@ SlideDeck.prototype.updateSlideClass_ = function(slideNo, className) {
413 el.classList.add(className); 422 el.classList.add(className);
414 } 423 }
415 424
416 for (var i = 0, slideClass; slideClass = this.SLIDE_CLASSES_[i]; i++) { 425 for (var i = 0, slideClass; slideClass = this.SLIDE_CLASSES_[i]; ++i) {
417 if (className != slideClass) { 426 if (className != slideClass) {
418 el.classList.remove(slideClass); 427 el.classList.remove(slideClass);
419 } 428 }
diff --git a/template.html b/template.html
index 365adea..a55f3fe 100644
--- a/template.html
+++ b/template.html
@@ -15,7 +15,6 @@
15 </slide> 15 </slide>
16 16
17 <slide id="title-slide"> 17 <slide id="title-slide">
18 <!-- <aside class="bar"></aside> -->
19 <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> 18 <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>
20 <hgroup> 19 <hgroup>
21 <h1>Title Goes Here</h1> 20 <h1>Title Goes Here</h1>
@@ -29,10 +28,17 @@
29 28
30 <slide> 29 <slide>
31 <h2>Presentation Bullet Slide Layout</h2> 30 <h2>Presentation Bullet Slide Layout</h2>
32 <ul class="build"> 31 <article>
33 <li>Bullet1</li> 32 <ul>
34 <li>Bullet2</li> 33 <li>Bullet 1</li>
35 </ul> 34 <li>Bullet 2
35 <ul>
36 <li>Bullet 3</li>
37 </ul>
38 </li>
39 <li>Bullet 4</li>
40 </ul>
41 </article>
36 </slide> 42 </slide>
37 43
38 <slide> 44 <slide>
@@ -40,14 +46,24 @@
40 <h2>Presentation Bullet Slide Layout</h2> 46 <h2>Presentation Bullet Slide Layout</h2>
41 <h3>Subtitle Placeholder</h3> 47 <h3>Subtitle Placeholder</h3>
42 </hgroup> 48 </hgroup>
49 <article>
50 A Slide2
51 </article>
43 </slide> 52 </slide>
44 53
45 <slide hidden> 54 <slide hidden>
46 A hidden slide 55 A hidden slide
47 </slide> 56 </slide>
48 57
58 <!-- Slide with speaker notes. Press 'n' to display.-->
49 <slide> 59 <slide>
50 A Slide2 60 <aside class="note">
61 <section>Speaker notes can go here!</section>
62 </aside>
63 <h2>Presentation Bullet Slide Layout</h2>
64 <article>
65 A Slide2
66 </article>
51 </slide> 67 </slide>
52</slides> 68</slides>
53 69
diff --git a/theme/css/default.css b/theme/css/default.css
index 40b4f77..03e25d1 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -86,10 +86,10 @@ body {
86 -moz-font-smoothing: antialiased; 86 -moz-font-smoothing: antialiased;
87 -ms-font-smoothing: antialiased; 87 -ms-font-smoothing: antialiased;
88 -o-font-smoothing: antialiased; 88 -o-font-smoothing: antialiased;
89 -moz-transition: opacity 600ms ease-in; 89 -moz-transition: opacity 800ms ease-in;
90 -webkit-transition: opacity 600ms ease-in; 90 -webkit-transition: opacity 800ms ease-in;
91 -o-transition: opacity 600ms ease-in; 91 -o-transition: opacity 800ms ease-in;
92 transition: opacity 600ms ease-in; 92 transition: opacity 800ms ease-in;
93} 93}
94 94
95/* line 57, ../sass/_base.scss */ 95/* line 57, ../sass/_base.scss */
@@ -214,12 +214,12 @@ slide.fill img {
214 214
215/* line 44, ../sass/default.scss */ 215/* line 44, ../sass/default.scss */
216body { 216body {
217 background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #4387fd), color-stop(100%, #2a7cdf)); 217 background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #2a7cdf));
218 background-image: -webkit-radial-gradient(50% 50%, #4387fd 0%, #2a7cdf 600px); 218 background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
219 background-image: -moz-radial-gradient(50% 50%, #4387fd 0%, #2a7cdf 600px); 219 background-image: -moz-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
220 background-image: -o-radial-gradient(50% 50%, #4387fd 0%, #2a7cdf 600px); 220 background-image: -o-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
221 background-image: -ms-radial-gradient(50% 50%, #4387fd 0%, #2a7cdf 600px); 221 background-image: -ms-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
222 background-image: radial-gradient(50% 50%, #4387fd 0%, #2a7cdf 600px); 222 background-image: radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
223 background-attachment: fixed; 223 background-attachment: fixed;
224} 224}
225 225
@@ -231,29 +231,30 @@ slides > slide {
231 margin-top: -350px; 231 margin-top: -350px;
232 padding: 40px 60px; 232 padding: 40px 60px;
233 background-color: white; 233 background-color: white;
234 font-size: 26px;
234 -moz-border-radius: 5px; 235 -moz-border-radius: 5px;
235 -webkit-border-radius: 5px; 236 -webkit-border-radius: 5px;
236 -o-border-radius: 5px; 237 -o-border-radius: 5px;
237 -ms-border-radius: 5px; 238 -ms-border-radius: 5px;
238 -khtml-border-radius: 5px; 239 -khtml-border-radius: 5px;
239 border-radius: 5px; 240 border-radius: 5px;
240 -moz-box-shadow: 3px 3px 20px #515151; 241 -moz-box-shadow: 5px 5px 20px #515151;
241 -webkit-box-shadow: 3px 3px 20px #515151; 242 -webkit-box-shadow: 5px 5px 20px #515151;
242 -o-box-shadow: 3px 3px 20px #515151; 243 -o-box-shadow: 5px 5px 20px #515151;
243 box-shadow: 3px 3px 20px #515151;