/templates/dzslides-aapw.html

http://txt2tags.googlecode.com/ · HTML · 428 lines · 366 code · 47 blank · 15 comment · 0 complexity · e7c2b784a921a5f16166aee20c3b7b72 MD5 · raw file

  1. <style>
  2. html { background-color: black; }
  3. body { background-color: white; }
  4. /* A section is a slide. It's size is 800x600, and this will never change */
  5. section {
  6. font-family: monospace;
  7. font-size: 18px;
  8. }
  9. /* footer {
  10. position: absolute;
  11. bottom: 10px;
  12. right: 20px;
  13. } */
  14. /* Transition effect */
  15. /* Feel free to change the transition effect for original
  16. animations. See here:
  17. https://developer.mozilla.org/en/CSS/CSS_transitions
  18. How to use CSS3 Transitions: */
  19. section {
  20. -moz-transition: top 400ms linear 0s;
  21. -webkit-transition: top 400ms linear 0s;
  22. -ms-transition: top 400ms linear 0s;
  23. transition: top 400ms linear 0s;
  24. }
  25. /* Before */
  26. section { left: -150%; }
  27. /* Now */
  28. section[aria-selected] { left: 0; }
  29. /* After */
  30. section[aria-selected] ~ section { left: +150%; }
  31. /* Incremental elements */
  32. /* By default, visible */
  33. .incremental > * { opacity: 1; }
  34. /* The current item */
  35. .incremental > *[aria-selected] { color: red; opacity: 1; }
  36. /* The items to-be-selected */
  37. .incremental > *[aria-selected] ~ * { opacity: 0.2; }
  38. </style>
  39. <!-- {{{{ dzslides core
  40. #
  41. #
  42. # __ __ __ . __ ___ __
  43. # | \ / /__` | | | \ |__ /__`
  44. # |__/ /_ .__/ |___ | |__/ |___ .__/ core :€
  45. #
  46. #
  47. # The following block of code is not supposed to be edited.
  48. # But if you want to change the behavior of these slides,
  49. # feel free to hack it!
  50. #
  51. -->
  52. <!-- Default Style -->
  53. <style>
  54. * { margin: 0; padding: 0; }
  55. details { display: none; }
  56. body {
  57. width: 800px; height: 600px;
  58. margin-left: -400px; margin-top: -300px;
  59. position: absolute; top: 50%; left: 50%;
  60. overflow: hidden;
  61. }
  62. section {
  63. position: absolute;
  64. pointer-events: none;
  65. width: 100%; height: 100%;
  66. }
  67. section[aria-selected] { pointer-events: auto; }
  68. html { overflow: hidden; }
  69. body { display: none; }
  70. body.loaded { display: block; }
  71. .incremental {visibility: hidden; }
  72. .incremental[active] {visibility: visible; }
  73. </style>
  74. <script>
  75. var Dz = {
  76. remoteWindows: [],
  77. idx: -1,
  78. step: 0,
  79. slides: null,
  80. params: {
  81. autoplay: "1"
  82. }
  83. };
  84. Dz.init = function() {
  85. document.body.className = "loaded";
  86. this.slides = $$("body > section");
  87. this.setupParams();
  88. this.onhashchange();
  89. this.setupTouchEvents();
  90. this.onresize();
  91. }
  92. Dz.setupParams = function() {
  93. var p = window.location.search.substr(1).split('&');
  94. p.forEach(function(e, i, a) {
  95. var keyVal = e.split('=');
  96. Dz.params[keyVal[0]] = decodeURIComponent(keyVal[1]);
  97. });
  98. }
  99. Dz.onkeydown = function(aEvent) {
  100. // Don't intercept keyboard shortcuts
  101. if (aEvent.altKey
  102. || aEvent.ctrlKey
  103. || aEvent.metaKey
  104. || aEvent.shiftKey) {
  105. return;
  106. }
  107. if ( aEvent.keyCode == 37 // left arrow
  108. || aEvent.keyCode == 38 // up arrow
  109. || aEvent.keyCode == 33 // page up
  110. ) {
  111. aEvent.preventDefault();
  112. this.back();
  113. }
  114. if ( aEvent.keyCode == 39 // right arrow
  115. || aEvent.keyCode == 40 // down arrow
  116. || aEvent.keyCode == 34 // page down
  117. ) {
  118. aEvent.preventDefault();
  119. this.forward();
  120. }
  121. if (aEvent.keyCode == 35) { // end
  122. aEvent.preventDefault();
  123. this.goEnd();
  124. }
  125. if (aEvent.keyCode == 36) { // home
  126. aEvent.preventDefault();
  127. this.goStart();
  128. }
  129. if (aEvent.keyCode == 32) { // space
  130. aEvent.preventDefault();
  131. this.toggleContent();
  132. }
  133. }
  134. /* Touch Events */
  135. Dz.setupTouchEvents = function() {
  136. var orgX, newX;
  137. var tracking = false;
  138. var db = document.body;
  139. db.addEventListener("touchstart", start.bind(this), false);
  140. db.addEventListener("touchmove", move.bind(this), false);
  141. function start(aEvent) {
  142. aEvent.preventDefault();
  143. tracking = true;
  144. orgX = aEvent.changedTouches[0].pageX;
  145. }
  146. function move(aEvent) {
  147. if (!tracking) return;
  148. newX = aEvent.changedTouches[0].pageX;
  149. if (orgX - newX > 100) {
  150. tracking = false;
  151. this.forward();
  152. } else {
  153. if (orgX - newX < -100) {
  154. tracking = false;
  155. this.back();
  156. }
  157. }
  158. }
  159. }
  160. /* Adapt the size of the slides to the window */
  161. Dz.onresize = function() {
  162. var db = document.body;
  163. var sx = db.clientWidth / window.innerWidth;
  164. var sy = db.clientHeight / window.innerHeight;
  165. var transform = "scale(" + (1/Math.max(sx, sy)) + ")";
  166. db.style.MozTransform = transform;
  167. db.style.WebkitTransform = transform;
  168. db.style.OTransform = transform;
  169. db.style.msTransform = transform;
  170. db.style.transform = transform;
  171. }
  172. Dz.getDetails = function(aIdx) {
  173. var s = $("section:nth-of-type(" + aIdx + ")");
  174. var d = s.$("details");
  175. return d ? d.innerHTML : "";
  176. }
  177. Dz.onmessage = function(aEvent) {
  178. var argv = aEvent.data.split(" "), argc = argv.length;
  179. argv.forEach(function(e, i, a) { a[i] = decodeURIComponent(e) });
  180. var win = aEvent.source;
  181. if (argv[0] === "REGISTER" && argc === 1) {
  182. this.remoteWindows.push(win);
  183. this.postMsg(win, "REGISTERED", document.title, this.slides.length);
  184. this.postMsg(win, "CURSOR", this.idx + "." + this.step);
  185. return;
  186. }
  187. if (argv[0] === "BACK" && argc === 1)
  188. this.back();
  189. if (argv[0] === "FORWARD" && argc === 1)
  190. this.forward();
  191. if (argv[0] === "START" && argc === 1)
  192. this.goStart();
  193. if (argv[0] === "END" && argc === 1)
  194. this.goEnd();
  195. if (argv[0] === "TOGGLE_CONTENT" && argc === 1)
  196. this.toggleContent();
  197. if (argv[0] === "SET_CURSOR" && argc === 2)
  198. window.location.hash = "#" + argv[1];
  199. if (argv[0] === "GET_CURSOR" && argc === 1)
  200. this.postMsg(win, "CURSOR", this.idx + "." + this.step);
  201. if (argv[0] === "GET_NOTES" && argc === 1)
  202. this.postMsg(win, "NOTES", this.getDetails(this.idx));
  203. }
  204. Dz.toggleContent = function() {
  205. // If a Video is present in this new slide, play it.
  206. // If a Video is present in the previous slide, stop it.
  207. var s = $("section[aria-selected]");
  208. if (s) {
  209. var video = s.$("video");
  210. if (video) {
  211. if (video.ended || video.paused) {
  212. video.play();
  213. } else {
  214. video.pause();
  215. }
  216. }
  217. }
  218. }
  219. Dz.setCursor = function(aIdx, aStep) {
  220. // If the user change the slide number in the URL bar, jump
  221. // to this slide.
  222. aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : ".0";
  223. window.location.hash = "#" + aIdx + aStep;
  224. }
  225. Dz.onhashchange = function() {
  226. var cursor = window.location.hash.split("#"),
  227. newidx = 1,
  228. newstep = 0;
  229. if (cursor.length == 2) {
  230. newidx = ~~cursor[1].split(".")[0];
  231. newstep = ~~cursor[1].split(".")[1];
  232. if (newstep > Dz.slides[newidx - 1].$$('.incremental > *').length) {
  233. newstep = 0;
  234. newidx++;
  235. }
  236. }
  237. if (newidx != this.idx) {
  238. this.setSlide(newidx);
  239. }
  240. if (newstep != this.step) {
  241. this.setIncremental(newstep);
  242. }
  243. for (var i = 0; i < this.remoteWindows.length; i++) {
  244. this.postMsg(this.remoteWindows[i], "CURSOR", this.idx + "." + this.step);
  245. }
  246. }
  247. Dz.back = function() {
  248. if (this.idx == 1 && this.step == 0) {
  249. return;
  250. }
  251. if (this.step == 0) {
  252. this.setCursor(this.idx - 1,
  253. this.slides[this.idx - 2].$$('.incremental > *').length);
  254. } else {
  255. this.setCursor(this.idx, this.step - 1);
  256. }
  257. }
  258. Dz.forward = function() {
  259. if (this.idx >= this.slides.length &&
  260. this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) {
  261. return;
  262. }
  263. if (this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) {
  264. this.setCursor(this.idx + 1, 0);
  265. } else {
  266. this.setCursor(this.idx, this.step + 1);
  267. }
  268. }
  269. Dz.goStart = function() {
  270. this.setCursor(1, 0);
  271. }
  272. Dz.goEnd = function() {
  273. var lastIdx = this.slides.length;
  274. var lastStep = this.slides[lastIdx - 1].$$('.incremental > *').length;
  275. this.setCursor(lastIdx, lastStep);
  276. }
  277. Dz.setSlide = function(aIdx) {
  278. this.idx = aIdx;
  279. var old = $("section[aria-selected]");
  280. var next = $("section:nth-of-type("+ this.idx +")");
  281. if (old) {
  282. old.removeAttribute("aria-selected");
  283. var video = old.$("video");
  284. if (video) {
  285. video.pause();
  286. }
  287. }
  288. if (next) {
  289. next.setAttribute("aria-selected", "true");
  290. var video = next.$("video");
  291. if (video && !!+this.params.autoplay) {
  292. video.play();
  293. }
  294. } else {
  295. // That should not happen
  296. this.idx = -1;
  297. // console.warn("Slide doesn't exist.");
  298. }
  299. }
  300. Dz.setIncremental = function(aStep) {
  301. this.step = aStep;
  302. var old = this.slides[this.idx - 1].$('.incremental > *[aria-selected]');
  303. if (old) {
  304. old.removeAttribute('aria-selected');
  305. }
  306. var incrementals = this.slides[this.idx - 1].$$('.incremental');
  307. if (this.step <= 0) {
  308. incrementals.forEach(function(aNode) {
  309. aNode.removeAttribute('active');
  310. });
  311. return;
  312. }
  313. var next = this.slides[this.idx - 1].$$('.incremental > *')[this.step - 1];
  314. if (next) {
  315. next.setAttribute('aria-selected', true);
  316. next.parentNode.setAttribute('active', true);
  317. var found = false;
  318. incrementals.forEach(function(aNode) {
  319. if (aNode != next.parentNode)
  320. if (found)
  321. aNode.removeAttribute('active');
  322. else
  323. aNode.setAttribute('active', true);
  324. else
  325. found = true;
  326. });
  327. } else {
  328. setCursor(this.idx, 0);
  329. }
  330. return next;
  331. }
  332. Dz.postMsg = function(aWin, aMsg) { // [arg0, [arg1...]]
  333. aMsg = [aMsg];
  334. for (var i = 2; i < arguments.length; i++)
  335. aMsg.push(encodeURIComponent(arguments[i]));
  336. aWin.postMessage(aMsg.join(" "), "*");
  337. }
  338. function init() {
  339. Dz.init();
  340. window.onkeydown = Dz.onkeydown.bind(Dz);
  341. window.onresize = Dz.onresize.bind(Dz);
  342. window.onhashchange = Dz.onhashchange.bind(Dz);
  343. window.onmessage = Dz.onmessage.bind(Dz);
  344. }
  345. window.onload = init;
  346. </script>
  347. <script> // Helpers
  348. if (!Function.prototype.bind) {
  349. Function.prototype.bind = function (oThis) {
  350. // closest thing possible to the ECMAScript 5 internal IsCallable
  351. // function
  352. if (typeof this !== "function")
  353. throw new TypeError(
  354. "Function.prototype.bind - what is trying to be fBound is not callable"
  355. );
  356. var aArgs = Array.prototype.slice.call(arguments, 1),
  357. fToBind = this,
  358. fNOP = function () {},
  359. fBound = function () {
  360. return fToBind.apply( this instanceof fNOP ? this : oThis || window,
  361. aArgs.concat(Array.prototype.slice.call(arguments)));
  362. };
  363. fNOP.prototype = this.prototype;
  364. fBound.prototype = new fNOP();
  365. return fBound;
  366. };
  367. }
  368. var $ = (HTMLElement.prototype.$ = function(aQuery) {
  369. return this.querySelector(aQuery);
  370. }).bind(document);
  371. var $$ = (HTMLElement.prototype.$$ = function(aQuery) {
  372. return this.querySelectorAll(aQuery);
  373. }).bind(document);
  374. NodeList.prototype.forEach = function(fun) {
  375. if (typeof fun !== "function") throw new TypeError();
  376. for (var i = 0; i < this.length; i++) {
  377. fun.call(this, this[i]);
  378. }
  379. }
  380. </script>
  381. <!-- vim: set fdm=marker: }}} -->