@@ -23,14 +23,23 @@
2323 <li>Item 1
2424 <li>Item 2
2525 <li>Item 3
26+ <ul class="incremental">
27+ <li> Item 3.1
28+ <li> Item 3.2
29+ </ul>
2630 </ul>
27− <details>Some notes. They are only visible using onstage shell.</details>
31+ <div role="note">Some notes. They are only visible using onstage shell.</div>
2832</section>
2933
3034<section>
31− <q>
35+ <blockquote>
3236 Who's brave enough to fly into something we all keep calling a death sphere?
33− </q>
37+ </blockquote>
38+ <details>
39+ <p>In the onstage shell, notes scroll rather than overflow:</p>
40+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac dui eu est feugiat lacinia sit amet nec leo. Mauris eu ipsum leo. Nulla mi odio, cursus sed sollicitudin non, fringilla id magna. Suspendisse sit amet posuere elit. Maecenas iaculis, turpis a placerat imperdiet, libero lorem feugiat nisi, nec tincidunt diam nibh sit amet massa. Vestibulum quis adipiscing tellus. Maecenas sollicitudin sodales pulvinar. Donec dui ipsum, bibendum facilisis consequat interdum, tempus ut mauris. Aliquam ut dolor nec odio scelerisque bibendum quis in neque. Aliquam dui dui, pulvinar quis fermentum quis, gravida eu augue. Nunc tristique dolor a urna pulvinar bibendum. Curabitur mollis cursus neque, in scelerisque metus porta non. Donec tempor enim in nibh vestibulum et convallis nisi malesuada. Duis ut lectus sed metus venenatis porttitor id pharetra quam. Suspendisse sapien turpis, ornare in molestie et, gravida eget turpis.
41+ </p>
42+ </details>
3443</section>
3544
3645<section>
@@ -42,7 +51,7 @@
4251 <img src="http://placekitten.com/g/800/600">
4352 <figcaption>An image</figcaption>
4453 </figure>
45− <details>Kittens are so cute!</details>
54+ <div role="note">Kittens are so cute!</div>
4655</section>
4756
4857<section>
@@ -63,14 +72,28 @@
6372<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
6473
6574<style>
66− html { background-color: black; }
67− body { background-color: white; border-radius: 12px}
75+ html, .view body { background-color: black; counter-reset: slideidx; }
76+ body, .view section { background-color: white; border-radius: 12px }
6877 /* A section is a slide. It's size is 800x600, and this will never change */
69− section {
78+ section, .view head > title {
7079 /* The font from Google */
7180 font-family: 'Oswald', arial, serif;
7281 font-size: 30px;
7382 }
83+
84+ .view section:after {
85+ counter-increment: slideidx;
86+ content: counter(slideidx, decimal-leading-zero);
87+ position: absolute; bottom: -80px; right: 100px;
88+ color: white;
89+ }
90+
91+ .view head > title {
92+ color: white;
93+ text-align: center;
94+ margin: 1em 0 1em 0;
95+ }
96+
7497 h1, h2 {
7598 margin-top: 200px;
7699 text-align: center;
@@ -83,26 +106,41 @@
83106 ul {
84107 margin: 50px 200px;
85108 }
109+ li > ul {
110+ margin: 15px 50px;
111+ }
86112
87113 p {
88114 margin: 75px;
89115 font-size: 50px;
90116 }
91117
92− q {
93− display: block;
94− width: 100%;
118+ blockquote {
95119 height: 100%;
96120 background-color: black;
97121 color: white;
98122 font-size: 60px;
99123 padding: 50px;
100124 }
125+ blockquote:before {
126+ content: open-quote;
127+ }
128+ blockquote:after {
129+ content: close-quote;
130+ }
101131
102132 /* Figures are displayed full-page, with the caption
103133 on top of the image/video */
104134 figure {
105135 background-color: black;
136+ width: 100%;
137+ height: 100%;
138+ }
139+ figure > * {
140+ position: absolute;
141+ }
142+ figure > img, figure > video {
143+ width: 100%; height: 100%;
106144 }
107145 figcaption {
108146 margin: 70px;
@@ -125,10 +163,20 @@
125163 https://developer.mozilla.org/en/CSS/CSS_transitions
126164 How to use CSS3 Transitions: */
127165 section {
128− -moz-transition: left 400ms linear 0s;
129− -webkit-transition: left 400ms linear 0s;
130− -ms-transition: left 400ms linear 0s;
131− transition: left 400ms linear 0s;
166+ -moz-transition: left 400ms linear 0s;
167+ -webkit-transition: left 400ms linear 0s;
168+ -ms-transition: left 400ms linear 0s;
169+ transition: left 400ms linear 0s;
170+ }
171+ .view section {
172+ -moz-transition: none;
173+ -webkit-transition: none;
174+ -ms-transition: none;
175+ transition: none;
176+ }
177+
178+ .view section[aria-selected] {
179+ border: 5px red solid;
132180 }
133181
134182 /* Before */
@@ -176,21 +224,50 @@
176224<!-- Default Style -->
177225<style>
178226 * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
179− details { display: none; }
227+ [role="note"] { display: none; }
180228 body {
181229 width: 800px; height: 600px;
182230 margin-left: -400px; margin-top: -300px;
183231 position: absolute; top: 50%; left: 50%;
184232 overflow: hidden;
233+ display: none;
185234 }
235+ .view body {
236+ position: static;
237+ margin: 0; padding: 0;
238+ width: 100%; height: 100%;
239+ display: inline-block;
240+ overflow: visible; overflow-x: hidden;
241+ /* undo Dz.onresize */
242+ transform: none !important;
243+ -moz-transform: none !important;
244+ -webkit-transform: none !important;
245+ -o-transform: none !important;
246+ -ms-transform: none !important;
247+ }
248+ .view head, .view head > title { display: block }
186249 section {
187250 position: absolute;
188251 pointer-events: none;
189252 width: 100%; height: 100%;
190253 }
254+ .view section {
255+ pointer-events: auto;
256+ position: static;
257+ width: 800px; height: 600px;
258+ margin: -150px -200px;
259+ float: left;
260+
261+ transform: scale(.4);
262+ -moz-transform: scale(.4);
263+ -webkit-transform: scale(.4);
264+ -o-transform: scale(.4);
265+ -ms-transform: scale(.4);
266+ }
267+ .view section > * { pointer-events: none; }
191268 section[aria-selected] { pointer-events: auto; }
192269 html { overflow: hidden; }
193− body { display: none; }
270+ html.view { overflow: visible; }
194271 body.loaded { display: block; }
195272 .incremental {visibility: hidden; }
196273 .incremental[active] {visibility: visible; }
@@ -202,15 +279,8 @@
202279 -ms-transition: width 400ms linear 0s;
203280 transition: width 400ms linear 0s;
204281 }
205− figure {
206− width: 100%;
207− height: 100%;
208− }
209− figure > * {
210− position: absolute;
211− }
212− figure > img, figure > video {
213− width: 100%; height: 100%;
282+ .view #progress-bar {
283+ display: none;
214284 }
215285</style>
216286
@@ -219,6 +289,7 @@
219289 remoteWindows: [],
220290 idx: -1,
221291 step: 0,
292+ html: null,
222293 slides: null,
223294 progressBar : null,
224295 params: {
@@ -228,14 +299,16 @@
228299
229300 Dz.init = function() {
230301 document.body.className = "loaded";
231− this.slides = $$("body > section");
302+ this.slides = Array.prototype.slice.call($$("body > section"));
232303 this.progressBar = $("#progress-bar");
304+ this.html = document.body.parentNode;
233305 this.setupParams();
234306 this.onhashchange();
235307 this.setupTouchEvents();
236308 this.onresize();
309+ this.setupView();
237310 }
238−
311+
239312 Dz.setupParams = function() {
240313 var p = window.location.search.substr(1).split('&');
241314 p.forEach(function(e, i, a) {
@@ -285,6 +358,10 @@
285358 aEvent.preventDefault();
286359 this.goFullscreen();
287360 }
361+ if (aEvent.keyCode == 79) { // o
362+ aEvent.preventDefault();
363+ this.toggleView();
364+ }
288365 }
289366
290367 /* Touch Events */
@@ -318,6 +395,16 @@
318395 }
319396 }
320397
398+ Dz.setupView = function() {
399+ document.body.addEventListener("click", function ( e ) {
400+ if (!Dz.html.classList.contains("view")) return;
401+ if (!e.target || e.target.nodeName != "SECTION") return;
402+
403+ Dz.html.classList.remove("view");
404+ Dz.setCursor(Dz.slides.indexOf(e.target) + 1);
405+ }, false);
406+ }
407+
321408 /* Adapt the size of the slides to the window */
322409
323410 Dz.onresize = function() {
@@ -334,9 +421,9 @@
334421 }
335422
336423
337− Dz.getDetails = function(aIdx) {
424+ Dz.getNotes = function(aIdx) {
338425 var s = $("section:nth-of-type(" + aIdx + ")");
339− var d = s.$("details");
426+ var d = s.$("[role='note']");
340427 return d ? d.innerHTML : "";
341428 }
342429
@@ -365,7 +452,7 @@
365452 if (argv[0] === "GET_CURSOR" && argc === 1)
366453 this.postMsg(win, "CURSOR", this.idx + "." + this.step);
367454 if (argv[0] === "GET_NOTES" && argc === 1)
368− this.postMsg(win, "NOTES", this.getDetails(this.idx));
455+ this.postMsg(win, "NOTES", this.getNotes(this.idx));
369456 }
370457
371458 Dz.toggleContent = function() {
@@ -449,6 +536,14 @@
449536 this.setCursor(lastIdx, lastStep);
450537 }
451538
539+ Dz.toggleView = function() {
540+ this.html.classList.toggle("view");
541+
542+ if (this.html.classList.contains("view")) {
543+ $("section[aria-selected]").scrollIntoView(true);
544+ }
545+ }
546+
452547 Dz.setSlide = function(aIdx) {
453548 this.idx = aIdx;
454549 var old = $("section[aria-selected]");
@@ -462,6 +557,9 @@
462557 }
463558 if (next) {
464559 next.setAttribute("aria-selected", "true");
560+ if (this.html.classList.contains("view")) {
561+ next.scrollIntoView();
562+ }
465563 var video = next.$("video");
466564 if (video && !!+this.params.autoplay) {
467565 video.play();