| 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 |