From 642a03e9c06c32b0a68ba154434659799566b1da Mon Sep 17 00:00:00 2001 From: Ivan S Glazunov Date: Mon, 14 Mar 2016 08:03:58 +0300 Subject: [PATCH 01/12] Added argument with hover value. --- README.md | 1 + lib/dropdown.js | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+) diff --git a/README.md b/README.md index 14d371d..65494a4 100644 --- a/README.md +++ b/README.md @@ -81,6 +81,7 @@ The `dropdown` helper takes additional arguments for positioning and custom clas - `classes` - Additional class names for the dropdown. None as default. - `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. ```html {{#dropdownTrigger name="testDropdown3"}} diff --git a/lib/dropdown.js b/lib/dropdown.js index f712288..945b12e 100644 --- a/lib/dropdown.js +++ b/lib/dropdown.js @@ -374,6 +374,7 @@ const positionDropdown = (key, reference) => { Template.dropdownTrigger.events({ click(evt, tmpl) { + if (tmpl.data.on && tmpl.data.on != 'click') return; evt.preventDefault(); const name = tmpl.data.name; @@ -381,6 +382,24 @@ Template.dropdownTrigger.events({ Dropdowns.toggle(name); Tracker.afterFlush(positionDropdown(name, tmpl.find(DROPDOWN_TRIGGER))); + }, + mouseover(evt, tmpl) { + console.log(tmpl.data.on); + if (tmpl.data.on != 'hover') return; + evt.preventDefault(); + const name = tmpl.data.name; + + Dropdowns.hideAllBut(name); + Dropdowns.show(name); + + Tracker.afterFlush(positionDropdown(name, tmpl.find(DROPDOWN_TRIGGER))); + }, + mouseout(evt, tmpl) { + if (tmpl.data.on != 'hover') return; + evt.preventDefault(); + const name = tmpl.data.name; + + Dropdowns.hide(name); } }); From e103c849c32ff89d75c8c13ea1ebae09fd90c486 Mon Sep 17 00:00:00 2001 From: Ivan S Glazunov Date: Mon, 14 Mar 2016 08:25:23 +0300 Subject: [PATCH 02/12] Method usePosition. --- README.md | 3 +++ lib/dropdown.js | 10 ++++++---- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 65494a4..0900a81 100644 --- a/README.md +++ b/README.md @@ -276,6 +276,9 @@ Dropdowns.removeAll() # Manually set a position of a dropdown. Both x and y are optional. Dropdowns.setPosition('name', {x: Number, y: Number}) +# Automatically calculate position based on trigger template for current dropdown. +Dropdowns.usePosition('name', dropdownTriggerTemplate) + # Hide all dropdowns except for `name` (can also be an array of names). Dropdowns.hideAllBut('name') diff --git a/lib/dropdown.js b/lib/dropdown.js index 945b12e..14f2ced 100644 --- a/lib/dropdown.js +++ b/lib/dropdown.js @@ -178,6 +178,9 @@ const factory = () => { const removeAll = () => allKeys().forEach(remove); + + const usePosition = (name, tmpl) => + Tracker.afterFlush(positionDropdown(name, tmpl.find(DROPDOWN_TRIGGER))); return { all, @@ -190,6 +193,7 @@ const factory = () => { remove, removeAll, setPosition, + usePosition, create: add, animations: { default: DEFAULT_ANIMATION @@ -380,8 +384,7 @@ Template.dropdownTrigger.events({ Dropdowns.hideAllBut(name); Dropdowns.toggle(name); - - Tracker.afterFlush(positionDropdown(name, tmpl.find(DROPDOWN_TRIGGER))); + Dropdowns.usePosition(name, tmpl); }, mouseover(evt, tmpl) { console.log(tmpl.data.on); @@ -391,8 +394,7 @@ Template.dropdownTrigger.events({ Dropdowns.hideAllBut(name); Dropdowns.show(name); - - Tracker.afterFlush(positionDropdown(name, tmpl.find(DROPDOWN_TRIGGER))); + Dropdowns.usePosition(name, tmpl); }, mouseout(evt, tmpl) { if (tmpl.data.on != 'hover') return; From ea8079725f89937f060427ebe8742357c882c1a2 Mon Sep 17 00:00:00 2001 From: Ivan S Glazunov Date: Mon, 14 Mar 2016 08:29:48 +0300 Subject: [PATCH 03/12] README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0900a81..397950a 100644 --- a/README.md +++ b/README.md @@ -81,7 +81,7 @@ The `dropdown` helper takes additional arguments for positioning and custom clas - `classes` - Additional class names for the dropdown. None as default. - `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. +- `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. ```html {{#dropdownTrigger name="testDropdown3"}} From d64ccd4d437d32666c46211411b8ca987e169f8e Mon Sep 17 00:00:00 2001 From: Ivan S Glazunov Date: Mon, 14 Mar 2016 08:35:32 +0300 Subject: [PATCH 04/12] Remove consolc.log... --- lib/dropdown.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/dropdown.js b/lib/dropdown.js index 14f2ced..6697f0c 100644 --- a/lib/dropdown.js +++ b/lib/dropdown.js @@ -387,7 +387,6 @@ Template.dropdownTrigger.events({ Dropdowns.usePosition(name, tmpl); }, mouseover(evt, tmpl) { - console.log(tmpl.data.on); if (tmpl.data.on != 'hover') return; evt.preventDefault(); const name = tmpl.data.name; From 732ee2c6005e1604ab263db55170eea99c07c25f Mon Sep 17 00:00:00 2001 From: Ivan S Glazunov Date: Wed, 16 Mar 2016 08:25:53 +0300 Subject: [PATCH 05/12] usePosition selector fix and timeout option --- README.md | 1 + lib/dropdown.js | 46 +++++++++++++++++++++++++++++++++++++--------- test-app/demo.html | 20 ++++++++++++++++++++ 3 files changed, 58 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 397950a..5e48c98 100644 --- a/README.md +++ b/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"}} diff --git a/lib/dropdown.js b/lib/dropdown.js index 6697f0c..341d7c9 100644 --- a/lib/dropdown.js +++ b/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); + }) } }); diff --git a/test-app/demo.html b/test-app/demo.html index 2266652..2247799 100644 --- a/test-app/demo.html +++ b/test-app/demo.html @@ -198,6 +198,26 @@

Additional arguments

{{/dropdown}} +
+ {{#dropdownTrigger name="testDropdownHover" on="hover"}} + + {{/dropdownTrigger}} + + {{#dropdown name="testDropdownHover" direction="n" top="-10"}} +

Trigger responds to hover event on="hover".

+ {{/dropdown}} +
+ +
+ {{#dropdownTrigger name="testDropdownHoverTimeout" on="hover" timeout=500}} + + {{/dropdownTrigger}} + + {{#dropdown name="testDropdownHoverTimeout" direction="n" top="-10"}} +

You can move your mouse to the dropdown with on="hover" timeout=500.

+ {{/dropdown}} +
+ 
{{#dropdownTrigger name="testDropdown3"}}
   <button>Custom dropdown</button>
 {{/dropdownTrigger}}

From 25d46d5d057db595b82fa3205ccec4dcfb799d0d Mon Sep 17 00:00:00 2001
From: Ivan S Glazunov 
Date: Wed, 16 Mar 2016 15:41:48 +0300
Subject: [PATCH 06/12] Fix spacing and {}.

---
 lib/dropdown.js    | 5 ++---
 test-app/demo.html | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/lib/dropdown.js b/lib/dropdown.js
index 341d7c9..acabb1b 100644
--- a/lib/dropdown.js
+++ b/lib/dropdown.js
@@ -181,9 +181,8 @@ const factory = () => {
   const removeAll = () =>
     allKeys().forEach(remove);
   
-  const usePosition = (name, tmpl) => {
-      Tracker.afterFlush(positionDropdown(name, tmpl));
-  }
+  const usePosition = (name, tmpl) =>
+    Tracker.afterFlush(positionDropdown(name, tmpl));
 
   return {
     all,
diff --git a/test-app/demo.html b/test-app/demo.html
index 2247799..d219a87 100644
--- a/test-app/demo.html
+++ b/test-app/demo.html
@@ -187,7 +187,7 @@ 
Additional arguments

         
Placed to the right of trigger with direction="e".

       {{/dropdown}}
     
-
+    
     

       {{#dropdownTrigger name="testDropdownDirectionW" }}
         

From bd01061d1bb80facac77d4cf286eda4efe86cd41 Mon Sep 17 00:00:00 2001
From: Ivan S Glazunov 
Date: Wed, 16 Mar 2016 15:47:20 +0300
Subject: [PATCH 07/12] ES2015

---
 lib/dropdown.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/dropdown.js b/lib/dropdown.js
index acabb1b..9e2722b 100644
--- a/lib/dropdown.js
+++ b/lib/dropdown.js
@@ -420,11 +420,11 @@ Template.dropdownTrigger.events({
       Dropdowns.hide(name);
     }, tmpl.data.timeout);
 	
-		Dropdowns.get(name).element().hover(function() {
+		Dropdowns.get(name).element().hover(() => {
 			Meteor.clearTimeout(Dropdowns._timeout);
-		}, function() {
+		}, () => {
 			Meteor.clearTimeout(Dropdowns._timeout);
-			Dropdowns._timeout = Meteor.setTimeout(function() {
+			Dropdowns._timeout = Meteor.setTimeout(() => {
 				Dropdowns.hide(name);
 			}, tmpl.data.timeout);
 		})

From 8a9c30acdd31101b651efcd6fb02d490c2b8be7a Mon Sep 17 00:00:00 2001
From: Ivan S Glazunov 
Date: Wed, 16 Mar 2016 16:11:31 +0300
Subject: [PATCH 08/12] Fix tabs.

---
 lib/dropdown.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/lib/dropdown.js b/lib/dropdown.js
index 9e2722b..2570c64 100644
--- a/lib/dropdown.js
+++ b/lib/dropdown.js
@@ -419,15 +419,15 @@ Template.dropdownTrigger.events({
     Dropdowns._timeout = Meteor.setTimeout(() => {
       Dropdowns.hide(name);
     }, tmpl.data.timeout);
-	
-		Dropdowns.get(name).element().hover(() => {
-			Meteor.clearTimeout(Dropdowns._timeout);
-		}, () => {
-			Meteor.clearTimeout(Dropdowns._timeout);
-			Dropdowns._timeout = Meteor.setTimeout(() => {
-				Dropdowns.hide(name);
-			}, tmpl.data.timeout);
-		})
+    
+    Dropdowns.get(name).element().hover(() => {
+      Meteor.clearTimeout(Dropdowns._timeout);
+    }, () => {
+      Meteor.clearTimeout(Dropdowns._timeout);
+      Dropdowns._timeout = Meteor.setTimeout(() => {
+        Dropdowns.hide(name);
+      }, tmpl.data.timeout);
+    })
   }
 });
 

From 532c08f72bc2499486a4548aeec26088904698e0 Mon Sep 17 00:00:00 2001
From: Ivan S Glazunov 
Date: Wed, 16 Mar 2016 16:22:25 +0300
Subject: [PATCH 09/12] Remove timeout and on from default and atts. Now it
 only dropdownTrigger argument.

---
 lib/dropdown.js | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/lib/dropdown.js b/lib/dropdown.js
index 2570c64..681c907 100644
--- a/lib/dropdown.js
+++ b/lib/dropdown.js
@@ -29,9 +29,7 @@ const createDropdown = (key, opts = {}) => {
     x: 0,
     y: 0,
     top: 0,
-    left: 0,
-    on: 'click',
-    timeout: 0
+    left: 0
   };
 
   const toIntOr = (val, org) => {
@@ -235,9 +233,7 @@ Template.dropdown.onCreated(function() {
     'left',
     'direction',
     'persistent',
-    'animation',
-    'on',
-    'timeout'
+    'animation'
   );
 
   return Dropdowns.create(this.data.name, opts);
@@ -282,8 +278,6 @@ 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;
     }
 

From 5c3cdfe85cc5d3681464b2d951cd906d92903191 Mon Sep 17 00:00:00 2001
From: Ivan S Glazunov 
Date: Wed, 16 Mar 2016 16:31:01 +0300
Subject: [PATCH 10/12] Arguments in docs.

---
 test-app/demo.html | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/test-app/demo.html b/test-app/demo.html
index d219a87..5cc71a8 100644
--- a/test-app/demo.html
+++ b/test-app/demo.html
@@ -128,6 +128,18 @@ 
Additional arguments

       
Additional class names for the dropdown. None as default.

     
 
+    
The dropdownTrigger helper takes additional arguments for change trigger event. The names are:

+- `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`.
+
+    

+      
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.

+    

+
     

       {{#dropdownTrigger name="testDropdownRight" }}
         

From 252f7b1078a7bf37859705bf2253ef38b1f8b724 Mon Sep 17 00:00:00 2001
From: Ivan S Glazunov 
Date: Wed, 16 Mar 2016 16:32:27 +0300
Subject: [PATCH 11/12] fix

---
 test-app/demo.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/test-app/demo.html b/test-app/demo.html
index 5cc71a8..32f697e 100644
--- a/test-app/demo.html
+++ b/test-app/demo.html
@@ -129,8 +129,6 @@ 
Additional arguments

     
 
     
The dropdownTrigger helper takes additional arguments for change trigger event. The names are:

-- `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`.
 
     

       
on


From 2212939e0158fb94bcde67d6240f821d9debca76 Mon Sep 17 00:00:00 2001
From: Ivan S Glazunov 
Date: Wed, 16 Mar 2016 16:47:13 +0300
Subject: [PATCH 12/12] Docs fixs.

---
 README.md          | 32 ++++++++++++++++-------
 test-app/demo.html | 64 +++++++++++++++++++++++++++-------------------
 2 files changed, 61 insertions(+), 35 deletions(-)

diff --git a/README.md b/README.md
index 5e48c98..547b06d 100644
--- a/README.md
+++ b/README.md
@@ -71,7 +71,7 @@ You can also use a separate template for the dropdown and dropdown trigger conte
 
 Note that `dropdownTrigger` needs the template name in the `template` argument.
 
-### Additional arguments
+### Dropdown arguments
 
 The `dropdown` helper takes additional arguments for positioning and custom classes. The names are:
 
@@ -81,8 +81,6 @@ The `dropdown` helper takes additional arguments for positioning and custom clas
 - `classes` - Additional class names for the dropdown. None as default.
 - `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"}}
@@ -94,6 +92,22 @@ The `dropdown` helper takes additional arguments for positioning and custom clas
 {{/dropdown}}
 ```
 
+### Trigger arguments
+
+The `dropdownTrigger` helper takes additional arguments for change trigger event. The names are:
+- `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="testDropdown4" on="hover" timeout=500}}
+  
+{{/dropdownTrigger}}
+
+{{#dropdown name="testDropdown4" top="-10" direction="n"}}
+  
Custom dropdown.

+{{/dropdown}}
+```
+
 ### Markup & Classes
 
 The `dropdownTrigger` template helper doesn't produce any extra HTML around your content. `dropdown` on the other hand produces the following HTML:
@@ -107,7 +121,7 @@ The `dropdownTrigger` template helper doesn't produce any extra HTML around your
 
 
 
-{{#dropdown name="testDropdown4" align="center" top="20" left="10" classes="custom-class"}}
+{{#dropdown name="testDropdown5" align="center" top="20" left="10" classes="custom-class"}}
   
 {{/dropdown}}
 
@@ -117,7 +131,7 @@ The `dropdownTrigger` template helper doesn't produce any extra HTML around your
   class="dropdown test-dropdown4 custom-class"
   id="test-dropdown4"
   style="position: absolute; left: XXpx; top: XXpx;"
-  data-dropdown-key="testDropdown4"
+  data-dropdown-key="testDropdown5"
   data-dropdown-align="center"
   data-dropdown-left="10"
   data-dropdown-top="20">
@@ -139,8 +153,8 @@ Please note that the `name` template argument will be present as `id` and `class
 In order to detect active, opened dropdowns, the global `dropdownIsActive` helper can be used:
 
 ```
-{{#dropdownTrigger name="testDropdown5"}}
-  
+{{#dropdownTrigger name="testDropdown6"}}
+  
 {{/dropdownTrigger}}
 ```
 
@@ -157,11 +171,11 @@ Template.testTemplate.helpers(
 
 ```html