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="../santa-state.html">
<link rel="import" href="countdown-timer_module.html">

<!--
Displays a timer.

Example

    <countdown-timer>
      <h3>Days</h3>
      <h3>Hours</h3>
      <h3>Minutues</h3>
      <h3>Seconds</h3>
    </countdown-timer>
-->
<dom-module id="countdown-timer">
  <template>
    <style include="countdown-timer_module">
      :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 animate.
         */
        animate: {
          type: Boolean,
          value: true
        },

        /**
         * True if the countdown should be active.
         */
        active: {
          type: Boolean,
          value: false,
          observer: '_activeChanged'
        },

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

        /**
         * 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
        },

        /**
         * Remaining time. This will tick at a rate of 1s/s
         */
        remainingTime: {
          type: Number,
          observer: '_remainingTimeChanged'
        },

        /**
         * The time at which remainingTime was set.
         */
        _remainingTimeSetAt: Number,
      },

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

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

        Polymer.RenderStatus.afterNextRender(this, 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._activeChanged();
        });
      },

      detatched: function() {
        window.clearInterval(this._tickInterval);
      },

      _remainingTimeChanged: function() {
        this._remainingTimeSetAt = Date.now();
      },

      _activeChanged: function() {
        window.clearInterval(this._tickInterval);

        if (this.active && this.isAttached && this.remainingTime >= 0) {
          this._tickTock();
          this._tickInterval = window.setInterval(this._tickTock.bind(this), 1000);
        }
      },

      /**
       * Called every second while remainingTime is greater or equal to zero, active is true, and
       * this element is attached. Calculates the current local remainingTime and stops the ticker
       * if that is zero or below.
       */
      _tickTock: function() {
        var delta = Date.now() - this._remainingTimeSetAt;
        var remainingTime = this.remainingTime - delta;

        if (remainingTime <= 0) {
          window.clearInterval(this._tickInterval);
        }
        this._render(remainingTime);
      },

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

      /**
       * @param {number} diff number of ms remaining
       * @return {{days: number, hours: number, mins: number, seconds: number}}
       */
      _splitTime: function(diff) {
        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 {days: days, hours: hours, mins: mins, seconds: seconds};
      },

      /**
       * Renders the specified local remaining time. This does not use the remainingTime from this
       * object directly.
       */
      _render: function(remainingTime) {
        var parts = this._splitTime(remainingTime);

        var days = parts.days;
        var hours = parts.hours;
        var mins = parts.mins;
        var seconds = parts.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 (remainingTime <= 60 * 1000) {
          msg.push(parts.seconds);
          msg = msg.join(' ');
        } else {
          msg.push(parts.days, parts.days == 1 ? 'day' : 'days');
          msg.push(parts.hours, parts.hours == 1 ? 'hour' : 'hours');
          msg.push(parts.mins, parts.mins == 1 ? 'minute' : 'minutes');
          msg.push(parts.seconds, parts.seconds == 1 ? 'second' : 'seconds');
          msg = msg.join(' ') + ' until Santa departs'
        }

        // TODO(samthor): Use santa-state to do this instead.
        this.fire('countdown-timer-tick', {
          currentTime: parts,
          msg: msg
        });
      },

      /**
       * 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);
      },

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

    });

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