From: Geoff Kimball <geoff@zurb.com>
Date: Wed, 3 Feb 2016 21:02:04 +0000 (-0800)
Subject: Add data-toggle-focus attribute that triggers Toggler plugins on focus/blur
X-Git-Tag: v6.2.0-rc.1~43
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=bf2cf1bb08d4238a48a5955ed10d01cb3ff54c39;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add data-toggle-focus attribute that triggers Toggler plugins on focus/blur
---

diff --git a/docs/pages/toggler.md b/docs/pages/toggler.md
index aa5ed4e83..59cb9a736 100644
--- a/docs/pages/toggler.md
+++ b/docs/pages/toggler.md
@@ -75,3 +75,17 @@ To create an element that can be closed once, add the attribute `data-closable`.
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore praesentium sint alias dolorum qui vel quaerat, libero consequatur non esse asperiores veritatis commodi, odit eum ipsam nemo dicta iste aliquam.</p>
 </div>
 ```
+
+---
+
+### Toggle on focus
+
+The `data-toggle` attribute only toggles classes/visibility on click. You can also have the toggle fire when an element is *focused* or *unfocused* using `data-toggle-focus`.
+
+```html_example
+<input type="text" data-toggle-focus="form-callout" placeholder="Click in here to reveal extra content">
+
+<div class="secondary callout is-hidden" id="form-callout" data-toggler="is-hidden">
+  <p>This is only visible when the above field has focus.</p>
+</div>
+```
diff --git a/js/foundation.util.triggers.js b/js/foundation.util.triggers.js
index 1f0ab43ec..20f2bf5de 100644
--- a/js/foundation.util.triggers.js
+++ b/js/foundation.util.triggers.js
@@ -48,6 +48,11 @@ $(document).on('close.zf.trigger', '[data-closable]', function(e){
   }
 });
 
+$(document).on('focus.zf.trigger blur.zf.trigger', '[data-toggle-focus]', function() {
+  var id = $(this).data('toggle-focus');
+  $('#' + id).triggerHandler('toggle.zf.trigger', [$(this)]);
+});
+
 /**
 * Fires once after all other scripts have loaded
 * @function