elapsed_time_element 0.10.2

Dart Polymer component displaying elapsed time for a DateTime instance. For example, 1 day 2 hours 3 minutes.

Elapsed Time Web Component

Compares a DateTime to the current time and displays the elapsed time, such as

4 hours 38 minutes

Demonstration code can be exercised by running example/app.html in Dartium. This references a demo web component, which in turn references the 'elapsed-time' element.

Usage

1. This is the simplest case. DateTime.now() is the default time, and no attributes are set.

   <elapsed-time></elapsed-time> 

2. Units like 'minutes' and 'hours' can be abbreviated for a more succinct presentation. Set "verbose" to "false".

   <elapsed-time verbose="false"></elapsed-time> 

3. A ""prefix"" and/or suffix can be specified (for example, " ago").

   <elapsed-time prefix="happened" suffix=" ago"></elapsed-time> 

4. A message can be specified when the elapse is less than one minute (for example, as "moments ago").

   <elapsed-time lessThanOneMinute="moments ago"></elapsed-time> 

5. A specific date can be specified (for example, two hours ago).

   <elapsed-time dateTime="{{twoHoursAgo}}"></elapsed-time> 

6. A future specific date can be specified (for example, two hours from now).

   <elapsed-time dateTime="{{twoHoursAhead}}"></elapsed-time> 

7. The CSS style of the elapsed time can be explicitly set (for example, "color: red;").

   <elapsed-time elapsedTimeStyle="color: red;"></elapsed-time> 

8. CSS style can be dynamically configured via a callback (for example, bold red for 2 hours or more, otherwise green italic).

   <elapsed-time styleCallback="{{colorTime}}"></elapsed-time> 

Dart code:

   @published StyleCallbackFunction colorTime = (DateTime dateTime, Duration duration) => duration.inMinutes >= 2 ? "color: red; font-weight: bold" : "color: green; font-style: italic";  

9. The tooltip icon can be altered to another core-icons option (for example, to "warning").

   <elapsed-time tooltipIcon="warning"></elapsed-time>