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 946 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1435 e.stopPropagation(); | 1435 e.stopPropagation(); |
1436 }, | 1436 }, |
1437 | 1437 |
1438 /** | 1438 /** |
1439 * Handles a keydown event on action area button. | 1439 * Handles a keydown event on action area button. |
1440 * @param {Event} e KeyDown event. | 1440 * @param {Event} e KeyDown event. |
1441 */ | 1441 */ |
1442 handleActionAreaButtonKeyDown_: function(e) { | 1442 handleActionAreaButtonKeyDown_: function(e) { |
1443 if (this.disabled) | 1443 if (this.disabled) |
1444 return; | 1444 return; |
1445 switch (e.keyIdentifier) { | 1445 switch (e.key) { |
1446 case 'Enter': | 1446 case 'Enter': |
1447 case 'U+0020': // Space | 1447 case ' ': |
1448 if (this.parentNode.focusedPod_ && !this.isActionBoxMenuActive) | 1448 if (this.parentNode.focusedPod_ && !this.isActionBoxMenuActive) |
1449 this.isActionBoxMenuActive = true; | 1449 this.isActionBoxMenuActive = true; |
1450 e.stopPropagation(); | 1450 e.stopPropagation(); |
1451 break; | 1451 break; |
1452 case 'Up': | 1452 case 'ArrowUp': |
1453 case 'Down': | 1453 case 'ArrowDown': |
1454 if (this.isActionBoxMenuActive) { | 1454 if (this.isActionBoxMenuActive) { |
1455 this.actionBoxMenuRemoveElement.tabIndex = | 1455 this.actionBoxMenuRemoveElement.tabIndex = |
1456 UserPodTabOrder.POD_MENU_ITEM; | 1456 UserPodTabOrder.POD_MENU_ITEM; |
1457 this.actionBoxMenuRemoveElement.focus(); | 1457 this.actionBoxMenuRemoveElement.focus(); |
1458 } | 1458 } |
1459 e.stopPropagation(); | 1459 e.stopPropagation(); |
1460 break; | 1460 break; |
1461 // Ignore these two, so ChromeVox hotkeys don't close the menu before | 1461 // Ignore these two, so ChromeVox hotkeys don't close the menu before |
1462 // they can navigate through it. | 1462 // they can navigate through it. |
1463 case 'Shift': | 1463 case 'Shift': |
1464 case 'Win': | 1464 case 'Meta': |
1465 break; | 1465 break; |
1466 case 'U+001B': // Esc | 1466 case 'Escape': |
1467 this.isActionBoxMenuActive = false; | 1467 this.isActionBoxMenuActive = false; |
1468 e.stopPropagation(); | 1468 e.stopPropagation(); |
1469 break; | 1469 break; |
1470 case 'U+0009': // Tab | 1470 case 'Tab': |
1471 if (!this.parentNode.alwaysFocusSinglePod) | 1471 if (!this.parentNode.alwaysFocusSinglePod) |
1472 this.parentNode.focusPod(); | 1472 this.parentNode.focusPod(); |
1473 default: | 1473 default: |
1474 this.isActionBoxMenuActive = false; | 1474 this.isActionBoxMenuActive = false; |
1475 break; | 1475 break; |
1476 } | 1476 } |
1477 }, | 1477 }, |
1478 | 1478 |
1479 /** | 1479 /** |
1480 * Handles a keydown event on menu title. | 1480 * Handles a keydown event on menu title. |
1481 * @param {Event} e KeyDown event. | 1481 * @param {Event} e KeyDown event. |
1482 */ | 1482 */ |
1483 handleMenuTitleElementKeyDown_: function(e) { | 1483 handleMenuTitleElementKeyDown_: function(e) { |
1484 if (this.disabled) | 1484 if (this.disabled) |
1485 return; | 1485 return; |
1486 | 1486 |
1487 if (e.keyIdentifier != 'U+0009' /* TAB */) { | 1487 if (e.key != 'Tab') { |
1488 this.handleActionAreaButtonKeyDown_(e); | 1488 this.handleActionAreaButtonKeyDown_(e); |
1489 return; | 1489 return; |
1490 } | 1490 } |
1491 | 1491 |
1492 if (e.shiftKey == false) { | 1492 if (e.shiftKey == false) { |
1493 if (this.actionBoxMenuRemoveElement.hidden) { | 1493 if (this.actionBoxMenuRemoveElement.hidden) { |
1494 this.isActionBoxMenuActive = false; | 1494 this.isActionBoxMenuActive = false; |
1495 } else { | 1495 } else { |
1496 this.actionBoxMenuRemoveElement.tabIndex = | 1496 this.actionBoxMenuRemoveElement.tabIndex = |
1497 UserPodTabOrder.POD_MENU_ITEM; | 1497 UserPodTabOrder.POD_MENU_ITEM; |
(...skipping 214 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1712 /** | 1712 /** |
1713 * Handles a keydown event on remove user confirmation button. | 1713 * Handles a keydown event on remove user confirmation button. |
1714 * @param {Event} e KeyDown event. | 1714 * @param {Event} e KeyDown event. |
1715 */ | 1715 */ |
1716 handleRemoveUserConfirmationKeyDown_: function(e) { | 1716 handleRemoveUserConfirmationKeyDown_: function(e) { |
1717 if (!this.isActionBoxMenuActive) | 1717 if (!this.isActionBoxMenuActive) |
1718 return; | 1718 return; |
1719 | 1719 |
1720 // Only handle pressing 'Enter' or 'Space', and let all other events | 1720 // Only handle pressing 'Enter' or 'Space', and let all other events |
1721 // bubble to the action box menu. | 1721 // bubble to the action box menu. |
1722 if (e.keyIdentifier == 'Enter' || e.keyIdentifier == 'U+0020') { | 1722 if (e.key == 'Enter' || e.key == ' ') { |
1723 this.isActionBoxMenuActive = false; | 1723 this.isActionBoxMenuActive = false; |
1724 this.removeUser(this.user); | 1724 this.removeUser(this.user); |
1725 e.stopPropagation(); | 1725 e.stopPropagation(); |
1726 // Prevent default so that we don't trigger a 'click' event. | 1726 // Prevent default so that we don't trigger a 'click' event. |
1727 e.preventDefault(); | 1727 e.preventDefault(); |
1728 } | 1728 } |
1729 }, | 1729 }, |
1730 | 1730 |
1731 /** | 1731 /** |
1732 * Handles a keydown event on remove command. | 1732 * Handles a keydown event on remove command. |
1733 * @param {Event} e KeyDown event. | 1733 * @param {Event} e KeyDown event. |
1734 */ | 1734 */ |
1735 handleRemoveCommandKeyDown_: function(e) { | 1735 handleRemoveCommandKeyDown_: function(e) { |
1736 if (this.disabled) | 1736 if (this.disabled) |
1737 return; | 1737 return; |
1738 switch (e.keyIdentifier) { | 1738 switch (e.key) { |
1739 case 'Enter': | 1739 case 'Enter': |
1740 if (this.user.legacySupervisedUser || this.user.isDesktopUser) { | 1740 if (this.user.legacySupervisedUser || this.user.isDesktopUser) { |
1741 // Prevent default so that we don't trigger a 'click' event on the | 1741 // Prevent default so that we don't trigger a 'click' event on the |
1742 // remove button that will be focused. | 1742 // remove button that will be focused. |
1743 e.preventDefault(); | 1743 e.preventDefault(); |
1744 this.showRemoveWarning_(); | 1744 this.showRemoveWarning_(); |
1745 } else { | 1745 } else { |
1746 this.removeUser(this.user); | 1746 this.removeUser(this.user); |
1747 } | 1747 } |
1748 e.stopPropagation(); | 1748 e.stopPropagation(); |
1749 break; | 1749 break; |
1750 case 'Up': | 1750 case 'ArrowUp': |
1751 case 'Down': | 1751 case 'ArrowDown': |
1752 e.stopPropagation(); | 1752 e.stopPropagation(); |
1753 break; | 1753 break; |
1754 // Ignore these two, so ChromeVox hotkeys don't close the menu before | 1754 // Ignore these two, so ChromeVox hotkeys don't close the menu before |
1755 // they can navigate through it. | 1755 // they can navigate through it. |
1756 case 'Shift': | 1756 case 'Shift': |
1757 case 'Win': | 1757 case 'Meta': |
1758 break; | 1758 break; |
1759 case 'U+001B': // Esc | 1759 case 'Escape': |
1760 this.actionBoxAreaElement.focus(); | 1760 this.actionBoxAreaElement.focus(); |
1761 this.isActionBoxMenuActive = false; | 1761 this.isActionBoxMenuActive = false; |
1762 e.stopPropagation(); | 1762 e.stopPropagation(); |
1763 break; | 1763 break; |
1764 default: | 1764 default: |
1765 this.actionBoxAreaElement.focus(); | 1765 this.actionBoxAreaElement.focus(); |
1766 this.isActionBoxMenuActive = false; | 1766 this.isActionBoxMenuActive = false; |
1767 break; | 1767 break; |
1768 } | 1768 } |
1769 }, | 1769 }, |
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1815 } | 1815 } |
1816 }, | 1816 }, |
1817 | 1817 |
1818 /** | 1818 /** |
1819 * Handles keydown event for a user pod. | 1819 * Handles keydown event for a user pod. |
1820 * @param {Event} e Key event. | 1820 * @param {Event} e Key event. |
1821 */ | 1821 */ |
1822 handlePodKeyDown_: function(e) { | 1822 handlePodKeyDown_: function(e) { |
1823 if (!this.isAuthTypeUserClick || this.disabled) | 1823 if (!this.isAuthTypeUserClick || this.disabled) |
1824 return; | 1824 return; |
1825 switch (e.keyIdentifier) { | 1825 switch (e.key) { |
1826 case 'Enter': | 1826 case 'Enter': |
1827 case 'U+0020': // Space | 1827 case ' ': |
1828 if (this.parentNode.isFocused(this)) | 1828 if (this.parentNode.isFocused(this)) |
1829 this.parentNode.setActivatedPod(this); | 1829 this.parentNode.setActivatedPod(this); |
1830 break; | 1830 break; |
1831 } | 1831 } |
1832 } | 1832 } |
1833 }; | 1833 }; |
1834 | 1834 |
1835 /** | 1835 /** |
1836 * Creates a public account user pod. | 1836 * Creates a public account user pod. |
1837 * @constructor | 1837 * @constructor |
(...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1917 return this.nameElement; | 1917 return this.nameElement; |
1918 }, | 1918 }, |
1919 | 1919 |
1920 /** @override */ | 1920 /** @override */ |
1921 decorate: function() { | 1921 decorate: function() { |
1922 UserPod.prototype.decorate.call(this); | 1922 UserPod.prototype.decorate.call(this); |
1923 | 1923 |
1924 this.classList.add('public-account'); | 1924 this.classList.add('public-account'); |
1925 | 1925 |
1926 this.nameElement.addEventListener('keydown', (function(e) { | 1926 this.nameElement.addEventListener('keydown', (function(e) { |
1927 if (e.keyIdentifier == 'Enter') { | 1927 if (e.key == 'Enter') { |
1928 this.parentNode.setActivatedPod(this, e); | 1928 this.parentNode.setActivatedPod(this, e); |
1929 // Stop this keydown event from bubbling up to PodRow handler. | 1929 // Stop this keydown event from bubbling up to PodRow handler. |
1930 e.stopPropagation(); | 1930 e.stopPropagation(); |
1931 // Prevent default so that we don't trigger a 'click' event on the | 1931 // Prevent default so that we don't trigger a 'click' event on the |
1932 // newly focused "Enter" button. | 1932 // newly focused "Enter" button. |
1933 e.preventDefault(); | 1933 e.preventDefault(); |
1934 } | 1934 } |
1935 }).bind(this)); | 1935 }).bind(this)); |
1936 | 1936 |
1937 var learnMore = this.querySelector('.learn-more'); | 1937 var learnMore = this.querySelector('.learn-more'); |
(...skipping 1429 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
3367 }, | 3367 }, |
3368 | 3368 |
3369 /** | 3369 /** |
3370 * Handler of keydown event. | 3370 * Handler of keydown event. |
3371 * @param {Event} e KeyDown Event object. | 3371 * @param {Event} e KeyDown Event object. |
3372 */ | 3372 */ |
3373 handleKeyDown: function(e) { | 3373 handleKeyDown: function(e) { |
3374 if (this.disabled) | 3374 if (this.disabled) |
3375 return; | 3375 return; |
3376 var editing = e.target.tagName == 'INPUT' && e.target.value; | 3376 var editing = e.target.tagName == 'INPUT' && e.target.value; |
3377 switch (e.keyIdentifier) { | 3377 switch (e.key) { |
3378 case 'Left': | 3378 case 'ArrowLeft': |
3379 if (!editing) { | 3379 if (!editing) { |
3380 if (this.focusedPod_ && this.focusedPod_.previousElementSibling) | 3380 if (this.focusedPod_ && this.focusedPod_.previousElementSibling) |
3381 this.focusPod(this.focusedPod_.previousElementSibling); | 3381 this.focusPod(this.focusedPod_.previousElementSibling); |
3382 else | 3382 else |
3383 this.focusPod(this.lastElementChild); | 3383 this.focusPod(this.lastElementChild); |
3384 | 3384 |
3385 e.stopPropagation(); | 3385 e.stopPropagation(); |
3386 } | 3386 } |
3387 break; | 3387 break; |
3388 case 'Right': | 3388 case 'ArrowRight': |
3389 if (!editing) { | 3389 if (!editing) { |
3390 if (this.focusedPod_ && this.focusedPod_.nextElementSibling) | 3390 if (this.focusedPod_ && this.focusedPod_.nextElementSibling) |
3391 this.focusPod(this.focusedPod_.nextElementSibling); | 3391 this.focusPod(this.focusedPod_.nextElementSibling); |
3392 else | 3392 else |
3393 this.focusPod(this.firstElementChild); | 3393 this.focusPod(this.firstElementChild); |
3394 | 3394 |
3395 e.stopPropagation(); | 3395 e.stopPropagation(); |
3396 } | 3396 } |
3397 break; | 3397 break; |
3398 case 'Enter': | 3398 case 'Enter': |
3399 if (this.focusedPod_) { | 3399 if (this.focusedPod_) { |
3400 var targetTag = e.target.tagName; | 3400 var targetTag = e.target.tagName; |
3401 if (e.target == this.focusedPod_.passwordElement || | 3401 if (e.target == this.focusedPod_.passwordElement || |
3402 (targetTag != 'INPUT' && | 3402 (targetTag != 'INPUT' && |
3403 targetTag != 'BUTTON' && | 3403 targetTag != 'BUTTON' && |
3404 targetTag != 'A')) { | 3404 targetTag != 'A')) { |
3405 this.setActivatedPod(this.focusedPod_, e); | 3405 this.setActivatedPod(this.focusedPod_, e); |
3406 e.stopPropagation(); | 3406 e.stopPropagation(); |
3407 } | 3407 } |
3408 } | 3408 } |
3409 break; | 3409 break; |
3410 case 'U+001B': // Esc | 3410 case 'Escape': |
3411 if (!this.alwaysFocusSinglePod) | 3411 if (!this.alwaysFocusSinglePod) |
3412 this.focusPod(); | 3412 this.focusPod(); |
3413 break; | 3413 break; |
3414 } | 3414 } |
3415 }, | 3415 }, |
3416 | 3416 |
3417 /** | 3417 /** |
3418 * Called right after the pod row is shown. | 3418 * Called right after the pod row is shown. |
3419 */ | 3419 */ |
3420 handleAfterShow: function() { | 3420 handleAfterShow: function() { |
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
3497 if (pod && pod.multiProfilesPolicyApplied) { | 3497 if (pod && pod.multiProfilesPolicyApplied) { |
3498 pod.userTypeBubbleElement.classList.remove('bubble-shown'); | 3498 pod.userTypeBubbleElement.classList.remove('bubble-shown'); |
3499 } | 3499 } |
3500 } | 3500 } |
3501 }; | 3501 }; |
3502 | 3502 |
3503 return { | 3503 return { |
3504 PodRow: PodRow | 3504 PodRow: PodRow |
3505 }; | 3505 }; |
3506 }); | 3506 }); |
OLD | NEW |