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-imports/moment.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>
    (() => {
      // Ignore movement within this distance (px)
      const WIGGLE_THRESHOLD = 4;
      const WIGGLE_THRESHOLD_SQUARE = WIGGLE_THRESHOLD * WIGGLE_THRESHOLD;

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

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

      // Number of months to preload on both sides of the current month
      const 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;
      }

      class PaperCalendar extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element) {
        static get is() {
          return 'paper-calendar';
        }

        static get properties() {
          return {
            /*
           * The selected date
           */
            date: {
              type: Date,
              notify: true,
              value() {
                var d = new Date();
                d.setHours(0, 0, 0, 0);
                return d;
              },
              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
          };
        }

        static get observers() {
          return [
            '_populate(currentYear, currentMonth, minDate, maxDate, locale)'
          ]
        }

        ready() {
          super.ready();
          this._resizeHandler = this._resizeHandler.bind(this);
          this._onSwipe= this._onSwipe.bind(this);
          this._updateToday();
          this.currentMonth = this.date.getMonth() + 1;
          this.currentYear = this.date.getFullYear();
          this._transitionEvent = this._whichTransitionEnd();
        }

        connectedCallback() {
          super.connectedCallback();
          this.addEventListener('iron-resize', this._resizeHandler);
          this.addEventListener('swiped', this._onSwipe);
        }

        disconnectedCallback() {
          super.disconnectedCallback();
          this.removeEventListener('iron-resize', this._resizeHandler);
          this.removeEventListener('swiped', this._onSwipe);
        }

        dateFormat(date, format, locale) {
          if (!date) {
            return '';
          }
          var value = moment(date);
          value.locale(locale || this.locale);
          return value.format(format);
        }

        _localeChanged(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(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(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(day, date) {
          return !day || !this._withinValidRange(date);
        }

        _getMonthClass(name, month) {
          return name + ' month-' + month.year + '-' + month.month;
        }

        _onTrack(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() {
          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() {
          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(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(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(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(event) {
          if (event.detail.direction === 'right') {
            this._prevMonth();
          } else {
            this._nextMonth();
          }
        }

        _once(eventName, callback, node) {
          node = node || this;

          function onceCallback() {
            node.removeEventListener(eventName, onceCallback);
            callback.apply(null, arguments);
          }

          node.addEventListener(eventName, onceCallback);
        }

        _incrMonth(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() {
          this._incrMonth(-1);
        }

        _nextMonth() {
          this._incrMonth(1);
        }

        _dateChanged(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 (this.maxDate && date.getFullYear() == this.maxDate.getFullYear()) {
              this.date = this.maxDate;
            } else if (this.minDate && 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(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);
          this.date = newDate;
        }

        _isValidDate(date) {
          return date && date.getTime && !isNaN(date.getTime());
        }

        _withinValidRange(date) {
          if (this._isValidDate(date)) {
            return (!this.minDate || date >= this.minDate) && (!this.maxDate || date <= this.maxDate);
          }
          return false;
        }

        _monthWithinValidRange(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() {
          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() {
          // Force the day selection circle to maintain a 1:1 ratio
          var selected = this.shadowRoot.querySelector('.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() {
          this._containerWidth = this.$.calendar.offsetWidth;
          this._positionSlider();
          this._updateSelection();
        }

        _getDayName(date) {
          return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
        }

        _updateToday() {
          this.today = new Date();
          this.today.setHours(0, 0, 0, 0);
        }

        _whichTransitionEnd() {
          var transitions = {
            'WebkitTransition': 'webkitTransitionEnd',
            'MozTransition': 'transitionend',
            'OTransition': 'oTransitionEnd otransitionend',
            'transition': 'transitionend'
          };

          for (var t in transitions) {
            if (this.style[t] !== undefined) {
              return transitions[t];
            }
          }
        }
      }

      window.customElements.define(PaperCalendar.is, PaperCalendar);
    })();
  </script>
</dom-module>