chieffancypants / angular-hotkeys Goto Github PK
View Code? Open in Web Editor NEWConfiguration-centric keyboard shortcuts for your Angular apps.
Home Page: http://chieffancypants.github.io/angular-hotkeys/
License: MIT License
Configuration-centric keyboard shortcuts for your Angular apps.
Home Page: http://chieffancypants.github.io/angular-hotkeys/
License: MIT License
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.
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?
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.
Behaviour: tips page opens
Expected: Nothing happens
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...
Is this a known issue or by design ?
<mydirective hotkey="{up: upKey,allowIn: ['INPUT', 'SELECT', 'TEXTAREA']}" > ...
how can i set 'allowIn' option inside a directive. The one above doesn't work.
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).
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.)
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:
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 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:
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
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.
.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.
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
title says it all :)
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?
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.
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?
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
Per #61
Another mousetrap feature that would be great to utilize through angular-hotkeys. Will look into a pull request for this as well.
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
There is a typo in the documentation.
this:
<modal title="Modal Title" hotkeys="{esc: close}">
Should be:
<modal title="Modal Title" hotkey="{esc: close}">
:)
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.
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;
}
});
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
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. :)
Is there a way to do this already?
because there is no component requesting hotkeys through DI
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?
Binding to scope, with action keyup, is not removed when scope is destroyed.
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.
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 ๐
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.
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
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.
On the demo, I can't close the modal windows when I'm on my ipad.
You should add a cross to close it.
Using a hotkey directive without allowIn attributes (which should be optional to be consistent with the JS API) raises an error.
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.
Esc
Expect behavior: no action
Actual behavior: cheatsheet is re-opened
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.
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.
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
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.
Refs #15
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.