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 739 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
750 /** | 750 /** |
751 * Initializes the pod after its properties set and added to a pod row. | 751 * Initializes the pod after its properties set and added to a pod row. |
752 */ | 752 */ |
753 initialize: function() { | 753 initialize: function() { |
754 this.passwordElement.addEventListener('keydown', | 754 this.passwordElement.addEventListener('keydown', |
755 this.parentNode.handleKeyDown.bind(this.parentNode)); | 755 this.parentNode.handleKeyDown.bind(this.parentNode)); |
756 this.passwordElement.addEventListener('keypress', | 756 this.passwordElement.addEventListener('keypress', |
757 this.handlePasswordKeyPress_.bind(this)); | 757 this.handlePasswordKeyPress_.bind(this)); |
758 this.passwordElement.addEventListener('input', | 758 this.passwordElement.addEventListener('input', |
759 this.handleInputChanged_.bind(this)); | 759 this.handleInputChanged_.bind(this)); |
760 this.submitButton.addEventListener('click', | |
761 this.handleSubmitButtonClick_.bind(this)); | |
760 | 762 |
761 this.imageElement.addEventListener('load', | 763 this.imageElement.addEventListener('load', |
762 this.parentNode.handlePodImageLoad.bind(this.parentNode, this)); | 764 this.parentNode.handlePodImageLoad.bind(this.parentNode, this)); |
763 | 765 |
764 var initialAuthType = this.user.initialAuthType || | 766 var initialAuthType = this.user.initialAuthType || |
765 AUTH_TYPE.OFFLINE_PASSWORD; | 767 AUTH_TYPE.OFFLINE_PASSWORD; |
766 this.setAuthType(initialAuthType, null); | 768 this.setAuthType(initialAuthType, null); |
767 | 769 |
768 this.userClickAuthAllowed_ = false; | 770 this.userClickAuthAllowed_ = false; |
771 | |
772 // Lazy load the assets needed for the polymer submit button. | |
773 if (cr.ui.login.ResourceLoader.alreadyLoadedAssets('userpod-polymer')) | |
jdufault
2016/08/30 19:50:40
Use id 'custom-elements-user-pod'
jdufault
2016/08/30 19:50:40
I'd invert the if condition so it is
if (!loade
sammiequon
2016/08/30 20:52:35
Done.
sammiequon
2016/08/30 20:52:35
Done.
| |
774 return; | |
775 | |
776 cr.ui.login.ResourceLoader.registerAssets({ | |
777 id: 'userpod-polymer', | |
778 html: [{ url: 'chrome://oobe/custom_elements_user_pod.html'}] | |
jdufault
2016/08/30 19:50:40
space before }]
sammiequon
2016/08/30 20:52:35
Done.
| |
779 }); | |
780 cr.ui.login.ResourceLoader.loadAssetsOnIdle('userpod-polymer', | |
781 function() {}); | |
jdufault
2016/08/30 19:50:40
Remove empty function.
sammiequon
2016/08/30 20:52:35
Done.
| |
769 }, | 782 }, |
770 | 783 |
771 /** | 784 /** |
772 * Resets tab order for pod elements to its initial state. | 785 * Resets tab order for pod elements to its initial state. |
773 */ | 786 */ |
774 resetTabOrder: function() { | 787 resetTabOrder: function() { |
775 // Note: the |mainInput| can be the pod itself. | 788 // Note: the |mainInput| can be the pod itself. |
776 this.mainInput.tabIndex = -1; | 789 this.mainInput.tabIndex = -1; |
777 this.tabIndex = UserPodTabOrder.POD_INPUT; | 790 this.tabIndex = UserPodTabOrder.POD_INPUT; |
778 }, | 791 }, |
779 | 792 |
780 /** | 793 /** |
781 * Handles keypress event (i.e. any textual input) on password input. | 794 * Handles keypress event (i.e. any textual input) on password input. |
782 * @param {Event} e Keypress Event object. | 795 * @param {Event} e Keypress Event object. |
783 * @private | 796 * @private |
784 */ | 797 */ |
785 handlePasswordKeyPress_: function(e) { | 798 handlePasswordKeyPress_: function(e) { |
786 // When tabbing from the system tray a tab key press is received. Suppress | 799 // When tabbing from the system tray a tab key press is received. Suppress |
787 // this so as not to type a tab character into the password field. | 800 // this so as not to type a tab character into the password field. |
788 if (e.keyCode == 9) { | 801 if (e.keyCode == 9) { |
789 e.preventDefault(); | 802 e.preventDefault(); |
790 return; | 803 return; |
791 } | 804 } |
792 this.customIconElement.cancelDelayedTooltipShow(); | 805 this.customIconElement.cancelDelayedTooltipShow(); |
793 }, | 806 }, |
794 | 807 |
795 /** | 808 /** |
809 * Handles a click event on submit button. | |
810 * @param {Event} e Click event. | |
811 */ | |
812 handleSubmitButtonClick_: function(e) { | |
813 this.parentNode.setActivatedPod(this, e); | |
814 }, | |
815 | |
816 /** | |
796 * Top edge margin number of pixels. | 817 * Top edge margin number of pixels. |
797 * @type {?number} | 818 * @type {?number} |
798 */ | 819 */ |
799 set top(top) { | 820 set top(top) { |
800 this.style.top = cr.ui.toCssPx(top); | 821 this.style.top = cr.ui.toCssPx(top); |
801 }, | 822 }, |
802 | 823 |
803 /** | 824 /** |
804 * Top edge margin number of pixels. | 825 * Top edge margin number of pixels. |
805 */ | 826 */ |
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
863 | 884 |
864 /** | 885 /** |
865 * Gets password field. | 886 * Gets password field. |
866 * @type {!HTMLInputElement} | 887 * @type {!HTMLInputElement} |
867 */ | 888 */ |
868 get passwordElement() { | 889 get passwordElement() { |
869 return this.querySelector('.password'); | 890 return this.querySelector('.password'); |
870 }, | 891 }, |
871 | 892 |
872 /** | 893 /** |
894 * Gets submit button. | |
895 * @type {!HTMLInputElement} | |
896 */ | |
897 get submitButton() { | |
898 return this.querySelector('.submit-button'); | |
899 }, | |
900 | |
901 /** | |
873 * Gets the password label, which is used to show a message where the | 902 * Gets the password label, which is used to show a message where the |
874 * password field is normally. | 903 * password field is normally. |
875 * @type {!HTMLInputElement} | 904 * @type {!HTMLInputElement} |
876 */ | 905 */ |
877 get passwordLabelElement() { | 906 get passwordLabelElement() { |
878 return this.querySelector('.password-label'); | 907 return this.querySelector('.password-label'); |
879 }, | 908 }, |
880 | 909 |
881 get pinContainer() { | 910 get pinContainer() { |
882 return this.querySelector('.pin-container'); | 911 return this.querySelector('.pin-container'); |
(...skipping 213 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
1096 this.querySelector('.mp-policy-not-allowed-msg').hidden = false; | 1125 this.querySelector('.mp-policy-not-allowed-msg').hidden = false; |
1097 } else if (this.user_.isApp) { | 1126 } else if (this.user_.isApp) { |
1098 this.setUserPodIconType('app'); | 1127 this.setUserPodIconType('app'); |
1099 } | 1128 } |
1100 }, | 1129 }, |
1101 | 1130 |
1102 isPinReady: function() { | 1131 isPinReady: function() { |
1103 return this.pinKeyboard && this.pinKeyboard.offsetHeight > 0; | 1132 return this.pinKeyboard && this.pinKeyboard.offsetHeight > 0; |
1104 }, | 1133 }, |
1105 | 1134 |
1135 setErrorDisplay: function(visible) { | |
1136 this.submitButton.classList.toggle('error-shown', visible); | |
1137 }, | |
1138 | |
1106 toggleTransitions: function(enable) { | 1139 toggleTransitions: function(enable) { |
1107 this.classList.toggle('flying-pin-pod', enable); | 1140 this.classList.toggle('flying-pin-pod', enable); |
1108 }, | 1141 }, |
1109 | 1142 |
1110 updatePinClass_: function(element, enable) { | 1143 updatePinClass_: function(element, enable) { |
1111 element.classList.toggle('pin-enabled', enable); | 1144 element.classList.toggle('pin-enabled', enable); |
1112 element.classList.toggle('pin-disabled', !enable); | 1145 element.classList.toggle('pin-disabled', !enable); |
1113 }, | 1146 }, |
1114 | 1147 |
1115 setPinVisibility: function(visible) { | 1148 setPinVisibility: function(visible) { |
(...skipping 707 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
1823 this.parentNode.setActivatedPod(this); | 1856 this.parentNode.setActivatedPod(this); |
1824 }, | 1857 }, |
1825 | 1858 |
1826 handlePinChanged_: function(e) { | 1859 handlePinChanged_: function(e) { |
1827 this.passwordElement.value = e.detail.pin; | 1860 this.passwordElement.value = e.detail.pin; |
1828 }, | 1861 }, |
1829 | 1862 |
1830 handleInputChanged_: function(e) { | 1863 handleInputChanged_: function(e) { |
1831 if (this.pinKeyboard) | 1864 if (this.pinKeyboard) |
1832 this.pinKeyboard.value = this.passwordElement.value; | 1865 this.pinKeyboard.value = this.passwordElement.value; |
1866 this.submitButton.disabled = this.passwordElement.value.length <= 0; | |
1867 this.setErrorDisplay(false); | |
1833 }, | 1868 }, |
1834 | 1869 |
1835 /** | 1870 /** |
1836 * Handles click event on a user pod. | 1871 * Handles click event on a user pod. |
1837 * @param {Event} e Click event. | 1872 * @param {Event} e Click event. |
1838 */ | 1873 */ |
1839 handleClickOnPod_: function(e) { | 1874 handleClickOnPod_: function(e) { |
1840 if (this.parentNode.disabled) | 1875 if (this.parentNode.disabled) |
1841 return; | 1876 return; |
1842 | 1877 |
(...skipping 754 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
2597 /** | 2632 /** |
2598 * Add an existing user pod to this pod row. | 2633 * Add an existing user pod to this pod row. |
2599 * @param {!Object} user User info dictionary. | 2634 * @param {!Object} user User info dictionary. |
2600 */ | 2635 */ |
2601 addUserPod: function(user) { | 2636 addUserPod: function(user) { |
2602 var userPod = this.createUserPod(user); | 2637 var userPod = this.createUserPod(user); |
2603 this.appendChild(userPod); | 2638 this.appendChild(userPod); |
2604 userPod.initialize(); | 2639 userPod.initialize(); |
2605 }, | 2640 }, |
2606 | 2641 |
2642 /** | |
2643 * Enables or disables transitions on the user pod. | |
2644 * @param {boolean} enable | |
2645 */ | |
2607 togglePinTransitions: function(enable) { | 2646 togglePinTransitions: function(enable) { |
2608 for (var i = 0; i < this.pods.length; ++i) | 2647 for (var i = 0; i < this.pods.length; ++i) |
2609 this.pods[i].toggleTransitions(enable); | 2648 this.pods[i].toggleTransitions(enable); |
2610 }, | 2649 }, |
2611 | 2650 |
2651 /** | |
2652 * Performs visual changes on the user pod if there is an error. | |
2653 * @param {boolean} visible Whether to show or hide the display. | |
2654 */ | |
2655 setFocusedPodErrorDisplay: function(visible) { | |
2656 if (this.focusedPod_) | |
2657 this.focusedPod_.setErrorDisplay(visible); | |
2658 }, | |
2659 | |
2660 /** | |
2661 * Shows or hides the pin keyboard for the current focused pod. | |
2662 * @param {boolean} visible | |
2663 */ | |
2612 setFocusedPodPinVisibility: function(visible) { | 2664 setFocusedPodPinVisibility: function(visible) { |
2613 if (this.focusedPod_ && this.focusedPod_.user.showPin) | 2665 if (this.focusedPod_ && this.focusedPod_.user.showPin) |
2614 this.focusedPod_.setPinVisibility(visible); | 2666 this.focusedPod_.setPinVisibility(visible); |
2615 }, | 2667 }, |
2616 | 2668 |
2617 /** | 2669 /** |
2618 * Runs app with a given id from the list of loaded apps. | 2670 * Runs app with a given id from the list of loaded apps. |
2619 * @param {!string} app_id of an app to run. | 2671 * @param {!string} app_id of an app to run. |
2620 * @param {boolean=} opt_diagnosticMode Whether to run the app in | 2672 * @param {boolean=} opt_diagnosticMode Whether to run the app in |
2621 * diagnostic mode. Default is false. | 2673 * diagnostic mode. Default is false. |
(...skipping 346 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
2968 /** | 3020 /** |
2969 * Called when window was resized. | 3021 * Called when window was resized. |
2970 */ | 3022 */ |
2971 onWindowResize: function() { | 3023 onWindowResize: function() { |
2972 var layout = this.calculateLayout_(); | 3024 var layout = this.calculateLayout_(); |
2973 if (layout.columns != this.columns || layout.rows != this.rows) | 3025 if (layout.columns != this.columns || layout.rows != this.rows) |
2974 this.placePods_(); | 3026 this.placePods_(); |
2975 | 3027 |
2976 // Wrap this in a set timeout so the function is called after the pod is | 3028 // Wrap this in a set timeout so the function is called after the pod is |
2977 // finished transitioning so that we work with the final pod dimensions. | 3029 // finished transitioning so that we work with the final pod dimensions. |
2978 setTimeout(function(podrow) { | 3030 setTimeout(function() { |
2979 podrow.scrollFocusedPodIntoView(); | 3031 this.scrollFocusedPodIntoView(); |
2980 }, 200, this); | 3032 }.bind(this), 200); |
2981 }, | 3033 }, |
2982 | 3034 |
2983 /** | 3035 /** |
2984 * Returns width of podrow having |columns| number of columns. | 3036 * Returns width of podrow having |columns| number of columns. |
2985 * @private | 3037 * @private |
2986 */ | 3038 */ |
2987 columnsToWidth_: function(columns) { | 3039 columnsToWidth_: function(columns) { |
2988 var isDesktopUserManager = Oobe.getInstance().displayType == | 3040 var isDesktopUserManager = Oobe.getInstance().displayType == |
2989 DISPLAY_TYPE.DESKTOP_USER_MANAGER; | 3041 DISPLAY_TYPE.DESKTOP_USER_MANAGER; |
2990 var margin = isDesktopUserManager ? DESKTOP_MARGIN_BY_COLUMNS[columns] : | 3042 var margin = isDesktopUserManager ? DESKTOP_MARGIN_BY_COLUMNS[columns] : |
(...skipping 582 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
3573 if (pod && pod.multiProfilesPolicyApplied) { | 3625 if (pod && pod.multiProfilesPolicyApplied) { |
3574 pod.userTypeBubbleElement.classList.remove('bubble-shown'); | 3626 pod.userTypeBubbleElement.classList.remove('bubble-shown'); |
3575 } | 3627 } |
3576 } | 3628 } |
3577 }; | 3629 }; |
3578 | 3630 |
3579 return { | 3631 return { |
3580 PodRow: PodRow | 3632 PodRow: PodRow |
3581 }; | 3633 }; |
3582 }); | 3634 }); |
OLD | NEW |