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 971 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
982 return this.classList.contains('expanded'); | 982 return this.classList.contains('expanded'); |
983 }, | 983 }, |
984 | 984 |
985 set expanded(expanded) { | 985 set expanded(expanded) { |
986 if (this.expanded == expanded) | 986 if (this.expanded == expanded) |
987 return; | 987 return; |
988 | 988 |
989 this.resetTabOrder(); | 989 this.resetTabOrder(); |
990 this.classList.toggle('expanded', expanded); | 990 this.classList.toggle('expanded', expanded); |
991 if (expanded) { | 991 if (expanded) { |
992 // Show the advanced expanded pod directly if there are at least two | |
993 // recommended locales. This will be the case in multilingual | |
994 // environments where users are likely to want to choose among locales. | |
995 if (this.querySelector('.language-select').multipleRecommendedLocales) | |
996 this.classList.add('advanced'); | |
997 this.usualLeft = this.left; | 992 this.usualLeft = this.left; |
998 this.makeSpaceForExpandedPod_(); | 993 this.makeSpaceForExpandedPod_(); |
999 } else if (typeof(this.usualLeft) != 'undefined') { | 994 } else if (typeof(this.usualLeft) != 'undefined') { |
1000 this.left = this.usualLeft; | 995 this.left = this.usualLeft; |
1001 } | 996 } |
1002 | 997 |
1003 var self = this; | 998 var self = this; |
1004 this.classList.add('animating'); | 999 this.classList.add('animating'); |
1005 this.addEventListener('webkitTransitionEnd', function f(e) { | 1000 this.addEventListener('webkitTransitionEnd', function f(e) { |
1006 self.removeEventListener('webkitTransitionEnd', f); | 1001 self.removeEventListener('webkitTransitionEnd', f); |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1049 learnMore.addEventListener('mousedown', stopEventPropagation); | 1044 learnMore.addEventListener('mousedown', stopEventPropagation); |
1050 learnMore.addEventListener('click', this.handleLearnMoreEvent); | 1045 learnMore.addEventListener('click', this.handleLearnMoreEvent); |
1051 learnMore.addEventListener('keydown', this.handleLearnMoreEvent); | 1046 learnMore.addEventListener('keydown', this.handleLearnMoreEvent); |
1052 | 1047 |
1053 learnMore = this.querySelector('.expanded-pane-learn-more'); | 1048 learnMore = this.querySelector('.expanded-pane-learn-more'); |
1054 learnMore.addEventListener('click', this.handleLearnMoreEvent); | 1049 learnMore.addEventListener('click', this.handleLearnMoreEvent); |
1055 learnMore.addEventListener('keydown', this.handleLearnMoreEvent); | 1050 learnMore.addEventListener('keydown', this.handleLearnMoreEvent); |
1056 | 1051 |
1057 var languageSelect = this.querySelector('.language-select'); | 1052 var languageSelect = this.querySelector('.language-select'); |
1058 languageSelect.tabIndex = UserPodTabOrder.POD_INPUT; | 1053 languageSelect.tabIndex = UserPodTabOrder.POD_INPUT; |
1059 languageSelect.manuallyChanged = false; | |
1060 languageSelect.addEventListener( | 1054 languageSelect.addEventListener( |
1061 'change', | 1055 'change', |
1062 function() { | 1056 this.getPublicSessionKeyboardLayouts_.bind(this)); |
1063 languageSelect.manuallyChanged = true; | 1057 this.querySelector('.keyboard-select').tabIndex = |
1064 this.getPublicSessionKeyboardLayouts_(); | 1058 UserPodTabOrder.POD_INPUT; |
1065 }.bind(this)); | |
1066 | |
1067 var keyboardSelect = this.querySelector('.keyboard-select'); | |
1068 keyboardSelect.tabIndex = UserPodTabOrder.POD_INPUT; | |
1069 keyboardSelect.loadedLocale = null; | |
1070 | 1059 |
1071 var languageAndInput = this.querySelector('.language-and-input'); | 1060 var languageAndInput = this.querySelector('.language-and-input'); |
1072 languageAndInput.tabIndex = UserPodTabOrder.POD_INPUT; | 1061 languageAndInput.tabIndex = UserPodTabOrder.POD_INPUT; |
1073 languageAndInput.addEventListener('click', | 1062 languageAndInput.addEventListener('click', |
1074 this.transitionToAdvanced_.bind(this)); | 1063 this.transitionToAdvanced_.bind(this)); |
1075 | 1064 |
1076 this.enterButtonElement.addEventListener('click', (function(e) { | 1065 this.enterButtonElement.addEventListener('click', (function(e) { |
1077 this.enterButtonElement.disabled = true; | 1066 this.enterButtonElement.disabled = true; |
1078 var locale = this.querySelector('.language-select').value; | 1067 var locale = ''; |
1079 var keyboardSelect = this.querySelector('.keyboard-select'); | 1068 var keyboardLayout = ''; |
1080 // The contents of |keyboardSelect| is updated asynchronously. If its | 1069 if (this.advanced) { |
1081 // locale does not match |locale|, it has not updated yet and the | 1070 // If the advanced pod is being shown, honor the selected UI language |
1082 // currently selected keyboard layout may not be applicable to |locale|. | 1071 // and keyboard layout. |
1083 // Do not return any keyboard layout in this case and let the backend | 1072 locale = this.querySelector('.language-select').value; |
1084 // choose a suitable layout. | 1073 keyboardLayout = this.querySelector('.keyboard-select').value; |
1085 var keyboardLayout = | 1074 } |
1086 keyboardSelect.loadedLocale == locale ? keyboardSelect.value : ''; | |
1087 chrome.send('launchPublicSession', | 1075 chrome.send('launchPublicSession', |
1088 [this.user.username, locale, keyboardLayout]); | 1076 [this.user.username, locale, keyboardLayout]); |
1089 }).bind(this)); | 1077 }).bind(this)); |
1090 }, | 1078 }, |
1091 | 1079 |
1092 /** @override **/ | 1080 /** @override **/ |
1093 initialize: function() { | 1081 initialize: function() { |
1094 UserPod.prototype.initialize.call(this); | 1082 UserPod.prototype.initialize.call(this); |
1095 | 1083 |
1096 id = this.user.username + '-keyboard'; | |
1097 this.querySelector('.keyboard-select-label').htmlFor = id; | |
1098 this.querySelector('.keyboard-select').setAttribute('id', id); | |
1099 | |
1100 var id = this.user.username + '-language'; | 1084 var id = this.user.username + '-language'; |
1101 this.querySelector('.language-select-label').htmlFor = id; | 1085 this.querySelector('.language-select-label').htmlFor = id; |
1102 var languageSelect = this.querySelector('.language-select'); | 1086 var languageSelect = this.querySelector('.language-select'); |
1103 languageSelect.setAttribute('id', id); | 1087 languageSelect.setAttribute('id', id); |
1104 this.populateLanguageSelect(this.user.initialLocales, | 1088 var list = this.user.initialLocales; |
1105 this.user.initialLocale, | 1089 languageSelect.innerHTML = ''; |
1106 this.user.initialMultipleRecommendedLocales); | 1090 var group = languageSelect; |
| 1091 for (var i = 0; i < list.length; ++i) { |
| 1092 var item = list[i]; |
| 1093 if (item.optionGroupName) { |
| 1094 group = document.createElement('optgroup'); |
| 1095 group.label = item.optionGroupName; |
| 1096 languageSelect.appendChild(group); |
| 1097 } else { |
| 1098 group.appendChild( |
| 1099 new Option(item.title, item.value, item.selected, item.selected)); |
| 1100 } |
| 1101 } |
| 1102 |
| 1103 id = this.user.username + '-keyboard'; |
| 1104 this.querySelector('.keyboard-select-label').htmlFor = id; |
| 1105 this.querySelector('.keyboard-select').setAttribute('id', id); |
| 1106 this.populateKeyboardSelect_([this.user.initialKeyboardLayout]); |
| 1107 this.getPublicSessionKeyboardLayouts_(); |
1107 }, | 1108 }, |
1108 | 1109 |
1109 /** @override **/ | 1110 /** @override **/ |
1110 update: function() { | 1111 update: function() { |
1111 UserPod.prototype.update.call(this); | 1112 UserPod.prototype.update.call(this); |
1112 this.querySelector('.expanded-pane-name').textContent = | 1113 this.querySelector('.expanded-pane-name').textContent = |
1113 this.user_.displayName; | 1114 this.user_.displayName; |
1114 this.querySelector('.info').textContent = | 1115 this.querySelector('.info').textContent = |
1115 loadTimeData.getStringF('publicAccountInfoFormat', | 1116 loadTimeData.getStringF('publicAccountInfoFormat', |
1116 this.user_.enterpriseDomain); | 1117 this.user_.enterpriseDomain); |
(...skipping 104 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1221 // Guard timer set to animation duration + 20ms. | 1222 // Guard timer set to animation duration + 20ms. |
1222 ensureTransitionEndEvent(languageAndInputSection, 380); | 1223 ensureTransitionEndEvent(languageAndInputSection, 380); |
1223 }, 0); | 1224 }, 0); |
1224 }, | 1225 }, |
1225 | 1226 |
1226 /** | 1227 /** |
1227 * Retrieves the list of keyboard layouts available for the currently | 1228 * Retrieves the list of keyboard layouts available for the currently |
1228 * selected locale. | 1229 * selected locale. |
1229 */ | 1230 */ |
1230 getPublicSessionKeyboardLayouts_: function() { | 1231 getPublicSessionKeyboardLayouts_: function() { |
1231 var selectedLocale = this.querySelector('.language-select').value; | 1232 var languageSelect = this.querySelector('.language-select'); |
1232 if (selectedLocale == | 1233 chrome.send('getPublicSessionKeyboardLayouts', [ |
1233 this.querySelector('.keyboard-select').loadedLocale) { | 1234 this.user.username, |
1234 // If the list of keyboard layouts was loaded for the currently selected | 1235 languageSelect.options[languageSelect.selectedIndex].value]); |
1235 // locale, it is already up to date. | |
1236 return; | |
1237 } | |
1238 chrome.send('getPublicSessionKeyboardLayouts', | |
1239 [this.user.username, selectedLocale]); | |
1240 }, | 1236 }, |
1241 | 1237 |
1242 /** | 1238 /** |
1243 * Populates the keyboard layout "select" element with a list of layouts. | 1239 * Populates the keyboard layout "select" element with a list of layouts. |
1244 * @param {string} locale The locale to which this list of keyboard layouts | |
1245 * applies | |
1246 * @param {!Object} list List of available keyboard layouts | 1240 * @param {!Object} list List of available keyboard layouts |
1247 */ | 1241 */ |
1248 populateKeyboardSelect: function(locale, list) { | 1242 populateKeyboardSelect_: function(list) { |
1249 if (locale != this.querySelector('.language-select').value) { | |
1250 // The selected locale has changed and the list of keyboard layouts is | |
1251 // not applicable. This method will be called again when a list of | |
1252 // keyboard layouts applicable to the selected locale is retrieved. | |
1253 return; | |
1254 } | |
1255 | |
1256 var keyboardSelect = this.querySelector('.keyboard-select'); | 1243 var keyboardSelect = this.querySelector('.keyboard-select'); |
1257 keyboardSelect.loadedLocale = locale; | |
1258 keyboardSelect.innerHTML = ''; | 1244 keyboardSelect.innerHTML = ''; |
1259 for (var i = 0; i < list.length; ++i) { | 1245 for (var i = 0; i < list.length; ++i) { |
1260 var item = list[i]; | 1246 var item = list[i]; |
1261 keyboardSelect.appendChild( | 1247 keyboardSelect.appendChild( |
1262 new Option(item.title, item.value, item.selected, item.selected)); | 1248 new Option(item.title, item.value, item.selected, item.selected)); |
1263 } | 1249 } |
1264 }, | |
1265 | |
1266 /** | |
1267 * Populates the language "select" element with a list of locales. | |
1268 * @param {!Object} locales The list of available locales | |
1269 * @param {string} defaultLocale The locale to select by default | |
1270 * @param {boolean} multipleRecommendedLocales Whether |locales| contains | |
1271 * two or more recommended locales | |
1272 */ | |
1273 populateLanguageSelect: function(locales, | |
1274 defaultLocale, | |
1275 multipleRecommendedLocales) { | |
1276 var languageSelect = this.querySelector('.language-select'); | |
1277 // If the user manually selected a locale, do not change the selection. | |
1278 // Otherwise, select the new |defaultLocale|. | |
1279 var selected = | |
1280 languageSelect.manuallyChanged ? languageSelect.value : defaultLocale; | |
1281 languageSelect.innerHTML = ''; | |
1282 var group = languageSelect; | |
1283 for (var i = 0; i < locales.length; ++i) { | |
1284 var item = locales[i]; | |
1285 if (item.optionGroupName) { | |
1286 group = document.createElement('optgroup'); | |
1287 group.label = item.optionGroupName; | |
1288 languageSelect.appendChild(group); | |
1289 } else { | |
1290 group.appendChild(new Option(item.title, | |
1291 item.value, | |
1292 item.value == selected, | |
1293 item.value == selected)); | |
1294 } | |
1295 } | |
1296 languageSelect.multipleRecommendedLocales = multipleRecommendedLocales; | |
1297 | |
1298 // Retrieve a list of keyboard layouts applicable to the locale that is | |
1299 // now selected. | |
1300 this.getPublicSessionKeyboardLayouts_(); | |
1301 } | 1250 } |
1302 }; | 1251 }; |
1303 | 1252 |
1304 /** | 1253 /** |
1305 * Creates a user pod to be used only in desktop chrome. | 1254 * Creates a user pod to be used only in desktop chrome. |
1306 * @constructor | 1255 * @constructor |
1307 * @extends {UserPod} | 1256 * @extends {UserPod} |
1308 */ | 1257 */ |
1309 var DesktopUserPod = cr.ui.define(function() { | 1258 var DesktopUserPod = cr.ui.define(function() { |
1310 // Don't just instantiate a UserPod(), as this will call decorate() on the | 1259 // Don't just instantiate a UserPod(), as this will call decorate() on the |
(...skipping 579 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1890 * @param {string} userID The user ID of the public session | 1839 * @param {string} userID The user ID of the public session |
1891 * @param {string} displayName The new display name | 1840 * @param {string} displayName The new display name |
1892 */ | 1841 */ |
1893 setPublicSessionDisplayName: function(userID, displayName) { | 1842 setPublicSessionDisplayName: function(userID, displayName) { |
1894 var pod = this.getPodWithUsername_(userID); | 1843 var pod = this.getPodWithUsername_(userID); |
1895 if (pod != null) | 1844 if (pod != null) |
1896 pod.setDisplayName(displayName); | 1845 pod.setDisplayName(displayName); |
1897 }, | 1846 }, |
1898 | 1847 |
1899 /** | 1848 /** |
1900 * Updates the list of locales available for a public session. | |
1901 * @param {string} userID The user ID of the public session | |
1902 * @param {!Object} locales The list of available locales | |
1903 * @param {string} defaultLocale The locale to select by default | |
1904 * @param {boolean} multipleRecommendedLocales Whether |locales| contains | |
1905 * two or more recommended locales | |
1906 */ | |
1907 setPublicSessionLocales: function(userID, | |
1908 locales, | |
1909 defaultLocale, | |
1910 multipleRecommendedLocales) { | |
1911 var pod = this.getPodWithUsername_(userID); | |
1912 if (pod != null) { | |
1913 pod.populateLanguageSelect(locales, | |
1914 defaultLocale, | |
1915 multipleRecommendedLocales); | |
1916 } | |
1917 }, | |
1918 | |
1919 /** | |
1920 * Updates the list of available keyboard layouts for a public session pod. | 1849 * Updates the list of available keyboard layouts for a public session pod. |
1921 * @param {string} userID The user ID of the public session | 1850 * @param {string} userID The user ID of the public session |
1922 * @param {string} locale The locale to which this list of keyboard layouts | |
1923 * applies | |
1924 * @param {!Object} list List of available keyboard layouts | 1851 * @param {!Object} list List of available keyboard layouts |
1925 */ | 1852 */ |
1926 setPublicSessionKeyboardLayouts: function(userID, locale, list) { | 1853 setPublicSessionKeyboardLayouts: function(userID, list) { |
1927 var pod = this.getPodWithUsername_(userID); | 1854 var pod = this.getPodWithUsername_(userID); |
1928 if (pod != null) | 1855 if (pod != null) |
1929 pod.populateKeyboardSelect(locale, list); | 1856 pod.populateKeyboardSelect_(list); |
1930 }, | 1857 }, |
1931 | 1858 |
1932 /** | 1859 /** |
1933 * Called when window was resized. | 1860 * Called when window was resized. |
1934 */ | 1861 */ |
1935 onWindowResize: function() { | 1862 onWindowResize: function() { |
1936 var layout = this.calculateLayout_(); | 1863 var layout = this.calculateLayout_(); |
1937 if (layout.columns != this.columns || layout.rows != this.rows) | 1864 if (layout.columns != this.columns || layout.rows != this.rows) |
1938 this.placePods_(); | 1865 this.placePods_(); |
1939 | 1866 |
(...skipping 563 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2503 if (pod && pod.multiProfilesPolicyApplied) { | 2430 if (pod && pod.multiProfilesPolicyApplied) { |
2504 pod.userTypeBubbleElement.classList.remove('bubble-shown'); | 2431 pod.userTypeBubbleElement.classList.remove('bubble-shown'); |
2505 } | 2432 } |
2506 } | 2433 } |
2507 }; | 2434 }; |
2508 | 2435 |
2509 return { | 2436 return { |
2510 PodRow: PodRow | 2437 PodRow: PodRow |
2511 }; | 2438 }; |
2512 }); | 2439 }); |
OLD | NEW |