OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 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 Oobe network screen implementation. | 6 * @fileoverview Oobe network screen implementation. |
7 */ | 7 */ |
8 | 8 |
9 login.createScreen('NetworkScreen', 'connect', function() { | 9 login.createScreen('NetworkScreen', 'connect', function() { |
10 var USER_ACTION_CONTINUE_BUTTON_CLICKED = 'continue'; | 10 var USER_ACTION_CONTINUE_BUTTON_CLICKED = 'continue'; |
11 var USER_ACTION_CONNECT_DEBUGGING_FEATURES_CLICKED = | 11 var USER_ACTION_CONNECT_DEBUGGING_FEATURES_CLICKED = |
12 'connect-debugging-features'; | 12 'connect-debugging-features'; |
13 var CONTEXT_KEY_LOCALE = 'locale'; | 13 var CONTEXT_KEY_LOCALE = 'locale'; |
14 var CONTEXT_KEY_INPUT_METHOD = 'input-method'; | 14 var CONTEXT_KEY_INPUT_METHOD = 'input-method'; |
15 var CONTEXT_KEY_TIMEZONE = 'timezone'; | 15 var CONTEXT_KEY_TIMEZONE = 'timezone'; |
16 var CONTEXT_KEY_CONTINUE_BUTTON_ENABLED = 'continue-button-enabled'; | 16 var CONTEXT_KEY_CONTINUE_BUTTON_ENABLED = 'continue-button-enabled'; |
17 | 17 |
18 return { | 18 return { |
19 EXTERNAL_API: [ | 19 EXTERNAL_API: ['showError'], |
20 'showError' | |
21 ], | |
22 | 20 |
23 /** | 21 /** |
24 * Dropdown element for networks selection. | 22 * Dropdown element for networks selection. |
25 */ | 23 */ |
26 dropdown_: null, | 24 dropdown_: null, |
27 | 25 |
28 /** @override */ | 26 /** @override */ |
29 decorate: function() { | 27 decorate: function() { |
30 Oobe.setupSelect($('language-select'), | 28 Oobe.setupSelect( |
31 loadTimeData.getValue('languageList'), | 29 $('language-select'), loadTimeData.getValue('languageList'), |
32 this.onLanguageSelected_.bind(this)); | 30 this.onLanguageSelected_.bind(this)); |
33 Oobe.setupSelect($('keyboard-select'), | 31 Oobe.setupSelect( |
34 loadTimeData.getValue('inputMethodsList'), | 32 $('keyboard-select'), loadTimeData.getValue('inputMethodsList'), |
35 this.onKeyboardSelected_.bind(this)); | 33 this.onKeyboardSelected_.bind(this)); |
36 Oobe.setupSelect($('timezone-select'), | 34 Oobe.setupSelect( |
37 loadTimeData.getValue('timezoneList'), | 35 $('timezone-select'), loadTimeData.getValue('timezoneList'), |
38 this.onTimezoneSelected_.bind(this)); | 36 this.onTimezoneSelected_.bind(this)); |
39 | 37 |
40 // ---------- Welcome screen | 38 // ---------- Welcome screen |
41 var welcomeScreen = $('oobe-welcome-md'); | 39 var welcomeScreen = $('oobe-welcome-md'); |
42 welcomeScreen.screen = this; | 40 welcomeScreen.screen = this; |
43 | 41 |
44 var languageList = loadTimeData.getValue('languageList'); | 42 var languageList = loadTimeData.getValue('languageList'); |
45 welcomeScreen.languages = languageList; | 43 welcomeScreen.languages = languageList; |
46 | 44 |
47 var inputMethodsList = loadTimeData.getValue('inputMethodsList'); | 45 var inputMethodsList = loadTimeData.getValue('inputMethodsList'); |
48 welcomeScreen.keyboards = inputMethodsList; | 46 welcomeScreen.keyboards = inputMethodsList; |
49 | 47 |
50 var timezoneList = loadTimeData.getValue('timezoneList'); | 48 var timezoneList = loadTimeData.getValue('timezoneList'); |
51 welcomeScreen.timezones = timezoneList; | 49 welcomeScreen.timezones = timezoneList; |
52 | 50 |
53 welcomeScreen.highlightStrength = | 51 welcomeScreen.highlightStrength = |
54 loadTimeData.getValue('highlightStrength'); | 52 loadTimeData.getValue('highlightStrength'); |
55 // ------------------------- | 53 // ------------------------- |
56 | 54 |
57 this.dropdown_ = $('networks-list'); | 55 this.dropdown_ = $('networks-list'); |
58 cr.ui.DropDown.decorate(this.dropdown_); | 56 cr.ui.DropDown.decorate(this.dropdown_); |
59 | 57 |
60 this.declareUserAction( | 58 this.declareUserAction($('connect-debugging-features-link'), { |
61 $('connect-debugging-features-link'), | 59 action_id: USER_ACTION_CONNECT_DEBUGGING_FEATURES_CLICKED, |
62 { action_id: USER_ACTION_CONNECT_DEBUGGING_FEATURES_CLICKED, | 60 event: 'click' |
63 event: 'click' | 61 }); |
64 }); | 62 this.declareUserAction($('connect-debugging-features-link'), { |
65 this.declareUserAction( | 63 action_id: USER_ACTION_CONNECT_DEBUGGING_FEATURES_CLICKED, |
66 $('connect-debugging-features-link'), | 64 condition: function(event) { |
67 { action_id: USER_ACTION_CONNECT_DEBUGGING_FEATURES_CLICKED, | 65 return event.keyCode == 32; |
68 condition: function(event) { return event.keyCode == 32; }, | 66 }, |
69 event: 'keyup' | 67 event: 'keyup' |
70 }); | 68 }); |
71 | 69 |
72 this.context.addObserver( | 70 this.context.addObserver( |
73 CONTEXT_KEY_INPUT_METHOD, | 71 CONTEXT_KEY_INPUT_METHOD, function(inputMethodId) { |
74 function(inputMethodId) { | |
75 $('oobe-welcome-md').setSelectedKeyboard(inputMethodId); | 72 $('oobe-welcome-md').setSelectedKeyboard(inputMethodId); |
76 | 73 |
77 option = $('keyboard-select').querySelector( | 74 option = |
78 'option[value="' + inputMethodId + '"]'); | 75 $('keyboard-select') |
| 76 .querySelector('option[value="' + inputMethodId + '"]'); |
79 if (option) | 77 if (option) |
80 option.selected = true; | 78 option.selected = true; |
81 }); | 79 }); |
82 this.context.addObserver(CONTEXT_KEY_TIMEZONE, function(timezoneId) { | 80 this.context.addObserver(CONTEXT_KEY_TIMEZONE, function(timezoneId) { |
83 $('timezone-select').value = timezoneId; | 81 $('timezone-select').value = timezoneId; |
84 }); | 82 }); |
85 this.context.addObserver(CONTEXT_KEY_CONTINUE_BUTTON_ENABLED, | 83 this.context.addObserver( |
86 function(enabled) { | 84 CONTEXT_KEY_CONTINUE_BUTTON_ENABLED, function(enabled) { |
87 $('continue-button').disabled = !enabled; | 85 $('continue-button').disabled = !enabled; |
88 }); | 86 }); |
89 }, | 87 }, |
90 | 88 |
91 onLanguageSelected_: function(languageId) { | 89 onLanguageSelected_: function(languageId) { |
92 this.context.set(CONTEXT_KEY_LOCALE, languageId); | 90 this.context.set(CONTEXT_KEY_LOCALE, languageId); |
93 this.commitContextChanges(); | 91 this.commitContextChanges(); |
94 }, | 92 }, |
95 | 93 |
96 onKeyboardSelected_: function(inputMethodId) { | 94 onKeyboardSelected_: function(inputMethodId) { |
97 this.context.set(CONTEXT_KEY_INPUT_METHOD, inputMethodId); | 95 this.context.set(CONTEXT_KEY_INPUT_METHOD, inputMethodId); |
98 this.commitContextChanges(); | 96 this.commitContextChanges(); |
99 }, | 97 }, |
100 | 98 |
101 onTimezoneSelected_: function(timezoneId) { | 99 onTimezoneSelected_: function(timezoneId) { |
102 this.context.set(CONTEXT_KEY_TIMEZONE, timezoneId); | 100 this.context.set(CONTEXT_KEY_TIMEZONE, timezoneId); |
103 this.commitContextChanges(); | 101 this.commitContextChanges(); |
104 }, | 102 }, |
105 | 103 |
106 onBeforeShow: function(data) { | 104 onBeforeShow: function(data) { |
107 this.setMDMode_(); | 105 this.setMDMode_(); |
108 cr.ui.DropDown.show('networks-list', true, -1); | 106 cr.ui.DropDown.show('networks-list', true, -1); |
109 var debuggingLinkVisible = | 107 var debuggingLinkVisible = |
110 data && 'isDeveloperMode' in data && data['isDeveloperMode']; | 108 data && 'isDeveloperMode' in data && data['isDeveloperMode']; |
111 | 109 |
112 this.classList.toggle('connect-debugging-view', debuggingLinkVisible); | 110 this.classList.toggle('connect-debugging-view', debuggingLinkVisible); |
113 $('oobe-welcome-md').debuggingLinkVisible = debuggingLinkVisible; | 111 $('oobe-welcome-md').debuggingLinkVisible = debuggingLinkVisible; |
114 }, | 112 }, |
115 | 113 |
116 onBeforeHide: function() { | 114 onBeforeHide: function() { |
117 cr.ui.DropDown.hide('networks-list'); | 115 cr.ui.DropDown.hide('networks-list'); |
118 }, | 116 }, |
119 | 117 |
120 /** | 118 /** |
121 * Header text of the screen. | 119 * Header text of the screen. |
122 * @type {string} | 120 * @type {string} |
123 */ | 121 */ |
124 get header() { | 122 get header() { |
125 return loadTimeData.getString('networkScreenTitle'); | 123 return loadTimeData.getString('networkScreenTitle'); |
126 }, | 124 }, |
127 | 125 |
128 /** | 126 /** |
129 * Buttons in oobe wizard's button strip. | 127 * Buttons in oobe wizard's button strip. |
130 * @type {array} Array of Buttons. | 128 * @type {array} Array of Buttons. |
131 */ | 129 */ |
132 get buttons() { | 130 get buttons() { |
133 var buttons = []; | 131 var buttons = []; |
134 | 132 |
135 var continueButton = this.declareButton( | 133 var continueButton = this.declareButton( |
136 'continue-button', | 134 'continue-button', USER_ACTION_CONTINUE_BUTTON_CLICKED); |
137 USER_ACTION_CONTINUE_BUTTON_CLICKED); | |
138 continueButton.disabled = !this.context.get( | 135 continueButton.disabled = !this.context.get( |
139 CONTEXT_KEY_CONTINUE_BUTTON_ENABLED, false /* default */); | 136 CONTEXT_KEY_CONTINUE_BUTTON_ENABLED, false /* default */); |
140 continueButton.textContent = loadTimeData.getString('continueButton'); | 137 continueButton.textContent = loadTimeData.getString('continueButton'); |
141 continueButton.classList.add('preserve-disabled-state'); | 138 continueButton.classList.add('preserve-disabled-state'); |
142 buttons.push(continueButton); | 139 buttons.push(continueButton); |
143 | 140 |
144 return buttons; | 141 return buttons; |
145 }, | 142 }, |
146 | 143 |
147 /** | 144 /** |
(...skipping 11 matching lines...) Expand all Loading... |
159 * @param {string} message Message to be shown. | 156 * @param {string} message Message to be shown. |
160 */ | 157 */ |
161 showError: function(message) { | 158 showError: function(message) { |
162 var error = document.createElement('div'); | 159 var error = document.createElement('div'); |
163 var messageDiv = document.createElement('div'); | 160 var messageDiv = document.createElement('div'); |
164 messageDiv.className = 'error-message-bubble'; | 161 messageDiv.className = 'error-message-bubble'; |
165 messageDiv.textContent = message; | 162 messageDiv.textContent = message; |
166 error.appendChild(messageDiv); | 163 error.appendChild(messageDiv); |
167 error.setAttribute('role', 'alert'); | 164 error.setAttribute('role', 'alert'); |
168 | 165 |
169 $('bubble').showContentForElement($('networks-list'), | 166 $('bubble').showContentForElement( |
170 cr.ui.Bubble.Attachment.BOTTOM, | 167 $('networks-list'), cr.ui.Bubble.Attachment.BOTTOM, error); |
171 error); | |
172 }, | 168 }, |
173 | 169 |
174 /** | 170 /** |
175 * This is called after resources are updated. | 171 * This is called after resources are updated. |
176 */ | 172 */ |
177 updateLocalizedContent: function() { | 173 updateLocalizedContent: function() { |
178 this.setMDMode_(); | 174 this.setMDMode_(); |
179 $('oobe-welcome-md').updateLocalizedContent(); | 175 $('oobe-welcome-md').updateLocalizedContent(); |
180 }, | 176 }, |
181 | 177 |
(...skipping 17 matching lines...) Expand all Loading... |
199 | 195 |
200 var timezoneList = loadTimeData.getValue('timezoneList'); | 196 var timezoneList = loadTimeData.getValue('timezoneList'); |
201 welcomeScreen.timezones = timezoneList; | 197 welcomeScreen.timezones = timezoneList; |
202 | 198 |
203 welcomeScreen.highlightStrength = | 199 welcomeScreen.highlightStrength = |
204 loadTimeData.getValue('highlightStrength'); | 200 loadTimeData.getValue('highlightStrength'); |
205 } | 201 } |
206 }, | 202 }, |
207 }; | 203 }; |
208 }); | 204 }); |
209 | |
OLD | NEW |