chrome/browser/resources/settings/internet_page/network_summary_item.js

   1 // Copyright 2015 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 Polymer element for displaying the network state for a specific
   7  * type and a list of networks for that type.
   8  */
   9
  10 /** @typedef {chrome.networkingPrivate.DeviceStateProperties} */
  11 var DeviceStateProperties;
  12
  13 Polymer({
  14   is: 'network-summary-item',
  15
  16   properties: {
  17     /**
  18      * True if the list is expanded.
  19      */
  20     expanded: {
  21       type: Boolean,
  22       value: false,
  23       observer: 'expandedChanged_'
  24     },
  25
  26     /**
  27      * The maximum height in pixels for the list of networks.
  28      */
  29     maxHeight: {
  30       type: Number,
  31       value: 200
  32     },
  33
  34     /**
  35      * True if this item should be hidden. We need this computed property so
  36      * that it can default to true, hiding this element, since no changed event
  37      * will be fired for deviceState if it is undefined (in NetworkSummary).
  38      */
  39     isHidden: {
  40       type: Boolean,
  41       value: true,
  42       computed: 'noDeviceState_(deviceState)'
  43     },
  44
  45     /**
  46      * Device state for the network type.
  47      * @type {?DeviceStateProperties}
  48      */
  49     deviceState: {
  50       type: Object,
  51       value: null,
  52       observer: 'deviceStateChanged_'
  53     },
  54
  55     /**
  56      * Network state for the active network.
  57      * @type {?CrOnc.NetworkStateProperties}
  58      */
  59     networkState: {
  60       type: Object,
  61       value: null
  62     },
  63
  64     /**
  65      * List of all network state data for the network type.
  66      * @type {!Array<!CrOnc.NetworkStateProperties>}
  67      */
  68     networkStateList: {
  69       type: Array,
  70       value: function() { return []; },
  71       observer: 'networkStateListChanged_'
  72     }
  73   },
  74
  75   /**
  76    * Polymer expanded changed method.
  77    */
  78   expandedChanged_: function() {
  79     var type = this.deviceState ? this.deviceState.Type : '';
  80     this.fire('expanded', {expanded: this.expanded, type: type});
  81   },
  82
  83   /**
  84    * Polymer deviceState changed method.
  85    */
  86   deviceStateChanged_: function() {
  87     this.updateSelectable_();
  88     if (!this.deviceIsEnabled_(this.deviceState))
  89       this.expanded = false;
  90   },
  91
  92   /**
  93    * Polymer networkStateList changed method.
  94    */
  95   networkStateListChanged_: function() {
  96     this.updateSelectable_();
  97   },
  98
  99   /**
 100    * @param {?DeviceStateProperties} deviceState The state of a device.
 101    * @return {boolean} True if the device state is not set.
 102    * @private
 103    */
 104   noDeviceState_: function(deviceState) {
 105     return !deviceState;
 106   },
 107
 108   /**
 109    * @param {?DeviceStateProperties} deviceState The state of a device.
 110    * @param {boolean} expanded The expanded state.
 111    * @return {boolean} Whether or not the scanning spinner should be shown.
 112    * @private
 113    */
 114   showScanning_: function(deviceState, expanded) {
 115     return !!expanded && !!deviceState.Scanning;
 116   },
 117
 118   /**
 119    * @param {?DeviceStateProperties} deviceState The state of a device.
 120    * @return {boolean} Whether or not the device state is enabled.
 121    * @private
 122    */
 123   deviceIsEnabled_: function(deviceState) {
 124     return !!deviceState && deviceState.State == 'Enabled';
 125   },
 126
 127   /**
 128    * @param {?DeviceStateProperties} deviceState The device state.
 129    * @return {string} The class value for the device enabled button.
 130    * @private
 131    */
 132   getDeviceEnabledButtonClass_: function(deviceState) {
 133     var visible = deviceState && deviceState.Type != CrOnc.Type.ETHERNET &&
 134                   deviceState.Type != CrOnc.Type.VPN;
 135     return visible ? '' : 'invisible';
 136   },
 137
 138   /**
 139    * @param {?DeviceStateProperties} deviceState The device state.
 140    * @param {!Array<!CrOnc.NetworkStateProperties>} networkList
 141    * @return {string} The class value for the expand button.
 142    * @private
 143    */
 144   getExpandButtonClass_: function(deviceState, networkList) {
 145     var visible = this.expandIsVisible_(deviceState, networkList);
 146     return visible ? '' : 'invisible';
 147   },
 148
 149   /**
 150    * @param {?DeviceStateProperties} deviceState The device state.
 151    * @param {!Array<!CrOnc.NetworkStateProperties>} networkList
 152    * @return {boolean} Whether or not to show the UI to expand the list.
 153    * @private
 154    */
 155   expandIsVisible_: function(deviceState, networkList) {
 156     if (!this.deviceIsEnabled_(deviceState))
 157       return false;
 158     var minLength = (this.deviceState.Type == CrOnc.Type.WI_FI) ? 1 : 2;
 159     return networkList.length >= minLength;
 160   },
 161
 162   /**
 163    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 164    * @param {boolean} expanded The expanded state.
 165    * @return {boolean} True if the 'Known networks' button should be shown.
 166    * @private
 167    */
 168   showKnownNetworks_: function(state, expanded) {
 169     return !!expanded && !!state && state.Type == CrOnc.Type.WI_FI;
 170   },
 171
 172   /**
 173    * Event triggered when the details div is clicked.
 174    * @param {Event} event The enable button event.
 175    * @private
 176    */
 177   onDetailsClicked_: function(event) {
 178     if ((event.target.id == 'expandListButton') ||
 179         (this.deviceState && !this.deviceIsEnabled_(this.deviceState))) {
 180       // Already handled or disabled, do nothing.
 181       return;
 182     }
 183     if (this.expandIsVisible_(this.deviceState, this.networkStateList)) {
 184       // Expandable, toggle expand.
 185       this.expanded = !this.expanded;
 186       return;
 187     }
 188     // Not expandable, fire 'selected' with |networkState|.
 189     this.fire('selected', this.networkState);
 190   },
 191
 192   /**
 193    * Event triggered when the known networks button is clicked.
 194    * @private
 195    */
 196   onKnownNetworksClicked_: function() {
 197     this.fire('show-known-networks', {type: CrOnc.Type.WI_FI});
 198   },
 199
 200   /**
 201    * Event triggered when a network-list-item is the network list is selected.
 202    * @param {!{detail: !CrOnc.NetworkStateProperties}} event
 203    * @private
 204    */
 205   onListItemSelected_: function(event) {
 206     var state = event.detail;
 207     this.fire('selected', state);
 208   },
 209
 210   /**
 211    * Event triggered when the enable button is toggled.
 212    * @param {!Object} event The enable button event.
 213    * @private
 214    */
 215   onDeviceEnabledToggled_: function(event) {
 216     var deviceIsEnabled = this.deviceIsEnabled_(this.deviceState);
 217     var type = this.deviceState ? this.deviceState.Type : '';
 218     this.fire('device-enabled-toggled',
 219               {enabled: !deviceIsEnabled, type: type});
 220     // Make sure this does not propagate to onDetailsClicked_.
 221     event.stopPropagation();
 222   },
 223
 224   /**
 225    * Called whenever the 'selectable' state might change.
 226    * @private
 227    */
 228   updateSelectable_: function() {
 229     var selectable = this.deviceIsEnabled_(this.deviceState);
 230     this.$.details.classList.toggle('selectable', selectable);
 231   },
 232 });