| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 Copyright 2014 The Chromium Authors. All rights reserved. | 2 Copyright 2014 The Chromium Authors. All rights reserved. |
| 3 Use of this source code is governed by a BSD-style license that can be | 3 Use of this source code is governed by a BSD-style license that can be |
| 4 found in the LICENSE file. | 4 found in the LICENSE file. |
| 5 --> | 5 --><html><head><dom-module id="ct-last-updated"> |
| 6 | |
| 7 <polymer-element name="ct-last-updated" attributes="date"> | |
| 8 <template> | 6 <template> |
| 9 <template if="{{ date }}"> | 7 <template is="dom-if" if="{{ date }}"> |
| 10 <style> | 8 <style> |
| 11 .stale_5minutes { | 9 .stale_5minutes { |
| 12 color: orange; | 10 color: orange; |
| 13 } | 11 } |
| 14 .stale_10minutes { | 12 .stale_10minutes { |
| 15 color: red; | 13 color: red; |
| 16 } | 14 } |
| 17 .stale_20minutes { | 15 .stale_20minutes { |
| 18 background-color: red; | 16 background-color: red; |
| 19 color: black; | 17 color: black; |
| 20 } | 18 } |
| 21 .date_shown { | 19 .date_shown { |
| 22 display: inline; | 20 display: inline; |
| 23 } | 21 } |
| 24 .date_hidden { | 22 .date_hidden { |
| 25 display: none; | 23 display: none; |
| 26 } | 24 } |
| 27 </style> | 25 </style> |
| 28 <span class="{{ date | _style }}">Updated @ {{ date | _hours }}:{{ date |
_minutes }}</span> | 26 <span class$="{{_style ( date)}}">Updated @ <span>{{_hours ( date)}}</span
>:<span>{{_minutes ( date)}}</span></span> |
| 29 <span class='{{ date | _dateStyle }}'>{{ date | _date }}</span> | 27 <span class$="{{_dateStyle ( date)}}">{{_date ( date)}}</span> |
| 30 </template> | 28 </template> |
| 31 </template> | 29 </template> |
| 32 <script> | 30 <script> |
| 33 (function() { | 31 (function () { |
| 34 Polymer({ | 32 Polymer({ |
| 35 date: null, | 33 is: 'ct-last-updated', |
| 36 _style: function(date) { | 34 properties: { |
| 37 var staleness = date.minutesAgo(); | 35 date: { |
| 38 if (staleness >= 20) | 36 value: null, |
| 39 return "stale_20minutes"; | 37 notify: true |
| 40 if (staleness >= 10) | 38 } |
| 41 return "stale_10minutes"; | 39 }, |
| 42 if (staleness >= 5) | 40 _style: function (date) { |
| 43 return "stale_5minutes"; | 41 var staleness = date.minutesAgo(); |
| 44 return ""; | 42 if (staleness >= 20) |
| 45 }, | 43 return 'stale_20minutes'; |
| 46 _hours: function(date) { | 44 if (staleness >= 10) |
| 47 return date.getHours(); | 45 return 'stale_10minutes'; |
| 48 }, | 46 if (staleness >= 5) |
| 49 _minutes: function(date) { | 47 return 'stale_5minutes'; |
| 50 return date.getMinutes().toString().padLeft(2, '0'); | 48 return ''; |
| 51 }, | 49 }, |
| 52 _date: function(date) { | 50 _hours: function (date) { |
| 53 return date.toDateString(); | 51 return date.getHours(); |
| 54 }, | 52 }, |
| 55 _dateStyle: function(date) { | 53 _minutes: function (date) { |
| 56 return date.hoursAgo() > 12 ? 'date_shown' : 'date_hidden'; | 54 return date.getMinutes().toString().padLeft(2, '0'); |
| 57 }, | 55 }, |
| 58 }); | 56 _date: function (date) { |
| 59 })(); | 57 return date.toDateString(); |
| 60 | 58 }, |
| 59 _dateStyle: function (date) { |
| 60 return date.hoursAgo() > 12 ? 'date_shown' : 'date_hidden'; |
| 61 } |
| 62 }); |
| 63 }()); |
| 61 </script> | 64 </script> |
| 62 </polymer-element> | 65 </dom-module> |
| OLD | NEW |