paper-time-picker.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-media-query/iron-media-query.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../iron-selector/iron-selector.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="../neon-animation/neon-animated-pages.html">
<link rel="import" href="../neon-animation/neon-animatable.html">
<link rel="import" href="../neon-animation/animations/fade-in-animation.html">
<link rel="import" href="../neon-animation/animations/fade-out-animation.html">
<link rel="import" href="paper-clock-selector.html">
<link rel="import" href="paper-time-picker-dialog-style.html">

<!--

[Material Design Pickers](http://www.google.com/design/spec/components/pickers.html)

Provides a responsive time picker based on the material design spec. This
component aims to be a clone of the time picker introduced in Android Lollipop.

## Examples:

Default picker:

    <paper-time-picker></paper-time-picker>

Setting the initial time to 4:20pm (note that hours given as 24-hour):

    <paper-time-picker time="4:20pm"></paper-time-picker>

If you include this element as part of `paper-dialog`, use the class
`"paper-time-picker-dialog"` on the dialog in order to give it proper styling.

    <paper-dialog id="dialog" modal class="paper-time-picker-dialog"
      on-iron-overlay-closed="dismissDialog">
      <paper-time-picker id="timePicker" time="[[time]]"></paper-time-picker>
      <div class="buttons">
        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button dialog-confirm>OK</paper-button>
      </div>
    </paper-dialog>

@element paper-time-picker
@blurb Provides a responsive time picker based on the material design spec.
@homepage http://bendavis78.github.io/paper-time-picker/
@demo demo/index.html
-->

<custom-style>
  <style is="custom-style" include="paper-time-picker-dialog-style">
    /* include dialog style at document-level for backward compatibility */
  </style>
</custom-style>

<dom-module id="paper-time-picker">
  <template>
    <style>
      :host * {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
      }

      :host {
        display: block;
        background-color: var(--primary-background-color);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        @apply --paper-font-body1;
        font-size: 14px;
      }

      /** Landscape ******************/
      #timePicker {
        width: 512px;
        height: 304px;
        @apply --layout-horizontal;
        @apply --paper-time-picker;
      }
      #heading {
        width: 168px;
        padding: 16px;
        @apply --layout-vertical;
        @apply --paper-time-picker-heading;
      }
      :host([enable-seconds]) #heading {
        width: 200px;
      }
      #clockArea {
        padding: 20px;
      }

      /** Narrow *********************/
      :host([narrow]) #timePicker {
        width: 328px;
        height: 428px;
        @apply --layout-vertical;
      }
      :host([narrow]) #heading {
        width: auto;
        height: 96px;
        padding: 0 48px;
        @apply --layout-horizontal;
        @apply --layout-end-justified;
      }
      :host([enable-seconds][narrow]) #heading {
        padding: 0 16px;
      }
      :host([narrow]) #heading .time {
        margin-top: 6px;
        @apply --paper-font-display3;
      }
      :host([narrow]) #timePicker #heading .time {
        font-size: 60px;
        letter-spacing: .1ex !important;
      }
      :host([narrow]) #heading .period {
        margin-left: 12px;
        margin-top: 12px;
      }
      :host([narrow]) #clockArea {
        /* padding: 30px 20px 10px 20px; */
        padding: 16px;
        @apply --paper-time-picker-clock;
      }

      /** Heading ********************/
      #heading {
        box-sizing: border-box;
        color: var(--light-primary-color);
        background: var(--default-primary-color);
        @apply --layout-vertical;
        @apply --layout-center-center;
      }
      #heading > iron-selector {
        margin-top: 10px;
      }
      #heading .time {
        @apply --paper-font-display2;
        @apply --layout-horizontal;
        @apply --layout-end-justified;
        width: 5.34ex;
        letter-spacing: .13ex !important;
      }
      :host([enable-seconds]) #heading .time{
        width: 8.5ex;
        font-size: 40px;
      }
      #heading .iron-selected {
        color: var(--text-primary-color);
      }
      #heading .period {
        font-weight: 600;
        @apply --paper-font-subhead;
      }
      #heading .time div,
      #heading .period div {
        cursor: pointer;
      }

      /** Clock *********************/
      #clockArea {
        background: var(--default-background-color);
        overflow: hidden;
        @apply --layout-flex;
        @apply --paper-time-picker-clock;
        @apply --layout-vertical;
      }
      #clockArea > div {
        @apply --layout-flex;
        position: relative;
      }
      .clock {
        @apply --layout-fit;
      }
      .clock-animatable{
        @apply --layout-fit;
      }
    </style>
    <iron-media-query query="{{_getMediaQuery(forceNarrow, responsiveWidth)}}"
      query-matches="{{_queryMatches}}"></iron-media-query>
    <div id="timePicker">
      <div id="heading">
        <iron-selector class="time" selectable="[name]" attr-for-selected="name" selected="{{view}}">
          <div name="hours" class="hour">{{hour12}}</div>
          <div class="sep">:</div>
          <div name="minutes" class="minute">{{_zeroPad(minute, 2)}}</div>
          <template is="dom-if" if="[[ enableSeconds ]]">
            <div class="sep">:</div>
            <div name="seconds" class="second">{{_zeroPad(second, 2)}}</div>
          </template>
        </iron-selector>
        <iron-selector class="period" attr-for-selected="name" selected="{{period}}">
          <div name="AM">AM</div>
          <div name="PM">PM</div>
        </iron-selector>
      </div>
      <div id="clockArea">
        <div>
          <neon-animated-pages id="pages" class="clock-animatable" attr-for-selected="name" selected="{{view}}"
            entry-animation="fade-in-animation" exit-animation="fade-out-animation">
            <neon-animatable class="clock-animatable" name="hours">
              <paper-clock-selector class="clock" id="hourClock" count="12" step="1"
                animated="[[animated]]" selected="{{hour12}}"></paper-clock-selector>
            </neon-animatable>
            <neon-animatable class="clock-animatable" name="minutes">
              <paper-clock-selector class="clock" id="minuteClock" count="60" step="5"
                animated="[[animated]]" use-zero zero-pad selected="{{minute}}"></paper-clock-selector>
            </neon-animatable>
            <template is="dom-if" if="[[ enableSeconds ]]">
              <neon-animatable class="clock-animatable" name="seconds">
                <paper-clock-selector class="clock" id="secondClock" count="60" step="5"
                  animated="[[animated]]" use-zero zero-pad selected="{{second}}"></paper-clock-selector>
              </neon-animatable>
            </template>
          </neon-animated-pages>
        </div>
      </div>
    </div>
  </template>
  <script>
    (function() {
      function warn() {
        if (window.console) {
          console.warn.apply(console, arguments);
        }
      }

      Polymer({
        is: 'paper-time-picker',
        properties: {
          /**
           * The selected time
           */
          time: {
            type: String,
            value: '00:00',
            notify: true,
            observer: '_timeChanged',
          },
          /**
           * The time value as the number of minutes(if enableSeconds then number of seconds) from midnight
           */
          rawValue: {
            type: Number,
            value: 0,
            notify: true,
            observer: '_rawValueChanged',
          },
          /**
           * The current 24-hour value (0-24)
           */
          hour: {
            type: Number,
            observer: '_hourChanged',
            notify: true,
            value: 0,
          },
          /**
           * The current 12-hour value (0-12)
           */
          hour12: {
            type: Number,
            notify: true,
            observer: '_hour12Changed',
          },
          /**
           * The current minute (0-59)
           */
          minute: {
            type: Number,
            notify: true,
            observer: '_minuteChanged',
            value: 0,
          },
          /**
           * The current second (0-59)
           */
          second: {
            type: Number,
            notify: true,
            observer: '_secondChanged',
            value: 0,
          },
          /**
           * The current period ('AM', 'PM')
           */
          period: {
            type: String,
            notify: true,
            observer: '_periodChanged',
            value: 'AM',
          },
          /**
           * The current selector view ('hours' or 'minutes')
           */
          view: {
            type: String,
            notify: true,
            value: 'hours',
            observer: '_viewChanged',
          },
          /**
           * Maximum screen width at which the picker uses a vertical layout
           */
          responsiveWidth: {
            type: String,
            value: '560px',
          },
          /**
           * Force narrow layout
           */
          forceNarrow: {
            type: Boolean,
            value: false,
          },
          /**
           * Whether or not to animate the clock hand between selections
           */
          animated: {
            type: Boolean,
            value: false,
          },
          narrow: {
            type: Boolean,
            reflectToAttribute: true,
            value: false,
            notify: true,
          },
          isTouch: {
            type: Boolean,
            value: false,
            reflectToAttribute: true,
          },
          enableSeconds: {
            type: Boolean,
            value: false,
          },
          _queryMatches: {
            type: Boolean,
            value: false,
            observer: '_computeNarrow',
          },
        },
        behaviors: [
          Polymer.IronResizableBehavior,
        ],
        observers: [
          '_updateTime(hour, minute, second, enableSeconds)',
        ],
        ready: function() {
          this._resizeHandler = this._resizeHandler.bind(this);
          this._onClockSelected = this._onClockSelected.bind(this);
          this.isTouch = 'ontouchstart' in window;
          this.view = 'hours';
        },
        attached: function() {
          this.addEventListener('iron-resize', this._resizeHandler);
          this.addEventListener('paper-clock-selected', this._onClockSelected);
        },
        detached: function() {
          this.removeEventListener('iron-resize', this._resizeHandler);
          this.removeEventListener('paper-clock-selected', this._onClockSelected);
        },
        _timeChanged: function(time) {
          if (!time) {
            this.rawValue = 0;
            return;
          }

          var parsed = this.parseTime(time);
          var cleanedTime = this.formatTime(parsed.hour, parsed.minute, parsed.second);
          if (cleanedTime !== time) {
            this.time = cleanedTime;
            return;
          }
          var rawValue = (parsed.hour * 60) + parsed.minute;
          if (this.enableSeconds) {
            rawValue = (rawValue * 60) + parsed.second;
          }
          this.rawValue = rawValue;
        },
        _updateTime: function(hour, minute, second, enableSeconds) {
          if (hour === undefined || minute === undefined ||
            enableSeconds === undefined ||
            (enableSeconds && second === undefined)) {
            this.rawValue = 0;
            return;
          }
          var rawValue = (hour * 60) + minute;
          if (enableSeconds) {
            rawValue = (rawValue * 60) + second;
          }
          this.rawValue = rawValue;
        },
        formatTime: function(hour, minute, second) {
          var period = (hour % 24) < 12 ? 'AM' : 'PM';
          hour = hour % 12 || 12;
          minute = ('0' + minute).substr(-2);
          second = ('0' + second).substr(-2);
          if (this.enableSeconds) {
            minute += ':' + second;
          }
          return hour + ':' + minute + ' ' + period;
        },
        parseTime: function(timeString) {
          var pattern = /^\s*(\d{1,2}):?(\d{2})(:?(\d{2}))?(\s*([AaPp])\.?[Mm]\.?|[A-Z])?\s*$/;
          var match = timeString.match(pattern);
          if (!match) {
            warn('Invalid time:', timeString);
            return;
          }
          var hour = parseInt(match[1]);
          var minute = parseInt(match[2]);
          var second = match[4] ? parseInt(match[4]) : 0;
          var period = match[6] ? (match[6][0].toUpperCase() + 'M') : 'AM';
          if (period === 'PM' && hour < 12) {
            hour = (hour + 12) % 24;
          } else if (period === 'AM' && hour === 12) {
            hour = 0;
          }
          return {hour: hour, minute: minute, second: second};
        },
        togglePeriod: function() {
          this.period = (this.period === 'AM') ? 'PM' : 'AM';
        },
        _rawValueChanged: function(value, oldValue) {
          if (isNaN(parseInt(value))) {
            this.rawValue = oldValue;
            return;
          }
          if (this.enableSeconds) {
            this.hour = Math.floor(value / 3600);
            this.minute = Math.floor(value / 60) % 60;
            this.second = value % 60;
          } else {
            this.hour = Math.floor(value / 60);
            this.minute = value % 60;
            this.second = 0;
          }
          this.time = this.formatTime(this.hour, this.minute, this.second);
        },
        _hour12Changed: function(hour12) {
          var add = (this.period === 'PM' ? 12 : 0);
          this.hour = ((hour12 % 12) + add) % 24;
        },
        _hourChanged: function(hour, oldValue) {
          hour = parseInt(hour);
          if (isNaN(hour) && !hour) {
            return;
          }
          if (isNaN(hour)) {
            warn('Invalid number:', hour);
            this.hour = oldValue;
            return;
          }
          hour = parseFloat(hour) % 24;
          this.hour = hour;
          this.hour12 = this._twelveHour(hour);
          this.period = ['PM', 'AM'][+(hour < 12)];
        },
        _minuteChanged: function(minute) {
          minute = parseFloat(minute) % 60;
          this.minute = minute;
        },
        _secondChanged: function(second) {
          second = parseFloat(second) % 60;
          this.second = second;
        },
        _periodChanged: function(period) {
          if (isNaN(parseInt(this.hour)) || isNaN(parseInt(this.minute))) {
            return;
          }
          if (period === 'AM' &&  this.hour >= 12) {
            this.hour -= 12;
          } else if (period === 'PM' && this.hour < 12) {
            this.hour += 12;
          }
        },
        _zeroPad: function(value, length) {
          if (value === undefined || isNaN(value) || isNaN(length)) {
            return;
          }
          return ('0' + value).substr(-length);
        },
        _twelveHour: function(hour) {
          return hour % 12 || 12;
        },
        _isEqual: function(a, b) {
          return a === b;
        },
        _getMediaQuery: function(forceNarrow, responsiveWidth) {
          return '(max-width: ' + (forceNarrow ? '' : responsiveWidth) + ')';
        },
        _computeNarrow: function() {
          this.set('narrow', this._queryMatches || this.forceNarrow);
        },
        _viewChanged: function(toView, fromView) {
          this.$.pages._notifyPageResize();

          // prevent the clock-hand transition when selecting, otherwise the
          // extra movement would be confusing
          if (this._selecting || !fromView || !toView || !this.animated) {
            return;
          }

          var clocks = {'hours': this.$.hourClock, 'minutes': this.$.minuteClock, 'seconds': this.$.secondClock};
          var from = clocks[fromView];
          var to = clocks[toView];
          var fromAngle = (360 / from.count) * from.selected;
          var toAngle = (360 / to.count) * to.selected;

          // transition both clock hands at the same time
          to.setClockHand(fromAngle, false);
          from.setClockHand(toAngle);

          this.async(function() {
            to.setClockHand(toAngle, true, function() {
              this.async(function() {
                from.setClockHand(fromAngle, false);
              }, 200);
            }.bind(this));
          }.bind(this));
        },
        _onClockSelected: function(event) {
          if (this.view === 'hours') {
            var showMinutes = function() {
              this.async(function() {
                this._selecting = true;
                this.view = 'minutes';
                this._selecting = false;
              }.bind(this), 100);
              this.$.hourClock.removeEventListener('paper-clock-transition-end', showMinutes);
            }.bind(this);

            if (event.detail.animated) {
              this.$.hourClock.addEventListener('paper-clock-transition-end', showMinutes);
            } else {
              showMinutes();
            }

            if (this.hour12 !== event.detail.value) {
              this.hour12 = event.detail.value;
            } else {
              // show minutes if same hour is selected
              showMinutes();
            }
          } else if (this.view === 'minutes' && this.enableSeconds) {

            var showSeconds = function() {
              this.async(function() {
                this._selecting = true;
                this.view = 'seconds';
                this._selecting = false;
              }.bind(this), 100);
              this.$.minuteClock.removeEventListener('paper-clock-transition-end', showSeconds);
            }.bind(this);

            if (event.detail.animated) {
              this.$.minuteClock.addEventListener('paper-clock-transition-end', showSeconds);
            } else {
              showSeconds();
            }

            if (this.minute !== event.detail.value) {
              this.minute = event.detail.value;
            } else {
              // show seconds if same minute is selected
              showSeconds();
            }
          }
        },
        _resizeHandler: function() {
          if (!this.offsetWidth || this._resizing) {
            return;
          }
          this.updateStyles();
          this.async(function() {
            this._resizing = true;
            this.$.pages._notifyPageResize();
            this._resizing = false;
          }.bind(this));
        }
      });
    })();
  </script>
</dom-module>