flip-countdown.html

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


<!--
A flip clock, timer and countdown made with Polymer

##### Examples

    <flip-countdown></flip-countdown>

    <flip-countdown display-mode="timer" show-buttons></flip-countdown>

    <flip-countdown display-mode="countdown" start-from="20" show-buttons></flip-countdown>

@demo
@element flip-countdown
@homepage http://Granze.github.io/flip-countdown
@author Maurizio Mangione

-->

<dom-module id="flip-countdown">
  <style>
    :host {
      display: block;
    }
    #clock {
      font-family: Arial, Verdana, sans-serif;
      font-weight: bold;
      font-size: var(--digits-size, 50px);
      list-style: none;
      padding: 0;
      margin: 0;
    }

    #clock li {
        display: inline-block;
    }

    #clock em {
        display: block;
        text-align: center;
        font-size: 13px;
        line-height: 18px;
    }

    #clock .num {
      position: relative;
      display: block;
      padding: 5px 15px;
      border-radius: 4px;
      color: var(--digits-color, #fff);
      box-shadow: var(--box-shadow, 1px 1px 1px #555);
      background-color: var(--bg-color, #333);
    }

    #clock .num:after {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 3px;
      background-color: #111;
    }

     </style>
  <template>
    <ul id="clock">
      
        <li>
            <span hidden$="[[hideAll]]">
                <span hidden$="[[hideYears]]">
                    <span class="num" id="years0">[[years]]</span>
                    <em>[[stringYear]]</em>
                </span>
            </span>
        </li>
    
        <li>
            <span hidden$="[[hideAll]]">
                <span hidden$="[[hideMonths]]">
                    <span class="num" id="months0">[[months]]</span>
                    <em>[[stringMonth]]</em>
                </span>
            </span>
        </li>

        <li hidden$="[[hideDays]]">
            <span hidden$="[[hideAll]]">
                <span class="num" id="days0">[[days]]</span>
                <em>[[stringDay]]</em>
            </span>
        </li>

        <li hidden$="[[hideHours]]">
            <span hidden$="[[hideAll]]">
                <span class="num" id="hours0">[[hours]]</span>
                <em>[[stringHour]]</em>
            </span>
        </li>

        <li hidden$="[[hideMinutes]]">
            <span hidden$="[[hideAll]]">
                <span class="num" id="minutes0">[[minutes]] </span>      
                <em>[[stringMinute]]</em>
            </span>
        </li>

        <li hidden$="[[hideSeconds]]">
            <span hidden$="[[hideAll]]">
                <span class="num" id="seconds0">[[seconds]]</span>
                <em>[[stringSecond]]</em>
            </span>
        </li>
     </ul>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'flip-countdown',
    /***
     * @private
     * @type String
     * @default '000000'
     */
    minutes: 0,
    hours: 0,
    days: 0,
    years: 0,
    months: 0,

    /***
     * @private
     * @default null
     */
    timer: null,
    /***
     * @private
     * @type Boolean
     * @default false
     */
    isRunning: false,

    properties: {
      
       labelYears: {
           type: String,
           value: "Jahre"
       },
      
       labelMonths: {
           type: String,
           value: "Monate"
       },
        
       labelDays: {
           type: String,
           value: "Tage"
       },
  
      labelHours: {
          type: String,
          value: "Stunden"
      },
       
       labelMinutes: {
           type: String,
           value: "Minuten"
       },
       
       labelSeconds: {
           type: String,
           value: "Sekunden"
       },
  
      labelYear: {
          type: String,
          value: "Jahr"
      },
     
      labelMonth: {
          type: String,
          value: "Monat"
      },
       
      labelDay: {
          type: String,
          value: "Tag"
      },
  
      labelHour: {
          type: String,
          value: "Stunde"
      },
      
      labelMinute: {
          type: String,
          value: "Minute"
      },
      
      labelSecond: {
          type: String,
          value: "Sekunde"
      },
        
       /**
       * Set the flip clock mode. Possible values are 'timer' and 'countdown'.
       * A clock will be displayed if no value is specified.
       *
       * @attribute displayMode
       * @type String
       * @default
       */
      displayMode: {
        type: String
      },
      /**
       * Show the command buttons to start, stop and reset a timer or a countdown
       *
       * @attribute showButtons
       * @type Boolean
       * @default false
       */
      showButtons: {
        type: Boolean,
        value: false
      },
      /**
       * Hide the hour digits in the counter, timer and countdown
       *
       * @attribute hideHours
       * @type Boolean
       * @default false
       */
      hideHours: {
        type: Boolean,
        value: false
      },
      hideSeconds: {
        type: Boolean,
        value: false
      },
      hideMinutes: {
        type: Boolean,
        value: false
      },
       hideDays: {
        type: Boolean,
        value: false
      },
       hideMonths: {
        type: Boolean,
        value: false
      },
       hideYears: {
        type: Boolean,
        value: false
      },
      hideAll: {
        type: Boolean,
        value: false
      },

        /**
       * Starting minutes for the countdown
       *
       * @attribute startFrom
       * @type Number
       * @default null
       */
      startFrom: {
        type: Number,
        value: null
      },
    },
    /**
     * The `_createClock` method start a clock that display the current time.
     *
     * @method _createClock
     * @private
     */
    _createClock: function() {
      this.time = moment().format('YYMMDDHHmmss');
      this.async(this._createClock, 5);
    },
    /**
     * The `_createTimer` method create a timer
     *
     * @method _createTimer
     * @private
     */
    _createTimer: function() {
      if(this.isRunning) {
      }
    },
    /**
     * The `_createCountdown` method create a countdown
     *
     * @method _createCountdown
     * @private
     */
    _createCountdown: function() {

        this.current = moment();
        

        var diff = moment.preciseDiff(this.end, this.current, true);
        
        this.years   = this._format(diff.years);
        this.months  = this._format(diff.months);
        this.days    = this._format(diff.days);
        this.hours   = this._format(diff.hours);
        this.minutes = this._format(diff.minutes);
        this.seconds = this._format(diff.seconds);
        
        // Check ohne modifikation
        this.hideYears  = diff.years == 0 || this.hideYears === true ? true : false;
        this.hideMonths = (diff.months == 0 && diff.years == 0) || this.hideMonths === true ? true : false;
        this.hideDays = diff.days == 0 && diff.months == 0 && diff.years == 0 ? true : false ;
        
        // Funktionsscope da die differenze für das autohide unten genutzt werden muss
        var diffDays = 0;
        var diffMonths = 0;
        
        //Wenn hideYears inital vom Nutzer gesetzt wurde und dann unten automatisch, wenn Jahre === 0
        if(this.hideYears === true && this.hideMonths === false && diff.years > 0) {

            diffMonths = this.end.diff(this.current, 'M');
            this.years = null;
            this.months = this._format(diffMonths);
        }
        
        //Wenn hideMonths inital vom Nutzer gesetzt wurde und dann unten automatisch, wenn Monate === 0
        if(this.hideMonths === true && this.hideYears === true && (diff.months > 0 || diff.years > 0)) {

            diffDays = this.end.diff(this.current, 'd');
            this.months = 0;
            this.years = 0;
            this.days = this._format(diffDays + 1);
        }
        
        // Hier muss das initale hideYears beachtet werden, besser wäre hier eine extra Variable als diese unschöne Logik verdreheung die nie false erlaubt
        // hideDays wird von außen nicht unterstützt
        this.hideYears  = diff.years == 0 || this.hideYears === true ? true : false;
        this.hideMonths = (diff.months + diffMonths == 0 && diff.years == 0) || this.hideMonths === true ? true : false;
        this.hideDays = diff.days + diffDays == 0 && diff.months + diffMonths == 0 && diff.years == 0 ? true : false ;

        // Kein addieren/subtrahieren nötig, da irrelevant, wenn nicht sichtbar
        this.stringYear  = diff.years > 1 ? this.labelYears : this.labelYear;
        this.stringMonth = diff.months > 1 ? this.labelMonths : this.labelMonth;
        // Addition nötig da sonst fehlerhaft da diff.days nicht mehr den tatsächlichen Wert darstellt
        this.stringDay   = diff.days + diffDays > 1 ? this.labelDays : this.labelDay;
        this.stringHour   = diff.hours > 1 ? this.labelHours : this.labelHour;
        this.stringMinute  = diff.minutes > 1 ? this.labelMinutes : this.labelMinute;
        this.stringSecond  = diff.seconds > 1 ? this.labelSeconds : this.labelSecond;
        
        if(this.current >= this.end) {
            this.hideAll = true;
        }

        this.async(this._createCountdown, 1000);
    },

    _format: function(d) {

        if ( d < 10 ) {
    
            return "0" + d ;

        } else {
        
            return d;
        }
    },

    /**
     * The `_startCount` method starts the timer or the countdown
     *
     * @method _startCount
     * @private
     */
    _startCount: function() { 
        this.end     = moment( this.startFrom );
        this._createCountdown()
   },
    /**
     * The `_stopCount` stop the running timer or countdown
     *
     * @method _stopCount
     * @private
     */
    _stopCount: function() {
      this.isRunning = false;
    },

    ready: function() {

      this._startCount();
    }
  });
</script>