chieffancypants / angular-hotkeys

Configuration-centric keyboard shortcuts for your Angular apps.
http://chieffancypants.github.io/angular-hotkeys/
MIT License
1.68k stars 248 forks source link

Added optional 'category' for hotkeys. #205

Open ebbe-brandstrup opened 8 years ago

ebbe-brandstrup commented 8 years ago

When displaying the cheatsheet, the hotkeys are shown per category in a 2 column layout which also handles small window sizes.

If no category is specified for a hotkey, the hotkey defaults to a configurable default category.

If no hotkeys have a category, the cheatsheet looks like it used to.

Related to #120.

Thanks for a great hotkey system @chieffancypants

kfei commented 8 years ago

Thank you @ebbe-brandstrup. IMO this is just a necessary feature :smile:

niemyjski commented 8 years ago

+1

kfei commented 8 years ago

@ebbe-brandstrup Did you just forget to also add this new capability i.e., attrs.hotkeyCategory to the directive?

ebbe-brandstrup commented 8 years ago

@kfei yes, indeed, I didn't catch that. I haven't been using the directive for registering hotkeys.

I have actually gone another direction with this since it doesn't look like the PR has interest. I have created an angular component (angular 1.5) to show the cheatsheet with categories. The component just injects the hotkeys service and extracts categories from the description field (I assume that hotkeys that contain a pipe character are of the format <category>|<description>. Descriptions without a pipe go into the "generic" category.

This approach has the advantage that I can keep updating angular-hotkeys without maintaining my fork :-)

I have a put together a gist to share it in case you guys can also benefit from it:

gist for cheatsheet component

This then gets hooked up by just placing a <hotkeys-cheatsheet></hotkeys-cheatsheet> element at the bottom of my index.html body tag. Also, I then disable the default cheatsheet stuff in my angular config block: hotkeysProvider.includeCheatSheet = false;

Note, I'm using MeteorJS 1.3 and angular-meteor (via npm) and LESS and as you can see it's ES6. So you'll need to adjust a bit to register the component differently if you don't use ES6 and the import/export stuff.

kfei commented 8 years ago

@ebbe-brandstrup Thanks for your tips. I'm going to just steal your idea of using the pipe character as a workaround now. You're right, maintaining an own fork is just a pain :dizzy_face:

Blewin commented 8 years ago

+1