Launch Week Day 5: Introducing Reachability for PHP.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

jquery-keyboard-focus

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jquery-keyboard-focus - npm Package Compare versions

Comparing version
0.0.2
 to
0.0.3
+1
-1
bower.json
{
"name": "jquery-keyboard-focus",
"version": "0.0.2",
"version": "0.0.3",
"authors": [

@@ -5,0 +5,0 @@ "Michelle Bu <michelle@michellebu.com>"

+45
-6
index.html

@@ -25,2 +25,4 @@ <html>

<body>
<h1>jQuery.keyboard-focus demo</h1>
<h2>Plugin <span class="plugin-status"></span></h2>
<form action="">

@@ -64,16 +66,53 @@ <fieldset>

<p>
<button class="disable-plugin keyboard-interaction-only">Disable plugin</button>
<button class="enable-plugin keyboard-interaction-only">Enable plugin</button>
</p>
<script>
$('.keyboard-interaction-only').keyboardFocus('is-focused');
var pluginEnabled = false;
$.keyboardFocus({
'.keyboard-interaction-only-alternate': 'is-focused',
'.keyboard-interaction-only-alternate-alternate': 'is-more-focused'
});
function enablePlugin() {
if (pluginEnabled) {
return;
}
$('.keyboard-interaction-only').keyboardFocus('is-focused');
$.keyboardFocus({
'.keyboard-interaction-only-alternate': 'is-focused',
'.keyboard-interaction-only-alternate-alternate': 'is-more-focused'
});
pluginEnabled = true;
$('.plugin-status').text('enabled');
$('.enable-plugin').attr('disabled', true);
$('.disable-plugin').attr('disabled', false);
}
function disablePlugin() {
$.offKeyboardFocus();
$('.keyboard-interaction-only').offKeyboardFocus();
pluginEnabled = false;
$('.plugin-status').text('disabled');
$('.enable-plugin').attr('disabled', false);
$('.disable-plugin').attr('disabled', true);
}
enablePlugin();
setTimeout(function() {
$('<a href="#" class="keyboard-interaction-only">This link was inserted dynamically, and won\'t have the right focus state.</a>').appendTo('.dynamic-elements');
$('<a href="#" class="keyboard-interaction-only">This link was inserted dynamically, and won\'t have the right focus state after page load.</a><br>').appendTo('.dynamic-elements');
$('<a href="#" class="keyboard-interaction-only-alternate-alternate">This link was also inserted dynamically, but will have the right focus state!</a>').appendTo('.dynamic-elements');
}, 1000);
$('.disable-plugin').click(function() {
disablePlugin();
});
$('.enable-plugin').click(function() {
enablePlugin();
});
</script>
</body>
</html>
+12
-5
jquery.keyboard-focus.js
(function($) {
$.keyboardFocus = function(classNameMappings) {

@@ -15,2 +14,6 @@ if (!classNameMappings) {

$.offKeyboardFocus = function() {
$(document).off('.keyboardFocus');
};
$.fn.keyboardFocus = function(classNames) {

@@ -25,2 +28,6 @@ if (!classNames) {

$.fn.offKeyboardFocus = function() {
this.off('.keyboardFocus');
};
function bindKeyboardFocusEvents($el, elementClass, classNames) {

@@ -33,6 +40,6 @@ classNames = classNames.replace(/\./g, '');

$el.on('keydown', elementClass, function(e) {
$el.on('keydown.keyboardFocus', elementClass, function(e) {
lastKeyPress = true;
});
$el.on('mousedown', elementClass, function(e) {
$el.on('mousedown.keyboardFocus', elementClass, function(e) {
lastKeyPress = false;

@@ -42,3 +49,3 @@ $(e.target).removeClass(classNames);

$el.on('focus', elementClass, function(e) {
$el.on('focus.keyboardFocus', elementClass, function(e) {
if (lastKeyPress) {

@@ -50,3 +57,3 @@ $target = $(e.target);

});
$el.on('blur', elementClass, function(e) {
$el.on('blur.keyboardFocus', elementClass, function(e) {
// We may have keyboard-focused-in, but we could've mouse-blurred out.

@@ -53,0 +60,0 @@ $target = $(e.target);

+1
-1
jquery.keyboard-focus.min.js

@@ -1,1 +0,1 @@

!function(a){function b(b,c,d){d=d.replace(/\./g,"");var e,f=!0;b.on("keydown",c,function(a){f=!0}),b.on("mousedown",c,function(b){f=!1,a(b.target).removeClass(d)}),b.on("focus",c,function(b){f&&(e=a(b.target),e.addClass(d),e.trigger("keyboardFocus"))}),b.on("blur",c,function(b){e=a(b.target),e.removeClass(d),f&&e.trigger("keyboardBlur")})}a.keyboardFocus=function(c){if(!c)throw new Error("Please pass a mapping of selectors to focus class names to `keyboardFocus`.");for(var d in c)c.hasOwnProperty(d)&&b(a(document),d,c[d])},a.fn.keyboardFocus=function(a){if(!a)throw new Error("Please pass your focus class names into `$(...).keyboardFocus(...)`.");return b(this,null,a),this}}(jQuery);
!function(a){function b(b,c,d){d=d.replace(/\./g,"");var e,f=!0;b.on("keydown.keyboardFocus",c,function(a){f=!0}),b.on("mousedown.keyboardFocus",c,function(b){f=!1,a(b.target).removeClass(d)}),b.on("focus.keyboardFocus",c,function(b){f&&(e=a(b.target),e.addClass(d),e.trigger("keyboardFocus"))}),b.on("blur.keyboardFocus",c,function(b){e=a(b.target),e.removeClass(d),f&&e.trigger("keyboardBlur")})}a.keyboardFocus=function(c){if(!c)throw new Error("Please pass a mapping of selectors to focus class names to `keyboardFocus`.");for(var d in c)c.hasOwnProperty(d)&&b(a(document),d,c[d])},a.offKeyboardFocus=function(){a(document).off(".keyboardFocus")},a.fn.keyboardFocus=function(a){if(!a)throw new Error("Please pass your focus class names into `$(...).keyboardFocus(...)`.");return b(this,null,a),this},a.fn.offKeyboardFocus=function(){this.off(".keyboardFocus")}}(jQuery);
+1
-1
package.json
{
"name": "jquery-keyboard-focus",
"version": "0.0.2",
"version": "0.0.3",
"description": "Adds the provided classes to an element when it is focused by keyboard interactions (and not mouse interactions).",

@@ -5,0 +5,0 @@ "main": "jquery.keyboard-focus.js",

+7
-0
README.md

@@ -11,5 +11,9 @@ # jquery-keyboard-focus

To remove handlers, use `offKeyboardFocus`.
```javascript
$('.keyboard-interactions-only').keyboardFocus('is-focused');
$('.keyboard-interactions-only').offKeyboardFocus();
// Or, if you have dynamic elements and want to apply your focus class to all

@@ -21,2 +25,5 @@ // elements that match a given selector:

});
// And, similarly, to remove keyboard focus handlers:
$.offKeyboardFocus();
```

@@ -23,0 +30,0 @@