29e6d07 · typeable/pandoc

git.iko.soy/typeable/pandoc

on master help sign in

Updated dzslides template to current github version.

29e6d07John MacFarlane15 years ago

default.dzslides+299−176

compare with master

unifiedsplit

@@ -23,36 +23,48 @@ $else$

23<style>

24 html { background-color: black; }

25 body { background-color: white; }

26− /* A section is a slide. Its size is 800x600, and this will never change */

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

27 section {

28 font-family: Arial, serif;

29 font-size: 20pt;

30 line-height: 24pt;

31 padding: 16pt;

32 }

33− section > * { margin-bottom: 1em; }

34− section.titleslide h1 { margin-top: 200px; }

35 h1, h2, h3 {

33 h1, h2, h3 {

36− margin-top: 50px;

37− text-align: center;

34+ text-align: center;

38− }

35+ margin: 10pt 10pt 20pt 10pt;

39− h1 { font-size: 180%: }

36+ }

40− h2 { font-size: 120%; }

41− h3 { font-size: 100%; }

42 ul, ol {

37 ul, ol {

43− margin-left: 40px;

38+ margin: 10px 10px 10px 50px;

44 }

39 }

45− a { color: #FF0066; } a:hover { text-decoration: underline; }

40+ section.titleslide h1 { margin-top: 200px; }

46− footer { position: absolute; bottom: 50px; right: 50px; }

41+ h1 { font-size: 180%; }

42+ h2 { font-size: 120%; }

43+ h3 { font-size: 100%; }

47 blockquote { font-style: italic }

44 blockquote { font-style: italic }

48− pre {

45+ q {

46+ display: inline-block;

47+ width: 700px;

48+ height: 600px;

49+ background-color: black;

50+ color: white;

49− font-size: 80%;

51+ font-size: 60px;

50− font-weight: bold;

51− padding: 0.2em 1em 0.2em 1em;

52+ padding: 50px;

52 }

53 }

53− .images {

54+

55+ img, video {

56+ width: 800px;

57+ height: 600px;

58+ position: absolute;

59+ top: 0;

60+ background-color: black;

61+ z-index: -1;

62+ }

63+

64+ footer {

65+ position: absolute;

66+ bottom: 10px;

54− margin: 20px;

67+ right: 20px;

55− text-align: center;

56 }

68 }

58 /* Transition effect */

70 /* Transition effect */

@@ -74,13 +86,16 @@ $else$

74 /* After */

86 /* After */

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

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

77− /* Increment with lists */

89+ /* Incremental elements */

90+

91+ /* By default, visible */

78 .incremental > * { opacity: 1; }

92 .incremental > * { opacity: 1; }

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

80− .incremental > *[aria-selected] ~ * { opacity: 0.2; }

81− /* Increment with images */

82− .incremental > img[aria-selected] { box-shadow: 0 0 10px #000 }

94+ /* The current item */

95+ .incremental > *[aria-selected] { color: red; opacity: 1; }

96+

97+ /* The items to-be-selected */

98+ .incremental > *[aria-selected] ~ * { opacity: 0.2; }

84</style>

99</style>

85$endif$

100$endif$

86$if(math)$

101$if(math)$

@@ -107,13 +122,19 @@ $body$

107$for(include-after)$

122$for(include-after)$

108$include-after$

123$include-after$

109$endfor$

124$endfor$

110−

125+<!-- {{{{ dzslides core

111−

126+#

112−

127+#

113−

128+# __ __ __ . __ ___ __

114−

129+# | \ / /__` | | | \ |__ /__`

115−

130+# |__/ /_ .__/ |___ | |__/ |___ .__/ core :€

131+#

132+#

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

116−

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

135+# feel free to hack it!

136+#

137+-->

117

138

118

139

119<style>

140<style>

@@ -125,98 +146,109 @@ $endfor$

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

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

126 overflow: hidden;

147 overflow: hidden;

127 }

148 }

128− html {

129− overflow: hidden;

130− }

131 section {

149 section {

132 position: absolute;

150 position: absolute;

133 pointer-events: none;

151 pointer-events: none;

134− width: 95%; height: 100%;

152+ width: 100%; height: 100%;

135 }

153 }

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

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

155+ html { overflow: hidden; }

137 body { display: none; }

156 body { display: none; }

138 body.loaded { display: block; }

157 body.loaded { display: block; }

139− .incremental {visibility: hidden}

158+ .incremental {visibility: hidden; }

140− .incremental[active] {visibility: visible}

159+ .incremental[active] {visibility: visible; }

141</style>

160</style>

142

161

143<script>

162<script>

144− var friendWindows = [];

163+ var Dz = {

164+ remoteWindows: [],

165+ idx: -1,

145− var idx, step;

166+ step: 0,

146− var slides;

167+ slides: null,

147−

168+ params: {

148− /* main() */

169+ autoplay: "1"

170+ }

171+ };

149

172

150− window.onload = function() {

173+ Dz.init = function() {

151− slides = document.querySelectorAll("body > section");

152− onhashchange();

153 document.body.className = "loaded";

174 document.body.className = "loaded";

175+ this.slides = $$$$("body > section");

176+ this.setupParams();

177+ this.onhashchange();

154− setupTouchEvents();

178+ this.setupTouchEvents();

155− onresize();

179+ this.onresize();

180+ }

181+

182+ Dz.setupParams = function() {

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

184+ p.forEach(function(e, i, a) {

185+ var keyVal = e.split('=');

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

187+ });

156 }

188 }

157

189

158− /* Handle keys */

159−

160− window.onkeydown = function(e) {

190+ Dz.onkeydown = function(aEvent) {

161 // Don't intercept keyboard shortcuts

191 // Don't intercept keyboard shortcuts

162− if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {

192+ if (aEvent.altKey

193+ || aEvent.ctrlKey

194+ || aEvent.metaKey

195+ || aEvent.shiftKey) {

163 return;

196 return;

164 }

197 }

165− if ( e.keyCode == 37 // left arrow

198+ if ( aEvent.keyCode == 37 // left arrow

166− || e.keyCode == 38 // up arrow

199+ || aEvent.keyCode == 38 // up arrow

167− || e.keyCode == 33 // page up

200+ || aEvent.keyCode == 33 // page up

168 ) {

201 ) {

169− e.preventDefault();

202+ aEvent.preventDefault();

170− back();

203+ this.back();

171 }

204 }

172− if ( e.keyCode == 39 // right arrow

205+ if ( aEvent.keyCode == 39 // right arrow

173− || e.keyCode == 40 // down arrow

206+ || aEvent.keyCode == 40 // down arrow

174− || e.keyCode == 34 // page down

207+ || aEvent.keyCode == 34 // page down

175 ) {

208 ) {

176− e.preventDefault();

209+ aEvent.preventDefault();

177− forward();

210+ this.forward();

178 }

211 }

179− if (e.keyCode == 35) { // end

212+ if (aEvent.keyCode == 35) { // end

180− e.preventDefault();

213+ aEvent.preventDefault();

181− end();

214+ this.goEnd();

182 }

215 }

183− if (e.keyCode == 36) { // home

216+ if (aEvent.keyCode == 36) { // home

184− e.preventDefault();

217+ aEvent.preventDefault();

185− start();

218+ this.goStart();

186 }

219 }

187−

188− if ( e.keyCode == 32) { // space

220+ if (aEvent.keyCode == 32) { // space

189− e.preventDefault();

221+ aEvent.preventDefault();

190− toggleContent();

222+ this.toggleContent();

191 }

223 }

192 }

224 }

193

225

194 /* Touch Events */

226 /* Touch Events */

195

227

196− function setupTouchEvents() {

228+ Dz.setupTouchEvents = function() {

197 var orgX, newX;

229 var orgX, newX;

198 var tracking = false;

230 var tracking = false;

199

231

200 var db = document.body;

232 var db = document.body;

201− db.addEventListener("touchstart", start, false);

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

202− db.addEventListener("touchmove", move, false);

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

203

235

204− function start(e) {

236+ function start(aEvent) {

205− e.preventDefault();

237+ aEvent.preventDefault();

206 tracking = true;

238 tracking = true;

207− orgX = e.changedTouches[0].pageX;

239+ orgX = aEvent.changedTouches[0].pageX;

208 }

240 }

209

241

210− function move(e) {

242+ function move(aEvent) {

211 if (!tracking) return;

243 if (!tracking) return;

212− newX = e.changedTouches[0].pageX;

244+ newX = aEvent.changedTouches[0].pageX;

213 if (orgX - newX > 100) {

245 if (orgX - newX > 100) {

214 tracking = false;

246 tracking = false;

215− forward();

247+ this.forward();

216 } else {

248 } else {

217 if (orgX - newX < -100) {

249 if (orgX - newX < -100) {

218 tracking = false;

250 tracking = false;

219− back();

251+ this.back();

220 }

252 }

221 }

253 }

222 }

254 }

@@ -224,157 +256,248 @@ $endfor$

224

256

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

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

226

258

227− window.onresize = function() {

259+ Dz.onresize = function() {

228 var db = document.body;

260 var db = document.body;

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

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

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

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

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

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

264+

232 db.style.MozTransform = transform;

265 db.style.MozTransform = transform;

233 db.style.WebkitTransform = transform;

266 db.style.WebkitTransform = transform;

234 db.style.OTransform = transform;

267 db.style.OTransform = transform;

235 db.style.msTransform = transform;

268 db.style.msTransform = transform;

236 db.style.transform = transform;

269 db.style.transform = transform;

237 }

270 }

238− function getDetails(idx) {

271+

272+

273+ Dz.getDetails = function(aIdx) {

239− var s = document.querySelector("section:nth-of-type("+ idx +")");

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

240− var d = s.querySelector("details");

275+ var d = s.$$("details");

241− return d?d.innerHTML:"";

276+ return d ? d.innerHTML : "";

242 }

277 }

278+

243− window.onmessage = function(e) {

279+ Dz.onmessage = function(aEvent) {

244− var msg = e.data;

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

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

245− var win = e.source;

282+ var win = aEvent.source;

246− if (msg === "register") {

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

247− friendWindows.push(win);

284+ this.remoteWindows.push(win);

248− win.postMessage(JSON.stringify({method: "registered", title: document.title, count: slides.length}), "*");

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

249− win.postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), "*");

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

250 return;

287 return;

251 }

288 }

252− if (msg === "back") back();

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

290+ this.back();

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

253− if (msg === "forward") forward();

292+ this.forward();

254− if (msg === "toggleContent") toggleContent();

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

255− // setSlide(42)

294+ this.goStart();

256− var r = /setSlide$(\d+)$/.exec(msg);

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

257− if (r) {

296+ this.goEnd();

258− setSlide(r[1]);

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

259− }

298+ this.toggleContent();

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

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

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

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

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

304+ this.postMsg(win, "NOTES", this.getDetails(this.idx));

260 }

305 }

261

306

307+ Dz.toggleContent = function() {

262− /* If a Video is present in this new slide, play it.

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

263− If a Video is present in the previous slide, stop it. */

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

264−

265− function toggleContent() {

266− var s = document.querySelector("section[aria-selected]");

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

267 if (s) {

311 if (s) {

268− var video = s.querySelector("video");

312+ var video = s.$$("video");

269− if (video) {

313+ if (video) {

270− if (video.ended || video.paused) {

314+ if (video.ended || video.paused) {

271− video.play();

315+ video.play();

272− } else {

316+ } else {

273− video.pause();

317+ video.pause();

274− }

275 }

318 }

319+ }

276 }

320 }

277 }

321 }

278

322

323+ Dz.setCursor = function(aIdx, aStep) {

279− /* If the user change the slide number in the URL bar, jump

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

280− to this slide. */

325+ // to this slide.

281−

282− function setCursor(aIdx, aStep) {

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

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

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

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

285 }

328 }

329+

286− window.onhashchange = function(e) {

330+ Dz.onhashchange = function() {

287− var cursor = window.location.hash.split("#"), newidx = 1, newstep = 0;

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

332+ newidx = 1,

333+ newstep = 0;

288 if (cursor.length == 2) {

334 if (cursor.length == 2) {

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

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

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

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

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

338+ newstep = 0;

339+ newidx++;

340+ }

341+ }

342+ if (newidx != this.idx) {

343+ this.setSlide(newidx);

344+ }

345+ if (newstep != this.step) {

346+ this.setIncremental(newstep);

347+ }

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

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

291 }

350 }

292− if (newidx != idx) setSlide(newidx);

293− setIncremental(newstep);

294 }

351 }

295

352

296− /* Slide controls */

297−

298− function back() {

353+ Dz.back = function() {

299− if (idx == 1 && step == 0) return;

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

355+ return;

356+ }

300− if (step == 0)

357+ if (this.step == 0) {

358+ this.setCursor(this.idx - 1,

301− setCursor(idx - 1, slides[idx - 2].querySelectorAll('.incremental > *').length);

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

302− else

360+ } else {

303− setCursor(idx, step - 1);

361+ this.setCursor(this.idx, this.step - 1);

362+ }

304 }

363 }

364+

305− function forward() {

365+ Dz.forward = function() {

366+ if (this.idx >= this.slides.length &&

306− if (idx >= slides.length && step >= slides[idx - 1].querySelectorAll('.incremental > *').length) return;

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

368+ return;

369+ }

307− if (step >= slides[idx - 1].querySelectorAll('.incremental > *').length)

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

308− setCursor(idx + 1, 0);

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

309− else

372+ } else {

310− setCursor(idx, step + 1);

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

374+ }

311 }

375 }

376+

312− function start() {

377+ Dz.goStart = function() {

313− setCursor(1, 0);

378+ this.setCursor(1, 0);

314 }

379 }

380+

315− function end() {

381+ Dz.goEnd = function() {

316− var lastIdx = slides.length;

382+ var lastIdx = this.slides.length;

317− var lastStep = slides[lastIdx - 1].querySelectorAll('.incremental > *').length;

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

318− setCursor(lastIdx, lastStep);

384+ this.setCursor(lastIdx, lastStep);

319 }

385 }

320

386

321− function setSlide(aIdx) {

387+ Dz.setSlide = function(aIdx) {

322− idx = aIdx;

388+ this.idx = aIdx;

323− var old = document.querySelector("section[aria-selected]");

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

324− var next = document.querySelector("section:nth-of-type("+ idx +")");

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

325 if (old) {

391 if (old) {

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

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

327− var video = old.querySelector("video");

393+ var video = old.$$("video");

394+ if (video) {

328− if (video) { video.pause(); }

395+ video.pause();

396+ }

329 }

397 }

330 if (next) {

398 if (next) {

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

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

332− var video = next.querySelector("video");

400+ var video = next.$$("video");

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

333− if (video) { video.play(); }

402+ video.play();

334− } else {

335− idx = 0;

336− for (var i = 0, l = slides.length; i < l; i++) {

337− if (slides[i].hasAttribute("aria-selected")) {

338− idx = i + 1;

339− }

340 }

403 }

341− }

404+ } else {

342− for (var i = 0, l = friendWindows.length; i < l; i++) {

405+ // That should not happen

343− friendWindows[i].postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), "*");

406+ this.idx = -1;

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

344 }

408 }

345 }

409 }

410+

346− function setIncremental(aStep) {

411+ Dz.setIncremental = function(aStep) {

347− step = aStep;

412+ this.step = aStep;

348− var old = slides[idx-1].querySelector('.incremental > *[aria-selected]');

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

349− if (old)

414+ if (old) {

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

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

416+ }

351− var incrementals = slides[idx-1].querySelectorAll('.incremental');

417+ var incrementals = this.slides[this.idx - 1].$$$$('.incremental');

352− if (step == 0) {

418+ if (this.step <= 0) {

353− for (var i = 0; i < incrementals.length; i++) {

419+ incrementals.forEach(function(aNode) {

354− incrementals[i].removeAttribute('active');

420+ aNode.removeAttribute('active');

355− }

421+ });

356 return;

422 return;

357 }

423 }

358− var next = slides[idx-1].querySelectorAll('.incremental > *')[step-1];

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

359 if (next) {

425 if (next) {

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

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

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

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

362 var found = false;

428 var found = false;

363− for (var i = 0; i < incrementals.length; i++) {

429+ incrementals.forEach(function(aNode) {

364− if (incrementals[i] != next.parentNode)

430+ if (aNode != next.parentNode)

365 if (found)

431 if (found)

366− incrementals[i].removeAttribute('active');

432+ aNode.removeAttribute('active');

367 else

433 else

368− incrementals[i].setAttribute('active', true);

434+ aNode.setAttribute('active', true);

369 else

435 else

370 found = true;

436 found = true;

371− }

437+ });

372 } else {

438 } else {

373− setCursor(idx, 0);

439+ setCursor(this.idx, 0);

374 }

440 }

375 return next;

441 return next;

376 }

442 }

443+

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

445+ aMsg = [aMsg];

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

447+ aMsg.push(encodeURIComponent(arguments[i]));

448+ aWin.postMessage(aMsg.join(" "), "*");

449+ }

450+

451+ window.onload = Dz.init.bind(Dz);

452+ window.onkeydown = Dz.onkeydown.bind(Dz);

453+ window.onresize = Dz.onresize.bind(Dz);

454+ window.onhashchange = Dz.onhashchange.bind(Dz);

455+ window.onmessage = Dz.onmessage.bind(Dz);

377</script>

456</script>

378−

457+

458+

459+<script> // Helpers

460+ if (!Function.prototype.bind) {

461+ Function.prototype.bind = function (oThis) {

462+

463+ // closest thing possible to the ECMAScript 5 internal IsCallable

464+ // function

465+ if (typeof this !== "function")

466+ throw new TypeError(

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

468+ );

469+

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

471+ fToBind = this,

472+ fNOP = function () {},

473+ fBound = function () {

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

475+ aArgs.concat(Array.prototype.slice.call(arguments)));

476+ };

477+

478+ fNOP.prototype = this.prototype;

479+ fBound.prototype = new fNOP();

480+

481+ return fBound;

482+ };

483+ }

484+

485+ var $$ = (HTMLElement.prototype.$$ = function(aQuery) {

486+ return this.querySelector(aQuery);

487+ }).bind(document);

488+

489+ var $$$$ = (HTMLElement.prototype.$$$$ = function(aQuery) {

490+ return this.querySelectorAll(aQuery);

491+ }).bind(document);

492+

493+ NodeList.prototype.forEach = function(fun) {

494+ if (typeof fun !== "function") throw new TypeError();

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

496+ fun.call(this, this[i]);

497+ }

498+ }

499+

500+</script>

501+

379</body>

502</body>

380</html>

503</html>