Confused about this library

[ddenev]

Hi,

Please help me understand - I have read the README.md several times and searched Internet for additional info but still cannot wrap my head around the described concept of vue-shortkey.

My main question is - are the event listeners (that are added by the v-shortkey directive) registered globally (e.g. on window or document) or on the element/component on which the directive is used?

If globally then why we need to use button, input or any other element or component - are they used just as 'coat racks' for the listeners because 'we need to hook the listeners somewhere'? I couldn't find an example that does not use a specific element.

If locally (on the element/component) then does this mean that the element/component needs to be 'in focus' in order for the event to fire?

In addition, what is the conceptual difference between vue-shortkey and vue-global-events?

Thank you in advance and best regards!

[fgr-araujo]

Hi, thanks for the good question! About your main question: We have only one listener and it's global. Why? Well, I don't want one listener to every action and, to be honestly, it isn't necessary.

And why apply to an element? We have some requests to have a list instead of a directive in the element Personally, I think that with the eyes of UX and every action needs a dispatcher.

Look around you, all commands are dispatched through an object. From the button that makes the elevator go up or down to the smart-light that turns on via wi-fi or microphone or alexa ...

In software world, shortcut means "the short way to access some action". So, if you have the printer option, you will have some button to print and the shortcut is a way to access them easily. The more concise approach is to attach the proper shortcut in that element and not in any array in any place.

[ddenev]

OK, I understand now, thank you for the explanation!

To me it was just strange that I have to register my keyboard shortcuts event listeners onto a button element/component, especially when these are global and not related to any particular HTML element or component. In the light of your elevator example above that would be similar to having an unnamed push button hanging from the ceiling in the middle of the hotel lobby which you actually do not push/press (you can but it does nothing when you do) but to which you must speak a voice command that in turn makes the elevator go to the 9th floor.

I would prefer a closer relationship b/w the event listener and the event registry. vue-global-events' approach is exactly this.

Just my view, not a critique in any way, I might not see the whole picture yet.

[fgr-araujo]

I respect your approach! It is another point of view. Maybe you are confusing about the listener. I don't have any specific listener to specific action. I have one listener to interpret the enter key. So, if you register one shortkey, we check if the combination exists and dispatch. It's much more efficient than one listener for each key.

About the elevator, you will attach the shortkey in your respective level button and, if you have a microphone to interpreter, attach on the microphone.

I can't concept the idea of some action doesn't have an input element. It doesn't make sense for me.

One more time, is more about the UX and delegation of responsibility than Programming logic.

vue-global-events is a great lib made by great guys and for some needs it is very comfortable!