data/dzslides/template.html · typeable/pandoc · git.iko.soy

git.iko.soy/typeable/pandoc

on newlatex help sign in

typeable/pandoc/data/dzslides/template.html

683 lines 19 kB history raw

1<!DOCTYPE html>

3<meta charset="utf-8">

4<title>The Title Of Your Presentation</title>

6

7

9<section>

10

11 <h1>My Presentation</h1>

12 <footer>by John Doe</footer>

13</section>

15<section>

16 <p>Some random text: But I've never been to the moon! You can see how I lived before I met you. Also Zoidberg.

17 I could if you hadn't turned on the light and shut off my stereo.</p>

18</section>

20<section>

21 <h3>An incremental list</h3>

22 <ul class="incremental">

23 <li>Item 1

24 <li>Item 2

25 <li>Item 3

26 <ul class="incremental">

27 <li> Item 3.1

28 <li> Item 3.2

29 </ul>

30 </ul>

31 <div role="note">Some notes. They are only visible using onstage shell.</div>

32</section>

34<section>

35 <blockquote>

36 Who's brave enough to fly into something we all keep calling a death sphere?

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>

43</section>

45<section>

46 <h2>Part two</h2>

47</section>

49<section>

50 <figure>

51 <img src="http://placekitten.com/g/800/600">

52 <figcaption>An image</figcaption>

53 </figure>

54 <div role="note">Kittens are so cute!</div>

55</section>

57<section>

58 <figure>

59 <video src="http://videos-cdn.mozilla.net/brand/Mozilla_Firefox_Manifesto_v0.2_640.webm" poster="http://www.mozilla.org/images/about/poster.jpg"></video>

60 <figcaption>A video</figcaption>

61 </figure>

62</section>

64<section>

65 <h2>End!</h2>

66</section>

68

69

71

72<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>

74<style>

75 html, .view body { background-color: black; counter-reset: slideidx; }

76 body, .view section { background-color: white; border-radius: 12px }

77 /* A section is a slide. It's size is 800x600, and this will never change */

78 section, .view head > title {

79 /* The font from Google */

80 font-family: 'Oswald', arial, serif;

81 font-size: 30px;

82 }

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 }

91 .view head > title {

92 color: white;

93 text-align: center;

94 margin: 1em 0 1em 0;

95 }

97 h1, h2 {

98 margin-top: 200px;

99 text-align: center;

100 font-size: 80px;

101 }

102 h3 {

103 margin: 100px 0 50px 100px;

104 }

106 ul {

107 margin: 50px 200px;

108 }

109 li > ul {

110 margin: 15px 50px;

111 }

113 p {

114 margin: 75px;

115 font-size: 50px;

116 }

118 blockquote {

119 height: 100%;

120 background-color: black;

121 color: white;

122 font-size: 60px;

123 padding: 50px;

124 }

125 blockquote:before {

126 content: open-quote;

127 }

128 blockquote:after {

129 content: close-quote;

130 }

132 /* Figures are displayed full-page, with the caption

133 on top of the image/video */

134 figure {

135 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%;

144 }

145 figcaption {

146 margin: 70px;

147 font-size: 50px;

148 }

150 footer {

151 position: absolute;

152 bottom: 0;

153 width: 100%;

154 padding: 40px;

155 text-align: right;

156 background-color: #F3F4F8;

157 border-top: 1px solid #CCC;

158 }

160 /* Transition effect */

161 /* Feel free to change the transition effect for original

162 animations. See here:

163 https://developer.mozilla.org/en/CSS/CSS_transitions

164 How to use CSS3 Transitions: */

165 section {

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 }

178 .view section[aria-selected] {

179 border: 5px red solid;

180 }

182 /* Before */

183 section { left: -150%; }

184 /* Now */

185 section[aria-selected] { left: 0; }

186 /* After */

187 section[aria-selected] ~ section { left: +150%; }

189 /* Incremental elements */

191 /* By default, visible */

192 .incremental > * { opacity: 1; }

194 /* The current item */

195 .incremental > *[aria-selected] { opacity: 1; }

197 /* The items to-be-selected */

198 .incremental > *[aria-selected] ~ * { opacity: 0; }

200 /* The progressbar, at the bottom of the slides, show the global

201 progress of the presentation. */

202 #progress-bar {

203 height: 2px;

204 background: #AAA;

205 }

206</style>

208<!-- {{{{ dzslides core

211# __ __ __ . __ ___ __

212# | \ / /__` | | | \ |__ /__`

213# |__/ /_ .__/ |___ | |__/ |___ .__/ core :€

216# The following block of code is not supposed to be edited.

217# But if you want to change the behavior of these slides,

218# feel free to hack it!

220-->

222<div id="progress-bar"></div>

224

225<style>

226 * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

227 [role="note"] { display: none; }

228 body {

229 width: 800px; height: 600px;

230 margin-left: -400px; margin-top: -300px;

231 position: absolute; top: 50%; left: 50%;

232 overflow: hidden;

233 display: none;

234 }

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 }

249 section {

250 position: absolute;

251 pointer-events: none;

252 width: 100%; height: 100%;

253 }

254 .view section {

255 pointer-events: auto;

256 position: static;

257 width: 800px; height: 600px;

258 margin: -150px -200px;

259 float: left;

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; }

268 section[aria-selected] { pointer-events: auto; }

269 html { overflow: hidden; }

270 html.view { overflow: visible; }

271 body.loaded { display: block; }

272 .incremental {visibility: hidden; }

273 .incremental[active] {visibility: visible; }

274 #progress-bar{

275 bottom: 0;

276 position: absolute;

277 -moz-transition: width 400ms linear 0s;

278 -webkit-transition: width 400ms linear 0s;

279 -ms-transition: width 400ms linear 0s;

280 transition: width 400ms linear 0s;

281 }

282 .view #progress-bar {

283 display: none;

284 }

285</style>

287<script>

288 var Dz = {

289 remoteWindows: [],

290 idx: -1,

291 step: 0,

292 html: null,

293 slides: null,

294 progressBar : null,

295 params: {

296 autoplay: "1"

297 }

298 };

300 Dz.init = function() {

301 document.body.className = "loaded";

302 this.slides = Array.prototype.slice.call($$("body > section"));

303 this.progressBar = $("#progress-bar");

304 this.html = document.body.parentNode;

305 this.setupParams();

306 this.onhashchange();

307 this.setupTouchEvents();

308 this.onresize();

309 this.setupView();

310 }

312 Dz.setupParams = function() {

313 var p = window.location.search.substr(1).split('&');

314 p.forEach(function(e, i, a) {

315 var keyVal = e.split('=');

316 Dz.params[keyVal[0]] = decodeURIComponent(keyVal[1]);

317 });

318 // Specific params handling

319 if (!+this.params.autoplay)

320 $$.forEach($$("video"), function(v){ v.controls = true });

321 }

323 Dz.onkeydown = function(aEvent) {

324 // Don't intercept keyboard shortcuts

325 if (aEvent.altKey

326 || aEvent.ctrlKey

327 || aEvent.metaKey

328 || aEvent.shiftKey) {

329 return;

330 }

331 if ( aEvent.keyCode == 37 // left arrow

332 || aEvent.keyCode == 38 // up arrow

333 || aEvent.keyCode == 33 // page up

334 ) {

335 aEvent.preventDefault();

336 this.back();

337 }

338 if ( aEvent.keyCode == 39 // right arrow

339 || aEvent.keyCode == 40 // down arrow

340 || aEvent.keyCode == 34 // page down

341 ) {

342 aEvent.preventDefault();

343 this.forward();

344 }

345 if (aEvent.keyCode == 35) { // end

346 aEvent.preventDefault();

347 this.goEnd();

348 }

349 if (aEvent.keyCode == 36) { // home

350 aEvent.preventDefault();

351 this.goStart();

352 }

353 if (aEvent.keyCode == 32) { // space

354 aEvent.preventDefault();

355 this.toggleContent();

356 }

357 if (aEvent.keyCode == 70) { // f

358 aEvent.preventDefault();

359 this.goFullscreen();

360 }

361 if (aEvent.keyCode == 79) { // o

362 aEvent.preventDefault();

363 this.toggleView();

364 }

365 }

367 /* Touch Events */

369 Dz.setupTouchEvents = function() {

370 var orgX, newX;

371 var tracking = false;

373 var db = document.body;

374 db.addEventListener("touchstart", start.bind(this), false);

375 db.addEventListener("touchmove", move.bind(this), false);

377 function start(aEvent) {

378 aEvent.preventDefault();

379 tracking = true;

380 orgX = aEvent.changedTouches[0].pageX;

381 }

383 function move(aEvent) {

384 if (!tracking) return;

385 newX = aEvent.changedTouches[0].pageX;

386 if (orgX - newX > 100) {

387 tracking = false;

388 this.forward();

389 } else {

390 if (orgX - newX < -100) {

391 tracking = false;

392 this.back();

393 }

394 }

395 }

396 }

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;

403 Dz.html.classList.remove("view");

404 Dz.setCursor(Dz.slides.indexOf(e.target) + 1);

405 }, false);

406 }

408 /* Adapt the size of the slides to the window */

410 Dz.onresize = function() {

411 var db = document.body;

412 var sx = db.clientWidth / window.innerWidth;

413 var sy = db.clientHeight / window.innerHeight;

414 var transform = "scale(" + (1/Math.max(sx, sy)) + ")";

416 db.style.MozTransform = transform;

417 db.style.WebkitTransform = transform;

418 db.style.OTransform = transform;

419 db.style.msTransform = transform;

420 db.style.transform = transform;

421 }

424 Dz.getNotes = function(aIdx) {

425 var s = $("section:nth-of-type(" + aIdx + ")");

426 var d = s.$("[role='note']");

427 return d ? d.innerHTML : "";

428 }

430 Dz.onmessage = function(aEvent) {

431 var argv = aEvent.data.split(" "), argc = argv.length;

432 argv.forEach(function(e, i, a) { a[i] = decodeURIComponent(e) });

433 var win = aEvent.source;

434 if (argv[0] === "REGISTER" && argc === 1) {

435 this.remoteWindows.push(win);

436 this.postMsg(win, "REGISTERED", document.title, this.slides.length);

437 this.postMsg(win, "CURSOR", this.idx + "." + this.step);

438 return;

439 }

440 if (argv[0] === "BACK" && argc === 1)

441 this.back();

442 if (argv[0] === "FORWARD" && argc === 1)

443 this.forward();

444 if (argv[0] === "START" && argc === 1)

445 this.goStart();

446 if (argv[0] === "END" && argc === 1)

447 this.goEnd();

448 if (argv[0] === "TOGGLE_CONTENT" && argc === 1)

449 this.toggleContent();

450 if (argv[0] === "SET_CURSOR" && argc === 2)

451 window.location.hash = "#" + argv[1];

452 if (argv[0] === "GET_CURSOR" && argc === 1)

453 this.postMsg(win, "CURSOR", this.idx + "." + this.step);

454 if (argv[0] === "GET_NOTES" && argc === 1)

455 this.postMsg(win, "NOTES", this.getNotes(this.idx));

456 }

458 Dz.toggleContent = function() {

459 // If a Video is present in this new slide, play it.

460 // If a Video is present in the previous slide, stop it.

461 var s = $("section[aria-selected]");

462 if (s) {

463 var video = s.$("video");

464 if (video) {

465 if (video.ended || video.paused) {

466 video.play();

467 } else {

468 video.pause();

469 }

470 }

471 }

472 }

474 Dz.setCursor = function(aIdx, aStep) {

475 // If the user change the slide number in the URL bar, jump

476 // to this slide.

477 aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : ".0";

478 window.location.hash = "#" + aIdx + aStep;

479 }

481 Dz.onhashchange = function() {

482 var cursor = window.location.hash.split("#"),

483 newidx = 1,

484 newstep = 0;

485 if (cursor.length == 2) {

486 newidx = ~~cursor[1].split(".")[0];

487 newstep = ~~cursor[1].split(".")[1];

488 if (newstep > Dz.slides[newidx - 1].$$('.incremental > *').length) {

489 newstep = 0;

490 newidx++;

491 }

492 }

493 this.setProgress(newidx, newstep);

494 if (newidx != this.idx) {

495 this.setSlide(newidx);

496 }

497 if (newstep != this.step) {

498 this.setIncremental(newstep);

499 }

500 for (var i = 0; i < this.remoteWindows.length; i++) {

501 this.postMsg(this.remoteWindows[i], "CURSOR", this.idx + "." + this.step);

502 }

503 }

505 Dz.back = function() {

506 if (this.idx == 1 && this.step == 0) {

507 return;

508 }

509 if (this.step == 0) {

510 this.setCursor(this.idx - 1,

511 this.slides[this.idx - 2].$$('.incremental > *').length);

512 } else {

513 this.setCursor(this.idx, this.step - 1);

514 }

515 }

517 Dz.forward = function() {

518 if (this.idx >= this.slides.length &&

519 this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) {

520 return;

521 }

522 if (this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) {

523 this.setCursor(this.idx + 1, 0);

524 } else {

525 this.setCursor(this.idx, this.step + 1);

526 }

527 }

529 Dz.goStart = function() {

530 this.setCursor(1, 0);

531 }

533 Dz.goEnd = function() {

534 var lastIdx = this.slides.length;

535 var lastStep = this.slides[lastIdx - 1].$$('.incremental > *').length;

536 this.setCursor(lastIdx, lastStep);

537 }

539 Dz.toggleView = function() {

540 this.html.classList.toggle("view");

542 if (this.html.classList.contains("view")) {

543 $("section[aria-selected]").scrollIntoView(true);

544 }

545 }

547 Dz.setSlide = function(aIdx) {

548 this.idx = aIdx;

549 var old = $("section[aria-selected]");

550 var next = $("section:nth-of-type("+ this.idx +")");

551 if (old) {

552 old.removeAttribute("aria-selected");

553 var video = old.$("video");

554 if (video) {

555 video.pause();

556 }

557 }

558 if (next) {

559 next.setAttribute("aria-selected", "true");

560 if (this.html.classList.contains("view")) {

561 next.scrollIntoView();

562 }

563 var video = next.$("video");

564 if (video && !!+this.params.autoplay) {

565 video.play();

566 }

567 } else {

568 // That should not happen

569 this.idx = -1;

570 // console.warn("Slide doesn't exist.");

571 }

572 }

574 Dz.setIncremental = function(aStep) {

575 this.step = aStep;

576 var old = this.slides[this.idx - 1].$('.incremental > *[aria-selected]');

577 if (old) {

578 old.removeAttribute('aria-selected');

579 }

580 var incrementals = $$('.incremental');

581 if (this.step <= 0) {

582 $$.forEach(incrementals, function(aNode) {

583 aNode.removeAttribute('active');

584 });

585 return;

586 }

587 var next = this.slides[this.idx - 1].$$('.incremental > *')[this.step - 1];

588 if (next) {

589 next.setAttribute('aria-selected', true);

590 next.parentNode.setAttribute('active', true);

591 var found = false;

592 $$.forEach(incrementals, function(aNode) {

593 if (aNode != next.parentNode)

594 if (found)

595 aNode.removeAttribute('active');

596 else

597 aNode.setAttribute('active', true);

598 else

599 found = true;

600 });

601 } else {

602 setCursor(this.idx, 0);

603 }

604 return next;

605 }

607 Dz.goFullscreen = function() {

608 var html = $('html'),

609 requestFullscreen = html.requestFullscreen || html.requestFullScreen || html.mozRequestFullScreen || html.webkitRequestFullScreen;

610 if (requestFullscreen) {

611 requestFullscreen.apply(html);

612 }

613 }

615 Dz.setProgress = function(aIdx, aStep) {

616 var slide = $("section:nth-of-type("+ aIdx +")");

617 if (!slide)

618 return;

619 var steps = slide.$$('.incremental > *').length + 1,

620 slideSize = 100 / (this.slides.length - 1),

621 stepSize = slideSize / steps;

622 this.progressBar.style.width = ((aIdx - 1) * slideSize + aStep * stepSize) + '%';

623 }

625 Dz.postMsg = function(aWin, aMsg) { // [arg0, [arg1...]]

626 aMsg = [aMsg];

627 for (var i = 2; i < arguments.length; i++)

628 aMsg.push(encodeURIComponent(arguments[i]));

629 aWin.postMessage(aMsg.join(" "), "*");

630 }

632 function init() {

633 Dz.init();

634 window.onkeydown = Dz.onkeydown.bind(Dz);

635 window.onresize = Dz.onresize.bind(Dz);

636 window.onhashchange = Dz.onhashchange.bind(Dz);

637 window.onmessage = Dz.onmessage.bind(Dz);

638 }

640 window.onload = init;

641</script>

644<script> // Helpers

645 if (!Function.prototype.bind) {

646 Function.prototype.bind = function (oThis) {

648 // closest thing possible to the ECMAScript 5 internal IsCallable

649 // function

650 if (typeof this !== "function")

651 throw new TypeError(

652 "Function.prototype.bind - what is trying to be fBound is not callable"

653 );

655 var aArgs = Array.prototype.slice.call(arguments, 1),

656 fToBind = this,

657 fNOP = function () {},

658 fBound = function () {

659 return fToBind.apply( this instanceof fNOP ? this : oThis || window,

660 aArgs.concat(Array.prototype.slice.call(arguments)));

661 };

663 fNOP.prototype = this.prototype;

664 fBound.prototype = new fNOP();

666 return fBound;

667 };

668 }

670 var $ = (HTMLElement.prototype.$ = function(aQuery) {

671 return this.querySelector(aQuery);

672 }).bind(document);

674 var $$ = (HTMLElement.prototype.$$ = function(aQuery) {

675 return this.querySelectorAll(aQuery);

676 }).bind(document);

678 $$.forEach = function(nodeList, fun) {

679 Array.prototype.forEach.call(nodeList, fun);

680 }

682</script>

683