at-carbon-date-picker.html

<!--
Missing features needed for at-form-date
-- time picker
-- date / time switch
-- year/month fast switcher
-- single date mode
-- we need to defend against invalid formats because invalid format will poison the values. We should have a list of valid formats and allow use only those formats. Everything else should be rejected
-->

<link rel="import" href="../tangere/tangere.html">
<link rel="import" href="../at-theme/at-theme.html">
<link rel="import" href="../at-i18n/at-i18n-behavior.html">
<link rel="import" href="../at-carbon-icon-button/at-carbon-icon-button.html">
<link rel="import" href="../at-carbon-moment/momentjs-import.html">
<link rel="import" href="styles/styles.html">

<dom-module id="at-carbon-date-picker">
  <template>
    <style include="at-form-common"></style>
    <style include="at-carbon-date-picker-styles"></style>
    <style></style>
    <div class="calendar">
      <div class="calendar-header">
        <div class="calendar-row">
          <at-carbon-icon-button class="calendar-button" icon="arrow-left" on-tap="_previousClicked" id="at-carbon-date-picker-left-arrow"></at-carbon-icon-button>
          <div id="pickModeTitle" class="pick-mode-title" on-tap="_changePickMode"></div>
          <at-carbon-icon-button class="calendar-button" icon="arrow-right" on-tap="_nextClicked" id="at-carbon-date-picker-right-arrow"></at-carbon-icon-button>
        </div>
      </div>
      <div id="calendarBody" class="calendar-body">
        <div id="dayPicker" class="day-picker" on-tap="_dateClicked">
          <div class="calendar-row">
            <template is="dom-repeat" items="{{_daysOfWeek}}">
              <div class="weekday-name">{{item}}</div>
            </template>
          </div>
          <div class="calendar-row">
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
          </div>
          <div class="calendar-row">
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
          </div>
          <div class="calendar-row">
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
          </div>
          <div class="calendar-row">
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
          </div>
          <div class="calendar-row">
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
          </div>
          <div class="calendar-row">
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
            <div class="day">day</div>
          </div>
        </div>
        <div id="monthPicker" class="month-picker hidden" on-tap="_monthClicked">
          <div class="calendar-row">
            <div class="month">January</div>
            <div class="month">February</div>
            <div class="month">March</div>
            <div class="month">April</div>
          </div>
          <div class="calendar-row">
            <div class="month">May</div>
            <div class="month">June</div>
            <div class="month">July</div>
            <div class="month">August</div>
          </div>
          <div class="calendar-row">
            <div class="month">September</div>
            <div class="month">October</div>
            <div class="month">November</div>
            <div class="month">December</div>
          </div>
        </div>
        <div id="yearPicker" class="year-picker hidden" on-tap="_yearClicked">
          <div class="calendar-row">
            <div class="year">2011</div>
            <div class="year">2012</div>
            <div class="year">2013</div>
            <div class="year">2014</div>
          </div>
          <div class="calendar-row">
            <div class="year">2015</div>
            <div class="year">2016</div>
            <div class="year">2017</div>
            <div class="year">2018</div>
          </div>
          <div class="calendar-row">
            <div class="year">2019</div>
            <div class="year">2020</div>
            <div class="year">2021</div>
            <div class="year">2022</div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    /**
     * fired when new startDate is selected from date-picker
     * @event start-date-changed
     */
    /**
     * fired when new endDate is selected from date-picker
     * @event end-date-changed
     */
    Polymer({
      is: 'at-carbon-date-picker',
      behaviors: [Tangere.behaviors.i18n],
      properties: {
        /**
         * Holds the mode of operation for date-picker.
         * Three possible values "single", "range-start" and "range-end"
         * single is used for at-form-date which operates on only one value
         * range-start and range-end are used for at-form-daterange which operates on start/end values
         * @property mode
         * @type String
         * @default 'single'
         */
        mode: {
          type: String,
          value: 'single',
          observer: 'modeChanged',
          xtype: 'enum',
          xvaluelist: [{
            title: "Single",
            value: "single"
          }, {
            title: "Start of date range",
            value: "start-range"
          }, {
            title: "End of date range",
            value: "end-range"
          }]
        },
        /**
         * holds the string value of the startDate of the date picker
         * @property startDate
         * @type String
         * @default ''
         */
        startDate: {
          type: String,
          value: '',
          observer: 'startDateChanged'
        },
        /**
         * holds the string value of the endDate of the date picker
         * @property endDate
         * @type String
         * @default ''
         */
        endDate: {
          type: String,
          value: '',
          observer: 'endDateChanged'
        }
      },

      ready: function() {
        this._initializeAtCarbonDatePicker();
      },
      _createLocaleMoment: function() {
        // getLocale function is from at-i18n; it gets the local from the browser settings
        var locale = this.getLocale();
        // we create localized moment instance
        var localeMoment = moment().locale(locale);

        return localeMoment;
      },
      _createCurrentMomentFor: function(dateMoment) {
        var locale = this.getLocale();
        var year = dateMoment.year();
        var month = dateMoment.month();
        var result = moment([year, month, 1]).locale(locale);
        return result;
      },
      // this function is called _initializeAtCarbonDatePicker because at-i18n already has a function called _initialize
      _initializeAtCarbonDatePicker: function() {
        if (this._isInitialized) {
          return;
        }
        this._isInitialized = true;

        // pick mode says what is currently available for picking from the calendar
        // "pick_day" says that days are currently available for picking
        // "pick_month" says that months are currently available for picking
        // "pick_year" says that years are currently available for picking
        this._pickMode = "pick_day";

        // we create the new locale moment
        var localeMoment = this._createLocaleMoment();
        // _currentMoment is the month displayed in the calendar
        // we need this for next previous month navigation
        // and later, year, month jumping and setting time in at-form-date
        this._currentMoment = this._createCurrentMomentFor(localeMoment);

        var localeClone = localeMoment.clone();
        // we figure out starting day of week for current locale
        var startOfWeekNum = localeClone.startOf('week').day();
        // by default we assume that sunday is the first day of week. hence 0_1_2_3_4_5_6
        var _daysOfWeekStr = "0_1_2_3_4_5_6";
        if (startOfWeekNum === 1) {
          // if startOfWeekNum is 1 that means that monday is first day of week hence 1_2_3_4_5_6_7
          _daysOfWeekStr = "1_2_3_4_5_6_7";
        }

        this._daysOfWeek = _daysOfWeekStr.split("_").map(function(n) {
          return localeClone.day(n).format("dd");
        });

        this._format = this._localizedFormat("date");
      },

      _validModeValues: [ "single", "start-range", "end-range" ],

      _isDateStringValid: function(value) {
        var valueValid = moment(value, this._format, true).isValid();
        return valueValid;
      },

      modeChanged: function(newValue, oldValue) {
        this._initializeAtCarbonDatePicker();

        // ignore invalid mode values
        if (this._validModeValues.indexOf(newValue) === -1) return;

        var isStartValid = this._isDateStringValid(this.startDate);
        var isEndValid = this._isDateStringValid(this.endDate);

        if (newValue === "single") {
          this._isInternalStartDateUpdate = true;
          this._isInternalEndDateUpdate = true;
          if (isStartValid) {
            this.endDate = this.startDate;
          } else if (isEndValid) {
            this.startDate = this.endDate;
          }
          this._isInternalStartDateUpdate = false;
          this._isInternalEndDateUpdate = false;
        }

        if (isStartValid && isEndValid) {
          this._updateCurrentMoment();
        }

        this._refreshCalendar();
      },
      startDateChanged: function(newValue, oldValue) {
        if (this._isInternalStartDateUpdate) {
          return;
        }
        this._initializeAtCarbonDatePicker();

        // parameter can be null, undefined, numbers and in incorrect format
        // we need to validate it and log errors if invalid
        var startValid = moment(newValue, this._format, true).isValid();
        if (!startValid) {
          return;
        }

        if (this.mode === 'single') {
          this._isInternalEndDateUpdate = true;
          this.endDate = newValue;
          this._isInternalEndDateUpdate = false;
        }

        this._updateCurrentMoment();

        this._refreshCalendar();
      },
      endDateChanged: function(newValue, oldValue) {
        if (this._isInternalEndDateUpdate) {
          return;
        }
        this._initializeAtCarbonDatePicker();

        // parameter can be null, undefined, numbers and in incorrect format
        // we need to validate it and log errors if invalid
        var endValid = moment(newValue, this._format, true).isValid();
        if (!endValid) {
          return;
        }

        if (this.mode === 'single') {
          this._isInternalStartDateUpdate = true;
          this.startDate = newValue;
          this._isInternalStartDateUpdate = false;
        }

        this._updateCurrentMoment();

        this._refreshCalendar();
      },
      _previousClicked: function() {
        var pickMode = this._pickMode;
        if (pickMode === "pick_day") {
          this._currentMoment.add(-1, 'month');
        } else if (pickMode === "pick_month") {
          this._currentMoment.add(-1, 'year');
        } else if (pickMode === "pick_year") {
          this._currentMoment.add(-12, 'year');
        }
        this._refreshCalendar();
      },
      _nextClicked: function() {
        var pickMode = this._pickMode;
        if (pickMode === "pick_day") {
          this._currentMoment.add(1, 'month');
        } else if (pickMode === "pick_month") {
          this._currentMoment.add(1, 'year');
        } else if (pickMode === "pick_year") {
          this._currentMoment.add(12, 'year');
        }
        this._refreshCalendar();
      },
      _updateCurrentMoment: function() {
        var selectedDate = this._getSelectedDate();
        var selectedMoment = moment(selectedDate, this._format, true);
        var currentMoment = this._createCurrentMomentFor(selectedMoment);
        this._currentMoment = currentMoment;
      },
      _dateClicked: function(event) {
        var element = event.target;
        var dayIdentifier = element.getAttribute('day-identifier');
        if (dayIdentifier) {

          if (this.mode === "single") {
            this._isInternalStartDateUpdate = true;
            this._isInternalEndDateUpdate = true;
            this.startDate = dayIdentifier;
            this.endDate = dayIdentifier;
            this._isInternalStartDateUpdate = false;
            this._isInternalEndDateUpdate = false;
          } else if (this.mode === "start-range") {
            this._isInternalStartDateUpdate = true;
            this.startDate = dayIdentifier;
            this._isInternalStartDateUpdate = false;
          } else {
            this._isInternalEndDateUpdate = true;
            this.endDate = dayIdentifier;
            this._isInternalEndDateUpdate = false;
          }

          var locale = this.getLocale();
          var selectedDate = this._getSelectedDate();
          var selectedMoment = moment(selectedDate, this._format).locale(locale);
          if (selectedMoment.isValid() && ((selectedMoment.month() !== this._currentMoment.month()) || (selectedMoment.year() !== this._currentMoment.year()))) {
            var selectedMonth = selectedMoment.month();
            this._currentMoment.month(selectedMonth);
            var selectedYear = selectedMoment.year();
            this._currentMoment.year(selectedYear);
          }

          this._refreshCalendar();

          if (this.mode === 'single') {
            this._fireStartDateChanged(this.startDate);
            this._fireEndDateChanged(this.endDate);
          
          } else if (this.mode === "start-range") {
            this._fireStartDateChanged(this.startDate);
            
          } else if (this.mode === 'end-range') {
            this._fireEndDateChanged(this.endDate);
          }
        }
      },
      _monthClicked: function(event) {
        var target = event.target;
        var monthIdentifierStr = target.getAttribute('month-identifier');
        var monthIdentifier = parseInt(monthIdentifierStr);
        this._currentMoment.month(monthIdentifier);
        this._pickMode = "pick_day";
        this._refreshCalendar();
      },
      _yearClicked: function(event) {
        var target = event.target;
        var yearIdentifierStr = target.getAttribute('year-identifier');
        var yearIdentifier = parseInt(yearIdentifierStr);
        this._currentMoment.year(yearIdentifier);
        this._pickMode = "pick_month";
        this._refreshCalendar();
      },
      _changePickMode: function() {
        if (!this._pickMode) {
          this._pickMode = "pick_day";
        } else if (this._pickMode === "pick_day") {
          this._pickMode = "pick_month";
        } else if (this._pickMode === "pick_month") {
          this._pickMode = "pick_year";
        }
        this._refreshCalendar();
      },
      _getSelectedDate: function() {
        var result = this.startDate;
        if (this.mode === "end-range") {
          result = this.endDate;
        }
        return result;
      },
      _refreshCalendar: function() {
        var startDate = this.startDate;
        var endDate = this.endDate;
        var dayPicker = this.$.dayPicker;
        var monthPicker = this.$.monthPicker;
        var yearPicker = this.$.yearPicker;
        this.toggleClass('hidden', this._pickMode !== "pick_day", dayPicker);
        this.toggleClass('hidden', this._pickMode !== "pick_month", monthPicker);
        this.toggleClass('hidden', this._pickMode !== "pick_year", yearPicker);
        if (this._pickMode === "pick_month") {
          this._refreshMonthPicker();
          return;
        } else if (this._pickMode === "pick_year") {
          this._refreshYearPicker();
          return;
        }

        var locale = this.getLocale();
        var selectedDate = this._getSelectedDate();
        var selectedMoment = moment(selectedDate, this._format).locale(locale);

        var startDateMoment = moment(startDate, this._format).locale(locale);
        var endDateMoment = moment(endDate, this._format).locale(locale);

        var firstOfMonthMoment = this._currentMoment;
        var firstDayOfMonthOffset = firstOfMonthMoment.day();
        var startIndex = 0 - firstDayOfMonthOffset;
        if (startIndex === 0) {
          startIndex = -7;
        }

        // these two lines update the UI
        var pickModeTitle = this.$.pickModeTitle;
        var yearStr = firstOfMonthMoment.format('YYYY');
        var monthStr = firstOfMonthMoment.format("MMMM");
        var titleStr = monthStr + " " + yearStr;
        Polymer.dom(pickModeTitle).innerHTML = titleStr;

        var self = this;
        var calendarBody = Polymer.dom(this.$.calendarBody);
        var calendarRows = calendarBody.querySelectorAll('.calendar-row');
        calendarRows.forEach(function(calendarRow, rowIndex) {
          var days = Polymer.dom(calendarRow).querySelectorAll('.day');
          days.forEach(function(day, dayIndex) {
            var offset = startIndex + (rowIndex - 1) * 7 + dayIndex;
            var clone = firstOfMonthMoment.clone();
            clone.add(offset, 'days');
            var dayIdentifier = clone.format(self._format);
            day.setAttribute('day-identifier', dayIdentifier);
            day.innerHTML = clone.date();

            Polymer.dom(day).classList.remove('selected');
            Polymer.dom(day).classList.remove('next-prev-month');
            Polymer.dom(day).classList.remove('start-date');
            Polymer.dom(day).classList.remove('end-date');
            Polymer.dom(day).classList.remove('in-range');
            if (clone.isSame(selectedMoment)) {
              Polymer.dom(day).classList.add('selected');
            }
            if (clone.month() !== firstOfMonthMoment.month()) {
              Polymer.dom(day).classList.add('next-prev-month');
            }
            if (clone.isSame(startDateMoment)) {
              Polymer.dom(day).classList.add('start-date');
            }
            if (clone.isSame(endDateMoment)) {
              Polymer.dom(day).classList.add('end-date');
            }
            if ((clone.isSame(startDateMoment) || clone.isAfter(startDateMoment)) && (clone.isSame(endDateMoment) || clone.isBefore(endDateMoment))) {
              Polymer.dom(day).classList.add('in-range');
            }

          });
        });

      },
      _updateDayIdentifiers: function(newFormat, oldFormat) {
        var self = this;
        var calendarBody = Polymer.dom(this.$.calendarBody);
        var calendarRows = calendarBody.querySelectorAll('.calendar-row');
        calendarRows.forEach(function(calendarRow, rowIndex) {
          var days = Polymer.dom(calendarRow).querySelectorAll('.day');
          days.forEach(function(day, dayIndex) {
            var currentIdentifier = day.getAttribute('day-identifier');
            if (currentIdentifier) {
              var currentMoment = moment(currentIdentifier, oldFormat, true);
              var newIdentifier = currentMoment.format(newFormat);
              Polymer.dom(day).setAttribute('day-identifier', newIdentifier);
            }
          });
        });
      },
      _fireStartDateChanged: function(newValue) {
        this.fire('start-date-changed', {
          value: newValue
        }, {
          bubbles: false
        });
      },
      _fireEndDateChanged: function(newValue) {
        this.fire('end-date-changed', {
          value: newValue
        }, {
          bubbles: false
        });
      },
      _refreshMonthPicker: function() {
        var currentMoment = this._currentMoment;
        var currentMonthIndex = currentMoment.month();
        var pickModeTitle = this.$.pickModeTitle;
        // picker title text is the current year
        var yearStr = currentMoment.format('YYYY');
        Polymer.dom(pickModeTitle).innerHTML = yearStr;

        // update available months
        var monthPicker = this.$.monthPicker;
        var monthRows = Polymer.dom(monthPicker).querySelectorAll('.calendar-row');
        var prevLocale = moment.locale();
        var locale = this.getLocale();
        moment.locale(locale);
        // moment.months gives long month names; moment.monthsShort gives short month names
        var monthNamesArray = moment.monthsShort();
        moment.locale(prevLocale);
        var self = this;
        monthRows.forEach(function(monthRow, rowIndex) {
          var months = Polymer.dom(monthRow).querySelectorAll('.month');
          months.forEach(function(month, monthIndex) {
            var index = rowIndex * 4 + monthIndex;
            var monthNameStr = monthNamesArray[index];
            Polymer.dom(month).innerHTML = monthNameStr;
            self.toggleClass('selected', index === currentMonthIndex, month);
            Polymer.dom(month).setAttribute('month-identifier', index);
          });
        });
      },
      _getSelectedMoment: function() {
        var locale = this.getLocale();
        var selectedDate = this._getSelectedDate();
        var selectedMoment = moment().locale(locale);
        if (selectedDate !== '') {
          selectedMoment = moment(selectedDate, this._format).locale(locale);
        }
        return selectedMoment;
      },
      _refreshYearPicker: function() {
        var currentMoment = this._currentMoment;
        var selectedMoment = this._getSelectedMoment();
        var selectedYear = selectedMoment.year();
        var currentYear = currentMoment.year();
        var pickModeTitle = this.$.pickModeTitle;
        var startYear = currentYear - 5;
        var endYear = currentYear + 6;
        // picker title text is the current year
        var yearStr = startYear + ' - ' + endYear;
        Polymer.dom(pickModeTitle).innerHTML = yearStr;

        var yearStrs = [];
        for (var i = 0; i < 12; i++) {
          yearStrs.push(startYear + i);
        }

        // update years
        var yearPicker = this.$.yearPicker;
        var yearRows = Polymer.dom(yearPicker).querySelectorAll('.calendar-row');
        var self = this;
        yearRows.forEach(function(yearRow, rowIndex) {
          var years = Polymer.dom(yearRow).querySelectorAll('.year');
          years.forEach(function(year, yearIndex) {
            var index = rowIndex * 4 + yearIndex;
            var yearStr = yearStrs[index];
            Polymer.dom(year).innerHTML = yearStr;
            self.toggleClass('selected', yearStr === selectedYear, year);
            Polymer.dom(year).setAttribute('year-identifier', yearStr);
          });
        });
      }
    });
  </script>
</dom-module>