| <!DOCTYPE html> |
| <!-- |
| Copyright (c) 2015 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="/base/deep_utils.html"> |
| <link rel="import" href="/base/units/time.html"> |
| <link rel="import" href="/base/units/time_duration.html"> |
| |
| <script> |
| 'use strict'; |
| tr.exportTo('tr.b.units', function() { |
| function createTimeSpan(duration) { |
| if (duration === undefined) |
| return ''; |
| var span = document.createElement('tr-b-u-time-duration-span'); |
| span.duration = duration; |
| return span; |
| } |
| |
| tr.b.units.Time.addEventListener('display-unit-changed', function(e) { |
| tr.b.findDeepElementsMatching(document.body, |
| 'tr-b-u-time-duration-span').forEach(function(el) { |
| el.updateContent_(); |
| }); |
| }); |
| |
| return { |
| createTimeSpan: createTimeSpan |
| }; |
| }); |
| </script> |
| |
| <polymer-element name="tr-b-u-time-duration-span"> |
| <template> |
| <style> |
| :host { |
| display: flex; |
| flex-direction: row; |
| align-items: center; |
| } |
| #warning { |
| margin-left: 4px; |
| font-size: 66%; |
| } |
| </style> |
| <span id="content"></span> |
| <span id="warning" style="display:none">⚠</span> |
| </template> |
| <script> |
| 'use strict'; |
| |
| Polymer({ |
| ready: function() { |
| this.warning_ = undefined; |
| this.duration_ = undefined; |
| }, |
| |
| get duration() { |
| return this.duration_; |
| }, |
| |
| set duration(duration) { |
| if (duration instanceof tr.b.units.TimeDuration) |
| this.duration_ = duration.duration; |
| else |
| this.duration_ = duration; |
| this.updateContent_(); |
| }, |
| |
| updateContent_: function() { |
| var content = tr.b.units.Time.currentDisplayUnit.format(this.duration_); |
| this.$.content.textContent = content; |
| }, |
| |
| get warning() { |
| return this.warning_; |
| }, |
| |
| set warning(warning) { |
| this.warning_ = warning; |
| var warningEl = this.$.warning; |
| if (this.warning_) { |
| warningEl.title = warning; |
| warningEl.style.display = ''; |
| } else { |
| warningEl.title = ''; |
| warningEl.style.display = 'none'; |
| } |
| } |
| }); |
| </script> |
| </polymer-element> |