chrome/browser/resources/chromeos/login/oobe_screen_network.js

   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
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview Oobe network screen implementation.
   7  */
   8
   9 login.createScreen('NetworkScreen', 'connect', function() {
  10   var USER_ACTION_CONTINUE_BUTTON_CLICKED = 'continue';
  11   var USER_ACTION_CONNECT_DEBUGGING_FEATURES_CLICKED =
  12         'connect-debugging-features';
  13   var CONTEXT_KEY_LOCALE = 'locale';
  14   var CONTEXT_KEY_INPUT_METHOD = 'input-method';
  15   var CONTEXT_KEY_TIMEZONE = 'timezone';
  16   var CONTEXT_KEY_CONTINUE_BUTTON_ENABLED = 'continue-button-enabled';
  17
  18   return {
  19     EXTERNAL_API: [
  20       'showError'
  21     ],
  22
  23     /**
  24      * Dropdown element for networks selection.
  25      */
  26     dropdown_: null,
  27
  28     /** @override */
  29     decorate: function() {
  30       var self = this;
  31
  32       Oobe.setupSelect($('language-select'),
  33                        loadTimeData.getValue('languageList'),
  34                        function(languageId) {
  35                          self.context.set(CONTEXT_KEY_LOCALE, languageId);
  36                          self.commitContextChanges();
  37                        });
  38       Oobe.setupSelect($('keyboard-select'),
  39                        loadTimeData.getValue('inputMethodsList'),
  40                        function(inputMethodId) {
  41                          self.context.set(CONTEXT_KEY_INPUT_METHOD,
  42                                           inputMethodId);
  43                          self.commitContextChanges();
  44                        });
  45       Oobe.setupSelect($('timezone-select'),
  46                        loadTimeData.getValue('timezoneList'),
  47                        function(timezoneId) {
  48                          self.context.set(CONTEXT_KEY_TIMEZONE, timezoneId);
  49                          self.commitContextChanges();
  50                        });
  51
  52       this.dropdown_ = $('networks-list');
  53       cr.ui.DropDown.decorate(this.dropdown_);
  54
  55       this.declareUserAction(
  56           $('connect-debugging-features-link'),
  57           { action_id: USER_ACTION_CONNECT_DEBUGGING_FEATURES_CLICKED,
  58             event: 'click'
  59           });
  60       this.declareUserAction(
  61           $('connect-debugging-features-link'),
  62           { action_id: USER_ACTION_CONNECT_DEBUGGING_FEATURES_CLICKED,
  63             condition: function(event) { return event.keyCode == 32; },
  64             event: 'keyup'
  65           });
  66
  67       this.context.addObserver(
  68           CONTEXT_KEY_INPUT_METHOD,
  69           function(inputMethodId) {
  70             option = $('keyboard-select').querySelector(
  71                 'option[value="' + inputMethodId + '"]');
  72             if (option)
  73               option.selected = true;
  74           });
  75       this.context.addObserver(CONTEXT_KEY_TIMEZONE, function(timezoneId) {
  76         $('timezone-select').value = timezoneId;
  77       });
  78       this.context.addObserver(CONTEXT_KEY_CONTINUE_BUTTON_ENABLED,
  79                                function(enabled) {
  80         $('continue-button').disabled = !enabled;
  81       });
  82     },
  83
  84     onBeforeShow: function(data) {
  85       cr.ui.DropDown.show('networks-list', true, -1);
  86       this.classList.toggle('connect-debugging-view',
  87         data && 'isDeveloperMode' in data && data['isDeveloperMode']);
  88     },
  89
  90     onBeforeHide: function() {
  91       cr.ui.DropDown.hide('networks-list');
  92     },
  93
  94     /**
  95      * Header text of the screen.
  96      * @type {string}
  97      */
  98     get header() {
  99       return loadTimeData.getString('networkScreenTitle');
 100     },
 101
 102     /**
 103      * Buttons in oobe wizard's button strip.
 104      * @type {array} Array of Buttons.
 105      */
 106     get buttons() {
 107       var buttons = [];
 108
 109       var continueButton = this.declareButton(
 110           'continue-button',
 111           USER_ACTION_CONTINUE_BUTTON_CLICKED);
 112       continueButton.disabled = !this.context.get(
 113           CONTEXT_KEY_CONTINUE_BUTTON_ENABLED, false /* default */);
 114       continueButton.textContent = loadTimeData.getString('continueButton');
 115       continueButton.classList.add('preserve-disabled-state');
 116       buttons.push(continueButton);
 117
 118       return buttons;
 119     },
 120
 121     /**
 122      * Returns a control which should receive an initial focus.
 123      */
 124     get defaultControl() {
 125       return $('language-select');
 126     },
 127
 128     /**
 129      * Shows the network error message.
 130      * @param {string} message Message to be shown.
 131      */
 132     showError: function(message) {
 133       var error = document.createElement('div');
 134       var messageDiv = document.createElement('div');
 135       messageDiv.className = 'error-message-bubble';
 136       messageDiv.textContent = message;
 137       error.appendChild(messageDiv);
 138       error.setAttribute('role', 'alert');
 139
 140       $('bubble').showContentForElement($('networks-list'),
 141                                         cr.ui.Bubble.Attachment.BOTTOM,
 142                                         error);
 143     }
 144   };
 145 });
 146