Added on argument with hover and click value.

README.md

@@ -82,6 +82,7 @@ The `dropdown` helper takes additional arguments for positioning and custom clas
 - `direction` - One of `n`, `s`, `e` or `w`. Where to position the dropdown around the element. Defaults to `s`.
 - `persistent` - Defaults to `false`. Set to `true` if you want the dropdown *not* to hide when clicking outside it (on `document`).
 - `on` - Defaults to `click`. Set to `hover` for respond to the pointing of the mouse. Set `none` for disable trigger logic. You can use `usePosition` for write your own reactions logic.
+- `timeout` - Defaults is `0`. Set a number to have time to move the mouse from the `dropdownTrigger` on the `dropdown`.
 
 ```html
 {{#dropdownTrigger name="testDropdown3"}}

lib/dropdown.js

@@ -29,7 +29,9 @@ const createDropdown = (key, opts = {}) => {
     x: 0,
     y: 0,
     top: 0,
-    left: 0
+    left: 0,
+    on: 'click',
+    timeout: 0
   };
 
   const toIntOr = (val, org) => {
@@ -179,8 +181,9 @@ const factory = () => {
   const removeAll = () =>
     allKeys().forEach(remove);
 
-  const usePosition = (name, tmpl) =>
-    Tracker.afterFlush(positionDropdown(name, tmpl.find(DROPDOWN_TRIGGER)));
+  const usePosition = (name, tmpl) => {
+      Tracker.afterFlush(positionDropdown(name, tmpl));
+  }
 
   return {
     all,
@@ -233,7 +236,9 @@ Template.dropdown.onCreated(function() {
     'left',
     'direction',
     'persistent',
-    'animation'
+    'animation',
+    'on',
+    'timeout'
   );
 
   return Dropdowns.create(this.data.name, opts);
@@ -278,6 +283,8 @@ Template.dropdown.helpers({
       attrs['data-dropdown-left'] = dropdown.left;
       attrs['data-dropdown-align'] = dropdown.align;
       attrs['data-dropdown-direction'] = dropdown.direction;
+      attrs['data-dropdown-on'] = dropdown.on;
+      attrs['data-dropdown-timeout'] = dropdown.timeout;
       return attrs;
     }
 
@@ -315,8 +322,13 @@ const positionDropdown = (key, reference) => {
     }
 
     const $dropdown = dropdown.element();
-    const $el = $(reference);
-
+
+    if (typeof(reference) === 'object' && reference instanceof Blaze.TemplateInstance)
+      var $el = $(reference.find('>'));
+    else
+      var $el = $(reference);
+
+
     if ($dropdown.length === 0) {
       console.error(`Dropdowns: Couldn't find a dropdown: ${key}`);
       return;
@@ -376,12 +388,15 @@ const positionDropdown = (key, reference) => {
   };
 };
 
+Dropdowns._timeout;
+
 Template.dropdownTrigger.events({
   click(evt, tmpl) {
-    if (tmpl.data.on && tmpl.data.on != 'click') return;
+    if (tmpl.data.on && tmpl.data.on !== 'click') return;
     evt.preventDefault();
     const name = tmpl.data.name;
 
+    Meteor.clearTimeout(Dropdowns._timeout);
     Dropdowns.hideAllBut(name);
     Dropdowns.toggle(name);
     Dropdowns.usePosition(name, tmpl);
@@ -391,6 +406,7 @@ Template.dropdownTrigger.events({
     evt.preventDefault();
     const name = tmpl.data.name;
 
+    Meteor.clearTimeout(Dropdowns._timeout);
     Dropdowns.hideAllBut(name);
     Dropdowns.show(name);
     Dropdowns.usePosition(name, tmpl);
@@ -399,8 +415,20 @@ Template.dropdownTrigger.events({
     if (tmpl.data.on != 'hover') return;
     evt.preventDefault();
     const name = tmpl.data.name;
-
-    Dropdowns.hide(name);
+
+    Meteor.clearTimeout(Dropdowns._timeout);
+    Dropdowns._timeout = Meteor.setTimeout(() => {
+      Dropdowns.hide(name);
+    }, tmpl.data.timeout);
+
+		Dropdowns.get(name).element().hover(function() {
+			Meteor.clearTimeout(Dropdowns._timeout);
+		}, function() {
+			Meteor.clearTimeout(Dropdowns._timeout);
+			Dropdowns._timeout = Meteor.setTimeout(function() {
+				Dropdowns.hide(name);
+			}, tmpl.data.timeout);
+		})
   }
 });
 

test-app/demo.html

@@ -198,6 +198,26 @@ <h2 id="arguments">Additional arguments</h2>
       {{/dropdown}}
     </div>
 
+    <div class="test-area dropdown-container">
+      {{#dropdownTrigger name="testDropdownHover" on="hover"}}
+        <button>Hover</button>
+      {{/dropdownTrigger}}
+
+      {{#dropdown name="testDropdownHover" direction="n" top="-10"}}
+        <p>Trigger responds to hover event <code>on="hover"</code>.</p>
+      {{/dropdown}}
+    </div>
+
+    <div class="test-area dropdown-container">
+      {{#dropdownTrigger name="testDropdownHoverTimeout" on="hover" timeout=500}}
+        <button>Hover with timeout</button>
+      {{/dropdownTrigger}}
+
+      {{#dropdown name="testDropdownHoverTimeout" direction="n" top="-10"}}
+        <p>You can move your mouse to the dropdown with <code>on="hover" timeout=500</code>.</p>
+      {{/dropdown}}
+    </div>
+
     <pre><code>&#123;&#123;#dropdownTrigger name="testDropdown3"&#125;&#125;
   &lt;button&gt;Custom dropdown&lt;/button&gt;
 &#123;&#123;/dropdownTrigger&#125;&#125;