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