Initial Commit

2 files changed, 87 insertions, 0 deletions

diff --git a/deck.js/extensions/events/README.md b/deck.js/extensions/events/README.md
new file mode 100644
index 0000000..22d003e
--- /dev/null
+++ b/deck.js/extensions/events/README.md
@@ -0,0 +1,64 @@
+# deck.events.js
+
+An extension for [deck.js][] allowing you to execute Javascript when a
+  slide becomes/leaves the current, next, or previous slide.
+
+## Requirements
+
+[deck.js][]
+
+## Events
+
+Each event is triggered "on" the slide on which the event occurs (see _Example_)
+  and given a single argument -- the direction (see _Direction_)
+
+* **deck.becameCurrent**: Triggered when a slide becomes the current one
+  (`to` in `deck.change`).
+* **deck.lostCurrent**: The slide is no longer "current"
+  (`from` in `deck.change`).
+* **deck.becamePrevious**: The slide (by order) just before the current slide.
+  (`to - 1` in `deck.change`).
+* **deck.becameNext**: The slide (by order) just after the current slide.
+  (`to + 1` in `deck.change`).
+* **deck.lostPrevious**: The slide (by order) just before the last current slide.
+  (`from - 1` in `deck.change`).
+* **deck.lostNext**: The slide (by order) just after the last current slide.
+  (`from + 1` in `deck.change`).
+  
+
+## Direction
+
+Each event is given a direction that helps determine whether the user is
+  moving forward or backward in the slide stack. It is provided as an argument
+  for the event and can be either `forward` or `reverse`. Essentially:
+
+```
+  if(from < to){
+    direction = "forward";
+  }
+  else{
+    direction = "reverse";
+  }
+```
+
+
+## Example
+
+If you put a placeholder slide `<div id="showGraph" class="slide"></div>` into
+  your source, this event will display a Javascript graph when you visit the
+  slide (forward) and remove it if you hit the back arrow and return to
+  the slide.
+
+```
+$("#showGraph").bind('deck.becameCurrent', function(ev, direction) {
+  if(direction == "forward"){
+    animateGraphIn();
+  }
+  else{
+    animateGraphOut();
+  }
+});
+```
+
+
+[deck.js]: https://github.com/imakewebthings/deck.js
diff --git a/deck.js/extensions/events/deck.events.js b/deck.js/extensions/events/deck.events.js
new file mode 100644
index 0000000..e00d28d
--- /dev/null
+++ b/deck.js/extensions/events/deck.events.js
@@ -0,0 +1,23 @@
+(function($, deck, undefined) {
+   $(document).bind('deck.change', function(e, from, to) {
+      var $prev = $[deck]('getSlide', to-1),
+      $next = $[deck]('getSlide', to+1),
+      $oldprev = $[deck]('getSlide', from-1),
+      $oldnext = $[deck]('getSlide', from+1);
+      
+      var direction = "forward";
+      if(from > to){
+        direction = "reverse";
+      }
+
+      $[deck]('getSlide', to).trigger('deck.becameCurrent', [direction, from, to]);
+      $[deck]('getSlide', from).trigger('deck.lostCurrent', [direction, from, to]);
+
+      $prev && $prev.trigger('deck.becamePrevious', [direction, from, to]);
+      $next && $next.trigger('deck.becameNext', [direction, from, to]);
+
+      $oldprev && $oldprev.trigger('deck.lostPrevious', [direction, from, to]);
+      $oldnext && $oldnext.trigger('deck.lostNext', [direction, from, to]);
+   });
+})(jQuery, 'deck');
+