OLD | NEW |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @fileoverview User pod row implementation. | 6 * @fileoverview User pod row implementation. |
7 */ | 7 */ |
8 | 8 |
9 cr.define('login', function() { | 9 cr.define('login', function() { |
10 /** | 10 /** |
(...skipping 457 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
468 stopEventPropagation(e); | 468 stopEventPropagation(e); |
469 }, | 469 }, |
470 | 470 |
471 /** | 471 /** |
472 * Handles key down event on the icon element. Only 'Enter' key is handled. | 472 * Handles key down event on the icon element. Only 'Enter' key is handled. |
473 * No-op if {@code this.actionHandler_} is not set. | 473 * No-op if {@code this.actionHandler_} is not set. |
474 * @param {Event} e The key down event. | 474 * @param {Event} e The key down event. |
475 * @private | 475 * @private |
476 */ | 476 */ |
477 handleKeyDown_: function(e) { | 477 handleKeyDown_: function(e) { |
478 if (!this.actionHandler_ || e.keyIdentifier != 'Enter') | 478 if (!this.actionHandler_ || e.key != 'Enter') |
479 return; | 479 return; |
480 this.actionHandler_(e); | 480 this.actionHandler_(e); |
481 stopEventPropagation(e); | 481 stopEventPropagation(e); |
482 }, | 482 }, |
483 | 483 |
484 /** | 484 /** |
485 * Changes the tooltip hover state and updates tooltip visibility if needed. | 485 * Changes the tooltip hover state and updates tooltip visibility if needed. |
486 * @param {!UserPodCustomIcon.HoverState} state | 486 * @param {!UserPodCustomIcon.HoverState} state |
487 * @private | 487 * @private |
488 */ | 488 */ |
(...skipping 942 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1431 e.stopPropagation(); | 1431 e.stopPropagation(); |
1432 }, | 1432 }, |
1433 | 1433 |
1434 /** | 1434 /** |
1435 * Handles a keydown event on action area button. | 1435 * Handles a keydown event on action area button. |
1436 * @param {Event} e KeyDown event. | 1436 * @param {Event} e KeyDown event. |
1437 */ | 1437 */ |
1438 handleActionAreaButtonKeyDown_: function(e) { | 1438 handleActionAreaButtonKeyDown_: function(e) { |
1439 if (this.disabled) | 1439 if (this.disabled) |
1440 return; | 1440 return; |
1441 switch (e.keyIdentifier) { | 1441 switch (e.key) { |
1442 case 'Enter': | 1442 case 'Enter': |
1443 case 'U+0020': // Space | 1443 case ' ': |
1444 if (this.parentNode.focusedPod_ && !this.isActionBoxMenuActive) | 1444 if (this.parentNode.focusedPod_ && !this.isActionBoxMenuActive) |
1445 this.isActionBoxMenuActive = true; | 1445 this.isActionBoxMenuActive = true; |
1446 e.stopPropagation(); | 1446 e.stopPropagation(); |
1447 break; | 1447 break; |
1448 case 'Up': | 1448 case 'ArrowUp': |
1449 case 'Down': | 1449 case 'ArrowDown': |
1450 if (this.isActionBoxMenuActive) { | 1450 if (this.isActionBoxMenuActive) { |
1451 this.actionBoxMenuRemoveElement.tabIndex = | 1451 this.actionBoxMenuRemoveElement.tabIndex = |
1452 UserPodTabOrder.POD_MENU_ITEM; | 1452 UserPodTabOrder.POD_MENU_ITEM; |
1453 this.actionBoxMenuRemoveElement.focus(); | 1453 this.actionBoxMenuRemoveElement.focus(); |
1454 } | 1454 } |
1455 e.stopPropagation(); | 1455 e.stopPropagation(); |
1456 break; | 1456 break; |
1457 // Ignore these two, so ChromeVox hotkeys don't close the menu before | 1457 // Ignore these two, so ChromeVox hotkeys don't close the menu before |
1458 // they can navigate through it. | 1458 // they can navigate through it. |
1459 case 'Shift': | 1459 case 'Shift': |
1460 case 'Win': | 1460 case 'Meta': |
1461 break; | 1461 break; |
1462 case 'U+001B': // Esc | 1462 case 'Escape': |
1463 this.isActionBoxMenuActive = false; | 1463 this.isActionBoxMenuActive = false; |
1464 e.stopPropagation(); | 1464 e.stopPropagation(); |
1465 break; | 1465 break; |
1466 case 'U+0009': // Tab | 1466 case 'Tab': |
1467 if (!this.parentNode.alwaysFocusSinglePod) | 1467 if (!this.parentNode.alwaysFocusSinglePod) |
1468 this.parentNode.focusPod(); | 1468 this.parentNode.focusPod(); |
1469 default: | 1469 default: |
1470 this.isActionBoxMenuActive = false; | 1470 this.isActionBoxMenuActive = false; |
1471 break; | 1471 break; |
1472 } | 1472 } |
1473 }, | 1473 }, |
1474 | 1474 |
1475 /** | 1475 /** |
1476 * Handles a keydown event on menu title. | 1476 * Handles a keydown event on menu title. |
1477 * @param {Event} e KeyDown event. | 1477 * @param {Event} e KeyDown event. |
1478 */ | 1478 */ |
1479 handleMenuTitleElementKeyDown_: function(e) { | 1479 handleMenuTitleElementKeyDown_: function(e) { |
1480 if (this.disabled) | 1480 if (this.disabled) |
1481 return; | 1481 return; |
1482 | 1482 |
1483 if (e.keyIdentifier != 'U+0009' /* TAB */) { | 1483 if (e.key != 'Tab') { |
1484 this.handleActionAreaButtonKeyDown_(e); | 1484 this.handleActionAreaButtonKeyDown_(e); |
1485 return; | 1485 return; |
1486 } | 1486 } |
1487 | 1487 |
1488 if (e.shiftKey == false) { | 1488 if (e.shiftKey == false) { |
1489 if (this.actionBoxMenuRemoveElement.hidden) { | 1489 if (this.actionBoxMenuRemoveElement.hidden) { |
1490 this.isActionBoxMenuActive = false; | 1490 this.isActionBoxMenuActive = false; |
1491 } else { | 1491 } else { |
1492 this.actionBoxMenuRemoveElement.tabIndex = | 1492 this.actionBoxMenuRemoveElement.tabIndex = |
1493 UserPodTabOrder.POD_MENU_ITEM; | 1493 UserPodTabOrder.POD_MENU_ITEM; |
(...skipping 214 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1708 /** | 1708 /** |
1709 * Handles a keydown event on remove user confirmation button. | 1709 * Handles a keydown event on remove user confirmation button. |
1710 * @param {Event} e KeyDown event. | 1710 * @param {Event} e KeyDown event. |
1711 */ | 1711 */ |
1712 handleRemoveUserConfirmationKeyDown_: function(e) { | 1712 handleRemoveUserConfirmationKeyDown_: function(e) { |
1713 if (!this.isActionBoxMenuActive) | 1713 if (!this.isActionBoxMenuActive) |
1714 return; | 1714 return; |
1715 | 1715 |
1716 // Only handle pressing 'Enter' or 'Space', and let all other events | 1716 // Only handle pressing 'Enter' or 'Space', and let all other events |
1717 // bubble to the action box menu. | 1717 // bubble to the action box menu. |
1718 if (e.keyIdentifier == 'Enter' || e.keyIdentifier == 'U+0020') { | 1718 if (e.key == 'Enter' || e.key == ' ') { |
1719 this.isActionBoxMenuActive = false; | 1719 this.isActionBoxMenuActive = false; |
1720 this.removeUser(this.user); | 1720 this.removeUser(this.user); |
1721 e.stopPropagation(); | 1721 e.stopPropagation(); |
1722 // Prevent default so that we don't trigger a 'click' event. | 1722 // Prevent default so that we don't trigger a 'click' event. |
1723 e.preventDefault(); | 1723 e.preventDefault(); |
1724 } | 1724 } |
1725 }, | 1725 }, |
1726 | 1726 |
1727 /** | 1727 /** |
1728 * Handles a keydown event on remove command. | 1728 * Handles a keydown event on remove command. |
1729 * @param {Event} e KeyDown event. | 1729 * @param {Event} e KeyDown event. |
1730 */ | 1730 */ |
1731 handleRemoveCommandKeyDown_: function(e) { | 1731 handleRemoveCommandKeyDown_: function(e) { |
1732 if (this.disabled) | 1732 if (this.disabled) |
1733 return; | 1733 return; |
1734 switch (e.keyIdentifier) { | 1734 switch (e.key) { |
1735 case 'Enter': | 1735 case 'Enter': |
1736 if (this.user.legacySupervisedUser || this.user.isDesktopUser) { | 1736 if (this.user.legacySupervisedUser || this.user.isDesktopUser) { |
1737 // Prevent default so that we don't trigger a 'click' event on the | 1737 // Prevent default so that we don't trigger a 'click' event on the |
1738 // remove button that will be focused. | 1738 // remove button that will be focused. |
1739 e.preventDefault(); | 1739 e.preventDefault(); |
1740 this.showRemoveWarning_(); | 1740 this.showRemoveWarning_(); |
1741 } else { | 1741 } else { |
1742 this.removeUser(this.user); | 1742 this.removeUser(this.user); |
1743 } | 1743 } |
1744 e.stopPropagation(); | 1744 e.stopPropagation(); |
1745 break; | 1745 break; |
1746 case 'Up': | 1746 case 'ArrowUp': |
1747 case 'Down': | 1747 case 'ArrowDown': |
1748 e.stopPropagation(); | 1748 e.stopPropagation(); |
1749 break; | 1749 break; |
1750 // Ignore these two, so ChromeVox hotkeys don't close the menu before | 1750 // Ignore these two, so ChromeVox hotkeys don't close the menu before |
1751 // they can navigate through it. | 1751 // they can navigate through it. |
1752 case 'Shift': | 1752 case 'Shift': |
1753 case 'Win': | 1753 case 'Meta': |
1754 break; | 1754 break; |
1755 case 'U+001B': // Esc | 1755 case 'Escape': |
1756 this.actionBoxAreaElement.focus(); | 1756 this.actionBoxAreaElement.focus(); |
1757 this.isActionBoxMenuActive = false; | 1757 this.isActionBoxMenuActive = false; |
1758 e.stopPropagation(); | 1758 e.stopPropagation(); |
1759 break; | 1759 break; |
1760 default: | 1760 default: |
1761 this.actionBoxAreaElement.focus(); | 1761 this.actionBoxAreaElement.focus(); |
1762 this.isActionBoxMenuActive = false; | 1762 this.isActionBoxMenuActive = false; |
1763 break; | 1763 break; |
1764 } | 1764 } |
1765 }, | 1765 }, |
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1811 } | 1811 } |
1812 }, | 1812 }, |
1813 | 1813 |
1814 /** | 1814 /** |
1815 * Handles keydown event for a user pod. | 1815 * Handles keydown event for a user pod. |
1816 * @param {Event} e Key event. | 1816 * @param {Event} e Key event. |
1817 */ | 1817 */ |
1818 handlePodKeyDown_: function(e) { | 1818 handlePodKeyDown_: function(e) { |
1819 if (!this.isAuthTypeUserClick || this.disabled) | 1819 if (!this.isAuthTypeUserClick || this.disabled) |
1820 return; | 1820 return; |
1821 switch (e.keyIdentifier) { | 1821 switch (e.key) { |
1822 case 'Enter': | 1822 case 'Enter': |
1823 case 'U+0020': // Space | 1823 case ' ': |
1824 if (this.parentNode.isFocused(this)) | 1824 if (this.parentNode.isFocused(this)) |
1825 this.parentNode.setActivatedPod(this); | 1825 this.parentNode.setActivatedPod(this); |
1826 break; | 1826 break; |
1827 } | 1827 } |
1828 } | 1828 } |
1829 }; | 1829 }; |
1830 | 1830 |
1831 /** | 1831 /** |
1832 * Creates a public account user pod. | 1832 * Creates a public account user pod. |
1833 * @constructor | 1833 * @constructor |
(...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1913 return this.nameElement; | 1913 return this.nameElement; |
1914 }, | 1914 }, |
1915 | 1915 |
1916 /** @override */ | 1916 /** @override */ |
1917 decorate: function() { | 1917 decorate: function() { |
1918 UserPod.prototype.decorate.call(this); | 1918 UserPod.prototype.decorate.call(this); |
1919 | 1919 |
1920 this.classList.add('public-account'); | 1920 this.classList.add('public-account'); |
1921 | 1921 |
1922 this.nameElement.addEventListener('keydown', (function(e) { | 1922 this.nameElement.addEventListener('keydown', (function(e) { |
1923 if (e.keyIdentifier == 'Enter') { | 1923 if (e.key == 'Enter') { |
1924 this.parentNode.setActivatedPod(this, e); | 1924 this.parentNode.setActivatedPod(this, e); |
1925 // Stop this keydown event from bubbling up to PodRow handler. | 1925 // Stop this keydown event from bubbling up to PodRow handler. |
1926 e.stopPropagation(); | 1926 e.stopPropagation(); |
1927 // Prevent default so that we don't trigger a 'click' event on the | 1927 // Prevent default so that we don't trigger a 'click' event on the |
1928 // newly focused "Enter" button. | 1928 // newly focused "Enter" button. |
1929 e.preventDefault(); | 1929 e.preventDefault(); |
1930 } | 1930 } |
1931 }).bind(this)); | 1931 }).bind(this)); |
1932 | 1932 |
1933 var learnMore = this.querySelector('.learn-more'); | 1933 var learnMore = this.querySelector('.learn-more'); |
(...skipping 1409 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
3343 }, | 3343 }, |
3344 | 3344 |
3345 /** | 3345 /** |
3346 * Handler of keydown event. | 3346 * Handler of keydown event. |
3347 * @param {Event} e KeyDown Event object. | 3347 * @param {Event} e KeyDown Event object. |
3348 */ | 3348 */ |
3349 handleKeyDown: function(e) { | 3349 handleKeyDown: function(e) { |
3350 if (this.disabled) | 3350 if (this.disabled) |
3351 return; | 3351 return; |
3352 var editing = e.target.tagName == 'INPUT' && e.target.value; | 3352 var editing = e.target.tagName == 'INPUT' && e.target.value; |
3353 switch (e.keyIdentifier) { | 3353 switch (e.key) { |
3354 case 'Left': | 3354 case 'ArrowLeft': |
3355 if (!editing) { | 3355 if (!editing) { |
3356 if (this.focusedPod_ && this.focusedPod_.previousElementSibling) | 3356 if (this.focusedPod_ && this.focusedPod_.previousElementSibling) |
3357 this.focusPod(this.focusedPod_.previousElementSibling); | 3357 this.focusPod(this.focusedPod_.previousElementSibling); |
3358 else | 3358 else |
3359 this.focusPod(this.lastElementChild); | 3359 this.focusPod(this.lastElementChild); |
3360 | 3360 |
3361 e.stopPropagation(); | 3361 e.stopPropagation(); |
3362 } | 3362 } |
3363 break; | 3363 break; |
3364 case 'Right': | 3364 case 'ArrowRight': |
3365 if (!editing) { | 3365 if (!editing) { |
3366 if (this.focusedPod_ && this.focusedPod_.nextElementSibling) | 3366 if (this.focusedPod_ && this.focusedPod_.nextElementSibling) |
3367 this.focusPod(this.focusedPod_.nextElementSibling); | 3367 this.focusPod(this.focusedPod_.nextElementSibling); |
3368 else | 3368 else |
3369 this.focusPod(this.firstElementChild); | 3369 this.focusPod(this.firstElementChild); |
3370 | 3370 |
3371 e.stopPropagation(); | 3371 e.stopPropagation(); |
3372 } | 3372 } |
3373 break; | 3373 break; |
3374 case 'Enter': | 3374 case 'Enter': |
3375 if (this.focusedPod_) { | 3375 if (this.focusedPod_) { |
3376 var targetTag = e.target.tagName; | 3376 var targetTag = e.target.tagName; |
3377 if (e.target == this.focusedPod_.passwordElement || | 3377 if (e.target == this.focusedPod_.passwordElement || |
3378 (targetTag != 'INPUT' && | 3378 (targetTag != 'INPUT' && |
3379 targetTag != 'BUTTON' && | 3379 targetTag != 'BUTTON' && |
3380 targetTag != 'A')) { | 3380 targetTag != 'A')) { |
3381 this.setActivatedPod(this.focusedPod_, e); | 3381 this.setActivatedPod(this.focusedPod_, e); |
3382 e.stopPropagation(); | 3382 e.stopPropagation(); |
3383 } | 3383 } |
3384 } | 3384 } |
3385 break; | 3385 break; |
3386 case 'U+001B': // Esc | 3386 case 'Escape': |
3387 if (!this.alwaysFocusSinglePod) | 3387 if (!this.alwaysFocusSinglePod) |
3388 this.focusPod(); | 3388 this.focusPod(); |
3389 break; | 3389 break; |
3390 } | 3390 } |
3391 }, | 3391 }, |
3392 | 3392 |
3393 /** | 3393 /** |
3394 * Called right after the pod row is shown. | 3394 * Called right after the pod row is shown. |
3395 */ | 3395 */ |
3396 handleAfterShow: function() { | 3396 handleAfterShow: function() { |
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
3473 if (pod && pod.multiProfilesPolicyApplied) { | 3473 if (pod && pod.multiProfilesPolicyApplied) { |
3474 pod.userTypeBubbleElement.classList.remove('bubble-shown'); | 3474 pod.userTypeBubbleElement.classList.remove('bubble-shown'); |
3475 } | 3475 } |
3476 } | 3476 } |
3477 }; | 3477 }; |
3478 | 3478 |
3479 return { | 3479 return { |
3480 PodRow: PodRow | 3480 PodRow: PodRow |
3481 }; | 3481 }; |
3482 }); | 3482 }); |
OLD | NEW |