| OLD | NEW |
| 1 // Copyright 2015 The Chromium Authors. All rights reserved. | 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 | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 /** | 5 /** |
| 6 * This tuple is made up of a (value, name, attribute). The value and name are |
| 7 * used by the dropdown menu. The attribute is optional 'user data' that is |
| 8 * ignored by the dropdown menu. |
| 9 * @typedef {{ |
| 10 * 0: (number|string), |
| 11 * 1: string, |
| 12 * 2: (string|undefined) |
| 13 * }} |
| 14 */ |
| 15 var DropdownMenuOption; |
| 16 |
| 17 /** |
| 18 * @typedef {!Array<DropdownMenuOption>} |
| 19 */ |
| 20 var DropdownMenuOptionList; |
| 21 |
| 22 /** |
| 6 * 'settings-dropdown-menu' is a control for displaying options | 23 * 'settings-dropdown-menu' is a control for displaying options |
| 7 * in the settings. | 24 * in the settings. |
| 8 * | 25 * |
| 9 * Example: | 26 * Example: |
| 10 * | 27 * |
| 11 * <settings-dropdown-menu pref="{{prefs.foo}}"> | 28 * <settings-dropdown-menu pref="{{prefs.foo}}"> |
| 12 * </settings-dropdown-menu> | 29 * </settings-dropdown-menu> |
| 13 * | 30 * |
| 14 * @group Chrome Settings Elements | 31 * @group Chrome Settings Elements |
| 15 * @element settings-dropdown-menu | 32 * @element settings-dropdown-menu |
| 16 */ | 33 */ |
| 17 Polymer({ | 34 Polymer({ |
| 18 is: 'settings-dropdown-menu', | 35 is: 'settings-dropdown-menu', |
| 19 | 36 |
| 20 properties: { | 37 properties: { |
| 21 /** | 38 /** |
| 22 * A text label for the drop-down menu. | 39 * A text label for the drop-down menu. |
| 23 */ | 40 */ |
| 24 label: { | 41 label: { |
| 25 type: String, | 42 type: String, |
| 26 }, | 43 }, |
| 27 | 44 |
| 28 /** | 45 /** |
| 29 * List of options for the drop-down menu. | 46 * List of options for the drop-down menu. |
| 30 * @type {!Array<{0: (Object|number|string), 1: string, | 47 * @type {!DropdownMenuOptionList} |
| 31 * 2: (string|undefined)}>} | |
| 32 */ | 48 */ |
| 33 menuOptions: { | 49 menuOptions: { |
| 34 notify: true, | |
| 35 type: Array, | 50 type: Array, |
| 36 value: function() { return []; }, | 51 value: function() { return []; }, |
| 37 }, | 52 }, |
| 38 | 53 |
| 39 /** | 54 /** |
| 40 * A single Preference object being tracked. | 55 * A single Preference object being tracked. |
| 41 * @type {?PrefObject} | |
| 42 */ | 56 */ |
| 43 pref: { | 57 pref: { |
| 44 type: Object, | 58 type: Object, |
| 45 notify: true, | 59 notify: true, |
| 46 }, | 60 }, |
| 47 | 61 |
| 48 /** | 62 /** |
| 49 * Either loading text or the label for the drop-down menu. | 63 * Either loading text or the label for the drop-down menu. |
| 50 * @private | 64 * @private |
| 51 */ | 65 */ |
| (...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 85 /** | 99 /** |
| 86 * Whether to show the 'custom' item. | 100 * Whether to show the 'custom' item. |
| 87 * @private | 101 * @private |
| 88 */ | 102 */ |
| 89 showNotFoundValue_: { | 103 showNotFoundValue_: { |
| 90 type: Boolean, | 104 type: Boolean, |
| 91 }, | 105 }, |
| 92 }, | 106 }, |
| 93 | 107 |
| 94 behaviors: [ | 108 behaviors: [ |
| 95 I18nBehavior | 109 I18nBehavior, |
| 96 ], | 110 ], |
| 97 | 111 |
| 98 observers: [ | 112 observers: [ |
| 99 'checkSetup_(menuOptions, selectedValue_)', | 113 'checkSetup_(menuOptions, selectedValue_)', |
| 100 'prefChanged_(pref.value)', | 114 'prefChanged_(pref.value)', |
| 101 ], | 115 ], |
| 102 | 116 |
| 103 /** | 117 /** |
| 104 * Check to see if we have all the pieces needed to enable the control. | 118 * Check to see if we have all the pieces needed to enable the control. |
| 105 * @param {!Array<{0: (Object|number|string), 1: string, | 119 * @param {!Array<{0: (Object|number|string), 1: string, |
| 106 * 2: (string|undefined)}>} menuOptions | 120 * 2: (string|undefined)}>} menuOptions |
| 107 * @param {string} selectedValue_ | 121 * @param {string} selectedValue_ |
| 108 * @private | 122 * @private |
| 109 */ | 123 */ |
| 110 checkSetup_: function(menuOptions, selectedValue_) { | 124 checkSetup_: function(menuOptions, selectedValue_) { |
| 111 if (!this.menuOptions.length) { | 125 if (!this.menuOptions.length) { |
| 112 return; | 126 return; |
| 113 } | 127 } |
| 114 | 128 |
| 115 if (!Object.keys(this.menuMap_).length) { | 129 if (!Object.keys(this.menuMap_).length) { |
| 116 // Create a map from index value [0] back to the index i. | 130 // Create a map from index value [0] back to the index i. |
| 117 var result = {}; | 131 var result = {}; |
| 118 for (var i = 0; i < this.menuOptions.length; ++i) | 132 for (var i = 0; i < this.menuOptions.length; ++i) |
| 119 result[JSON.stringify(this.menuOptions[i][0])] = i.toString(); | 133 result[String(this.menuOptions[i][0])] = i.toString(); |
| 120 this.menuMap_ = result; | 134 this.menuMap_ = result; |
| 121 } | 135 } |
| 122 | 136 |
| 123 // We need the menuOptions and the selectedValue_. They may arrive | 137 // We need the menuOptions and the selectedValue_. They may arrive |
| 124 // at different times (each is asynchronous). | 138 // at different times (each is asynchronous). |
| 125 this.selected_ = this.getItemIndex(this.selectedValue_); | 139 this.selected_ = this.itemIndex(this.selectedValue_); |
| 126 this.menuLabel_ = this.label; | 140 this.menuLabel_ = this.label; |
| 127 this.$.dropdownMenu.disabled = false; | 141 this.$.dropdownMenu.disabled = false; |
| 128 }, | 142 }, |
| 129 | 143 |
| 130 /** | 144 /** |
| 131 * @param {string} item A value from the menuOptions array. | 145 * @param {string} item A value from the menuOptions array. |
| 132 * @return {string} | 146 * @return {string} |
| 133 * @private | 147 * @private |
| 134 */ | 148 */ |
| 135 getItemIndex: function(item) { | 149 itemIndex: function(item) { |
| 136 var result = this.menuMap_[item]; | 150 var result = this.menuMap_[item]; |
| 137 if (result) | 151 if (result) |
| 138 return result; | 152 return result; |
| 139 this.showNotFoundValue_ = true; | 153 this.showNotFoundValue_ = true; |
| 140 // The 'not found' item is added as the last of the options. | 154 // The 'not found' item is added as the last of the options. |
| 141 return (this.menuOptions.length).toString(); | 155 return (this.menuOptions.length).toString(); |
| 142 }, | 156 }, |
| 143 | 157 |
| 144 /** | 158 /** |
| 145 * @param {string} index An index into the menuOptions array. | 159 * @param {string} index An index into the menuOptions array. |
| 146 * @return {Object|number|string|undefined} | 160 * @return {Object|number|string|undefined} |
| 147 * @private | 161 * @private |
| 148 */ | 162 */ |
| 149 getItemValue: function(index) { | 163 itemValue: function(index) { |
| 150 if (this.menuOptions.length) { | 164 if (this.menuOptions.length) { |
| 151 var result = this.menuOptions[index]; | 165 var result = this.menuOptions[index]; |
| 152 if (result) | 166 if (result) |
| 153 return result[0]; | 167 return result[0]; |
| 154 } | 168 } |
| 155 return undefined; | 169 return undefined; |
| 156 }, | 170 }, |
| 157 | 171 |
| 158 /** | 172 /** |
| 159 * Pass the selection change to the pref value. | 173 * Pass the selection change to the pref value. |
| 160 * @private | 174 * @private |
| 161 */ | 175 */ |
| 162 onSelectedChanged_: function() { | 176 onSelectedChanged_: function() { |
| 163 var prefValue = this.getItemValue(this.selected_); | 177 var prefValue = this.itemValue(this.selected_); |
| 164 if (prefValue !== undefined) { | 178 if (prefValue !== undefined) { |
| 165 this.selectedValue_ = JSON.stringify(prefValue); | 179 this.selectedValue_ = String(prefValue); |
| 166 this.set('pref.value', prefValue); | 180 this.set('pref.value', prefValue); |
| 167 } | 181 } |
| 168 }, | 182 }, |
| 169 | 183 |
| 170 /** | 184 /** |
| 171 * @param {number|string} value A value from the menuOptions array. | 185 * @param {number|string} value A value from the menuOptions array. |
| 172 * @private | 186 * @private |
| 173 */ | 187 */ |
| 174 prefChanged_: function(value) { | 188 prefChanged_: function(value) { |
| 175 this.selectedValue_ = JSON.stringify(value); | 189 this.selectedValue_ = String(value); |
| 176 }, | 190 }, |
| 177 }); | 191 }); |
| OLD | NEW |