summaryrefslogtreecommitdiff
path: root/deck.js/extensions/events/README.md
diff options
context:
space:
mode:
Diffstat (limited to 'deck.js/extensions/events/README.md')
-rw-r--r--deck.js/extensions/events/README.md64
1 files changed, 64 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