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 device state is enabled.
 112    * @private
 113    */
 114   deviceIsEnabled_: function(deviceState) {
 115     return deviceState && deviceState.State == 'Enabled';
 116   },
 117
 118   /**
 119    * @param {?DeviceStateProperties} deviceState The device state.
 120    * @return {string} The class value for the device enabled button.
 121    * @private
 122    */
 123   getDeviceEnabledButtonClass_: function(deviceState) {
 124     var visible = deviceState &&
 125         deviceState.Type != 'Ethernet' && deviceState.Type != 'VPN';
 126     return visible ? '' : 'invisible';
 127   },
 128
 129   /**
 130    * @param {?DeviceStateProperties} deviceState The device state.
 131    * @param {!Array<!CrOnc.NetworkStateProperties>} networkList
 132    * @return {string} The class value for the expand button.
 133    * @private
 134    */
 135   getExpandButtonClass_: function(deviceState, networkList) {
 136     var visible = this.expandIsVisible_(deviceState, networkList);
 137     return visible ? '' : 'invisible';
 138   },
 139
 140   /**
 141    * @param {?DeviceStateProperties} deviceState The device state.
 142    * @param {!Array<!CrOnc.NetworkStateProperties>} networkList
 143    * @return {boolean} Whether or not to show the UI to expand the list.
 144    * @private
 145    */
 146   expandIsVisible_: function(deviceState, networkList) {
 147     if (!this.deviceIsEnabled_(deviceState))
 148       return false;
 149     var minLength = (this.type == 'WiFi') ? 1 : 2;
 150     return networkList.length >= minLength;
 151   },
 152
 153   /**
 154    * Event triggered when the details div is clicked on.
 155    * @param {!Object} event The enable button event.
 156    * @private
 157    */
 158   onDetailsClicked_: function(event) {
 159     if ((event.target.id == 'expandListButton') ||
 160         (this.deviceState && !this.deviceIsEnabled_(this.deviceState))) {
 161       // Already handled or disabled, do nothing.
 162       return;
 163     }
 164     if (this.expandIsVisible_(this.deviceState, this.networkStateList)) {
 165       // Expandable, toggle expand.
 166       this.expanded = !this.expanded;
 167       return;
 168     }
 169     // Not expandable, fire 'selected' with |networkState|.
 170     this.fire('selected', this.networkState);
 171   },
 172
 173   /**
 174    * Event triggered when a network-list-item is the network list is selected.
 175    * @param {!{detail: NetworkListItem}} event
 176    * @private
 177    */
 178   onListItemSelected_: function(event) {
 179     var state = event.detail;
 180     this.fire('selected', state);
 181   },
 182
 183   /**
 184    * Event triggered when the enable button is toggled.
 185    * @param {!Object} event The enable button event.
 186    * @private
 187    */
 188   onDeviceEnabledToggled_: function(event) {
 189     var deviceIsEnabled = this.deviceIsEnabled_(this.deviceState);
 190     var type = this.deviceState ? this.deviceState.Type : '';
 191     this.fire('device-enabled-toggled',
 192               {enabled: !deviceIsEnabled, type: type});
 193     // Make sure this does not propagate to onDetailsClicked_.
 194     event.stopPropagation();
 195   },
 196
 197   /**
 198    * Called whenever the 'selectable' state might change.
 199    * @private
 200    */
 201   updateSelectable_: function() {
 202     var selectable = this.deviceIsEnabled_(this.deviceState);
 203     this.$.details.classList.toggle('selectable', selectable);
 204   },
 205 });
 206 })();