paper-calendar.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="../paper-styles/shadow.html">
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../moment-element/moment-import.html">
<link rel="import" href="paper-date-picker-icons.html">

<dom-module id="paper-calendar">
  <template>
    <style>
      :host {
        display: block;
        box-sizing: border-box;
        padding: 12px 0;
        position: relative;
        width: 100%;
        height: 100%;
        min-width: 160px;
        min-height: 160px;
        color: var(--primary-text-color);
        -webkit-font-smoothing: antialiased;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
        --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
        @apply(--paper-font-body1);
        @apply(--paper-calendar);
        overflow: hidden;
        -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-calendar);
      }
      #calendar {
        position: relative;
        width: 100%;
        height: 100%;
        @apply(--layout-horizontal);
      }
      #months {
        height: 100%;
        @apply(--layout-horizontal);
      }
      #months.animating .month-nav {
        opacity: 1;
      }
      #months.animating {
        transition-property: transform, opacity;
        transition-duration: 300ms;
      }
      #months.animating.swipe {
        transition-timing-function: var(--ease-in-sine);
        --webkit-transition-timing-function: var(--ease-in-sine);
      }
      #months.animating.reset {
        transition-timing-function: var(--ease-out-sine);
        --webkit-transition-timing-function: var(--ease-out-sine);
      }
      .month {
        height: 100%;
        @apply(--layout-vertical);
        @apply(--layout-justified);
        @apply(--layout-flex);
      }

      .month-row, .month-nav {
        height: calc(100%/8);
        box-sizing: border-box;
        padding: 0 calc(100%/36);
      }

      .month-col {
        position: relative;
        @apply(--layout-vertical);
        @apply(--layout-flex);
      }

      .month-nav {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 1;
        @apply(--layout-horizontal);
        @apply(--layout-center);
      }
      .month-nav .col {
        position: relative;
        @apply(--layout-vertical);
        @apply(--layout-center-center);
      }
      .month-nav .btn .icon {
        cursor: pointer;
      }
      .month-nav .btn .ripple {
        position: absolute;
        width: 48px;
        height: 48px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .month-nav .btn.right {
        text-align: right;
      }
      .month-name {
        line-height: 24px;
        vertical-align: middle;
        text-align: center;
        font-weight: bold;
        @apply(--paper-font-body2);
        @apply(--layout-horizontal);
        @apply(--layout-center);
        @apply(--layout-center-justified);
        @apply(--layout-flex);
      }
      .month-weekdays {
        color: var(--secondary-text-color);
        @apply(--layout-horizontal);
        @apply(--layout-justified);
        @apply(--layout-flex);
      }
      .month-days {
        @apply(--layout-horizontal);
        @apply(--layout-justified);
        @apply(--layout-flex);
      }
      .month-col .day {
        cursor: default;
        pointer-events: none;
        @apply(--layout-fit);
        @apply(--layout-vertical);
        @apply(--layout-center-center);
      }
      .month-col {
        position: relative;
        width: 100%;
        height: 100%;
        @apply(--layout-center-center);
      }
      .day-item {
        border-radius: 100%;
        width: 100%;
        height: 100%;
      }
      .day-item::selection {
        background: none;
      }
      .day-item.selected {
        background: var(--default-primary-color);
      }
      .day-item.selected .day {
        color: var(--text-primary-color);
      }
      .day-item:not([disabled]) {
        cursor: pointer;
      }
      .day-item[disabled] .day {
        color: var(--text-disabled-color, #9d9d9d);
      }
      .day-item.today .day {
        color: var(--default-primary-color);
      }
      .day-item.selected.today .day {
        color: var(--text-primary-color);
      }
      .flex {
        @apply(--layout-flex);
      }
      .flex-5 {
        @apply(--layout-flex-5);
      }
    </style>
    <div id="calendar">
      <div id="months" on-track="_onTrack" class$="{{_contentClass}}">
        <template is="dom-repeat" items="{{_months}}" as="month">
          <div class$="{{_getMonthClass('month', month)}}">
            <div class="month-row month-name">
              <span>{{dateFormat(month.date, 'MMMM YYYY', locale)}}</span>
            </div>
            <div class="month-row month-weekdays week">
              <template is="dom-repeat" items="{{_weekdays}}">
                <div class="month-col layout vertical flex">
                  <div class="day">{{item.0}}</div>
                </div>
              </template>
            </div>
            <template is="dom-repeat" items="{{month.weeks}}" as="row">
              <div class="month-row month-days">
                <template is="dom-repeat" items="{{row}}">
                  <div class="month-col">
                    <div class$="{{_getDayClass('day-item selection', item.date, today, date)}}"
                      disabled$="{{_isDisabled(item.day, item.date, minDate, maxDate)}}"
                      on-tap="_tapDay" date$="{{item.name}}">
                      <div class="day">{{item.day}}</div>
                    </div>
                  </div>
                </template>
              </div>
            </template>
          </div>
        </template>
      </div>
      <div id="monthNav" class="month-nav">
        <div class="flex col self-stretch">
          <div class="btn" on-tap="_swipePrevMonth">
            <paper-ripple center class="ripple circle"></paper-ripple>
            <iron-icon class="icon flex" icon="date-picker:chevron-left"></iron-icon>
          </div>
        </div>
        <div class="flex-5"></div>
        <div class="flex col self-stretch">
          <div class="btn" on-tap="_swipeNextMonth">
            <paper-ripple center class="ripple circle"></paper-ripple>
            <iron-icon class="icon flex" icon="date-picker:chevron-right"></iron-icon>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    (function() {

    // Ignore movement within this distance (px)
    var WIGGLE_THRESHOLD = 4;
    var WIGGLE_THRESHOLD_SQUARE = WIGGLE_THRESHOLD * WIGGLE_THRESHOLD;

    // what constitues a flick (px/ms)
    var FLICK_SPEED = 0.5;

    // Factor for "springy" resistence effect when swiping too far.
    var RESIST_LENGTH = 40;
    var RESIST_FACTOR = 2;

    // Number of months to preload on both sides of the current month
    var PRELOAD_MONTHS = 1;

    function dateDiff(a, b) {
      a = new Date(a.getTime());
      b = new Date(b.getTime());
      a.setHours(0, 0, 0, 0);
      b.setHours(0, 0, 0, 0);
      return (a.getTime() - b.getTime()) / 86400000;
    }

    Polymer({
      is: 'paper-calendar',
      properties: {
        /*
         * The selected date
         */
        date: {
          type: Date,
          notify: true,
          value: function() {
            return new Date();
          },
          observer: '_dateChanged'
        },
        /**
         * The current locale
         */
        locale: {
          type: String,
          value: 'en',
          notify: true,
          observer: '_localeChanged'
        },
        /**
         * The minimum allowed date
         */
        minDate: {
          type: Date,
          value: null
        },
        /**
         * The maximum allowed date
         */
        maxDate: {
          type: Date,
          value: null
        },
        /**
         * The currently selected month (1-12)
         */
        currentMonth: {
          type: Number
        },
        /**
         * The currently selected year
         */
        currentYear: {
          type: Number
        },
        _contentClass: String,
        _months: Array,
        _firstDayOfWeek: Number,
      },
      behaviors: [
        Polymer.IronResizableBehavior
      ],
      observers: [
        '_populate(currentYear, currentMonth, minDate, maxDate, locale)',
      ],
      listeners: {
        'iron-resize': '_resizeHandler',
        'swiped': '_onSwipe'
      },
      ready: function() {
        this._updateToday();
        this.currentMonth = this.date.getMonth() + 1;
        this.currentYear = this.date.getFullYear();
        this._transitionEvent = this._whichTransitionEnd();
      },
      dateFormat: function(date, format, locale) {
        if (!date) {
          return '';
        }
        var value = moment(date);
        value.locale(locale || this.locale);
        return value.format(format);
      },
      _localeChanged: function(locale) {
        var localeMoment = moment();
        localeMoment.locale(locale);
        var weekdays = [];
        for (var i=0; i<7; i++) {
          weekdays.push(localeMoment.weekday(i).format('dd'));
        }
        this._weekdays = weekdays;
        this._firstDayOfWeek = localeMoment.weekday(0).format('d');
      },
      _populate: function(currentYear, currentMonth, minDate, maxDate) {
        var date, month, weeks, day, d, dayInfo, monthData, months = [];

        // Make sure currentYear/currentMonth are in min/max range
        if (minDate && new Date(currentYear, currentMonth, 0) < minDate) {
          this.currentYear = minDate.getFullYear();
          this.currentMonth = minDate.getMonth() + 1;
          return;
        } else if (maxDate && new Date(currentYear, currentMonth - 1, 1) > maxDate) {
          this.currentYear = maxDate.getFullYear();
          this.currentMonth = maxDate.getMonth() + 1;
          return;
        }

        for (var i=-PRELOAD_MONTHS; i<=PRELOAD_MONTHS; i++) {
          weeks = [[]];
          day = 1;
          date = new Date(currentYear, currentMonth - 1 + i, 1);
          month = date.getMonth();
          monthData = {
            year: date.getFullYear(),
            month: date.getMonth() + 1,
            date: new Date(date)
          };

          if (!this._monthWithinValidRange(monthData.year, monthData.month)) {
            continue;
          }

          // add "padding" days
          var firstDay = date.getDay() - this._firstDayOfWeek;
          if (firstDay < 0) {
            firstDay = 7 + firstDay;
          }
          for (d=0; d<firstDay; d++) {
            weeks[0].push({day: null, date: null});
          }

          // add actual days
          while (date.getMonth() === month) {
            if (weeks[0].length && d % 7 === 0) {
              // start new week
              weeks.push([]);
            }
            dayInfo = {
              date: new Date(date.getFullYear(), month, day),
              name: this.dateFormat(date,'YYYY-MM-DD'),
              year: currentYear,
              month: month,
              day: day,
            };
            weeks[weeks.length-1].push(dayInfo);
            date.setDate(++day);
            d++;
          }

          // add remaining "padding" days
          while (d < 42) {
            if (d % 7 === 0) {
              weeks.push([]);
            }
            weeks[weeks.length-1].push({day: null, date: null});
            d += 1;
          }

          monthData.weeks = weeks;
          months.push(monthData);

        }
        if (!months.length) {
          return;
        }
        this.set('_months', months);
        this.async(function() {
          this._updateSelection();
          this._positionSlider();
        });
      },
      _getDayClass: function(cssClass, date) {
        if (date) {
          if (dateDiff(date, this.today) === 0) {
            cssClass += ' today';
          }
          if (dateDiff(date, this.date) === 0) {
            cssClass += ' selected';
            this.async(function() {
              this._updateSelection();
            });
          }
        }
        return cssClass;
      },
      _isDisabled: function(day, date) {
        return !day || !this._withinValidRange(date);
      },
      _getMonthClass: function(name, month) {
        return name + ' month-' + month.year + '-' + month.month;
      },
      _onTrack: function(event) {
        var dx = event.detail.dx;
        var dy = event.detail.dy;
        var adx = Math.abs(dx);
        var ady = Math.abs(dy);
        var width = this._containerWidth;

        switch (event.detail.state) {
          case 'start':
            this._trackStartTime = (new Date()).getTime();
            this._startPos = this._currentPos;
            this._moveQueue = [];
          break;

          case 'track':
            if (this._moveQueue.length >= 4) {
              this._moveQueue.shift();
            }
            this._moveQueue.push(event);

            // ignore movement within WIGGLE_THRESHOLD
            var distance = (dx * dx) + (dy * dy);
            if (!this._gesture && distance > WIGGLE_THRESHOLD_SQUARE) {
              this._gesture = adx > ady ? 'pan-x' : 'pan-y';
            }

            // only drag during pan-x gesture
            if (this._gesture !== 'pan-x') {
              return;
            }

            this._dragging = true;
            var fullWidth = width * this._months.length;
            var x = this._startPos + dx;

            // If we're dragging outside the bounds, add some resistence
            if (x > 0 || x < (-fullWidth + width)) {
              if (isNaN(parseInt(this._resistStart, 10))) {
                this._resistStart = adx;
              }
              var rdx = adx - this._resistStart;
              var p, d, max = RESIST_LENGTH;
              p = rdx > width ? 1 : rdx / width;
              d = max * (1 - Math.pow(1 - p, RESIST_FACTOR));
              x = (dx < 0 ? -this._scrollWidth + width - d : d);
            } else {
              this._resistStart = null;
            }
            this._translateX(x);
          break;

          case 'end':
            this._resistStart = null;
            var lastIdx = this._getMonthIdx(this._startPos);
            var idx = this._getMonthIdx(this._currentPos);
            var speed = this._getFastestMovement(event).v;
            var move = idx !== lastIdx || speed > FLICK_SPEED;
            if (!this._resistStart && this._gesture === 'pan-x' && move) {
              if (speed > FLICK_SPEED) {
                // calculate an ideal transition duration based on current speed of swipe
                var remainingDistance = width - adx;
                var newDuration = remainingDistance / speed;
                if (newDuration > 300) {
                  newDuration = 300;
                }
                this._transitionDuration = newDuration;
              }

              if (dx > 0) {
                this._swipePrevMonth();
              } else {
                this._swipeNextMonth();
              }
            } else {
              this._translateX(this._startPos, 'reset');
            }
            this._gesture = null;
        }
      },
      _swipePrevMonth: function() {
        this.fire('swipe-start', {direction: 'right'});
        this._translateX(0, 'swipe', function() {
          this.set('_contentClass', '');
          this.transform('translateX(' + this._startPos + 'px)', this.$.months);
          this.fire('swiped', {direction: 'right'});
        }.bind(this));
      },
      _swipeNextMonth: function() {
        if (!this.maxDate || this.currentYear < this.maxDate.getFullYear() || this.currentMonth < this.maxDate.getMonth() + 1) {
          this._translateX(-this._containerWidth * 2, 'swipe', function() {
            this.set('_contentClass', '');
            this.transform('translateX(' + this._startPos + 'px)', this.$.months);
            this.fire('swiped', {direction: 'left'});
          }.bind(this));
        }
      },
      _getMonthIdx: function(pos) {
        // returns the index for the visible month according to the given position
        var width = this._containerWidth;
        var i = Math.floor((-pos + (width/2)) / width);
        return i < 0 ? 0 : i;
      },
      _translateX: function(x, transition, cb) {
        if (isNaN(parseInt(x, 10))) {
          throw new Error('Not a number: ' + x);
        }
        this._currentPos = x;
        if (transition) {
          if (this._transitionDuration) {
            this.$.months.style.transitionDuration = this._transitionDuration + 'ms';
          }
          this._once(this._transitionEvent, function() {
            this.set('_contentClass', '');
            this.$.months.style.transitionDuration = '';
            this._transitionDuration = null;
            this.$.monthNav.style.removeProperty('opacity');
            if (cb) {
              cb();
            }
          }.bind(this), this.$.months);
          this.set('_contentClass', 'animating ' + transition);
          this.$.monthNav.style.removeProperty('opacity');
          // Fixes odd bug in chrome where we lose touch-events after changing opacity
          this._once('touchstart', function() {});
        }
        window.requestAnimationFrame(function() {
          if (!transition) {
            var halfWidth = this._containerWidth / 2;
            var dx = Math.abs(this._startPos - x);
            var p = (1 - (dx / halfWidth)) * 100;
            p = (100 - Math.pow(p, 2)) / 100 / 100;
            var opacity = Math.abs(parseFloat(p).toFixed(2));
            this.$.monthNav.style.opacity = opacity;
          }
          this.transform('translateX(' + x + 'px)', this.$.months);
        }.bind(this));
      },
      _getFastestMovement: function(event) {
        // detect flick based on fastest segment of movement
        var l = this._moveQueue.length;
        var dt, tx, ty, tv2, x = 0, y = 0, v2 = 0;
        for (var i = 0, m; i < l && (m = this._moveQueue[i]); i++) {
          dt = event.timeStamp - m.timeStamp;
          tx = (event.detail.x - m.detail.x) / dt;
          ty = (event.detail.y - m.detail.y) / dt;
          tv2 = tx * tx + ty * ty;
          if (tv2 > v2) {
            x = tx;
            y = ty;
            v2 = tv2;
          }
        }
        return {x: x, y: y, v: Math.sqrt(v2)};
      },
      _onSwipe: function(event) {
        if (event.detail.direction === 'right') {
          this._prevMonth();
        } else {
          this._nextMonth();
        }
      },
      _once: function(eventName, callback, node) {
        node = node || this;
        function onceCallback() {
          node.removeEventListener(eventName, onceCallback);
          callback.apply(null, arguments);
        }
        node.addEventListener(eventName, onceCallback);
      },
      _incrMonth: function(i) {
        var date = new Date(this.currentYear, this.currentMonth - 1 + i);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        if (this._monthWithinValidRange(year, month)) {
          this.currentYear = year;
          this.currentMonth = month;
        }
      },
      _prevMonth: function() {
        this._incrMonth(-1);
      },
      _nextMonth: function() {
        this._incrMonth(1);
      },
      _dateChanged: function(date, oldValue) {
        if (!this._isValidDate(date)) {
          console.warn('Invalid date: ' + date);
          this.date = date = oldValue;
        }
        if (!this._withinValidRange(date)) {
          console.warn('Date outside of valid range: ' + date);
          if(date.getFullYear() == this.maxDate.getFullYear()) {
            this.date = this.maxDate;
          } else if(date.getFullYear() == this.minDate.getFullYear()){
            this.date = this.minDate;
          } else {
            this.date = date = oldValue;
          }
        }
        this.currentYear = date.getFullYear();
        this.currentMonth = date.getMonth() + 1;
        // Only trigger a notification if there actually is a difference.
        if (oldValue && date.getTime && oldValue.getTime && date.getTime() === oldValue.getTime()) {
          return;
        }
        this._updateSelection();
      },
      _tapDay: function(event) {
        if (!this._withinValidRange(event.model.item.date)) {
          return false;
        }
        var item = event.model.item;
        var newDate = new Date(this.date.getTime());
        newDate.setDate(1);
        newDate.setYear(item.year);
        newDate.setMonth(item.month);
        newDate.setDate(item.day);
        newDate.setHours(0,0,0,0);
        this.date = newDate;
      },
      _isValidDate: function(date) {
        return date && date.getTime && !isNaN(date.getTime());
      },
      _withinValidRange: function(date) {
        if (this._isValidDate(date)) {
          return (!this.minDate || date >= this.minDate) && (!this.maxDate || date <= this.maxDate);
        }
        return false;
      },
      _monthWithinValidRange: function(year, month) {
        var monthStart = new Date(year, month-1, 1);
        var monthEnd = new Date(year, month, 0);
        return this._withinValidRange(monthStart) || this._withinValidRange(monthEnd);
      },
      _positionSlider: function() {
        if (!this._months || !this._containerWidth) {
          return;
        }
        this._scrollWidth = (this.$.calendar.offsetWidth * this._months.length);
        this.$.months.style.minWidth = this._scrollWidth + 'px';
        var i = ((this.currentYear * 12) + this.currentMonth) -
                 ((this._months[0].year * 12) + this._months[0].month);
        this._translateX(-i * this._containerWidth);
      },
      _updateSelection: function() {
        // Force the day selection circle to maintain a 1:1 ratio
        var selected = this.$$('.day-item.selected');
        if (!selected) {
          return;
        }
        selected.style.height = '';
        selected.style.width = '';
        var w = selected.parentElement.offsetWidth;
        var h = selected.parentElement.offsetHeight;
        selected.style.flex = '';
        window.requestAnimationFrame(function() {
          if (w > 0 && w < h) {
            selected.style.height = w + 'px';
          }
          else if (h > 0) {
            selected.style.width = h + 'px';
          }
        });
      },
      _resizeHandler: function() {
        this._containerWidth = this.$.calendar.offsetWidth;
        this._positionSlider();
        this._updateSelection();
      },
      _getDayName: function(date) {
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      },
      _updateToday: function() {
        this.today = new Date();
        this.today.setHours(0, 0, 0, 0);
      },
      _whichTransitionEnd: function() {
        var transitions = {
          'WebkitTransition' : 'webkitTransitionEnd',
          'MozTransition'    : 'transitionend',
          'OTransition'      : 'oTransitionEnd otransitionend',
          'transition'       : 'transitionend'
        };

        for (var t in transitions) {
          if (this.style[t] !== undefined){
            return transitions[t];
          }
        }
      }
    });
   })();
  </script>
</dom-module>