metal-keyboard-focus - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

lib/KeyboardFocusManager.js

@@ -9,2 +9,10 @@ 'use strict';
 
+var _metal2 = _interopRequireDefault(_metal);
+
+var _metalEvents = require('metal-events');
+
+var _metalEvents2 = _interopRequireDefault(_metalEvents);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -27,4 +35,4 @@
  */
-var KeyboardFocusManager = function (_Disposable) {
-	_inherits(KeyboardFocusManager, _Disposable);
+var KeyboardFocusManager = function (_EventEmitter) {
+	_inherits(KeyboardFocusManager, _EventEmitter);
 
@@ -39,3 +47,3 @@ /**
 
-		var _this = _possibleConstructorReturn(this, _Disposable.call(this));
+		var _this = _possibleConstructorReturn(this, _EventEmitter.call(this));
 
@@ -67,3 +75,3 @@ _this.component_ = component;
 	KeyboardFocusManager.prototype.disposeInternal = function disposeInternal() {
-		_Disposable.prototype.disposeInternal.call(this);
+		_EventEmitter.prototype.disposeInternal.call(this);
 		this.stop();
@@ -80,3 +88,3 @@ this.component_ = null;
   * @param {number} increment
-  * @return {Element}
+  * @return {string}
   * @protected
@@ -89,7 +97,9 @@ */
 		var element = void 0;
+		var ref = void 0;
 		do {
 			position = this.increment_(position, increment);
-			element = this.component_.refs[this.buildRef_(prefix, position)];
+			ref = this.buildRef_(prefix, position);
+			element = this.component_.refs[ref];
 		} while (this.isFocusable_(element) && position !== initialPosition);
-		return element;
+		return element ? ref : null;
 	};
@@ -110,3 +120,5 @@
 		}
-		if (!_metal.core.isElement(element)) {
+
+		var originalValue = element;
+		if (!_metal2.default.isElement(element)) {
 			element = this.component_.refs[element];
@@ -116,2 +128,6 @@ }
 			element.focus();
+			this.emit(KeyboardFocusManager.EVENT_FOCUSED, {
+				element: element,
+				ref: _metal2.default.isString(originalValue) ? originalValue : null
+			});
 		}
@@ -165,3 +181,3 @@ };
 		position += increment;
-		if (_metal.core.isNumber(size)) {
+		if (_metal2.default.isNumber(size)) {
 			if (position < 0) {
@@ -250,6 +266,12 @@ position = size - 1;
 	return KeyboardFocusManager;
-}(_metal.Disposable);
+}(_metalEvents2.default);
 
+// Event emitted when a selected element was focused via the keyboard.
+
+
+KeyboardFocusManager.EVENT_FOCUSED = 'focused';
+
+// The regex used to extract the position from an element's ref.
 KeyboardFocusManager.REF_REGEX = /.+-(\d+)$/;
 
 exports.default = KeyboardFocusManager;

package.json

 {
   "name": "metal-keyboard-focus",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Manages focus on components via keyboard events",
@@ -29,3 +29,4 @@ "license": "BSD",
   "dependencies": {
-    "metal": "^2.0.0"
+    "metal": "^2.0.0",
+    "metal-events": "^2.2.3"
   },
@@ -32,0 +33,0 @@ "devDependencies": {

src/KeyboardFocusManager.js

 'use strict';
 
-import { core, Disposable } from 'metal';
+import core from 'metal';
+import EventEmitter from 'metal-events';
 
@@ -16,3 +17,3 @@ /**
  */
-class KeyboardFocusManager extends Disposable {
+class KeyboardFocusManager extends EventEmitter {
 	/**
@@ -57,3 +58,3 @@ * Constructor for `KeyboardFocusManager`.
 	 * @param {number} increment
-	 * @return {Element}
+	 * @return {string}
 	 * @protected
@@ -64,7 +65,9 @@ */
 		let element;
+		let ref;
 		do {
 			position = this.increment_(position, increment);
-			element = this.component_.refs[this.buildRef_(prefix, position)];
+			ref = this.buildRef_(prefix, position);
+			element = this.component_.refs[ref];
 		} while (this.isFocusable_(element) && position !== initialPosition);
-		return element;
+		return element ? ref : null;
 	}
@@ -83,2 +86,4 @@
 		}
+
+		const originalValue = element;
 		if (!core.isElement(element)) {
@@ -89,2 +94,6 @@ element = this.component_.refs[element];
 			element.focus();
+			this.emit(KeyboardFocusManager.EVENT_FOCUSED, {
+				element,
+				ref: core.isString(originalValue) ? originalValue : null
+			});
 		}
@@ -212,4 +221,8 @@ }
 
+// Event emitted when a selected element was focused via the keyboard.
+KeyboardFocusManager.EVENT_FOCUSED = 'focused';
+
+// The regex used to extract the position from an element's ref.
 KeyboardFocusManager.REF_REGEX = /.+-(\d+)$/;
 
 export default KeyboardFocusManager;

test/KeyboardFocusManager.js

@@ -254,2 +254,18 @@ 'use strict';
 
+	it('should emit event when element is focused', function() {
+		component = new TestComponent();
+		manager = new KeyboardFocusManager(component, 'button');
+		manager.start();
+
+		const listener = sinon.stub();
+		manager.on(KeyboardFocusManager.EVENT_FOCUSED, listener);
+		dom.triggerEvent(component.refs['el-0'], 'keydown', {
+			keyCode: 39
+		});
+		assert.strictEqual(1, listener.callCount);
+		assert.ok(listener.args[0][0]);
+		assert.strictEqual('el-1', listener.args[0][0].ref);
+		assert.strictEqual(component.refs['el-1'], listener.args[0][0].element);
+	});
+
 	describe('setCircularLength', function() {
@@ -352,2 +368,18 @@ it('should focus last element when the left arrow key is pressed on first element', function() {
 
+		it('should emit event for element focused due to the custom focus handler', function() {
+			component = new TestComponent();
+			manager = new KeyboardFocusManager(component, 'button')
+				.setFocusHandler(() => component.refs['el-2'])
+				.start();
+
+			const listener = sinon.stub();
+			manager.on(KeyboardFocusManager.EVENT_FOCUSED, listener);
+			dom.triggerEvent(component.refs['el-0'], 'keydown', {
+				keyCode: 10
+			});
+			assert.strictEqual(1, listener.callCount);
+			assert.ok(!listener.args[0][0].ref);
+			assert.strictEqual(component.refs['el-2'], listener.args[0][0].element);
+		});
+
 		it('should focus the element with the ref returned by the custom focus handler', function() {
@@ -365,2 +397,18 @@ component = new TestComponent();
 
+		it('should emit event for element focused due to the custom focus handler via ref', function() {
+			component = new TestComponent();
+			manager = new KeyboardFocusManager(component, 'button')
+				.setFocusHandler(() => 'el-2')
+				.start();
+
+			const listener = sinon.stub();
+			manager.on(KeyboardFocusManager.EVENT_FOCUSED, listener);
+			dom.triggerEvent(component.refs['el-0'], 'keydown', {
+				keyCode: 10
+			});
+			assert.strictEqual(1, listener.callCount);
+			assert.strictEqual('el-2', listener.args[0][0].ref);
+			assert.strictEqual(component.refs['el-2'], listener.args[0][0].element);
+		});
+
 		it('should not focus on any element if the custom focus handler returns nothing', function() {
@@ -367,0 +415,0 @@ component = new TestComponent();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31610

increased by10.13%

Lines of code

785

increased by9.33%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedmetal-events@^2.2.3

• + Addedmetal-events@2.16.8(transitive)