| 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 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 57 var DESKTOP_ROW_PADDING = 15; | 57 var DESKTOP_ROW_PADDING = 15; |
| 58 | 58 |
| 59 /** | 59 /** |
| 60 * Minimal padding between user pod and virtual keyboard. | 60 * Minimal padding between user pod and virtual keyboard. |
| 61 * @type {number} | 61 * @type {number} |
| 62 * @const | 62 * @const |
| 63 */ | 63 */ |
| 64 var USER_POD_KEYBOARD_MIN_PADDING = 20; | 64 var USER_POD_KEYBOARD_MIN_PADDING = 20; |
| 65 | 65 |
| 66 /** | 66 /** |
| 67 * Whether to preselect the first pod automatically on login screen. | |
| 68 * @type {boolean} | |
| 69 * @const | |
| 70 */ | |
| 71 var PRESELECT_FIRST_POD = true; | |
| 72 | |
| 73 /** | |
| 74 * Maximum time for which the pod row remains hidden until all user images | 67 * Maximum time for which the pod row remains hidden until all user images |
| 75 * have been loaded. | 68 * have been loaded. |
| 76 * @type {number} | 69 * @type {number} |
| 77 * @const | 70 * @const |
| 78 */ | 71 */ |
| 79 var POD_ROW_IMAGES_LOAD_TIMEOUT_MS = 3000; | 72 var POD_ROW_IMAGES_LOAD_TIMEOUT_MS = 3000; |
| 80 | 73 |
| 81 /** | 74 /** |
| 82 * Public session help topic identifier. | 75 * Public session help topic identifier. |
| 83 * @type {number} | 76 * @type {number} |
| (...skipping 1611 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1695 if (this.shouldShowApps_) { | 1688 if (this.shouldShowApps_) { |
| 1696 for (var i = 0; i < this.apps_.length; ++i) | 1689 for (var i = 0; i < this.apps_.length; ++i) |
| 1697 this.addUserPod(this.apps_[i]); | 1690 this.addUserPod(this.apps_[i]); |
| 1698 } | 1691 } |
| 1699 | 1692 |
| 1700 // Make sure we eventually show the pod row, even if some image is stuck. | 1693 // Make sure we eventually show the pod row, even if some image is stuck. |
| 1701 setTimeout(function() { | 1694 setTimeout(function() { |
| 1702 $('pod-row').classList.remove('images-loading'); | 1695 $('pod-row').classList.remove('images-loading'); |
| 1703 }, POD_ROW_IMAGES_LOAD_TIMEOUT_MS); | 1696 }, POD_ROW_IMAGES_LOAD_TIMEOUT_MS); |
| 1704 | 1697 |
| 1705 var isCrosAccountPicker = $('login-header-bar').signinUIState == | 1698 var isAccountPicker = $('login-header-bar').signinUIState == |
| 1706 SIGNIN_UI_STATE.ACCOUNT_PICKER; | 1699 SIGNIN_UI_STATE.ACCOUNT_PICKER; |
| 1707 var isDesktopUserManager = Oobe.getInstance().displayType == | |
| 1708 DISPLAY_TYPE.DESKTOP_USER_MANAGER; | |
| 1709 | 1700 |
| 1710 // Chrome OS: immediately recalculate pods layout only when current UI | 1701 // Immediately recalculate pods layout only when current UI is account |
| 1711 // is account picker. Otherwise postpone it. | 1702 // picker. Otherwise postpone it. |
| 1712 // Desktop: recalculate pods layout right away. | 1703 if (isAccountPicker) { |
| 1713 if (isDesktopUserManager || isCrosAccountPicker) { | |
| 1714 this.placePods_(); | 1704 this.placePods_(); |
| 1705 this.maybePreselectPod(); |
| 1715 | 1706 |
| 1716 // Without timeout changes in pods positions will be animated even | 1707 // Without timeout changes in pods positions will be animated even |
| 1717 // though it happened when 'flying-pods' class was disabled. | 1708 // though it happened when 'flying-pods' class was disabled. |
| 1718 setTimeout(function() { | 1709 setTimeout(function() { |
| 1719 Oobe.getInstance().toggleClass('flying-pods', true); | 1710 Oobe.getInstance().toggleClass('flying-pods', true); |
| 1720 }, 0); | 1711 }, 0); |
| 1721 | |
| 1722 // On desktop, don't pre-select a pod if it's the only one. | |
| 1723 if (isDesktopUserManager && this.pods.length == 1) | |
| 1724 this.focusPod(); | |
| 1725 else | |
| 1726 this.focusPod(this.preselectedPod); | |
| 1727 } else { | 1712 } else { |
| 1728 this.podPlacementPostponed_ = true; | 1713 this.podPlacementPostponed_ = true; |
| 1729 | 1714 |
| 1730 // Update [Cancel] button state. | 1715 // Update [Cancel] button state. |
| 1731 if ($('login-header-bar').signinUIState == | 1716 if ($('login-header-bar').signinUIState == |
| 1732 SIGNIN_UI_STATE.GAIA_SIGNIN && | 1717 SIGNIN_UI_STATE.GAIA_SIGNIN && |
| 1733 emptyPodRow && | 1718 emptyPodRow && |
| 1734 this.pods.length > 0) { | 1719 this.pods.length > 0) { |
| 1735 login.GaiaSigninScreen.updateCancelButtonState(); | 1720 login.GaiaSigninScreen.updateCancelButtonState(); |
| 1736 } | 1721 } |
| (...skipping 194 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1931 var maxPodsNumber = columns * rows; | 1916 var maxPodsNumber = columns * rows; |
| 1932 var isDesktopUserManager = Oobe.getInstance().displayType == | 1917 var isDesktopUserManager = Oobe.getInstance().displayType == |
| 1933 DISPLAY_TYPE.DESKTOP_USER_MANAGER; | 1918 DISPLAY_TYPE.DESKTOP_USER_MANAGER; |
| 1934 var margin = isDesktopUserManager ? DESKTOP_MARGIN_BY_COLUMNS[columns] : | 1919 var margin = isDesktopUserManager ? DESKTOP_MARGIN_BY_COLUMNS[columns] : |
| 1935 MARGIN_BY_COLUMNS[columns]; | 1920 MARGIN_BY_COLUMNS[columns]; |
| 1936 this.parentNode.setPreferredSize( | 1921 this.parentNode.setPreferredSize( |
| 1937 this.columnsToWidth_(columns), this.rowsToHeight_(rows)); | 1922 this.columnsToWidth_(columns), this.rowsToHeight_(rows)); |
| 1938 var height = this.userPodHeight_; | 1923 var height = this.userPodHeight_; |
| 1939 var width = this.userPodWidth_; | 1924 var width = this.userPodWidth_; |
| 1940 this.pods.forEach(function(pod, index) { | 1925 this.pods.forEach(function(pod, index) { |
| 1926 if (index >= maxPodsNumber) { |
| 1927 pod.hidden = true; |
| 1928 return; |
| 1929 } |
| 1930 pod.hidden = false; |
| 1941 if (pod.offsetHeight != height) { | 1931 if (pod.offsetHeight != height) { |
| 1942 console.error('Pod offsetHeight (' + pod.offsetHeight + | 1932 console.error('Pod offsetHeight (' + pod.offsetHeight + |
| 1943 ') and POD_HEIGHT (' + height + ') are not equal.'); | 1933 ') and POD_HEIGHT (' + height + ') are not equal.'); |
| 1944 } | 1934 } |
| 1945 if (pod.offsetWidth != width) { | 1935 if (pod.offsetWidth != width) { |
| 1946 console.error('Pod offsetWidth (' + pod.offsetWidth + | 1936 console.error('Pod offsetWidth (' + pod.offsetWidth + |
| 1947 ') and POD_WIDTH (' + width + ') are not equal.'); | 1937 ') and POD_WIDTH (' + width + ') are not equal.'); |
| 1948 } | 1938 } |
| 1949 if (index >= maxPodsNumber) { | |
| 1950 pod.hidden = true; | |
| 1951 return; | |
| 1952 } | |
| 1953 pod.hidden = false; | |
| 1954 var column = index % columns; | 1939 var column = index % columns; |
| 1955 var row = Math.floor(index / columns); | 1940 var row = Math.floor(index / columns); |
| 1956 var rowPadding = isDesktopUserManager ? DESKTOP_ROW_PADDING : | 1941 var rowPadding = isDesktopUserManager ? DESKTOP_ROW_PADDING : |
| 1957 POD_ROW_PADDING; | 1942 POD_ROW_PADDING; |
| 1958 pod.left = rowPadding + column * (width + margin); | 1943 pod.left = rowPadding + column * (width + margin); |
| 1959 | 1944 |
| 1960 // On desktop, we want the rows to always be equally spaced. | 1945 // On desktop, we want the rows to always be equally spaced. |
| 1961 pod.top = isDesktopUserManager ? row * (height + rowPadding) : | 1946 pod.top = isDesktopUserManager ? row * (height + rowPadding) : |
| 1962 row * height + rowPadding; | 1947 row * height + rowPadding; |
| 1963 }); | 1948 }); |
| (...skipping 148 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 2112 return pod; | 2097 return pod; |
| 2113 } | 2098 } |
| 2114 return null; | 2099 return null; |
| 2115 }, | 2100 }, |
| 2116 | 2101 |
| 2117 /** | 2102 /** |
| 2118 * The pod that is preselected on user pod row show. | 2103 * The pod that is preselected on user pod row show. |
| 2119 * @type {?UserPod} | 2104 * @type {?UserPod} |
| 2120 */ | 2105 */ |
| 2121 get preselectedPod() { | 2106 get preselectedPod() { |
| 2107 // On desktop, don't pre-select a pod if it's the only one. |
| 2108 var isDesktopUserManager = Oobe.getInstance().displayType == |
| 2109 DISPLAY_TYPE.DESKTOP_USER_MANAGER; |
| 2110 if (isDesktopUserManager && this.pods.length == 1) |
| 2111 return null; |
| 2112 |
| 2122 var lockedPod = this.lockedPod; | 2113 var lockedPod = this.lockedPod; |
| 2123 if (lockedPod || !PRESELECT_FIRST_POD) | 2114 if (lockedPod) |
| 2124 return lockedPod; | 2115 return lockedPod; |
| 2125 for (var i = 0, pod; pod = this.pods[i]; ++i) { | 2116 for (var i = 0, pod; pod = this.pods[i]; ++i) { |
| 2126 if (!pod.multiProfilesPolicyApplied) { | 2117 if (!pod.multiProfilesPolicyApplied) { |
| 2127 return pod; | 2118 return pod; |
| 2128 } | 2119 } |
| 2129 } | 2120 } |
| 2130 return this.pods[0]; | 2121 return this.pods[0]; |
| 2131 }, | 2122 }, |
| 2132 | 2123 |
| 2133 /** | 2124 /** |
| (...skipping 236 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 2370 Oobe.getInstance().toggleClass('flying-pods', false); | 2361 Oobe.getInstance().toggleClass('flying-pods', false); |
| 2371 for (var event in this.listeners_) { | 2362 for (var event in this.listeners_) { |
| 2372 this.ownerDocument.addEventListener( | 2363 this.ownerDocument.addEventListener( |
| 2373 event, this.listeners_[event][0], this.listeners_[event][1]); | 2364 event, this.listeners_[event][0], this.listeners_[event][1]); |
| 2374 } | 2365 } |
| 2375 $('login-header-bar').buttonsTabIndex = UserPodTabOrder.HEADER_BAR; | 2366 $('login-header-bar').buttonsTabIndex = UserPodTabOrder.HEADER_BAR; |
| 2376 | 2367 |
| 2377 if (this.podPlacementPostponed_) { | 2368 if (this.podPlacementPostponed_) { |
| 2378 this.podPlacementPostponed_ = false; | 2369 this.podPlacementPostponed_ = false; |
| 2379 this.placePods_(); | 2370 this.placePods_(); |
| 2380 pod = this.preselectedPod; | 2371 this.maybePreselectPod(); |
| 2381 this.focusPod(pod); | |
| 2382 // Hide user-type-bubble in case all user pods are disabled and we focus | |
| 2383 // first pod. | |
| 2384 if (pod && pod.multiProfilesPolicyApplied) { | |
| 2385 pod.userTypeBubbleElement.classList.remove('bubble-shown'); | |
| 2386 } | |
| 2387 } | 2372 } |
| 2388 }, | 2373 }, |
| 2389 | 2374 |
| 2390 /** | 2375 /** |
| 2391 * Called when the element is hidden. | 2376 * Called when the element is hidden. |
| 2392 */ | 2377 */ |
| 2393 handleHide: function() { | 2378 handleHide: function() { |
| 2394 for (var event in this.listeners_) { | 2379 for (var event in this.listeners_) { |
| 2395 this.ownerDocument.removeEventListener( | 2380 this.ownerDocument.removeEventListener( |
| 2396 event, this.listeners_[event][0], this.listeners_[event][1]); | 2381 event, this.listeners_[event][0], this.listeners_[event][1]); |
| 2397 } | 2382 } |
| 2398 $('login-header-bar').buttonsTabIndex = 0; | 2383 $('login-header-bar').buttonsTabIndex = 0; |
| 2399 }, | 2384 }, |
| 2400 | 2385 |
| 2401 /** | 2386 /** |
| 2402 * Called when a pod's user image finishes loading. | 2387 * Called when a pod's user image finishes loading. |
| 2403 */ | 2388 */ |
| 2404 handlePodImageLoad: function(pod) { | 2389 handlePodImageLoad: function(pod) { |
| 2405 var index = this.podsWithPendingImages_.indexOf(pod); | 2390 var index = this.podsWithPendingImages_.indexOf(pod); |
| 2406 if (index == -1) { | 2391 if (index == -1) { |
| 2407 return; | 2392 return; |
| 2408 } | 2393 } |
| 2409 | 2394 |
| 2410 this.podsWithPendingImages_.splice(index, 1); | 2395 this.podsWithPendingImages_.splice(index, 1); |
| 2411 if (this.podsWithPendingImages_.length == 0) { | 2396 if (this.podsWithPendingImages_.length == 0) { |
| 2412 this.classList.remove('images-loading'); | 2397 this.classList.remove('images-loading'); |
| 2413 } | 2398 } |
| 2414 } | 2399 }, |
| 2400 |
| 2401 /** |
| 2402 * Preselects pod, if needed. |
| 2403 */ |
| 2404 maybePreselectPod: function() { |
| 2405 var pod = this.preselectedPod; |
| 2406 this.focusPod(pod); |
| 2407 |
| 2408 // Hide user-type-bubble in case all user pods are disabled and we focus |
| 2409 // first pod. |
| 2410 if (pod && pod.multiProfilesPolicyApplied) { |
| 2411 pod.userTypeBubbleElement.classList.remove('bubble-shown'); |
| 2412 } |
| 2413 } |
| 2415 }; | 2414 }; |
| 2416 | 2415 |
| 2417 return { | 2416 return { |
| 2418 PodRow: PodRow | 2417 PodRow: PodRow |
| 2419 }; | 2418 }; |
| 2420 }); | 2419 }); |
| OLD | NEW |