From 3ebd2c30e0c314d3aaa2217f40a9cf9d3e2ebad5 Mon Sep 17 00:00:00 2001
From: Jordan Humphreys <jordan@zurb.com>
Date: Mon, 23 Sep 2013 16:39:28 -0700
Subject: [PATCH] Recommit of PR #3220 from @anitagraham:

- add events to clearing
- adds documentation for those events

with changes:

- removed extra parameter from <code>open</code> event
- updated docs to match current style
---
 .../clearing/examples_clearing_events.html    |  7 +++++++
 doc/pages/components/clearing.html            | 19 +++++++++++++++++++
 js/foundation/foundation.clearing.js          |  9 +++++++--
 3 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 doc/includes/clearing/examples_clearing_events.html

diff --git a/doc/includes/clearing/examples_clearing_events.html b/doc/includes/clearing/examples_clearing_events.html
new file mode 100644
index 000000000..7a8d6b3f6
--- /dev/null
+++ b/doc/includes/clearing/examples_clearing_events.html
@@ -0,0 +1,7 @@
+{{#markdown}}
+```javascript
+$(document.body).on("open.fndtn.clearing", function(event) {
+  console.info("About to open thumbnail with src ", $('img', event.target).attr('src'));
+});
+```
+{{/markdown}}
diff --git a/doc/pages/components/clearing.html b/doc/pages/components/clearing.html
index 670430838..d258a21de 100644
--- a/doc/pages/components/clearing.html
+++ b/doc/pages/components/clearing.html
@@ -80,6 +80,25 @@ Clearing supports `data-options` on-the-fly configuration:
 
 {{> examples_clearing_data_options}}
 
+### Available Javascript Events
+
+Clearing supports several javascript events that you can listen to:
+
+<ul>
+  <li><code>open.clearing.fndtn</code> before a thumbnail is expanded</li>
+  <li><code>opened.clearing.fndtn</code> after the large image has opened</li>
+  <li><code>close.clearing.fndtn</code> before the large image is closed</li>
+  <li><code>closed.clearing.fndtn</code> after the large image has closed</li>
+  <li><code>change.clearing.fndtn</code> when the large image changes</li>
+  <li><code>resized.clearing.fndtn</code> after the large image is resized, before it becomes visible</li>
+</ul>
+
+<p>Here is an example of binding to the open event.</p>
+
+<h4>JS</h4>
+
+{{> examples_clearing_events}}
+
 ***
 
 ### Sass Errors?
diff --git a/js/foundation/foundation.clearing.js b/js/foundation/foundation.clearing.js
index 677c51e3b..a9ce14626 100644
--- a/js/foundation/foundation.clearing.js
+++ b/js/foundation/foundation.clearing.js
@@ -218,16 +218,17 @@
             target.siblings().removeClass('visible');
             target.addClass('visible');
           });
+        visible_image.trigger('opened.fndtn.clearing')
       }
 
       if (!this.locked()) {
+        visible_image.trigger('open.fndtn.clearing');
         // set the image to the selected thumbnail
         image
           .attr('src', this.load($image))
           .css('visibility', 'hidden');
 
         startLoad.call(this);
-
       }
     },
 
@@ -247,12 +248,14 @@
         body.css('overflow', '');
         container = $('div', root).first();
         visible_image = $('.visible-img', container);
+        visible_image.trigger('close.fndtn.clearing');
         this.settings.prev_index = 0;
         $('ul[' + this.attr_name() + ']', root)
           .attr('style', '').closest('.clearing-blackout')
           .removeClass('clearing-blackout');
         container.removeClass('clearing-container');
         visible_image.hide();
+        visible_image.trigger('closed.fndtn.clearing');        
       }
 
       return false;
@@ -286,6 +289,7 @@
 
       if (image.length) {
         this.center_and_label(image, label);
+        image.trigger('resized.fndtn.clearing')
       }
     },
 
@@ -423,7 +427,8 @@
 
       if (target.length) {
         this.S('img', target)
-          .trigger('click', [current, target]);
+          .trigger('click', [current, target])
+          .trigger('change.fndtn.clearing');
       }
     },
 
-- 
2.47.2