dev/js/src/datepicker.js

/**
 * Date picker for the
 * Virtual Collection builder.
 *
 * @author Nils Diewald
 */
"use strict";

define(['util'], function () {

  KorAP._validDateMatchRE = new RegExp("^(?:[lg]?eq|ne)$");
  KorAP._validDateRE      = new RegExp("^(?:\\d{4})(?:-\\d\\d(?:-\\d\\d)?)?$");

  /*
   * Localizations
   */
  const loc = KorAP.Locale;
  loc.WDAY = loc.WDAY || [
    'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'
  ];
  loc.MONTH = loc.MONTH || [
    'January', 'February', 'March', 'April',
    'May', 'June', 'July', 'August',
    'September', 'October', 'November',
    'December'
  ];

  const d = document;

  // The datepicker class
  return {

    /**
     * Create a new datepicker view.
     */
    create : function () {
      return Object.create(this)._init();
    },


    // Init datepicker
    _init : function () {
      this._selected = [];
      return this;
    },


    /**
     * Get or select a specific date.
     */
    select : function (year, month, day) {
      const t = this;
      if (arguments.length >= 1) {
        t._selected = {'year' : year};
        t._showYear = year;
        if (arguments.length >= 2) {
          t._selected['month'] = month;
          t._showMonth = month;
          if (arguments.length >= 3) {
            t._selected['day'] = day;
            t._showDay = day;
          };
        };

        return t;
      };

      return t._selected;
    },


    /**
     * Select a specific date and
     * init the accompanied action.
     */
    set : function (year, month, day) {
      this.select(year, month, day);
      this._store();
    },


    // Store the selected value
    _store : function () {
      if (this._click !== undefined)
        this._click(this._selected);
      else 
        console.dir(this._selected);
    },

    
    /**
     * Set the action for clicking as a callback.
     * The callback will retrieve a an object with
     * an optional year attribute,
     * an optional month attribute,
     * and an optional day attribute
     */
    onclick : function (cb) {
      this._click = cb;
    },


    /**
     * The associated input field.
     */
    input : function () {
      return this._input;
    },
    

    /**
     * Show the datepicker.
     * Will either show the selected year/month
     * or the current date.
     * Will return the element for appending to the dom.
     */
    show : function (year, month) {

      const e = this._el = d.createElement('div');
      e.setAttribute('tabindex', 0);
      e.style.outline = 0;
      e.classList.add('datepicker');
      
      const today = new Date();
      const t = this;

      // Show year
      t._showYear = (year !== undefined) ? year :
        (t._selected['year'] ? this._selected['year'] :
         today.getYear() + 1900);

      // Show month
      t._showMonth = month ? month :
        (t._selected['month'] ? t._selected['month'] :
         (today.getMonth() + 1));

      // Append all helpers
      e.appendChild(t._monthHelper());
      e.appendChild(t._yearHelper());
      e.appendChild(t._dayHelper());
      t._input = e.appendChild(t._stringHelper());

      // Always focus
      e.addEventListener(
        'mousedown',
        function (ev) {
          this._inField = true
        }.bind(t)
      );

      e.addEventListener(
        'mouseup',
        function (ev) {
          this._inField = false;
          this._input.focus();
        }.bind(t)
      );

      t._input.addEventListener(
        'blur',
        function (ev) {
          if (!this._inField) {
            if (this.fromString(this._input.value)) {
              this._store();
            };
          };
          ev.halt();
        }.bind(t)
      );

      t._input.focus();

      return t._el;
    },

    _stringHelper : function () {

      // Create element
      // Add input field
      const input = d.createElement('input');
      input.value = this.toString();
      input.setAttribute('tabindex', 0);

      input.addEventListener(
        'keyup',
        function (e) {
          if (this.fromString(input.value)) {
            this._updateYear();
            this._updateMonth();
            this._updateDay();
          };
        }.bind(this)
      );

      input.addEventListener(
        'keypress',
        function (e) {
          if (e.keyCode == 13) {
            if (this.fromString(input.value))
              this._store();

            e.halt();
            return false;
          }
        }.bind(this)
      )

      return input;
    },


    /**
     * Get the HTML element associated with the datepicker.
     */
    element : function () {
      return this._el;
    },


    /**
     * Get the current date in string format.
     */
    today : function () {
      const today = new Date();
      let str = today.getYear() + 1900;
      const m = today.getMonth() + 1;
      const d = today.getDate();
      str += '-' + (m < 10 ? '0' + m : m);
      str += '-' + (d < 10 ? '0' + d : d);
      return str;
    },


    /**
     * Stringification
     */
    toString : function () {
      // There are values selected
      let v = '';
      const s = this._selected;
      if (s['year']) {
        v += s['year'];
        if (s['month']) {
          v += '-';
          v += s['month'] < 10 ? '0' + s['month'] : s['month'];
          if (s['day']) {
            v += '-';
            v += s['day'] < 10 ? '0' + s['day'] : s['day'];
          };
        };
      };
      return v;
    },


    /**
     * Increment the year.
     */
    incrYear : function () {
      const t = this;
      if (t._showYear < 9999) {
        t._showYear++;
        t._updateYear();
        t._updateMonth();
        t._updateDay();
        return t;
      };
      return;
    },


    /**
     * Decrement the year.
     */
    decrYear : function () {
      const t = this;
      if (t._showYear > 0) {
        t._showYear--;
        t._updateYear();
        t._updateMonth();
        t._updateDay();
        return t;
      };
      return;
    },


    /**
     * Increment the month.
     */
    incrMonth : function () {
      const t = this;
      t._showMonth++;
      if (t._showMonth > 12) {
        t._showMonth = 1;
        t.incrYear();
      }
      else {
        t._updateMonth();
        t._updateDay();
      };
      return t;
    },


    /**
     * Decrement the month.
     */
    decrMonth : function () {
      const t = this;
      t._showMonth--;
      if (t._showMonth < 1) {
        t._showMonth = 12;
        t.decrYear();
      }
      else {
        t._updateMonth();
        t._updateDay();
      };

      return t;
    },


    // Create the year helper element.
    _yearHelper : function () {
      const t = this;
      const year = d.createElement('div');
      year.classList.add('year');

      // Decrement year
      year.addE('span')
        .onclick = t.decrYear.bind(t);

      t._yElement = year.addE('span');
      t._yElement.addT(t._showYear);

      t._yElement.onclick = function () {
        t.set(t._showYear);
      }.bind(t);
      t._selectYear();

      // Increment year
      year.addE('span')
        .onclick = t.incrYear.bind(t);

      return year;
    },


    // Update the year helper view.
    _updateYear : function () {
      this._yElement.firstChild.data = this._showYear;
      this._selectYear();
    },


    // Check if the viewed year is current
    _selectYear : function () {
      if (this._showYear === this.select()['year'])
        this._yElement.classList.add('selected');
      else
        this._yElement.classList.remove('selected');
    },


    // Create the month helper element.
    _monthHelper : function () {
      const t = this;
      const month = d.createElement('div');
      month.classList.add('month');

      // Decrement month
      month.addE('span')
        .onclick = t.decrMonth.bind(t);
      
      t._mElement = month.addE('span');
      t._mElement.addT(loc.MONTH[t._showMonth-1]);
      t._mElement.onclick = function () {
        this.set(this._showYear, this._showMonth);
      }.bind(t);

      t._selectMonth();
      
      // Increment month
      month.addE('span')
        .onclick = t.incrMonth.bind(t);

      return month;
    },

    // Update the month helper view.
    _updateMonth : function () {
      if (this._showMonth === undefined || this._showMonth > 12)
        this._showMonth = 1;

      this._mElement.firstChild.data = loc.MONTH[this._showMonth-1];
      this._selectMonth();
    },


    // Check if the viewed month is current
    _selectMonth : function () {
      const t = this;
      if (t._showYear === t.select()['year'] &&
          t._showMonth === t.select()['month'])
        t._mElement.classList.add('selected');
      else
        t._mElement.classList.remove('selected');
    },


    // Create the day (calendar) helper element.
    _dayHelper : function () {
      const table = d.createElement('table');

      // Localized day view
      const tr = table.addE('thead').addE('tr');
      for (let i = 0; i < 7; i++) {
        tr.addE('th').addT(loc.WDAY[i]);
      };

      this._dBElement = this._dayBody();

      table.appendChild(this._dBElement);
      return table;
    },


    // Create day body for calendar table
    _dayBody : function () {
      const showDate = new Date(
        this._showYear,
        this._showMonth - 1,
        1,
        0,
        0,
        0,
        0
      );
      const date = new Date(
        this._showYear,
        this._showMonth - 1,
        1,
        0,
        0,
        0,
        0
      );
      const today = new Date();
      const that = this;

      // What happens, in case someone clicks
      // on a date
      const click = function () {
        that.set(
          that._showYear,
          that._showMonth,
          parseInt(this.firstChild.data)
        );
      };

      // Skip back to the previous monday (may be in the last month)
      date.setDate(date.getDate() - ((date.getDay() + 6) % 7));

      const tb = d.createElement('tbody');

      const s = this.select();
      
      let tr, i, td;

      // Iterate over all days of the table
      while (1) {

        // Loop through the week
        tr = tb.addE('tr');
        for (i = 0; i < 7; i++) {
          td = tr.addE('td');
          
          // Not part of the current month
          if (date.getMonth() !== showDate.getMonth()) {
            td.classList.add('out');
          }
          else {
            td.onclick = click;
          };
    
          // This is the current day
          if (date.getDate()     === today.getDate() &&
              date.getMonth()    === today.getMonth() &&
              date.getFullYear() === today.getFullYear()) {
            td.classList.add('today');
          };

          // This is the day selected
          if (s && s['day']) {
            if (date.getDate()     === s['day'] &&
                date.getMonth()    === s['month']-1 &&
                date.getFullYear() === s['year']) {
              td.classList.add('selected');
            };
          };
          
          // Add the current day to the table
          td.addT(date.getDate());
    
          // Next day
          date.setDate(date.getDate() + 1);
        };
        
        if (date.getMonth() !== showDate.getMonth())
          break;
      };
      return tb;
    },

    // Update the calendar view
    _updateDay : function () {
      const newBody = this._dayBody();
      this._dBElement.parentNode.replaceChild(
        newBody,
        this._dBElement
      );
      this._dBElement = newBody;
    },


    /**
     * Parse date from string.
     */
    fromString : function (v) {
      if (v === undefined)
        return false;

      if (!KorAP._validDateRE.test(v))
        return false;

      const d = v.split('-', 3);
      d[0] = parseInt(d[0]);
      if (d[1]) d[1] = parseInt(d[1]);
      if (d[2]) d[2] = parseInt(d[2]);

      // Select values
      this.select(d[0], d[1], d[2]);
      return true;
    }
  };
});