countdown-timer.html

<link rel="import" href="/bower_components/polymer/polymer.html">

<!--
`countdown-timer`
A timer clock, which shows remaining days, hours, minutes and seconds
from today to the date which you have entered

### Example:

If you want to have timer till 8th december, 2016 then just write
```html
<countdown-timer date="8" month="12" year="2016"></countdown-timer>
```

### Styling

The following custom properties and mixins are available for styling:

Custom Properties| Description | Default
-----------------|-------------|------------
`--countdown-timer-number`| Mixin applied to all the numbers(days,hours,minutes,seconds)|`--layout-flex-2`
`--countdown-timer-text`| Mixin applied to all the text which are following numbers| `--layout-flex`
`--countdown-timer-border-radius`| Mixin applied to change border radius of numbers| `50%`
`--countdown-timer-days`| Mixin applied to day's number| `{}`
`--countdown-timer-hours`| Mixin applied to hour's number| `{}`
`--countdown-timer-minutes`| Mixin applied to minute's number| `{}`
`--countdown-timer-seconds`| Mixin applied to second's number| `{}`
`--countdown-timer-days-text`| Mixin applied to day's Text| `{}`
`--countdown-timer-hours-text`| Mixin applied to hour's Text| `{}`
`--countdown-timer-minutes-text`| Mixin applied to minute's Text| `{}`
`--countdown-timer-seconds-text`| Mixin applied to second's Text| `{}`

@demo demo/index.html 
-->

<dom-module id="countdown-timer">
  <template>
    <style>
      :host {
        display: block;
        font-family: Roboto, sans-serif;
        color: var(--countdown-timer-color, var(--paper-indigo-500));
      }

      /* Horizontal layout to container */

      .timer-container {
        @apply(--layout-horizontal);
        @apply(--layout-center-justified);
      }

      .timer-container > * {
        @apply(--layout-horizontal);
        @apply(--layout-center);
      }

      /* Mixin given to element user */

      #days {
        @apply(--countdown-timer-days);
      }

      #hours {
        @apply(--countdown-timer-hours);
      }

      #minutes {
        @apply(--countdown-timer-minutes);
      }

      #seconds {
        @apply(--countdown-timer-seconds);
      }

      #daysText {
        @apply(--countdown-timer-days-text);
      }

      #hoursText {
        @apply(--countdown-timer-hours-text);
      }

      #minutesText {
        @apply(--countdown-timer-minutes-text);
      }

      #secondsText {
        @apply(--countdown-timer-seconds-text);
      }

      .number {
        @apply(--layout-flex-2);
        font-size: 45px;
        border: 1px solid var(--countdown-timer-color, var(--paper-indigo-500));
        border-radius: var(--countdown-timer-border-radius, 50%);
        width: 1.2em;
        text-align: center;
        padding: 10px;
        margin: 0.1em;

        @apply(--countdown-timer-number);
        @apply(--countdown-timer-border-radius);
      }

      .text {
        @apply(--layout-flex);
        font-size: 15px;
        margin-right: 0.5em;

        @apply(--countdown-timer-text);
      }

      /* Todo: Add media queries. */

    </style>

    <div class="timer-container">

      <div>
        <div id="days" class="number">{{days}}</div>
        <div id="daysText" class="text">Days</div>
      </div>

      <div>
        <div id="hours" class="number">{{hours}}</div>
        <div id="hoursText" class="text">Hours</div>
      </div>

      <div>
        <div id="minutes" class="number">{{minutes}}</div>
        <div id="minutesText" class="text">Minutes</div>
      </div>

      <div>
        <div id="seconds" class="number">{{seconds}}</div>
        <div id="secondsText" class="text">Seconds</div>
      </div>

    </div>

  </template>

  <script>
    Polymer({

      is: 'countdown-timer',

      properties: {

        /** Enter date of that day when you want to stop countdown */
        date: {
          type: Number
        },

        /** Enter month of that day when you want to stop countdown */
        month: {
          type: Number
        },

        /** Enter Year of that day when you want to stop countdown */
        year: {
          type: Number
        }

      },

      ready: function () {
        this.endDateEpoch = new Date(this.year, this.month - 1, this.date).valueOf() / 1000;
      },

      attached: function () {
        this.tick();
        this.timer = setInterval(this.tick.bind(this), 1000);
      },

      detached: function () {
        clearInterval(this.timer);
      },

      /** Updates the view according to the endTime */
      tick: function () {
        var difference = this.endDateEpoch - Math.floor(Date.now() / 1000);
        this.days = Math.floor(difference / (24 * 60 * 60));
        difference = difference - (this.days * (24 * 60 * 60));
        this.hours = Math.floor(difference / (60 * 60));
        difference = difference - (this.hours * (60 * 60));
        this.minutes = Math.floor(difference / 60);
        this.seconds = difference % 60;
      }

    });
  </script>
</dom-module>