-
Notifications
You must be signed in to change notification settings - Fork 8
Added on
argument with hover
and click
value.
#12
base: master
Are you sure you want to change the base?
Conversation
What is the name for method |
Make it accessible from the outside makes it possible to write an easy change of logic for the trigger. |
@@ -374,13 +378,29 @@ const positionDropdown = (key, reference) => { | |||
|
|||
Template.dropdownTrigger.events({ | |||
click(evt, tmpl) { | |||
if (tmpl.data.on && tmpl.data.on != 'click') return; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please use !==
if possible.
Tracker.afterFlush(positionDropdown(name, tmpl.find(DROPDOWN_TRIGGER))); While I see the need for using the |
I will do all 3 options: |
Sure, go for it :) |
Done. |
|
Hmm...2 variants of solutions:
|
@@ -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`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is an option for timeout really necessary to include in this package?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What have you decided with options?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Move to the dropdown, or remove from its default object and leave only in dropdownTrigger?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can't timeout
be a hard coded constant somewhere, instead of an option?
This allows you to leave the dropdown available when hover mode. |
Without a timeout, hover become only-tooltip implementation. Without the ability to use a dropdown active zone. |
@@ -376,12 +388,15 @@ const positionDropdown = (key, reference) => { | |||
}; | |||
}; | |||
|
|||
Dropdowns._timeout; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually no need to define this here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Rewrite it to?
var timeout;
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No need to declare it – you'll attach it further down, at this line anyway, and JS/Meteor doesn't care if the parameter passed to Meteor.clearTimeout
is undefined
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I try. It does not work.
If you wanna check the code style, do
:) |
You're also welcomed to add unit tests for the various stuff on the |
Tests. Ok. |
Why mocha, not tinytest? |
I like its API more. |
How to styled separate dropdown arguments from dropdownTrigger arguments... hmmm |
dirty br now... |
May be create 2 headers?
|
👍 Please do. |
It's too long. Be shortened for the sake of design. How now? |
Just try "Dropdown arguments" and "Trigger arguments". And remember to update the table of contents at the top too. |
May be done. |
I wonder whether it is possible then to use this package with the svg on d3 ... If I find a way to use |
Ready for merge? |
It is also necessary to specify the version. Better recheck me.) |
It's okay, I'll sort publishing details later :) |
I want to check the possibility of recursive dropdown. |
Look. This is if disable 393 and 403 lines. |
Maybe something come up that were possible? It's cool! |
What do you mean with "recursive dropdown"? Let's not do that in this PR either way. |
Yes |
Go to issues or talk here? |
Check the test page. |
There's an example. |
Cool. I don't know if this is in scope of this package though, I don't think recursive dropdowns is a nice UI concept. |
Need to add |
{{#dropdownTrigger on="hover" timeout=500 name="recursiveTest1"}}
<button id="dropdown1">Trigger #1</button>
{{/dropdownTrigger}}
{{#dropdown name="recursiveTest1" top="10"}}
{{#dropdownTrigger on="hover" timeout=500 name="recursiveTest2"}}
<button id="dropdown1">Trigger #2</button>
{{/dropdownTrigger}}
{{#dropdown name="recursiveTest2" in="recursiveTest1" top="10"}}
{{#dropdownTrigger on="hover" timeout=500 name="recursiveTest3"}}
<button id="dropdown1">Trigger #3</button>
{{/dropdownTrigger}}
{{#dropdown name="recursiveTest3" in="recursiveTest3" top="10"}}
<p>Hello world</p>
{{/dropdown}}
{{/dropdown}}
{{/dropdown}} Then in click and mouseover |
To get all the previous need to recursively ask parents dropdown instances about the field |
I can do it now, or after merge. How will be better? |
Again, I'm not sure I wanna include recursive dropdowns at all in this package – if you need it, please fork and use that in your projects. |
Ohh... I was inattentive. |
I agree almost no good examples of this. However, does this mean that it is not necessary to implement an ability? When creating editor-application with many options it can be quite handy. Or I have no chance?) |
Use this version of your code for some time.
Thank you for your cool package!