Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Initial commit;

  • Loading branch information...
commit eb7f09faf3a9b8916312487dec9b7109de511389 0 parents
@DamonOehlman authored
Showing with 3,683 additions and 0 deletions.
  1. +2 −0  .gitignore
  2. +13 −0 Makefile
  3. BIN  assets/eventorder-bubble.png
  4. BIN  assets/eventorder-capture.png
  5. BIN  assets/simple-dom-structure.png
  6. +303 −0 assets/simple-dom-structure.svg
  7. +6 −0 files/chunks.md
  8. +84 −0 files/eve.md
  9. +11 −0 files/intro.md
  10. +5 −0 files/references.md
  11. +53 −0 files/traditional.md
  12. BIN  images/2817046610_5bea4bc4ff_b.jpg
  13. BIN  images/3815200569_c64290f046_b.jpg
  14. BIN  images/4227253361_0e1e73c08f_b.jpg
  15. BIN  images/4905848082_624044fba4_b.jpg
  16. BIN  images/4951169399_c08942bd85_b.jpg
  17. BIN  images/5058340966_7bea659712_o.jpg
  18. BIN  images/5498393620_b4990431c6_b.jpg
  19. BIN  images/5589243043_28e4b45a28_b.jpg
  20. BIN  images/5606183129_9695c06f9e_b.jpg
  21. BIN  images/5736954579_896755ca20_b.jpg
  22. BIN  images/5755308204_f8b0c74da7_b.jpg
  23. BIN  images/5790252062_fb6aeba3ec_o.jpg
  24. BIN  images/5944308910_44a50fba49_b.jpg
  25. BIN  images/6968108915_88369197b2_o.jpg
  26. +34 −0 images/sources.md
  27. +34 −0 index.json
  28. BIN  output/3815200569_c64290f046_b.jpg
  29. BIN  output/4905848082_624044fba4_b.jpg
  30. BIN  output/4951169399_c08942bd85_b.jpg
  31. BIN  output/5058340966_7bea659712_o.jpg
  32. BIN  output/5498393620_b4990431c6_b.jpg
  33. BIN  output/5589243043_28e4b45a28_b.jpg
  34. BIN  output/5606183129_9695c06f9e_b.jpg
  35. BIN  output/5736954579_896755ca20_b.jpg
  36. BIN  output/5755308204_f8b0c74da7_b.jpg
  37. BIN  output/5790252062_fb6aeba3ec_o.jpg
  38. BIN  output/5944308910_44a50fba49_b.jpg
  39. BIN  output/assets/fonts/leaguegothic/league_gothic-webfont.ttf
  40. +114 −0 output/css/highlight.zenburn.css
  41. +944 −0 output/css/main.css
  42. +42 −0 output/css/pres.style.css
  43. +57 −0 output/css/reset.css
  44. BIN  output/images/2817046610_5bea4bc4ff_b.jpg
  45. BIN  output/images/3815200569_c64290f046_b.jpg
  46. BIN  output/images/4227253361_0e1e73c08f_b.jpg
  47. BIN  output/images/4905848082_624044fba4_b.jpg
  48. BIN  output/images/4951169399_c08942bd85_b.jpg
  49. BIN  output/images/5058340966_7bea659712_o.jpg
  50. BIN  output/images/5498393620_b4990431c6_b.jpg
  51. BIN  output/images/5589243043_28e4b45a28_b.jpg
  52. BIN  output/images/5606183129_9695c06f9e_b.jpg
  53. BIN  output/images/5736954579_896755ca20_b.jpg
  54. BIN  output/images/5755308204_f8b0c74da7_b.jpg
  55. BIN  output/images/5790252062_fb6aeba3ec_o.jpg
  56. BIN  output/images/5944308910_44a50fba49_b.jpg
  57. BIN  output/images/6968108915_88369197b2_o.jpg
  58. BIN  output/images/eventorder-bubble.png
  59. BIN  output/images/eventorder-capture.png
  60. BIN  output/images/simple-dom-structure.png
  61. +34 −0 output/images/sources.md
  62. +273 −0 output/index.html
  63. +56 −0 output/js/highlight-javascript.js
  64. +668 −0 output/js/highlight.js
  65. +4 −0 output/js/jquery.min.js
  66. +17 −0 output/js/pres.js
  67. +793 −0 output/js/reveal.js
  68. +2 −0  output/lib/classList.js
  69. +30 −0 output/sources.md
  70. +23 −0 package.json
  71. +42 −0 resources/css/pres.style.css
  72. +17 −0 resources/js/pres.js
  73. +12 −0 src/pres.js
  74. +10 −0 upload.js
2  .gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+node_modules
13 Makefile
@@ -0,0 +1,13 @@
+SHELL := /bin/bash
+
+build:
+ @bake src/pres.js --output resources/js/
+ @cp -r images output/
+ @cp assets/*.png output/images
+ @/development/projects/DamonOehlman/boxit/bin/boxit
+ @node upload.js
+
+test:
+ @mocha --reporter spec
+
+.PHONY: test
BIN  assets/eventorder-bubble.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  assets/eventorder-capture.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  assets/simple-dom-structure.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
303 assets/simple-dom-structure.svg
@@ -0,0 +1,303 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="560"
+ height="210"
+ id="svg2"
+ version="1.1"
+ inkscape:version="0.48.2 r9819"
+ sodipodi:docname="simple-dom-structure.svg"
+ inkscape:export-filename="/Volumes/development/projects/talks/js-events/assets/eventorder-capture.png"
+ inkscape:export-xdpi="128.57001"
+ inkscape:export-ydpi="128.57001">
+ <defs
+ id="defs4" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="1.6178571"
+ inkscape:cx="279.3819"
+ inkscape:cy="105"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer3"
+ showgrid="false"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0"
+ inkscape:window-width="1393"
+ inkscape:window-height="856"
+ inkscape:window-x="47"
+ inkscape:window-y="0"
+ inkscape:window-maximized="0" />
+ <metadata
+ id="metadata7">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="background"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(-97.14286,-108.07646)"
+ style="display:inline">
+ <rect
+ style="fill:#f2f2f2;fill-opacity:1;stroke:none"
+ id="rect2985"
+ width="560"
+ height="210"
+ x="97.14286"
+ y="108.07646" />
+ <text
+ xml:space="preserve"
+ style="font-size:22.23077583px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+ x="115.13882"
+ y="139.9852"
+ id="text2987"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan2989"
+ x="115.13882"
+ y="139.9852"
+ style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-family:Futura;-inkscape-font-specification:Futura Medium">document</tspan></text>
+ <g
+ id="g2997"
+ transform="translate(0,16.970563)">
+ <rect
+ style="fill:none;stroke:#000000;stroke-width:0.95261365;stroke-opacity:1"
+ id="rect2991"
+ width="520.8844"
+ height="141.02634"
+ x="113.74587"
+ y="143.53519" />
+ <text
+ xml:space="preserve"
+ style="font-size:16.34052467px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+ x="123.29431"
+ y="166.55893"
+ id="text2993"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan2995"
+ x="123.29431"
+ y="166.55893"
+ style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-family:Futura;-inkscape-font-specification:Futura Medium">div</tspan></text>
+ </g>
+ <g
+ id="g3002"
+ transform="matrix(0.77315994,0,0,0.77315994,34.77364,78.796425)"
+ style="stroke:none" />
+ <g
+ id="g3778"
+ transform="matrix(0.90284248,0,0,0.90284248,20.622256,65.199165)">
+ <rect
+ y="143.53519"
+ x="113.74587"
+ height="107.48129"
+ width="555.2478"
+ id="rect3780"
+ style="fill:none;stroke:#000000;stroke-width:0.85862952;stroke-opacity:1" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text3782"
+ y="166.55893"
+ x="123.29431"
+ style="font-size:16.34052467px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-family:Futura;-inkscape-font-specification:Futura Medium"
+ y="166.55893"
+ x="123.29431"
+ id="tspan3784"
+ sodipodi:role="line">div</tspan></text>
+ </g>
+ <g
+ id="g3832"
+ transform="translate(-60,195.97056)">
+ <rect
+ ry="5"
+ rx="5"
+ y="32.133102"
+ x="192.96581"
+ height="22.775028"
+ width="69.222603"
+ id="rect3786"
+ style="fill:#b3b3b3;fill-opacity:1;stroke:#999999;stroke-width:1.01057422;stroke-linecap:square;stroke-miterlimit:5;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+ <text
+ xml:space="preserve"
+ style="font-size:13.45586205px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+ x="208.46098"
+ y="48.433491"
+ id="text3782-0"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan3784-4"
+ x="208.46098"
+ y="48.433491"
+ style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-family:Futura;-inkscape-font-specification:Futura Medium">button</tspan></text>
+ </g>
+ <g
+ transform="translate(-60,226.97056)"
+ id="g3837">
+ <rect
+ style="fill:#b3b3b3;fill-opacity:1;stroke:#999999;stroke-width:1.01057422;stroke-linecap:square;stroke-miterlimit:5;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+ id="rect3839"
+ width="69.222603"
+ height="22.775028"
+ x="192.96581"
+ y="32.133102"
+ rx="5"
+ ry="5" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text3841"
+ y="48.433491"
+ x="208.46098"
+ style="font-size:13.45586205px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-family:Futura;-inkscape-font-specification:Futura Medium"
+ y="48.433491"
+ x="208.46098"
+ id="tspan3843"
+ sodipodi:role="line">button</tspan></text>
+ </g>
+ </g>
+ <g
+ inkscape:groupmode="layer"
+ id="layer2"
+ inkscape:label="capture"
+ style="display:inline">
+ <rect
+ style="opacity:0;fill:#808080;fill-opacity:1;stroke:none"
+ id="rect3865"
+ width="40.794701"
+ height="82.207504"
+ x="307.81458"
+ y="81.434875" />
+ <rect
+ style="opacity:0;fill:#808080;fill-opacity:1;stroke:none"
+ id="rect3867"
+ width="33.377483"
+ height="77.880798"
+ x="313.37747"
+ y="78.962471" />
+ <rect
+ style="opacity:0;fill:#666666;fill-opacity:1;stroke:none"
+ id="rect3869"
+ width="116.82119"
+ height="21.633554"
+ x="280.6181"
+ y="-31.677704" />
+ <g
+ id="g3902">
+ <g
+ style="fill:#c87137"
+ transform="translate(63.046358,4.8639601)"
+ id="g3875">
+ <rect
+ style="fill:#c87137;fill-opacity:1;stroke:none"
+ id="rect3871"
+ width="108.16778"
+ height="30.905077"
+ x="14.988962"
+ y="-315.23178"
+ transform="matrix(0,1,-1,0,0,0)" />
+ <path
+ sodipodi:type="star"
+ style="fill:#c87137;fill-opacity:1;stroke:none"
+ id="path3873"
+ sodipodi:sides="3"
+ sodipodi:cx="92.09713"
+ sodipodi:cy="-75.562912"
+ sodipodi:r1="26.585552"
+ sodipodi:r2="13.292776"
+ sodipodi:arg1="1.5707963"
+ sodipodi:arg2="2.6179939"
+ inkscape:flatsided="true"
+ inkscape:rounded="0"
+ inkscape:randomized="0"
+ d="m 92.097131,-48.97736 -23.023765,-39.878327 46.047524,-2e-6 z"
+ transform="translate(207.68212,209.53642)"
+ inkscape:transform-center-y="6.6463882" />
+ </g>
+ <text
+ sodipodi:linespacing="125%"
+ id="text2987-6"
+ y="152.85748"
+ x="384.05276"
+ style="font-size:16.52608109px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#c87137;fill-opacity:1;stroke:none;display:inline;font-family:Sans"
+ xml:space="preserve"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;fill:#c87137;fill-opacity:1;font-family:Futura;-inkscape-font-specification:Futura Medium"
+ y="152.85748"
+ x="384.05276"
+ id="tspan2989-6"
+ sodipodi:role="line">capture order</tspan></text>
+ </g>
+ </g>
+ <g
+ inkscape:groupmode="layer"
+ id="layer3"
+ inkscape:label="bubble"
+ style="display:none">
+ <g
+ id="g3875-0"
+ transform="matrix(1,0,0,-1,14.239692,180.95282)"
+ style="fill:#c87137">
+ <rect
+ transform="matrix(0,1,-1,0,0,0)"
+ y="-315.23178"
+ x="14.988962"
+ height="30.905077"
+ width="108.16778"
+ id="rect3871-0"
+ style="fill:#c87137;fill-opacity:1;stroke:none" />
+ <path
+ inkscape:transform-center-y="6.6463882"
+ transform="translate(207.68212,209.53642)"
+ d="m 92.097131,-48.97736 -23.023765,-39.878327 46.047524,-2e-6 z"
+ inkscape:randomized="0"
+ inkscape:rounded="0"
+ inkscape:flatsided="true"
+ sodipodi:arg2="2.6179939"
+ sodipodi:arg1="1.5707963"
+ sodipodi:r2="13.292776"
+ sodipodi:r1="26.585552"
+ sodipodi:cy="-75.562912"
+ sodipodi:cx="92.09713"
+ sodipodi:sides="3"
+ id="path3873-5"
+ style="fill:#c87137;fill-opacity:1;stroke:none"
+ sodipodi:type="star" />
+ </g>
+ <text
+ xml:space="preserve"
+ style="font-size:16.52608109px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#c87137;fill-opacity:1;stroke:none;display:inline;font-family:Sans"
+ x="335.24609"
+ y="78.608032"
+ id="text2987-6-2"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan2989-6-2"
+ x="335.24609"
+ y="78.608032"
+ style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;fill:#c87137;fill-opacity:1;font-family:Futura;-inkscape-font-specification:Futura Medium">bubble order</tspan></text>
+ </g>
+</svg>
6 files/chunks.md
@@ -0,0 +1,6 @@
+---
+
+:data-bg:> images/4227253361_0e1e73c08f_b.jpg
+:data-attribution:> http://www.flickr.com/photos/kwl/4227253361/
+
+# WARNING: I'm nuts about events
84 files/eve.md
@@ -0,0 +1,84 @@
+:data-bg:> images/5498393620_b4990431c6_b.jpg
+:data-attribution:> http://www.flickr.com/photos/s3a/5498393620/
+
+# Liberating Events
+
+---
+
+## Events can be Free
+
+- Almost all implementations of events involve binding event handlers for a named event on a particular object.
+- Consider what might be possible if events could run free?
+
+---
+
+## Eve can liberate events
+
+- Eve will allow you to create a more loosely coupled app than you might have previously thought possible.
+- Understand that eve embraces Javascript.
+
+---
+
+## Example: Mapping Key Events
+
+Consider the following (somewhat contrived) example:
+
+```js
+function captureKey(evt) {
+ eve(
+ 'evematrix.key',
+ evt.target,
+ String.fromCharCode(evt.charCode)
+ );
+}
+
+document.addEventListener('keypress', captureKey, true);
+```
+
+That's our core application!
+
+---
+
+## Today's most impressive Demo
+
+<http://snurl.com/evedemo>
+
+---
+
+## Our First Extension: Motion
+
+```js
+// let's write a key handler to do something
+eve.on('evematrix.key', function(key) {
+ // create a new span element
+
+ // after a period of time, add a transform that will
+ // move the span element off the screen
+ setTimeout(function() {
+ stylar(span).set(
+ 'transform',
+ 'translate(0px, ' + (window.innerHeight + 100) + 'px)'
+ );
+ }, 50);
+
+ // hacky - after the transition has executed remove it
+ setTimeout(function() {
+ document.body.removeChild(span);
+ }, 1700);
+});
+```
+
+---
+
+## Extension Two: Network Comms
+
+```js
+```
+
+---
+
+:data-bg:> images/6968108915_88369197b2_o.jpg
+:data-attribution:> http://www.flickr.com/photos/32482342@N05/6968108915/
+
+---
+
11 files/intro.md
@@ -0,0 +1,11 @@
+:data-bg:> images/5944308910_44a50fba49_b.jpg
+:data-attribution:> http://www.flickr.com/photos/pasukaru76/5944308910/in/set-72157624732951397/
+
+# Javascript Event Magic
+
+---
+
+## Overview
+
+- High level overview of JS and Browser events
+- Rethinking Events for Extensible Web Apps
5 files/references.md
@@ -0,0 +1,5 @@
+## References
+
+- [Quirks Mode - Event Order Info](http://www.quirksmode.org/js/events_order.html)
+
+- <https://github.com/DamonOehlman/demo-matrixeve>
53 files/traditional.md
@@ -0,0 +1,53 @@
+:data-bg:> images/5589243043_28e4b45a28_b.jpg
+:data-attribution:> http://www.flickr.com/photos/pasukaru76/
+
+# Now and Then
+
+---
+
+## Events are Bound to Something
+
+- `targetObject.addEventListener`
+- `targetObject.removeEventListener`
+
+---
+
+## Bubbling vs Capture
+
+Consider the following code:
+
+```js
+element.addEventListener(
+ 'click', // event name
+ handleClick, // event handler
+ false // event, um?!
+);
+```
+
+What is that third value specifying anyway?
+
+---
+
+## Event Phasing: Bubbling
+
+![](images/eventorder-bubble.png)
+
+---
+
+## Bubble Fiddle
+
+<iframe style="width: 100%; height: 420px;" src="http://jsfiddle.net/DamonOehlman/LcbwB/embedded/js,html,result/presentation/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+
+
+---
+
+## Event Phasing: Capture
+
+![](images/eventorder-capture.png)
+
+---
+
+## Capture Fiddle
+
+<iframe style="width: 100%; height: 420px;" src="http://jsfiddle.net/DamonOehlman/Mpyh8/embedded/js,html,result/presentation/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+
BIN  images/2817046610_5bea4bc4ff_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/3815200569_c64290f046_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/4227253361_0e1e73c08f_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/4905848082_624044fba4_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/4951169399_c08942bd85_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/5058340966_7bea659712_o.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/5498393620_b4990431c6_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/5589243043_28e4b45a28_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/5606183129_9695c06f9e_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/5736954579_896755ca20_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/5755308204_f8b0c74da7_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/5790252062_fb6aeba3ec_o.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/5944308910_44a50fba49_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/6968108915_88369197b2_o.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 images/sources.md
@@ -0,0 +1,34 @@
+- Tigers: <http://www.flickr.com/photos/tryburn/3652270938/>
+- Makeshift Clock: <http://www.flickr.com/photos/distantatlas/6689032545/>
+- Lego Valentine: <http://www.flickr.com/photos/kaptainkobold/6873936107/>
+- Lego Escape: <http://www.flickr.com/photos/s3a/5498393620/>
+- Lego Tangle <http://www.flickr.com/photos/azrasta/4865872893/>
+- Lego Experiment <http://www.flickr.com/photos/pasukaru76/5975138384/>
+- Lego Railway Track <http://www.flickr.com/photos/evil_cheese_scientist/5755308204/>
+- Lego Bad Guys <http://www.flickr.com/photos/eldave/5742538697/>
+- Lego Megaphone <http://www.flickr.com/photos/thevoicewithin/3815200569/>
+- Lego Postbox <http://www.flickr.com/photos/ntr23/4905848082/in/photostream/>
+- Lego Letter <http://www.flickr.com/photos/ntr23/5058340966/>
+- Lego Wire <http://www.flickr.com/photos/pedrovezini/5158715290/>
+- Lego Zap <http://www.flickr.com/photos/pasukaru76/4951169399/>
+- Lego Present <http://www.flickr.com/photos/pasukaru76/5333260849/in/set-72157624732951397/>
+- Lego Steampunk <http://www.flickr.com/photos/pasukaru76/5589243043/in/set-72157624732951397/>
+- Lego Hazmat <http://www.flickr.com/photos/pasukaru76/5606183129/in/set-72157624732951397/>
+- Lego Interview <http://www.flickr.com/photos/pasukaru76/5613865198/in/set-72157624732951397/>
+- Lego Contraption <http://www.flickr.com/photos/pasukaru76/5729640585/in/set-72157624732951397/>
+
+- Lego Pirates <http://www.flickr.com/photos/pasukaru76/5736954579/in/set-72157624732951397/>
+
+- Lego Alien Globe <http://www.flickr.com/photos/pasukaru76/5790252062/in/set-72157624732951397/>
+
+- Lego Magic <http://www.flickr.com/photos/pasukaru76/5944308910/in/set-72157624732951397/>
+
+- Clones <http://www.flickr.com/photos/tim_norris/2545465723/>
+
+- Lego Twitter <http://www.flickr.com/photos/photography-andreas/6252678567/>
+
+- Lego Mime <http://www.flickr.com/photos/25171207@N02/5270245821/>
+
+- Lego Crazy Man <http://www.flickr.com/photos/kwl/4227253361/>
+- Lego Flying <http://www.flickr.com/photos/32482342@N05/6968108915/>
+- Lego Ranger <http://www.flickr.com/photos/joriel/2817046610/>
34 index.json
@@ -0,0 +1,34 @@
+{
+ "title": "Javascript Events",
+ "template": "reveal.js",
+ "extras": [ "extension-hash", "theme-swiss" ],
+
+ "sources": [
+ "files/intro.md",
+ "files/traditional.md",
+ "files/eve.md",
+ "files/references.md"
+ ],
+
+ "includes": {
+ "head": [
+ "css/pres.style.css"
+ ],
+
+ "body": [
+ "js/pres.js"
+ ]
+ },
+
+ "theme": "dark",
+ "plugins": {
+ "code": {
+ "style": "zenburn"
+ }
+ },
+
+ "resources": [
+ "css/pres.style.css <= resources/css/pres.style.css",
+ "js/pres.js <= resources/js/pres.js"
+ ]
+}
BIN  output/3815200569_c64290f046_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  output/4905848082_624044fba4_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  output/4951169399_c08942bd85_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  output/5058340966_7bea659712_o.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  output/5498393620_b4990431c6_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  output/5589243043_28e4b45a28_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  output/5606183129_9695c06f9e_b.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  output/5736954579_896755ca20_b.jpg
Diff not rendered
BIN  output/5755308204_f8b0c74da7_b.jpg
Diff not rendered
BIN  output/5790252062_fb6aeba3ec_o.jpg
Diff not rendered
BIN  output/5944308910_44a50fba49_b.jpg
Diff not rendered
BIN  output/assets/fonts/leaguegothic/league_gothic-webfont.ttf
Binary file not shown
114 output/css/highlight.zenburn.css
@@ -0,0 +1,114 @@
+/*
+
+Zenburn style from voldmar.ru (c) Vladimir Epifanov <voldmar@voldmar.ru>
+based on dark.css by Ivan Sagalaev
+
+*/
+
+pre code {
+ display: block; padding: 0.5em;
+ background: #3F3F3F;
+ color: #DCDCDC;
+}
+
+pre .keyword,
+pre .tag,
+pre .css .class,
+pre .css .id,
+pre .lisp .title,
+pre .request,
+pre .status {
+ color: #E3CEAB;
+}
+
+pre .django .template_tag,
+pre .django .variable,
+pre .django .filter .argument {
+ color: #DCDCDC;
+}
+
+pre .number,
+pre .date {
+ color: #8CD0D3;
+}
+
+pre .dos .envvar,
+pre .dos .stream,
+pre .variable,
+pre .apache .sqbracket {
+ color: #EFDCBC;
+}
+
+pre .dos .flow,
+pre .diff .change,
+pre .python .exception,
+pre .python .built_in,
+pre .literal,
+pre .tex .special {
+ color: #EFEFAF;
+}
+
+pre .diff .chunk,
+pre .ruby .subst {
+ color: #8F8F8F;
+}
+
+pre .dos .keyword,
+pre .python .decorator,
+pre .title,
+pre .haskell .type,
+pre .diff .header,
+pre .ruby .class .parent,
+pre .apache .tag,
+pre .nginx .built_in,
+pre .tex .command,
+pre .input_number {
+ color: #efef8f;
+}
+
+pre .dos .winutils,
+pre .ruby .symbol,
+pre .ruby .symbol .string,
+pre .ruby .symbol .keyword,
+pre .ruby .symbol .keymethods,
+pre .ruby .string,
+pre .ruby .instancevar {
+ color: #DCA3A3;
+}
+
+pre .diff .deletion,
+pre .string,
+pre .tag .value,
+pre .preprocessor,
+pre .built_in,
+pre .sql .aggregate,
+pre .javadoc,
+pre .smalltalk .class,
+pre .smalltalk .localvars,
+pre .smalltalk .array,
+pre .css .rules .value,
+pre .attr_selector,
+pre .pseudo,
+pre .apache .cbracket,
+pre .tex .formula {
+ color: #CC9393;
+}
+
+pre .shebang,
+pre .diff .addition,
+pre .comment,
+pre .java .annotation,
+pre .template_comment,
+pre .pi,
+pre .doctype {
+ color: #7F9F7F;
+}
+
+pre .coffeescript .javascript,
+pre .xml .css,
+pre .xml .javascript,
+pre .xml .vbscript,
+pre .tex .formula {
+ opacity: 0.5;
+}
+
944 output/css/main.css
@@ -0,0 +1,944 @@
+/**
+ * Main styles for reveal.js
+ *
+ * @author Hakim El Hattab
+ */
+
+
+/*********************************************
+ * FONT-FACE DEFINITIONS
+ *********************************************/
+
+@font-face {
+ font-family: 'League Gothic';
+ src: url('../assets/fonts/leaguegothic/league_gothic-webfont.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+
+html, body {
+ position: relative;
+ padding: 0;
+ margin: 0;
+ overflow: hidden;
+
+ font-family: 'Lato', Times, 'Times New Roman', serif;
+ font-size: 36px;
+ font-weight: 200;
+ letter-spacing: -0.02em;
+
+ color: #eee;
+
+ width: 100%;
+ height: 100%;
+
+ min-height: 600px;
+}
+
+html {
+ background: #1c1e20;
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1NTVhNWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWMxZTIwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%, rgba(28,30,32,1) 100%);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(85,90,95,1)), color-stop(100%,rgba(28,30,32,1)));
+ background: -webkit-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
+ background: -o-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
+ background: -ms-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
+ background: radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
+}
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+#reveal h1,
+#reveal h2,
+#reveal h3,
+#reveal h4 {
+ margin: 0 0 20px 0;
+
+ color: #eee;
+
+ font-family: 'League Gothic', sans-serif;
+ line-height: 0.9em;
+ letter-spacing: 0.02em;
+
+ text-transform: uppercase;
+ text-shadow: 0px 0px 6px rgba(0,0,0,0.2);
+}
+
+#reveal h1 { font-size: 136px; }
+#reveal h2 { font-size: 76px; }
+#reveal h3 { font-size: 56px; }
+#reveal h4 { font-size: 36px; }
+
+#reveal h1.inverted,
+#reveal h2.inverted,
+#reveal h3.inverted,
+#reveal h4.inverted {
+ color: #fff;
+ text-shadow: 0px 0px 2px rgba(0,0,0,0.2);
+}
+
+#reveal h1 {
+ text-shadow: 0 1px 0 #ccc,
+ 0 2px 0 #c9c9c9,
+ 0 3px 0 #bbb,
+ 0 4px 0 #b9b9b9,
+ 0 5px 0 #aaa,
+ 0 6px 1px rgba(0,0,0,.1),
+ 0 0 5px rgba(0,0,0,.1),
+ 0 1px 3px rgba(0,0,0,.3),
+ 0 3px 5px rgba(0,0,0,.2),
+ 0 5px 10px rgba(0,0,0,.25),
+ 0 20px 20px rgba(0,0,0,.15);
+}
+
+
+/*********************************************
+ * VIEW FRAGMENTS
+ *********************************************/
+
+#reveal .slides section .fragment {
+ opacity: 0;
+
+ -webkit-transition: all .2s ease;
+ -moz-transition: all .2s ease;
+ -ms-transition: all .2s ease;
+ -o-transition: all .2s ease;
+ transition: all .2s ease;
+}
+ #reveal .slides section .fragment.visible {
+ opacity: 1;
+ }
+
+
+/*********************************************
+ * DEFAULT ELEMENT STYLES
+ *********************************************/
+
+#reveal .slides section {
+ line-height: 1.2em;
+ font-weight: normal;
+}
+
+#reveal strong,
+#reveal b {
+ font-weight: bold;
+}
+
+#reveal em,
+#reveal i {
+ font-style: italic;
+}
+
+#reveal ol,
+#reveal ul {
+ display: inline-block;
+
+ text-align: left;
+ margin: 0 auto;
+}
+
+#reveal ol {
+ list-style: decimal inside;
+}
+
+#reveal ul {
+ list-style: disc;
+}
+ #reveal ul>li>ul {
+ list-style: square;
+ }
+ #reveal ul>li>ul>li>ul {
+ list-style: circle;
+ }
+
+#reveal ul>li>ul,
+#reveal ol>li>ol,
+#reveal ul>li>ul>li>ul,
+#reveal ol>li>ol>li>ol {
+ display: block;
+ margin-left: 40px;
+}
+
+#reveal p {
+ margin-bottom: 10px;
+}
+
+#reveal blockquote {
+ display: block;
+ position: relative;
+ width: 70%;
+ margin: 5px auto;
+ padding: 5px;
+
+ font-style: italic;
+ background: rgba(255, 255, 255, 0.05);
+ box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
+}
+ #reveal blockquote:before {
+ content: '';
+ }
+ #reveal blockquote:after {
+ content: '';
+ }
+
+#reveal pre {
+ display: block;
+ position: relative;
+ width: 90%;
+ margin: 10px auto;
+
+ text-align: left;
+ font-size: 14px;
+ font-family: monospace;
+ line-height: 1.2em;
+
+ word-wrap: break-word;
+
+ box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
+}
+
+#reveal code {
+ font-family: monospace;
+}
+
+#reveal small {
+ font-size: 60%;
+ line-height: 1em;
+ vertical-align: top;
+}
+
+#reveal q {
+ font-style: italic;
+}
+ #reveal q:before {
+ content: '';
+ }
+ #reveal q:after {
+ content: '';
+ }
+
+#reveal a:not(.image) {
+ color: hsl(185, 85%, 50%);
+ text-decoration: none;
+
+ -webkit-transition: all .2s ease;
+ -moz-transition: all .2s ease;
+ -ms-transition: all .2s ease;
+ -o-transition: all .2s ease;
+ transition: all .2s ease;
+}
+
+ #reveal a:not(.image):hover {
+ color: hsl(185, 85%, 70%);
+ background: hsla(185, 25%, 20%, 0.4);
+ text-shadow: none;
+ border: none;
+ border-radius: 2px;
+ }
+
+#reveal section img {
+ margin: 30px 0 0 0;
+ background: rgba(255,255,255,0.12);
+ border: 4px solid #eee;
+
+ -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+
+ -webkit-transition: all .2s linear;
+ -moz-transition: all .2s linear;
+ -ms-transition: all .2s linear;
+ -o-transition: all .2s linear;
+ transition: all .2s linear;
+}
+
+ #reveal a:hover img {
+ background: rgba(255,255,255,0.2);
+ border-color: #13DAEC;
+
+ -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+ -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+ }
+
+
+/*********************************************
+ * CONTROLS
+ *********************************************/
+
+#reveal .controls {
+ display: none;
+ position: fixed;
+ width: 100px;
+ height: 100px;
+ z-index: 30;
+
+ right: 0;
+ bottom: 0;
+}
+
+ #reveal .controls a {
+ font-size: 30px;
+ position: absolute;
+ opacity: 0.1;
+ color: #fff;
+ }
+ #reveal .controls a.enabled {
+ opacity: 0.6;
+ color: hsl(185, 85%, 70%);
+
+ text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
+ }
+ #reveal .controls a.enabled:active {
+ margin-top: 1px;
+ }
+
+ #reveal .controls .left {
+ top: 30px;
+ }
+
+ #reveal .controls .right {
+ left: 60px;
+ top: 30px;
+ }
+
+ #reveal .controls .up {
+ left: 30px;
+ }
+
+ #reveal .controls .down {
+ left: 30px;
+ top: 60px;
+
+ }
+
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+
+#reveal .progress {
+ position: fixed;
+ display: none;
+ height: 3px;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+
+ background: rgba(0,0,0,0.2);
+}
+
+ #reveal .progress span {
+ display: block;
+ background: hsl(185, 85%, 50%);
+ height: 100%;
+ width: 0px;
+
+ -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ }
+
+/*********************************************
+ * ROLLING LINKS
+ *********************************************/
+
+#reveal .roll {
+ display: inline-block;
+ overflow: hidden;
+
+ vertical-align: top;
+
+ -webkit-perspective: 400px;
+ -moz-perspective: 400px;
+ -ms-perspective: 400px;
+ perspective: 400px;
+
+ -webkit-perspective-origin: 50% 50%;
+ -moz-perspective-origin: 50% 50%;
+ -ms-perspective-origin: 50% 50%;
+ perspective-origin: 50% 50%;
+}
+ #reveal .roll:hover {
+ background: none;
+ text-shadow: none;
+ }
+#reveal .roll span {
+ display: block;
+ position: relative;
+ padding: 0 2px;
+
+ pointer-events: none;
+
+ -webkit-transition: all 400ms ease;
+ -moz-transition: all 400ms ease;
+ -ms-transition: all 400ms ease;
+ transition: all 400ms ease;
+
+ -webkit-transform-origin: 50% 0%;
+ -moz-transform-origin: 50% 0%;
+ -ms-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -ms-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+}
+ #reveal .roll:hover span {
+ background: rgba(0,0,0,0.5);
+
+ -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
+ -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
+ -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
+ transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
+ }
+#reveal .roll span:after {
+ content: attr(data-title);
+
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ padding: 0 2px;
+
+ color: #fff;
+ background: hsl(185, 60%, 35%);
+
+ -webkit-transform-origin: 50% 0%;
+ -moz-transform-origin: 50% 0%;
+ -ms-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+
+ -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
+ -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
+ -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
+ transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
+}
+
+
+/*********************************************
+ * SLIDES
+ *********************************************/
+
+#reveal .slides {
+ position: absolute;
+ width: 900px;
+ height: 600px;
+
+ left: 50%;
+ top: 50%;
+ margin-left: -450px;
+ margin-top: -320px;
+ padding: 20px 0px;
+
+ text-align: center;
+
+ -webkit-transition: -webkit-perspective .4s ease;
+ -moz-transition: -moz-perspective .4s ease;
+ -ms-transition: -ms-perspective .4s ease;
+ -o-transition: -o-perspective .4s ease;
+ transition: perspective .4s ease;
+
+ -webkit-perspective: 600px;
+ -moz-perspective: 600px;
+ -ms-perspective: 600px;
+ perspective: 600px;
+
+ -webkit-perspective-origin: 50% 25%;
+ -moz-perspective-origin: 50% 25%;
+ -ms-perspective-origin: 50% 25%;
+ perspective-origin: 50% 25%;
+}
+
+#reveal .slides>section,
+#reveal .slides>section>section {
+ display: none;
+ position: absolute;
+ width: 100%;
+ min-height: 600px;
+
+ z-index: 10;
+
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -ms-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+
+ -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+}
+
+#reveal .slides>section.present {
+ display: block;
+ z-index: 11;
+ opacity: 1;
+}
+
+
+/*********************************************
+ * DEFAULT TRANSITION
+ *********************************************/
+
+#reveal .slides>section.past {
+ display: block;
+ opacity: 0;
+
+ -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+ -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+ -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+}
+#reveal .slides>section.future {
+ display: block;
+ opacity: 0;
+
+ -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+ -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+ -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+}
+
+#reveal .slides>section>section.past {
+ display: block;
+ opacity: 0;
+
+ -webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
+ -moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
+ -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
+ transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
+}
+#reveal .slides>section>section.future {
+ display: block;
+ opacity: 0;
+
+ -webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
+ -moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
+ -ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
+ transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
+}
+
+
+/*********************************************
+ * CONCAVE TRANSITION
+ *********************************************/
+
+#reveal.concave .slides>section.past {
+ -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+ -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+ -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+}
+#reveal.concave .slides>section.future {
+ -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+ -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+ -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+}
+
+#reveal.concave .slides>section>section.past {
+ -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
+ -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
+ -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
+ transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
+}
+#reveal.concave .slides>section>section.future {
+ -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
+ -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
+ -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
+ transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
+}
+
+
+/*********************************************
+ * LINEAR TRANSITION
+ *********************************************/
+
+#reveal.linear .slides>section.past {
+ -webkit-transform: translate(-150%, 0);
+ -moz-transform: translate(-150%, 0);
+ -ms-transform: translate(-150%, 0);
+ -o-transform: translate(-150%, 0);
+ transform: translate(-150%, 0);
+}
+#reveal.linear .slides>section.future {
+ -webkit-transform: translate(150%, 0);
+ -moz-transform: translate(150%, 0);
+ -ms-transform: translate(150%, 0);
+ -o-transform: translate(150%, 0);
+ transform: translate(150%, 0);
+}
+
+#reveal.linear .slides>section>section.past {
+ -webkit-transform: translate(0, -150%);
+ -moz-transform: translate(0, -150%);
+ -ms-transform: translate(0, -150%);
+ -o-transform: translate(0, -150%);
+ transform: translate(0, -150%);
+}
+#reveal.linear .slides>section>section.future {
+ -webkit-transform: translate(0, 150%);
+ -moz-transform: translate(0, 150%);
+ -ms-transform: translate(0, 150%);
+ -o-transform: translate(0, 150%);
+ transform: translate(0, 150%);
+}
+
+/*********************************************
+ * BOX TRANSITION
+ *********************************************/
+
+#reveal.cube .slides {
+ margin-top: -350px;
+
+ -webkit-perspective-origin: 50% 25%;
+ -moz-perspective-origin: 50% 25%;
+ -ms-perspective-origin: 50% 25%;
+ perspective-origin: 50% 25%;
+
+ -webkit-perspective: 1300px;
+ -moz-perspective: 1300px;
+ -ms-perspective: 1300px;
+ perspective: 1300px;
+}
+
+#reveal.cube .slides section {
+ padding: 30px;
+
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ -ms-backface-visibility: hidden;
+ backface-visibility: hidden;
+
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+ #reveal.cube .slides section:not(.stack):before {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ background: #232628;
+ border-radius: 4px;
+
+ -webkit-transform: translateZ( -20px );
+ -moz-transform: translateZ( -20px );
+ -ms-transform: translateZ( -20px );
+ -o-transform: translateZ( -20px );
+ transform: translateZ( -20px );
+ }
+ #reveal.cube .slides section:not(.stack):after {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 90%;
+ height: 30px;
+ left: 5%;
+ bottom: 0;
+ background: none;
+ z-index: 1;
+
+ border-radius: 4px;
+ box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
+
+ -webkit-transform: translateZ(-90px) rotateX( 65deg );
+ -moz-transform: translateZ(-90px) rotateX( 65deg );
+ -ms-transform: translateZ(-90px) rotateX( 65deg );
+ -o-transform: translateZ(-90px) rotateX( 65deg );
+ transform: translateZ(-90px) rotateX( 65deg );
+ }
+
+#reveal.cube .slides>section.stack {
+ padding: 0;
+ background: none;
+}
+
+#reveal.cube .slides>section.past {
+ -webkit-transform-origin: 100% 0%;
+ -moz-transform-origin: 100% 0%;
+ -ms-transform-origin: 100% 0%;
+ transform-origin: 100% 0%;
+
+ -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
+ -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
+ -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
+ transform: translate3d(-100%, 0, 0) rotateY(-90deg);
+}
+
+#reveal.cube .slides>section.future {
+ -webkit-transform-origin: 0% 0%;
+ -moz-transform-origin: 0% 0%;
+ -ms-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+
+ -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
+ -moz-transform: translate3d(100%, 0, 0) rotateY(90deg);
+ -ms-transform: translate3d(100%, 0, 0) rotateY(90deg);
+ transform: translate3d(100%, 0, 0) rotateY(90deg);
+}
+
+#reveal.cube .slides>section>section.past {
+ -webkit-transform-origin: 0% 100%;
+ -moz-transform-origin: 0% 100%;
+ -ms-transform-origin: 0% 100%;
+ transform-origin: 0% 100%;
+
+ -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
+ -moz-transform: translate3d(0, -100%, 0) rotateX(90deg);
+ -ms-transform: translate3d(0, -100%, 0) rotateX(90deg);
+ transform: translate3d(0, -100%, 0) rotateX(90deg);
+}
+
+#reveal.cube .slides>section>section.future {
+ -webkit-transform-origin: 0% 0%;
+ -moz-transform-origin: 0% 0%;
+ -ms-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+
+ -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
+ -moz-transform: translate3d(0, 100%, 0) rotateX(-90deg);
+ -ms-transform: translate3d(0, 100%, 0) rotateX(-90deg);
+ transform: translate3d(0, 100%, 0) rotateX(-90deg);
+}
+
+
+/*********************************************
+ * PAGE TRANSITION
+ *********************************************/
+
+#reveal.page .slides {
+ margin-top: -350px;
+
+ -webkit-perspective-origin: 50% 50%;
+ -moz-perspective-origin: 50% 50%;
+ -ms-perspective-origin: 50% 50%;
+ perspective-origin: 50% 50%;
+
+ -webkit-perspective: 3000px;
+ -moz-perspective: 3000px;
+ -ms-perspective: 3000px;
+ perspective: 3000px;
+}
+
+#reveal.page .slides section {
+ padding: 30px;
+
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+ #reveal.page .slides section.past {
+ z-index: 12;
+ }
+ #reveal.page .slides section:not(.stack):before {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ background: #232628;
+
+ -webkit-transform: translateZ( -20px );
+ -moz-transform: translateZ( -20px );
+ -ms-transform: translateZ( -20px );
+ -o-transform: translateZ( -20px );
+ transform: translateZ( -20px );
+ }
+ #reveal.page .slides section:not(.stack):after {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 90%;
+ height: 30px;
+ left: 5%;
+ bottom: 0;
+ background: none;
+ z-index: 1;
+
+ border-radius: 4px;
+ box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
+
+ -webkit-transform: translateZ(-90px) rotateX( 65deg );
+ }
+
+#reveal.page .slides>section.stack {
+ padding: 0;
+ background: none;
+}
+
+#reveal.page .slides>section.past {
+ -webkit-transform-origin: 0% 0%;
+ -moz-transform-origin: 0% 0%;
+ -ms-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+
+ -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
+ -moz-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
+ -ms-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
+ transform: translate3d(-40%, 0, 0) rotateY(-80deg);
+}
+
+#reveal.page .slides>section.future {
+ -webkit-transform-origin: 100% 0%;
+ -moz-transform-origin: 100% 0%;
+ -ms-transform-origin: 100% 0%;
+ transform-origin: 100% 0%;
+
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
+
+#reveal.page .slides>section>section.past {
+ -webkit-transform-origin: 0% 0%;
+ -moz-transform-origin: 0% 0%;
+ -ms-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+
+ -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
+ -moz-transform: translate3d(0, -40%, 0) rotateX(80deg);
+ -ms-transform: translate3d(0, -40%, 0) rotateX(80deg);
+ transform: translate3d(0, -40%, 0) rotateX(80deg);
+}
+
+#reveal.page .slides>section>section.future {
+ -webkit-transform-origin: 0% 100%;
+ -moz-transform-origin: 0% 100%;
+ -ms-transform-origin: 0% 100%;
+ transform-origin: 0% 100%;
+
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
+
+
+/*********************************************
+ * NEON THEME
+ *********************************************/
+
+#reveal.neon a,
+#reveal.neon a:hover,
+#reveal.neon .controls a.enabled {
+ color: #5de048;
+}
+
+#reveal.neon .progress span,
+#reveal.neon .roll span:after {
+ background: #5de048;
+}
+
+#reveal.neon a.image:hover img {
+ border-color: #5de048;
+}
+
+
+/*********************************************
+ * OVERVIEW
+ *********************************************/
+
+#reveal.overview .slides {
+ -webkit-perspective: 700px;
+ -moz-perspective: 700px;
+ -ms-perspective: 700px;
+ perspective: 700px;
+}
+
+#reveal.overview .slides section {
+ padding: 20px 0;
+ opacity: 1;
+ cursor: pointer;
+ background: rgba(0,0,0,0.1);
+}
+#reveal.overview .slides section .fragment {
+ opacity: 1;
+}
+#reveal.overview .slides section:after,
+#reveal.overview .slides section:before {
+ display: none !important;
+}
+#reveal.overview .slides section>section {
+ opacity: 1;
+ cursor: pointer;
+}
+ #reveal.overview .slides section:hover {
+ background: rgba(0,0,0,0.3);
+ }
+
+ #reveal.overview .slides section.present {
+ background: rgba(0,0,0,0.3);
+ }
+#reveal.overview .slides>section.stack {
+ background: none;
+ padding: 0;
+}
+
+
+/*********************************************
+ * FALLBACK
+ *********************************************/
+
+.no-transforms {
+ overflow-y: auto;
+}
+
+.no-transforms .slides section {
+ -webkit-transform: none;
+ -moz-transform: none;
+ -ms-transform: none;
+ transform: none;
+
+ display: block!important;
+ opacity: 1!important;
+ position: relative!important;
+}
+
+
+/*********************************************
+ * DEFAULT STATES
+ *********************************************/
+
+.state-background {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: rgba( 0, 0, 0, 0 );
+
+ -webkit-transition: background 800ms ease;
+ -moz-transition: background 800ms ease;
+ -ms-transition: background 800ms ease;
+ -o-transition: background 800ms ease;
+ transition: background 800ms ease;
+}
+.alert .state-background {
+ background: rgba( 200, 50, 30, 0.6 );
+}
+.soothe .state-background {
+ background: rgba( 50, 200, 90, 0.4 );
+}
+.blackout .state-background {
+ background: rgba( 0, 0, 0, 0.6 );
+}
+
+
+
+
42 output/css/pres.style.css
@@ -0,0 +1,42 @@
+#reveal pre {
+ font-size: 20px !important;
+ line-height: 1.3em !important;
+ width: 96% !important;
+ margin: 20px auto !important;
+}
+
+#reveal pre code {
+ padding: 0.5em 1em !important;
+}
+
+#reveal section img {
+ max-width: 100%;
+}
+
+#reveal section[data-bg] {
+ padding-top: 20px;
+ background-size: cover;
+}
+
+#reveal section[data-bg]::after {
+ content: ' ';
+ height: -webkit-calc(100% - 16px);
+ width: -webkit-calc(100% - 16px);
+ position: absolute;
+ left: 0;
+ top: 0;
+ background: #333;
+ border: 8px solid rgba(0, 0, 0, 0.8);
+ opacity: 0.3;
+ z-index: -1;
+}
+
+#reveal section[data-bg] > h1 {
+ position: absolute;
+ bottom: 10px;
+ color: transparent;
+ width: 100%;
+}
+
+#reveal section[data-bg] > h1::after {
+}
57 output/css/reset.css
@@ -0,0 +1,57 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+
+/* HTML5BP:
+ These selection declarations have to be separate.
+ No text-shadow: twitter.com/miketaylr/status/12228805301
+ Also: hot pink. */
+::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
+::selection { background:#FF5E99; color:#fff; text-shadow: none; }
+
BIN  output/images/2817046610_5bea4bc4ff_b.jpg
Diff not rendered
BIN  output/images/3815200569_c64290f046_b.jpg
Diff not rendered
BIN  output/images/4227253361_0e1e73c08f_b.jpg
Diff not rendered
BIN  output/images/4905848082_624044fba4_b.jpg
Diff not rendered
BIN  output/images/4951169399_c08942bd85_b.jpg
Diff not rendered
BIN  output/images/5058340966_7bea659712_o.jpg
Diff not rendered
BIN  output/images/5498393620_b4990431c6_b.jpg
Diff not rendered
BIN  output/images/5589243043_28e4b45a28_b.jpg
Diff not rendered
BIN  output/images/5606183129_9695c06f9e_b.jpg
Diff not rendered
BIN  output/images/5736954579_896755ca20_b.jpg
Diff not rendered
BIN  output/images/5755308204_f8b0c74da7_b.jpg
Diff not rendered
BIN  output/images/5790252062_fb6aeba3ec_o.jpg
Diff not rendered
BIN  output/images/5944308910_44a50fba49_b.jpg
Diff not rendered
BIN  output/images/6968108915_88369197b2_o.jpg
Diff not rendered
BIN  output/images/eventorder-bubble.png
Diff not rendered
BIN  output/images/eventorder-capture.png
Diff not rendered
BIN  output/images/simple-dom-structure.png
Diff not rendered
34 output/images/sources.md
@@ -0,0 +1,34 @@
+- Tigers: <http://www.flickr.com/photos/tryburn/3652270938/>
+- Makeshift Clock: <http://www.flickr.com/photos/distantatlas/6689032545/>
+- Lego Valentine: <http://www.flickr.com/photos/kaptainkobold/6873936107/>
+- Lego Escape: <http://www.flickr.com/photos/s3a/5498393620/>
+- Lego Tangle <http://www.flickr.com/photos/azrasta/4865872893/>
+- Lego Experiment <http://www.flickr.com/photos/pasukaru76/5975138384/>
+- Lego Railway Track <http://www.flickr.com/photos/evil_cheese_scientist/5755308204/>
+- Lego Bad Guys <http://www.flickr.com/photos/eldave/5742538697/>
+- Lego Megaphone <http://www.flickr.com/photos/thevoicewithin/3815200569/>
+- Lego Postbox <http://www.flickr.com/photos/ntr23/4905848082/in/photostream/>
+- Lego Letter <http://www.flickr.com/photos/ntr23/5058340966/>
+- Lego Wire <http://www.flickr.com/photos/pedrovezini/5158715290/>
+- Lego Zap <http://www.flickr.com/photos/pasukaru76/4951169399/>
+- Lego Present <http://www.flickr.com/photos/pasukaru76/5333260849/in/set-72157624732951397/>
+- Lego Steampunk <http://www.flickr.com/photos/pasukaru76/5589243043/in/set-72157624732951397/>
+- Lego Hazmat <http://www.flickr.com/photos/pasukaru76/5606183129/in/set-72157624732951397/>
+- Lego Interview <http://www.flickr.com/photos/pasukaru76/5613865198/in/set-72157624732951397/>
+- Lego Contraption <http://www.flickr.com/photos/pasukaru76/5729640585/in/set-72157624732951397/>
+
+- Lego Pirates <http://www.flickr.com/photos/pasukaru76/5736954579/in/set-72157624732951397/>
+
+- Lego Alien Globe <http://www.flickr.com/photos/pasukaru76/5790252062/in/set-72157624732951397/>
+
+- Lego Magic <http://www.flickr.com/photos/pasukaru76/5944308910/in/set-72157624732951397/>
+
+- Clones <http://www.flickr.com/photos/tim_norris/2545465723/>
+
+- Lego Twitter <http://www.flickr.com/photos/photography-andreas/6252678567/>
+
+- Lego Mime <http://www.flickr.com/photos/25171207@N02/5270245821/>
+
+- Lego Crazy Man <http://www.flickr.com/photos/kwl/4227253361/>
+- Lego Flying <http://www.flickr.com/photos/32482342@N05/6968108915/>
+- Lego Ranger <http://www.flickr.com/photos/joriel/2817046610/>
273 output/index.html
@@ -0,0 +1,273 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+
+<title>Javascript Events</title>
+
+<meta name="description" content="An easy to use CSS 3D slideshow tool for quickly creating good looking HTML presentations.">
+<meta name="author" content="Hakim El Hattab">
+
+<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
+<link rel="stylesheet" type="text/css" href="css/pres.style.css" /><link rel="stylesheet" type="text/css" href="css/highlight.zenburn.css" /><link rel="stylesheet" type="text/css" href="css/reset.css" /><link rel="stylesheet" type="text/css" href="css/main.css" /><script src="js/jquery.min.js"></script>
+</head>
+<body>
+<div id="reveal">
+ <!-- Used to fade in a background when a specific slide state is reached -->
+ <div class="state-background"></div>
+
+ <!-- Any section element inside of this container is displayed as a slide -->
+ <div class="slides">
+
+ <section data-bg="images/5944308910_44a50fba49_b.jpg"data-attribution="http://www.flickr.com/photos/pasukaru76/5944308910/in/set-72157624732951397/">
+ <h1>Javascript Event Magic</h1>
+
+
+
+ </section>
+
+ <section >
+ <h2>Overview</h2>
+<ul>
+<li>High level overview of JS and Browser events</li>
+<li>Rethinking Events for Extensible Web Apps</li>
+</ul>
+
+
+
+ </section>
+
+ <section data-bg="images/5589243043_28e4b45a28_b.jpg"data-attribution="http://www.flickr.com/photos/pasukaru76/">
+ <h1>Now and Then</h1>
+
+
+
+ </section>
+
+ <section >
+ <h2>Events are Bound to Something</h2>
+<ul>
+<li><code>targetObject.addEventListener</code></li>
+<li><code>targetObject.removeEventListener</code></li>
+</ul>
+
+
+
+ </section>
+
+ <section >
+ <h2>Bubbling vs Capture</h2>
+<p>Consider the following code:
+
+</p>
+<pre><code class="lang-js">element.addEventListener(
+ &#39;click&#39;, // event name
+ handleClick, // event handler
+ false // event, um?!
+);</code></pre>
+<p>What is that third value specifying anyway?
+
+</p>
+
+
+
+ </section>
+
+ <section >
+ <h2>Event Phasing: Bubbling</h2>
+<p><img src="images/eventorder-bubble.png" alt="">
+
+</p>
+
+
+
+ </section>
+
+ <section >
+ <h2>Bubble Fiddle</h2>
+<iframe style="width: 100%; height: 420px;" src="http://jsfiddle.net/DamonOehlman/LcbwB/embedded/js,html,result/presentation/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+
+
+
+
+
+ </section>
+
+ <section >
+ <h2>Event Phasing: Capture</h2>
+<p><img src="images/eventorder-capture.png" alt="">
+
+</p>
+
+
+
+ </section>
+
+ <section >
+ <h2>Capture Fiddle</h2>
+<iframe style="width: 100%; height: 420px;" src="http://jsfiddle.net/DamonOehlman/Mpyh8/embedded/js,html,result/presentation/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+
+
+
+
+
+
+ </section>
+
+ <section data-bg="images/5498393620_b4990431c6_b.jpg"data-attribution="http://www.flickr.com/photos/s3a/5498393620/">
+ <h1>Liberating Events</h1>
+
+
+
+ </section>
+
+ <section >
+ <h2>Events can be Free</h2>
+<ul>
+<li>Almost all implementations of events involve binding event handlers for a named event on a particular object.</li>
+<li>Consider what might be possible if events could run free?</li>
+</ul>
+
+
+
+ </section>
+
+ <section >
+ <h2>Eve can liberate events</h2>
+<ul>
+<li>Eve will allow you to create a more loosely coupled app than you might have previously thought possible.</li>
+<li>Understand that eve embraces Javascript.</li>
+</ul>
+
+
+
+ </section>
+
+ <section >
+ <h2>Example: Mapping Key Events</h2>
+<p>Consider the following (somewhat contrived) example:
+
+</p>
+<pre><code class="lang-js">function captureKey(evt) {
+ eve(
+ &#39;evematrix.key&#39;,
+ evt.target,
+ String.fromCharCode(evt.charCode)
+ );
+}
+
+document.addEventListener(&#39;keypress&#39;, captureKey, true);</code></pre>
+<p>That&#39;s our core application!
+
+</p>
+
+
+
+ </section>
+
+ <section >
+ <h2>Today&#39;s most impressive Demo</h2>
+<p><a href="http://snurl.com/evedemo">http://snurl.com/evedemo</a>
+
+</p>
+
+
+
+ </section>
+
+ <section >
+ <h2>Our First Extension: Motion</h2>
+<pre><code class="lang-js">// let&#39;s write a key handler to do something
+eve.on(&#39;evematrix.key&#39;, function(key) {
+ // create a new span element
+
+ // after a period of time, add a transform that will
+ // move the span element off the screen
+ setTimeout(function() {
+ stylar(span).set(
+ &#39;transform&#39;,
+ &#39;translate(0px, &#39; + (window.innerHeight + 100) + &#39;px)&#39;
+ );
+ }, 50);
+
+ // hacky - after the transition has executed remove it
+ setTimeout(function() {
+ document.body.removeChild(span);
+ }, 1700);
+});</code></pre>
+
+
+
+ </section>
+
+ <section data-bg="images/6968108915_88369197b2_o.jpg"data-attribution="http://www.flickr.com/photos/32482342@N05/6968108915/">
+
+
+
+ </section>
+
+ <section >
+
+
+
+ </section>
+
+ <section >
+ <h2>References</h2>
+<ul>
+<li><a href="http://www.quirksmode.org/js/events_order.html">Quirks Mode - Event Order Info</a></li>
+</ul>
+
+
+
+ </section>
+
+ </div>
+
+ <!-- The navigational controls UI -->
+ <aside class="controls">
+ <a class="left" href="#">&#x25C4;</a>
+ <a class="right" href="#">&#x25BA;</a>
+ <a class="up" href="#">&#x25B2;</a>
+ <a class="down" href="#">&#x25BC;</a>
+ </aside>
+
+ <!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
+ <div class="progress"><span></span></div>
+</div>
+<script src="js/pres.js"></script><script src="js/highlight.js"></script><script>hljs.initHighlightingOnLoad();</script><script src="js/highlight-javascript.js"></script><script src="js/reveal.js"></script><script src="lib/classList.js"></script>
+<script>
+ // Parse the query string into a key/value object
+ var query = {};
+ location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
+ query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
+ } );
+
+ Reveal.initialize({
+ // Display controls in the bottom right corner