| <!DOCTYPE html> |
| <!-- |
| Copyright (c) 2016 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <link rel="import" href="/tracing/ui/base/ui.html"> |
| |
| <polymer-element name='tr-ui-b-radio-picker'> |
| <template> |
| <style> |
| #container { |
| display: flex; |
| flex-direction: column; |
| } |
| </style> |
| |
| <div id="container"> |
| </div> |
| |
| </template> |
| |
| <script> |
| 'use strict'; |
| |
| Polymer({ |
| created: function() { |
| this.needsInit_ = true; |
| this.settingsKey_ = undefined; |
| this.is_ready_ = false; |
| this.radio_buttons_ = undefined; |
| // Keeping track of which key is selected. This member should only be set |
| // set inside select() method to make sure that logical state & the UI |
| // state is consistent. |
| this.selectedKey_ = undefined; |
| }, |
| |
| ready: function() { |
| this.is_ready_ = true; |
| this.maybeInit_(); |
| this.maybeRenderRadioButtons_(); |
| }, |
| |
| get settingsKey() { |
| return this.settingsKey_; |
| }, |
| |
| set settingsKey(settingsKey) { |
| if (!this.needsInit_) |
| throw new Error('Already initialized.'); |
| this.settingsKey_ = settingsKey; |
| this.maybeInit_(); |
| }, |
| |
| maybeInit_: function() { |
| if (!this.needsInit_) |
| return; |
| if (this.settingsKey_ === undefined) |
| return; |
| this.needsInit_ = false; |
| this.select(tr.b.Settings.get(this.settingsKey_)); |
| }, |
| |
| set items(items) { |
| this.radio_buttons_ = {}; |
| items.forEach(function(e) { |
| if (e.key in this.radio_buttons_) |
| throw new Error(e.key + ' already exists'); |
| var radio_button = document.createElement('div'); |
| var input = document.createElement('input'); |
| var label = document.createElement('div'); |
| input.type = 'radio'; |
| input.addEventListener('click', function() { |
| this.select(e.key); |
| }.bind(this)); |
| label.innerHTML = e.label; |
| label.style.display = 'inline'; |
| radio_button.appendChild(input); |
| radio_button.appendChild(label); |
| this.radio_buttons_[e.key] = input; |
| }.bind(this)); |
| |
| this.maybeInit_(); |
| this.maybeRenderRadioButtons_(); |
| }, |
| |
| maybeRenderRadioButtons_: function() { |
| if (!this.is_ready_) |
| return; |
| if (this.radio_buttons_ === undefined) |
| return; |
| for (var key in this.radio_buttons_) |
| this.$.container.appendChild(this.radio_buttons_[key].parentElement); |
| if (this.selectedKey_ !== undefined) |
| this.select(this.selectedKey_); |
| }, |
| |
| select: function(key) { |
| if (key === undefined) |
| return; |
| if (this.radio_buttons_ == undefined) { |
| this.selectedKey_ = key; |
| return; |
| } |
| if (!(key in this.radio_buttons_)) |
| throw new Error(key + ' does not exists'); |
| // Unselect the previous radio, update the key & select the new one. |
| if (this.selectedKey_ !== undefined) |
| this.radio_buttons_[this.selectedKey_].checked = false; |
| this.selectedKey_ = key; |
| tr.b.Settings.set(this.settingsKey_, this.selectedKey_); |
| if (this.selectedKey_ !== undefined) |
| this.radio_buttons_[this.selectedKey_].checked = true; |
| }, |
| |
| get selectedKey() { |
| return this.selectedKey_; |
| }, |
| }); |
| </script> |
| </polymer-element> |
