timer-days.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/shadow.html">

<!--
This component will display a countdown expressed in days, hours, minutes and seconds until a deadline date. More than one timer can be displayed at once. More than one timer can be displayed at once.


Example:
```
<timer-days target-date="2017-11-20T16:40:00"></timer-days><br>
<timer-days target-date="2017-12-30T16:40:00"></timer-days><br>
```

You can specify the language in which the labels will be shown. By default they are in english, but you can use `lang` to choose between English (en), Spanish (es), French (fr), Italian (it), Portuguese (pt) or German (de).


You can specify the language in which the labels will be shown. By default they are in english, but you can 
use `lang` to choose between English (en), Spanish (es), French (fr), Italian (it), Portuguese (pt) or German (de).


Example:
```
<timer-days target-date="2017-11-20T16:40:00"></timer-days><br>
<timer-days target-date="2017-11-20T16:40:00" lang="es"></timer-days><br>
<timer-days target-date="2017-11-20T16:40:00" lang="fr"></timer-days><br>
<timer-days target-date="2017-11-20T16:40:00" lang="pt"></timer-days><br>
<timer-days target-date="2017-11-20T16:40:00" lang="it"></timer-days><br>
<timer-days target-date="2017-11-20T16:40:00" lang="de"></timer-days><br>
```

It is also posible to set the text to be displayed before and after the proper countdown, by using the `before` and `after` properties.


Example:
```
<timer-days target-date="2018-11-20T16:40:00" before="Your planet will be destroyed in about"></timer-days><br>
<timer-days target-date="2018-11-20T16:40:00" after="until it finds you"></timer-days><br>
<timer-days target-date="2018-11-20T16:40:00" before="You still have" after="before something very bad happens"></timer-days>
```

### Styling
The following custom properties are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--timer-days-background-color` | The timer-days background-color | `#FFD54F`
`--timer-days-border-color` | The timer-days border-color | `#212121`
`--timer-days-font-color` | The timer-days font color | `#212121`
`--timer-days-hover-background-color` | The timer-days background-color when mouse is over it | `#4E342E`
`--timer-days-hover-border-color` | The timer-days border-color when mouse is over it | `#CFD8DC`
`--timer-days-hover-font-color` | The timer-days font color when mouse is over it | `#CFD8DC`
`--timer-days-font-description-size` | The timer-days font size for the text before an after the timer| `15px`
`--timer-days-font-number-size` | The timer-days font size for the numbers | `35px`
`--timer-days-font-text-size` | The timer-days font size for the words explaining each number | `18px`

@element timer-days
@demo demo/index.html

-->

<dom-module id="timer-days">
  <style>
    :host {
      min-width: 400px;
      display: block;
      text-align: center; 
      padding-top: 5px;
      padding-bottom: 5px;

      background-color: var(--timer-days-background-color, #FFD54F);
      border: 1px solid var(--timer-days-border-color, #212121);
      color: var(--timer-days-font-color, #212121);
      @apply(--shadow-elevation-4dp);
      
      transition-property: background-color, border, color;
      transition-duration: 300ms;
      transition-timing-function: linear; 

      /*For Safari*/
      -webkit-transition-property: background-color, border, color;
      -webkit-transition-duration: 300ms;
      -webkit-transition-timing-function: linear; 
    }

    :host(:hover) {
      background-color: var(--timer-days-hover-background-color, #4E342E);
      border: 1px solid var(--timer-days-hover-border-color, #CFD8DC);
      color: var(--timer-days-hover-font-color, #CFD8DC);
    }

    .description {
      margin: 5px 0px 5px 0px;
      font-size: var(--timer-days-font-description-size, 15px)
    }

    .number{
      font-size: var(--timer-days-font-number-size, 35px);
    }

    .text{
      font-size: var(--timer-days-font-text-size, 18px); 
    }

    .inline {
      display: inline-block;
      text-align: center;
      margin: 1px 10px 6px 10px;
    }
  </style>

  <template>
    <p class="description">{{before}}</p>
    <span class="inline"><span class="number">{{_days}}</span><br><span class="text">{{_chosenWords.0}}</span></span>
    <span class="inline"><span class="number">{{_hours}}</span><br><span class="text">{{_chosenWords.1}}</span></span>
    <span class="inline"><span class="number">{{_mins}}</span><br><span class="text">{{_chosenWords.2}}</span></span>
    <span class="inline"><span class="number">{{_secs}}</span><br><span class="text">{{_chosenWords.3}}</span></span>
    <p class="description">{{after}}</p>
  </template>
</dom-module>  



<script>
  Polymer({
      is: 'timer-days',
      properties:{
        /** 
         *  Target date of our timer.
         *  Highly recommended to use the "yyyy-mm-ddThh:mm:ss" format
         *  to specify when using the component. 
         */
        targetDate: {
          type: String,
          observer: 'targetDateChanged'
        },

        /** 
         *  Text to be shown before the count of time. 
         *  If no value is specified, nothing is displayed.
         */
        before:{
          type: String,
          value: ""
        },

        /** 
         *  Text to be shown after the count of time. 
         *  If no value is specified, nothing is displayed.
         */        
         after:{
          type: String,
          value: ""
        },

        /** 
         *  Language of the "hour, day, minute and second" that
         *  are displayed. By default, english is used.
         */
        lang:{
          type: String,
          value: "en"
        },

        /** Target date after the arrangements for the  */
        _realTarget: Date,

        /** Number of entire days until target date. */
        _days: Number,

        /** Number of entire hours until target date. */
        _hours: Number,
        
        /** Number of entire minnutes until target date. */
        _mins: Number,
        
        /** Number of entire seconds until target date. */
        _secs: Number,
        
        /** Words "days" and "day" in the selected language. */
        wordDay: Array,

        /** Words "hours" and "hour" in the selected language. */
        _wordHour: Array,

        /** Words "minutes" and "minute" in the selected language. */
        _wordMin: Array,

        /** Words "seconds" and "second" in the selected language. */
        _wordSec: Array,
        
        /**
         *  Words displayed for each element in the counter, 
         *  depending on the language and the number.
         */
        _chosenWords: Array
      },

      //Functions:

      /** Calculates the values for all the properties and starts the timer. */
      targetDateChanged: function(){
        this._adjustToTimezone();
        this._adaptLanguage();
        this._updateTimer();
      },

      /** Adjusts the target date to the browser's timezone. */
      _adjustToTimezone: function() {
        //To get Zulu hour, common for all browsers.
        var preProcessingDate = new Date(this.targetDate + "Z");
        var offset = preProcessingDate.getTimezoneOffset();
        this._realTarget = new Date(preProcessingDate.getTime() + (60000 * offset));
      },

      /** Choses the possible words to display according with the selected language. */
      _adaptLanguage: function(){
        switch (this.lang){
          case "es":{
            this._wordDay = ["día", "días"];
            this._wordHour = ["hora", "horas"];
            this._wordMin = ["minuto", "minutos"];
            this._wordSec = ["segundo", "segundos"];
            break;
          }
          case "fr":{
            this._wordDay = ["jour", "jours"];
            this._wordHour = ["heure", "heures"];
            this._wordMin = ["minute", "minutes"];
            this._wordSec = ["seconde", "secondes"];
            break;
          }
          case "pt":{
            this._wordDay = ["dia", "dias"];
            this._wordHour = ["hora", "horas"];
            this._wordMin = ["minuto", "minutos"];
            this._wordSec = ["segundo", "segundos"];
            break;
          }
          case "it":{
            this._wordDay = ["giorno", "giornos"];
            this._wordHour = ["ora", "oras"];
            this._wordMin = ["minuto", "minutos"];
            this._wordSec = ["secondo", "secondos"];
            break;
          }
          case "de":{
            this._wordDay = ["Tag", "Tage"];
            this._wordHour = ["Stunde", "Stunden"];
            this._wordMin = ["Minute", "Minuten"];
            this._wordSec = ["Sekunde", "Sekunden"];
            break;
          }
          default:{
            this._wordDay = ["day", "days"];
            this._wordHour = ["hour", "hours"];
            this._wordMin = ["minute", "minutes"];
            this._wordSec = ["second", "seconds"]; 
          }
        }
      },

      /** 
       *  Manages an interation of the timer to modify what is displayed and prepare 
       *  the next iteration one second after it has ended.
       */
      _updateTimer: function(){
        this._calculateGap();
        this._chosenWords = this._wordsToDisplay();
        this.async(this._updateTimer, 1000); 
      },

        /** 
         *  Calculates the number of days, hours, minutes and seconds from 
         *  the current date to the target. 
         */
      _calculateGap: function(){
        var startingDate = new Date();
        var diffTimes = this._realTarget - startingDate;
        if (diffTimes >= 0){
          this._days = Math.floor(diffTimes / 86400000);
          var noDays = diffTimes % 86400000;
          this._hours = Math.floor(noDays / 3600000);
          var noHours = noDays % 3600000;
          this._mins = Math.floor(noHours / 60000);
          var noMins = noHours % 60000;
          this._secs = Math.floor(noMins / 1000);
        } else {
          this._days = 0;
          this._hours = 0;
          this._mins = 0;
          this._secs = 0;
        }
      },

      /**
       *  Decides the words that are shown taking into account if each one 
       *  refers to a singular or plural number.
       *   
       *  @return {array} An array with the string that must be showed. 
       *    The order is days, hours, minutes and seconds.
       */
      _wordsToDisplay: function(){
        return [((this._days != 1) ? this._wordDay[1] : this._wordDay[0]), 
          ((this._hours != 1) ? this._wordHour[1] : this._wordHour[0]), 
          ((this._mins != 1) ? this._wordMin[1] : this._wordMin[0]), 
          ((this._secs != 1) ? this._wordSec[1] : this._wordSec[0])];
      }
    });

</script>