countdown-timer.html

<!--
Copyright 2015 Google Inc. All rights reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at

      http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed
under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
CONDITIONS OF ANY KIND, either express or implied. See the License for the
specific language governing permissions and limitations under the License.
-->
<link rel="import" href="../../components/polymer/polymer.html">
<link rel="import" href="../../components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../js/utils.html">

<!-- TODO(samthor): Upgrade styling for Polymer 1+ (#1165) -->
<link rel="stylesheet" href="countdown-timer.css" />

<!--
Displays a countdown timer.

Example

    <countdown-timer count-down-end-date="1450951200000"
                     finished="{{isFinished}}">
      <h3>Days</h3>
      <h3>Hours</h3>
      <h3>Minutues</h3>
      <h3>Seconds</h3>
    </countdown-timer>
-->
<dom-module id="countdown-timer">
  <template>
    <style>
      :host {
        display: block;
        will-change: transform;
        transform: translateZ(0);
      }

      #counter {
        @apply(--layout-horizontal);
      }
    </style>

    <div hidden>
      <content id="content" select="*"></content>
    </div>

    <div id="counter">
      <template is="dom-repeat" items="{{titles}}">
        <div class="counter-box" hidden$="{{_computeHide(index, displayDigits)}}">
          <div class="holder active"></div>
          <div class="holder prev"></div>
          <h2>{{item}}</h2>
        </div>
      </template>
    </div>

  </template>
  <script>
  (function() {

    var _TRANSITION_TIME = 400;

    Polymer({
      is: 'countdown-timer',

      properties: {
        /**
         * True if the countdown should be active.
         */
        active: {
          type: Boolean,
          value: false,
          notify: true
        },

        /**
         * True if the countdown should animate.
         */
        animate: {
          type: Boolean,
          value: true
        },

        /**
         * The end time for this countdown, in milliseconds.
         */
        countdownEndAt: {
          type: Number,
          value: 1450951200000, // Dec 24, 2015,
          observer: '_countdownEndAtChanged'
        },

        /**
         * Santa service.
         */
         santaService: {
          type: Object,
          value: null
        },

        /**
         * The number of digits to display.
         */
        displayDigits: {
          type: Number,
          value: 8
        },

        /**
         * True when the countdown has reached `countdownEndAt`.
         */
        finished: {
          value: false,
          reflectToAttribute: true,
          notify: true,
          readOnly: true
        },

        /**
         * The current time as dictated by the `santaService`.
         */
        currentTime: {
          type: Number,
          value: null,
          readOnly: true
        },

        /**
         * The DOM nodes containing countdown titles, such as Days, Hours,
         * Minutes, Seconds etc.
         */
        titles: {
          type: Array,
          value: function() { return []; },
          readOnly: true
        },

        /**
         * The `.counter-box` elements containing countdown nodes.
         */
        holders: {
          type: Array,
          value: function() { return []; },
          readOnly: true
        }
      },

      _oldNumbers: [],  // replaced in tickTock
      _tickInterval: null,

      ready: function() {
        this._setCurrentTime(this._getCurrentTime());
      },

      attached: function() {
        this.updateLabels();

        this.async(function() {
          // Needs to wait one rAF so titles has populated the template repeat.
          this._setHolders(Array.prototype.slice.call(
                          this.$.counter.querySelectorAll('.counter-box')));
          this.fire('countdown-timer-ready', this);

          // Set the initial time but don't start
          this.tickTock();
        });
      },

      updateLabels: function() {
        var titles = this.getContentChildNodes().map(function(node) {
          return node.textContent;
        });
        this._setTitles(titles);
      },

      _countdownEndAtChanged: function() {
        // string - number type cohesion works, but let's be explicit when
        // we get a new countdownEndAt.
        this.countdownEndAt = parseInt(this.countdownEndAt);
      },

      /**
       * @return {Object.<string>}
       */
      _getCurrentTime: function() {
        var now = this.santaService ? this.santaService.now() : Date.now();

        var diff = Math.max(0, this.countdownEndAt - now);
        var msPerDay = 24 * 60 * 60 * 1000;

        var daysX = diff / msPerDay;
        var days = Math.floor(daysX);

        var hoursX = (daysX - days) * 24;
        var hours = Math.floor(hoursX);

        var minsX = (hoursX - hours) * 60;
        var mins = Math.floor(minsX);

        var secondsX = (minsX - mins) * 60;
        var seconds = Math.floor(secondsX);

        return {diff: diff, days: days, hours: hours, mins: mins, seconds: seconds};
      },

      tickTock: function() {
        this._setCurrentTime(this._getCurrentTime());

        var days = this.currentTime.days;
        var hours = this.currentTime.hours;
        var mins = this.currentTime.mins;
        var seconds = this.currentTime.seconds;

        var numbers = [padDigits(days), padDigits(hours), padDigits(mins),
            padDigits(seconds)];
        this.displayDigits = (days == 0) ? 6 : 8

        // Ensure holders exist. Solves inconsistent asyncs.
        if (this.holders.length) {
          for (var i = 0, holder; holder = this.holders[i]; ++i) {
            this.setValue(holder, this._oldNumbers[i], numbers[i]);
          }
          this._oldNumbers = numbers;
        }

        // TODO: this is not i18n'd.
        var msg = [];
        if (this.currentTime.diff <= 60 * 1000) {
          msg.push(this.currentTime.seconds);
          msg = msg.join(' ');
        } else {
          msg.push(this.currentTime.days, this.currentTime.days == 1 ? 'day' : 'days');
          msg.push(this.currentTime.hours, this.currentTime.hours == 1 ? 'hour' : 'hours');
          msg.push(this.currentTime.mins, this.currentTime.mins == 1 ? 'minute' : 'minutes');
          msg.push(this.currentTime.seconds, this.currentTime.seconds == 1 ? 'second' : 'seconds');
          msg = msg.join(' ') + ' until Santa departs'
        }

        this.fire('countdown-timer-tick', {
          currentTime: this.currentTime,
          msg: msg
        });

        if (this.currentTime.diff == 0) {
          this.fire('countdown-timer-finish', this);
          this._setFinished(true);
          this.stop();
        }
      },

      /**
       * Sets a value for the passed `.counter-box` node.
       */
      setValue: function(node, oldVal, val) {
        if (oldVal === val) {
          return;
        }

        // NOTE: Assumes child layout.
        node.children[0].textContent = val || '';

        if (this.animate) {
          node.children[1].textContent = oldVal || '';

          node.classList.add('anim');
          this.async(function() {
            node.classList.remove('anim');
          }, _TRANSITION_TIME * 2);
        }
      },

      /**
       * Sets a value for the digit node.
       *
       * @param {Element} el
       * @param {string|undefined} oldVal
       * @param {string} val
       */
      setDigit: function(digit, oldVal, val) {
        if (oldVal == val) {
          return;
        }
        var digitTopFront = digit.querySelector('.digit-top.digit-front');
        var digitBottomBehind = digit.querySelector('.digit-bottom.digit-behind');
        var digitTopBehind = digit.querySelector('.digit-top.digit-behind');
        var digitBottomFront = digit.querySelector('.digit-bottom.digit-front');
        digitTopBehind.firstElementChild.textContent = val;
        digitBottomFront.firstElementChild.textContent = val;

        if (oldVal === undefined) {
          digitTopFront.firstElementChild.textContent = val;
          digitBottomBehind.firstElementChild.textContent = val;
          // No animation for the first instance.
          return;
        }

        digit.classList.add('digit-anim');

        this.async(function() {
          digit.classList.remove('digit-anim');
          digitTopFront.firstElementChild.textContent = val;
          digitBottomBehind.firstElementChild.textContent = val;
        }, _TRANSITION_TIME * 2);
      },

      /**
       * Stop the countdown
       */
      stop: function() {
        window.clearInterval(this._tickInterval);
        this.active = false;
      },

      /**
       * Start the countdown
       */
      start: function() {
        if (this.active) {
          return;
        }
        this.active = true;
        this.tickTock();

        this._tickInterval = window.setInterval(this.tickTock.bind(this), 1000);
      },

      /**
       * @return boolean
       */
      isFinished: function() {
        return this.currentTime.diff <= 0;
      },

      _computeHide: function(i, displayDigits) {
        return i == 0 && displayDigits < 8;
      }

    });

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