OLD | NEW |
(Empty) | |
| 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 rendering network icons based on ONC |
| 7 * state properties. |
| 8 */ |
| 9 |
| 10 (function() { |
| 11 /** |
| 12 * @typedef {{ |
| 13 * showDisconnected: boolean, |
| 14 * iconType: string, |
| 15 * connected: boolean, |
| 16 * secure: boolean, |
| 17 * strength: number |
| 18 * }} |
| 19 */ |
| 20 var IconParams; |
| 21 |
| 22 /** @const {string} */ var RESOURCE_IMAGE_BASE = |
| 23 'chrome://resources/cr_elements/cr_network_icon/'; |
| 24 |
| 25 /** @const {string} */ var RESOURCE_IMAGE_EXT = '.png'; |
| 26 |
| 27 /** |
| 28 * Gets the icon type from the network type. This allows multiple types |
| 29 * (i.e. Cellular, WiMAX) to map to the same icon type (i.e. mobile). |
| 30 * @param {CrOnc.Type} networkType The ONC network type. |
| 31 * @return {string} The icon type: ethernet, wifi, mobile, or vpn. |
| 32 */ |
| 33 function getIconTypeFromNetworkType(networkType) { |
| 34 if (networkType == CrOnc.Type.ETHERNET) |
| 35 return 'ethernet'; |
| 36 else if (networkType == CrOnc.Type.WIFI) |
| 37 return 'wifi'; |
| 38 else if (networkType == CrOnc.Type.CELLULAR) |
| 39 return 'mobile'; |
| 40 else if (networkType == CrOnc.Type.WIMAX) |
| 41 return 'mobile'; |
| 42 else if (networkType == CrOnc.Type.VPN) |
| 43 return 'vpn'; |
| 44 |
| 45 console.error('Unrecognized network type: ' + networkType); |
| 46 return 'ethernet'; |
| 47 } |
| 48 |
| 49 /** |
| 50 * Polymer class definition for 'cr-network-icon'. |
| 51 * @element cr-network-icon |
| 52 */ |
| 53 Polymer('cr-network-icon', { |
| 54 publish: { |
| 55 /** |
| 56 * If set, the ONC data properties will be used to display the icon. |
| 57 * |
| 58 * @attribute networkState |
| 59 * @type CrOncDataElement |
| 60 * @default null |
| 61 */ |
| 62 networkState: null, |
| 63 |
| 64 /** |
| 65 * If set, the ONC network type will be used to display the icon. |
| 66 * |
| 67 * @attribute networkType |
| 68 * @type CrOnc.Type |
| 69 * @default null |
| 70 */ |
| 71 networkType: null, |
| 72 |
| 73 /** |
| 74 * If true, the icon is part of a list of networks and may be displayed |
| 75 * differently, e.g. the disconnected image will never be shown for |
| 76 * list items. |
| 77 * |
| 78 * @attribute isListItem |
| 79 * @type boolean |
| 80 * @default false |
| 81 */ |
| 82 isListItem: false, |
| 83 }, |
| 84 |
| 85 /** @override */ |
| 86 attached: function() { |
| 87 var params = /** @type {IconParams} */ { |
| 88 connected: false, |
| 89 iconType: 'ethernet', |
| 90 secure: false, |
| 91 showDisconnected: true, |
| 92 strength: 0, |
| 93 }; |
| 94 this.setIcon_(params); |
| 95 }, |
| 96 |
| 97 /** |
| 98 * Polymer networkState changed method. Updates the icon based on the |
| 99 * network state. |
| 100 */ |
| 101 networkStateChanged: function() { |
| 102 var iconType = getIconTypeFromNetworkType(this.networkState.data.Type); |
| 103 var params = /** @type {IconParams} */ { |
| 104 connected: this.networkState.data.ConnectionState == 'Connected', |
| 105 iconType: iconType, |
| 106 secure: iconType == 'wifi' && |
| 107 this.networkState.getWiFiSecurity() != 'None', |
| 108 showDisconnected: !this.isListItem, |
| 109 strength: this.networkState.getStrength(), |
| 110 }; |
| 111 this.setIcon_(params); |
| 112 }, |
| 113 |
| 114 /** |
| 115 * Polymer networkType changed method. Updates the icon based on the type |
| 116 * of network, showing a disconnected icon where appropriate and no badges. |
| 117 */ |
| 118 networkTypeChanged: function() { |
| 119 var params = /** @type {IconParams} */ { |
| 120 connected: false, |
| 121 iconType: getIconTypeFromNetworkType(this.networkType), |
| 122 secure: false, |
| 123 showDisconnected: true, |
| 124 strength: 0, |
| 125 }; |
| 126 this.setIcon_(params); |
| 127 }, |
| 128 |
| 129 /** |
| 130 * Sets the icon and badge based on the current state and |strength|. |
| 131 * @param {!IconParams} params The set of params describing the icon. |
| 132 * @private |
| 133 */ |
| 134 setIcon_: function(params) { |
| 135 var icon = this.$.icon; |
| 136 if (params.iconType) |
| 137 icon.src = RESOURCE_IMAGE_BASE + params.iconType + RESOURCE_IMAGE_EXT; |
| 138 |
| 139 var multiLevel, strength; |
| 140 if (params.iconType == 'wifi' || params.iconType == 'mobile') { |
| 141 multiLevel = true; |
| 142 strength = (params.showDisconnected && !params.connected) ? |
| 143 -1 : params.strength; |
| 144 } else { |
| 145 multiLevel = false; |
| 146 strength = -1; |
| 147 } |
| 148 icon.classList.toggle('multi-level', multiLevel); |
| 149 icon.classList.toggle('level0', strength < 0); |
| 150 icon.classList.toggle('level1', strength >= 0 && strength <= 25); |
| 151 icon.classList.toggle('level2', strength > 25 && strength <= 50); |
| 152 icon.classList.toggle('level3', strength > 50 && strength <= 75); |
| 153 icon.classList.toggle('level4', strength > 75); |
| 154 |
| 155 this.$.secure.hidden = !params.secure; |
| 156 }, |
| 157 }); |
| 158 })(); |
OLD | NEW |