		(function($) {

		$.keyboardFocus = function(classNameMappings) {
		if (!classNameMappings) {
		throw new Error('Please pass a mapping of selectors to focus class names to `keyboardFocus`.');
		}

		for (var elementClass in classNameMappings) {
		if (classNameMappings.hasOwnProperty(elementClass)) {
		bindKeyboardFocusEvents($(document), elementClass, classNameMappings[elementClass]);
		}
		}
		};

		$.fn.keyboardFocus = function(classNames) {
		if (!classNames) {
		console.warn('Please pass your focus class names into `keyboardFocus`.');
		classNames = '';
		throw new Error('Please pass your focus class names into `$(...).keyboardFocus(...)`.');
		}

		bindKeyboardFocusEvents(this, null, classNames);
		return this;
		};

		function bindKeyboardFocusEvents($el, elementClass, classNames) {
		classNames = classNames.replace(/\./g, '');

		var $el = this;
		var $target;
		@@ -14,11 +31,11 @@ // This needs to be `true` when we start, to catch the first tab.

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

		$el.on('focus', function(e) {
		$el.on('focus', elementClass, function(e) {
		if (lastKeyPress) {
		@@ -30,3 +47,3 @@ $target = $(e.target);
		});
		$el.on('blur', function(e) {
		$el.on('blur', elementClass, function(e) {
		// We may have keyboard-focused-in, but we could've mouse-blurred out.
		@@ -39,5 +56,3 @@ $target = $(e.target);
		});

		return this;
		};
		}
		})(jQuery);

jquery.keyboard-focus.min.js

		@@ -1,1 +0,1 @@
		!function(a){a.fn.keyboardFocus=function(b){b\|\|(console.warn("Please pass your focus class names into `keyboardFocus`."),b=""),b=b.replace(/\./g,"");var c,d=this,e=!0;return d.on("keydown",function(a){e=!0}),d.on("mousedown",function(a){e=!1,d.removeClass(b)}),d.on("focus",function(d){e&&(c=a(d.target),c.addClass(b),c.trigger("keyboardFocus"))}),d.on("blur",function(d){c=a(d.target),c.removeClass(b),e&&c.trigger("keyboardBlur")}),this}}(jQuery);
		!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);

package.json

		{
		"name": "jquery-keyboard-focus",
		"version": "0.0.1",
		"version": "0.0.2",
		"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",

README.md

		@@ -13,2 +13,9 @@ # jquery-keyboard-focus
		$('.keyboard-interactions-only').keyboardFocus('is-focused');

		// Or, if you have dynamic elements and want to apply your focus class to all
		// elements that match a given selector:
		$.keyboardFocus({
		'a.keyboard-interactions-only': 'is-focused'
		// You can specify multiple class name mappings.
		});
		```
		@@ -15,0 +22,0 @@

index.html

Sorry, the diff of this file is not supported yet

jquery-keyboard-focus - npm Package Compare versions

New alerts