chieffancypants / angular-hotkeys Goto Github PK

Hi, we'reusing angular-hotkyes in our project.

On site index we have welcome page, on another site home there are some actions with added hotkeys.

When I navigate from index to home and show help through ? everything is fine. Then I navigate to index and back to home and keys are doubled (then tripled, ... etc.)

Hey there, great project. :) What assumption do you make about the application html/css? The z-index:-1024 is clearly designed to push the cheatsheet out of view before the user hits ?, but on my app, it shows as a background behind my app functionality

I put body { background-color: white; z-index: 0; } but didn't seem to make any difference.

Hey,
The app I'm developing is in portuguese, so I need to change the cheatsheet title.
It's probably a good call to add a cheatSheetTitle property (as there already are other cheatSheet* properties).

Two letter combinations, e.g. g+t or g+g don't seem to work unless I add in a dummy hotkey of g +.

hotkeys.add({
  combo: 'g +',
  description: 'Select tab',
  callback: function () {
    // dummy hotkey function to get two letter combos working
  }
});
hotkeys.add({
  combo: 'g+t',
  description: 'Select Table tab',
  callback: function () {
    _.where($scope.tabs, {
      heading: 'Table'
    })[0].active = true;
  }
});

hotkeys seems to get confused between similarly named keypresses

For exampe.. check this plnkr
http://plnkr.co/edit/SV24o4ZRB6UEXfGlt8F2

When i hit t+c it should go to option1-module but instead it goes to option2-module which has a shortcut of c+c

If I try to bind two actions independently to the same hotkey, the second replaces the first. However there are some totally valid use cases for wanting this. For example, binding to Esc in multiple modal windows or error messages and wanting Esc to close all of them.

If this is actually a Mousetrap limitation, let me know and I'll file it over there instead.

1. Go to http://chieffancypants.github.io/angular-hotkeys/
2. Press "?" to bring up tips
3. Click "X" button to close tips
4. Press "ESC".

Behaviour: tips page opens
Expected: Nothing happens

Currently, the help menu is always appended to the document and there seems to be no way to prevent this. Would be nice to have this configurable, i.e. make an option that allows us to disable the help menu.

There is a typo in the documentation.
this:

<modal title="Modal Title" hotkeys="{esc: close}">

Should be:

<modal title="Modal Title" hotkey="{esc: close}"> 

:)

I'm seeing my Esc bindings disappear after opening up help. When help opens it replaces the esc binding, and deletes on esc. Would you be open to swapping the key command to preserve esc bindings on the page? Internally, instead of the _add/_del cycle, we could _tempAdd/_tempDel or preserve previous bindings through some other mechanism.

Right now, I'm just remapping Esc to Ctrl+Esc in toggleCheatSheet.

in version 1.3.0
missing parameter "allowIn" in Hotkey constructor and its assignment

line 108 (definition): function Hotkey (combo, description, callback, action, persistent) {
line 355 (usage): scope.hotkeys.push(new Hotkey(combo, description, callback, action, allowIn, persistent));

impacts:

1. allowIn does not work properly
2. it gets even mixed up with persistent and it does not work properly either

If you define hotkeys in a property on the route configuration, they're bound on $routeChangeSuccess. However, if you reload the same route, $routeChangeSuccess is not fired again and all of the hotkeys are cleared out during bootstrap. Is there a way to persist hotkeys defined in the route configuration through reloading the same page?

Another mousetrap feature that would be great to utilize through angular-hotkeys. Will look into a pull request for this as well.

.add({
      combo: 's',
      description: 'Search for new tweets',
      callback: function() {
        $('.input input').trigger('focus');
        $scope.searchTweets = '';
      }
    })

$('.input input') then has the letter 's' in it and is focused.

Hi again. Is hotkeys supposed to work while focused on textareas or inputs? I get hotkeys working on my app when none of those are in focus, but I'd really like to specify hotkeys on textareas. If it's just a config issue, I'd love to know what the trick is. Thanks. :)

Hi!

First of all, congrats for your work on this lib! It is really awesome.

I ran into a problem when setting an hotkey to give the focus to a field :

hotkeys.add({
            hotkey: 't a',
            description: 'Feel field',
            callback: function() {
                jQuery('#field').focus().val('');
            }
        });

When a press t and then a the field is correctly focused, but the a is typed inside the field, which I don't want.

Do you have any solution to solve this problem?

Thank you for your help

Regards

If the user's cursor is in an iFrame, as it is with tinymce or any other text editor, hotkeys no longer works. There should be some way to configure hotkeys and add document objects for it to listen to.

<foo ng-repeat="m in members" hotkey="{esc: test}">

</foo>

As code shows, it seems only the last directive will receive the esc event

Refs #15

The .cfp-hotkeys-container should be display: none; to prevent issues with z-index and not being able to click on elements underneath the container.

I am working on an app, which generates and displays a long list of elements with an ng-repeat from an API. Each of the elements is clickable in various places.

I noticed after installing hotkeys that I couldn't click on some of the elements as there was an invisible <div class="cfp-hotkeys-container fade ng-scope" ng-class="{in: helpVisible}"><div class="cfp-hotkeys"> ... </div></div> overlying them.

<mydirective hotkey="{up: upKey,allowIn: ['INPUT', 'SELECT', 'TEXTAREA']}"  > ... 

how can i set 'allowIn' option inside a directive. The one above doesn't work.

As soon as I start trying to add hotkeys to my application I start getting this error on page navigation:

TypeError: Cannot read property 'replace' of undefined
at _bindSingle (/scripts/vendor-app.js:3033:34)
at _bindMultiple (/scripts/vendor-app.js:3080:13)
at Object.Mousetrap.bind (/scripts/vendor-app.js:3107:13)
at Object.Mousetrap.unbind (/scripts/vendor-app.js:3129:30)
at Object._del as del
at HTMLAnchorElement. (/scripts/vendor-app.js:2225:19)
at HTMLAnchorElement.b.event.dispatch (http://192.168.1.106:5001/scripts/vendor-app.js:3:28337)
at HTMLAnchorElement.b.event.add.v.handle (/scripts/vendor-app.js:3:25049)
at Object.b.event.trigger (/scripts/vendor-app.js:3:27423)
at b.fn.extend.triggerHandler (/scripts/vendor-app.js:4:3188)

Looks like on the view $destroy event, _del is being called with undefined here:

  function _del (hotkey) {
    var combo = (hotkey instanceof Hotkey) ? hotkey.combo : hotkey;
    Mousetrap.unbind(combo);

Which eventually ends up calling this:

  function _bindSingle(combination, callback, action, sequenceName, level) {

    // store a direct mapped reference for use with Mousetrap.trigger
    _directMap[combination + ':' + action] = callback;

    // make sure multiple spaces in a row become a single space
    combination = combination.replace(/\s+/g, ' ');

Which throws an exception since combination is undefined. I tried to start over by commenting out all of my hotkeys. but the problem persisted until I remove the module from my app.

On the demo, I can't close the modal windows when I'm on my ipad.
You should add a cross to close it.

title says it all :)

I binded the 'esc' key with

hotkeys.add('esc', 'Close search', function(event){
        event.preventDefault();
        $scope.closeSearch();
    });

And it works great but after displaying the cheatsheet with '?' the 'esc' binding does not work anymore. The next time I open the cheatsheet the 'esc' binding does not appear.

Thank you for sharing chieffancypants 👍

Is this a known issue or by design ?

On the latest version of Angular, appending to $rootElement doesn't appear to do anything. As a test, if I change the following line to append directly to the body, everything works as expected:

// existing, broken
angular.element($rootElement).append($compile(helpMenu)(scope));

// works
angular.element(document.body).append($compile(helpMenu)(scope));

I don't see any existing issues on the angular repo or anything related to $rootElement in the changelog, so I'm not sure what the expected behavior is.

If I am using directives, the cheatsheet does not seem to pick them up.

Can this be done using directives?

For example the element looks like:

Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24rootElementProvider%20%3C-%20%24rootElement%20%3C-%20hotkeys 

See #53 (comment) for more info

looks related to #23

TypeError: 'undefined' is not an object (evaluating 'target.nodeName.toUpperCase')
        at /home/wes/.../bower_components/angular-hotkeys/build/hotkeys.js:336

It looks like there are two angular-hotkeys packages in bower angular-hotkeys and chieffancypants/angular-hotkeys. chieffancypants/angular-hotkeys is the package I want because it is up-to-date.

But in my bower.json this line:

"dependencies": {
  "chieffancypants/angular-hotkeys": "~1.1.0",
}

causes the error bower ENOTFOUND Package chieffancypants/angular-hotkeys=chieffancypants/angular-hotkeys not found

If I change my dependency to this:

"dependencies": {
  "angular-hotkeys": "~1.1.0",
}

It will fail because the bower only has [email protected].

I'm new bower and angular so this might be entirely my problem, but my guess is that the un-namespaced angular-hotkeys needs to be unpublished from bower?

Would love to be able to access to keypress, keydown and keyup functionality of Mousetrap through angular-hotkeys. Will look into making a pull request for this.

because there is no component requesting hotkeys through DI

There is currently a built-in assumption that the CSS will be fully-loaded and parsed before angular-hotkeys executes and injects cfp-hotkeys-container. If the CSS is not loaded, then the unstyled hotkeys helper will be visible. This happens in our case where we load hotkeys dynamically and asynchronously. The fix is relatively simple:

Add style="visibility: hidden;" to cfp-hotkeys-container and .cfp-hotkeys-container.fade.in { visibility: visible !important; } to the CSS

Binding to scope, with action keyup, is not removed when scope is destroyed.

hi,

this is great project, but as most of us use Angular UI Router, is there a way to integrate with it instead of Angular Default Router?

thanks in advanced.

1. open cheatsheet
2. click close button with mouse
3. hit Esc

Expect behavior: no action
Actual behavior: cheatsheet is re-opened

Is there a way to do this already?

Hi,

Thanks for your work, I really like what you did...
I report you some problem / bug I found when using it on my project (https://github.com/davinkevin/Podcast-Server, check it to see the exact config)

I use the bleeding-edge version of Angular (right now, v1.3.0-build.2805+sha.751ebc1) and all the dependancy in the same version.

I think there is a bug in the line 361 :

scope.hotkeys.push(new Hotkey(combo, description, callback, action, allowIn, persistent));

because you call the constructor 114

function Hotkey (combo, description, callback, action, persistent) {

And forget to add the allowIn option or align correctly the persistent parameters.
The result is the persistent parameter to be transformed in an empty array preventing its deletion.

I don't do a PR because I don't know if there is some side effect to this bug, so I let you do the modification.

Thanks

For configuration:

    hotkeys.bindTo($scope).add({
        combo: ['h', 'left'],
        action: 'keypress',
        callback: function() {
            $state.go('first.list');
        }
    });

h button is working just fine, but left button is not working at all.

Hi, I have added multiple keys using the following syntax:
hotkeys.add({ combo: ['1','2','3','4','5','6','7','8','9'],....

but the del() method seems don't work.
hotkeys.del(['1','2','3','4','5','6','7','8','9']);

Am I doing something wrong?

One more thing: when I use multiple keys the cheatSheet doesn't display all keys, as already notified in this issue #15 .

Thanks in advance

Using a hotkey directive without allowIn attributes (which should be optional to be consistent with the JS API) raises an error.

Hotkeys are persisted when declared in controllers, according to your comments because controllers are persisted, but controllers are re-instantiated by ngRoute... it makes sense to persist hotkeys declared in services, but does it really in controllers? Minimally, could you expose an option on the provider to configure whether hotkeys are persisted by default?

Is there a way to restrict the displaying of the cheat sheet to only opted in controllers?

My angular app is defined as:

var myApp = angular.module('myApp', ['cfp.hotkeys']);

Because of this, where ever I have an angular controller the cheat sheet can be show.

Here is a controller where I want the cheat sheet to show:

myApp.controller('myController1', ['$scope', '$http', 'hotkeys', 'databoostrapped', function ($scope, $http, hotkeys, databoostrapped) {

Here I do not want it to show:

myApp.controller('dashboardController', ['$scope', '$http', 'databoostrapped', function ($scope, $http, databoostrapped) {

I am assuming as I do not have hotkeys defined for this controller it should not appear?

I am new to angularjs so I am just trying to understand the logic.

If I create a new App I am sure that the cheat sheet will not appear...

Per #61

If I set hotkeys in a controller, it should ideally be scoped to the controller. If the scope for that controller is destroyed, the hotkeys should similarly be destroyed.

I have to add duplicate handlers for mac vs windows like: http://www.screencast.com/t/hGBMJ3ikoCX

Anyone got a better idea how to handle this? Should this be a hotkey core item?