]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Recommit of PR #3220 from @anitagraham: 4911/head
authorJordan Humphreys <jordan@zurb.com>
Mon, 23 Sep 2013 23:39:28 +0000 (16:39 -0700)
committerWoody Gilk <woody.gilk@gmail.com>
Mon, 7 Apr 2014 02:11:32 +0000 (21:11 -0500)
- 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

doc/includes/clearing/examples_clearing_events.html [new file with mode: 0644]
doc/pages/components/clearing.html
js/foundation/foundation.clearing.js

diff --git a/doc/includes/clearing/examples_clearing_events.html b/doc/includes/clearing/examples_clearing_events.html
new file mode 100644 (file)
index 0000000..7a8d6b3
--- /dev/null
@@ -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}}
index 6704308388507ff6660d6066980cdfcf419b73a8..d258a21de74005da84def5ebd7e6c5d0b900a079 100644 (file)
@@ -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?
index 677c51e3bd0ae41860a00497b16c3b37dad1d7cb..a9ce14626d65d958f776c01bc924fdfd3e671adf 100644 (file)
             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);
-
       }
     },
 
         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;
 
       if (image.length) {
         this.center_and_label(image, label);
+        image.trigger('resized.fndtn.clearing')
       }
     },
 
 
       if (target.length) {
         this.S('img', target)
-          .trigger('click', [current, target]);
+          .trigger('click', [current, target])
+          .trigger('change.fndtn.clearing');
       }
     },