From 62a757ba5f99024d7fa2227b49f93a5c9b877b1a Mon Sep 17 00:00:00 2001 From: Peter van Nes Date: Thu, 9 Jan 2020 15:34:56 +0100 Subject: [PATCH 1/2] Added tabindex and ng-keypress directive to be able to close toasts using the keyboard. --- toaster.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/toaster.js b/toaster.js index 0d6458e..653d1b6 100644 --- a/toaster.js +++ b/toaster.js @@ -45,7 +45,8 @@ ).run(['$templateCache', function($templateCache) { $templateCache.put('angularjs-toaster/toast.html', '
' + - '
' + + '
' + '
' + '
{{toaster.title}}
' + '
' + From 61275eece4584dde686d6333ffbfd7ea3ebee129 Mon Sep 17 00:00:00 2001 From: Peter van Nes Date: Mon, 13 Jan 2020 11:47:52 +0100 Subject: [PATCH 2/2] Added option to select and dismiss toast by using tab and Enter --- package-lock.json | 41 ++++++++++++++++------ test/toasterContainerControllerSpec.js | 48 ++++++++++++++++++++++++++ toaster.js | 12 +++++-- 3 files changed, 88 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index f1a5938..1fad100 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1239,7 +1239,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -1260,12 +1261,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -1280,17 +1283,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -1407,7 +1413,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -1419,6 +1426,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -1433,6 +1441,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -1440,12 +1449,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -1464,6 +1475,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -1544,7 +1556,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -1556,6 +1569,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -1641,7 +1655,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -1677,6 +1692,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -1696,6 +1712,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -1739,12 +1756,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, diff --git a/test/toasterContainerControllerSpec.js b/test/toasterContainerControllerSpec.js index 1a89da4..25d0323 100644 --- a/test/toasterContainerControllerSpec.js +++ b/test/toasterContainerControllerSpec.js @@ -431,4 +431,52 @@ describe('toasterContainer controller', function () { expect(console.log).toHaveBeenCalledWith("TOAST-NOTE: Your click handler is not inside a parent scope of toaster-container."); }); }); + + describe('keydown', function () { + it('should do nothing if spacebar is pressed', function () { + var container = angular.element( + ''); + + $compile(container)(rootScope); + rootScope.$digest(); + var scope = container.scope(); + + spyOn(scope, 'removeToast').and.callThrough(); + + toaster.pop({type: 'info'}); + rootScope.$digest(); + + scope.enter({ + stopPropagation: function () { + return true; + }, originalEvent: {key: 'Spacebar'} + }, scope.toasters[0]); + + expect(scope.toasters.length).toBe(1); + expect(scope.removeToast).not.toHaveBeenCalled(); + }); + + it('should remove toast if enter is pressed', function () { + var container = angular.element( + ''); + + $compile(container)(rootScope); + rootScope.$digest(); + var scope = container.scope(); + + spyOn(scope, 'removeToast').and.callThrough(); + + toaster.pop({type: 'info'}); + rootScope.$digest(); + + scope.enter({ + stopPropagation: function () { + return true; + }, originalEvent: {key: 'Enter'} + }, scope.toasters[0]); + + expect(scope.toasters.length).toBe(0); + expect(scope.removeToast).toHaveBeenCalled(); + }); + }); }); \ No newline at end of file diff --git a/toaster.js b/toaster.js index 653d1b6..3262c45 100644 --- a/toaster.js +++ b/toaster.js @@ -46,8 +46,9 @@ $templateCache.put('angularjs-toaster/toast.html', '
' + '
' + - '
' + + 'ng-keydown="enter($event, toaster)" tabindex="0" ng-mouseover="stopTimer(toaster)" ng-mouseout="restartTimer(toaster)">' + + '
' + '
{{toaster.title}}
' + '
' + '
' + @@ -487,6 +488,13 @@ } }; + // Called on keydown + $scope.enter = function(event, toast, isCloseButton) { + if (event.originalEvent.key === 'Enter') { + $scope.click(event,toast,isCloseButton); + } + } + $scope.click = function(event, toast, isCloseButton) { event.stopPropagation();