Skip to content
This repository was archived by the owner on Jan 22, 2021. It is now read-only.

Added on argument with hover and click value. #12

Open
wants to merge 12 commits into
base: master
Choose a base branch
from

Conversation

ivansglazunov
Copy link

Use this version of your code for some time.
Thank you for your cool package!

@ivansglazunov
Copy link
Author

What is the name for method usePosition?

@ivansglazunov
Copy link
Author

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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use !== if possible.

@johanbrook
Copy link
Contributor

Tracker.afterFlush(positionDropdown(name, tmpl.find(DROPDOWN_TRIGGER)));

While I see the need for using the tmpl instance in here, I think we shouldn't mix the templates with business logic in the Dropdowns namespace. I think users should pass either a DOM node or a string selector in the second argument to this method.

@ivansglazunov
Copy link
Author

I will do all 3 options: selector, element, template.
The template will look for template.$( '>').First()[0].
Ok?

@johanbrook
Copy link
Contributor

Sure, go for it :)

@ivansglazunov
Copy link
Author

Done.
Documentation updated too. Maybe need an adjustment :)

@ivansglazunov
Copy link
Author

Dropdowns.get not returns real option on and timeout. And API section in test-app need to update. I'll fix it now.

@ivansglazunov
Copy link
Author

Hmm...2 variants of solutions:

  • Move on andtimeout in dropdown from dropdownTrigger
  • Accept that they are not properties of dropdown

@@ -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`.
Copy link
Contributor

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?

Copy link
Author

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?

Copy link
Author

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?

Copy link
Contributor

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?

@ivansglazunov
Copy link
Author

This allows you to leave the dropdown available when hover mode.
If need to change the names of fields / options, just tell.
Now fix spacing.

@ivansglazunov
Copy link
Author

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;
Copy link
Contributor

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.

Copy link
Author

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;

Copy link
Contributor

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.

Copy link
Author

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.

@johanbrook
Copy link
Contributor

If you wanna check the code style, do

npm install
npm run lint

:)

@johanbrook
Copy link
Contributor

You're also welcomed to add unit tests for the various stuff on the Dropdowns object.

@ivansglazunov
Copy link
Author

Tests. Ok.

@ivansglazunov
Copy link
Author

Why mocha, not tinytest?

@johanbrook
Copy link
Contributor

I like its API more.

@ivansglazunov
Copy link
Author

How to styled separate dropdown arguments from dropdownTrigger arguments... hmmm

@ivansglazunov
Copy link
Author

dirty br now...

@ivansglazunov
Copy link
Author

May be create 2 headers?

  • Additional dropdown arguments
  • Additional dropdownTrigger arguments

@johanbrook
Copy link
Contributor

May be create 2 headers?

👍 Please do.

@ivansglazunov
Copy link
Author

It's too long. Be shortened for the sake of design. How now?

@johanbrook
Copy link
Contributor

Just try "Dropdown arguments" and "Trigger arguments". And remember to update the table of contents at the top too.

@ivansglazunov
Copy link
Author

May be done.

@ivansglazunov
Copy link
Author

I wonder whether it is possible then to use this package with the svg on d3 ... If I find a way to use usePosition then necessarily write about it here.

@johanbrook
Copy link
Contributor

Ready for merge?

@ivansglazunov
Copy link
Author

It is also necessary to specify the version. Better recheck me.)

@johanbrook
Copy link
Contributor

It's okay, I'll sort publishing details later :)

@ivansglazunov
Copy link
Author

I want to check the possibility of recursive dropdown.

@ivansglazunov
Copy link
Author

Look. This is if disable 393 and 403 lines.

@ivansglazunov
Copy link
Author

Maybe something come up that were possible? It's cool!

@johanbrook
Copy link
Contributor

What do you mean with "recursive dropdown"? Let's not do that in this PR either way.

@ivansglazunov
Copy link
Author

Yes

@ivansglazunov
Copy link
Author

Go to issues or talk here?

@ivansglazunov
Copy link
Author

Check the test page.

@ivansglazunov
Copy link
Author

There's an example.

@johanbrook
Copy link
Contributor

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.

@ivansglazunov
Copy link
Author

Need to add ignore field.

@ivansglazunov
Copy link
Author

  {{#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
hideAllBut(tmpl.data.name, ...ins);

@ivansglazunov
Copy link
Author

To get all the previous need to recursively ask parents dropdown instances about the field in...

@ivansglazunov
Copy link
Author

I can do it now, or after merge. How will be better?

@johanbrook
Copy link
Contributor

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.

@ivansglazunov
Copy link
Author

Ohh... I was inattentive.
How can I influence this decision? It may be worth taking this package not only for dropdowns but also for the dropmenu / tooltips? Then this functionality would be universal. I do not mind to fork, but cleanly for themselves, completely not interesting)

@ivansglazunov
Copy link
Author

I don't think recursive dropdowns is a nice UI concept.

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?)

@ivansglazunov
Copy link
Author

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants