gristlabs_grist-core/app/client/widgets/DateEditor.js

/* global $, document */
const moment = require('moment-timezone');
const _ = require('underscore');
const gutil = require('app/common/gutil');
const commands = require('../components/commands');
const dispose = require('../lib/dispose');
const dom = require('../lib/dom');
const kd = require('../lib/koDom');
const TextEditor = require('./TextEditor');
const { parseDate } = require('app/common/parseDate');

// DatePicker unfortunately requires an <input> (not <textarea>). But textarea is better for us,
// because sometimes it's taller than a line, and an <input> looks worse. The following
// unconsionable hack tricks Datepicker into thinking anything it's attached to is an input.
// It's more reasonable to just modify boostrap-datepicker, but that has its own downside (with
// upgrading and minification). This hack, however, is simpler than other workarounds.
var Datepicker = $.fn.datepicker.Constructor;
// datepicker.isInput can now be set to anything, but when read, always returns true. Tricksy.
Object.defineProperty(Datepicker.prototype, 'isInput', {
  get: function() { return true; },
  set: function(v) {},
});

/**
 * DateEditor - Editor for Date type. Includes a dropdown datepicker.
 *  See reference: http://bootstrap-datepicker.readthedocs.org/en/latest/index.html
 *
 * @param {String} options.timezone: Optional timezone to use instead of UTC.
 */
function DateEditor(options) {
  // A string that is always `UTC` in the DateEditor, eases DateTimeEditor inheritance.
  this.timezone = options.timezone || 'UTC';
  this.dateFormat = options.field.widgetOptionsJson.peek().dateFormat;

  // Strip moment format string to remove markers unsupported by the datepicker.
  this.safeFormat = DateEditor.parseMomentToSafe(this.dateFormat);

  // Use the default local timezone to format the placeholder date.
  let defaultTimezone = moment.tz.guess();
  let placeholder = moment.tz(defaultTimezone).format(this.safeFormat);
  TextEditor.call(this, _.defaults(options, { placeholder: placeholder }));

  // Set the edited value, if not explicitly given, to the formatted version of cellValue.
  this.textInput.value = gutil.undef(options.state, options.editValue,
    this.formatValue(options.cellValue, this.safeFormat));

  // Indicates whether keyboard navigation is active for the datepicker.
  this._keyboardNav = false;

  // Attach the datepicker.
  this._datePickerWidget = $(this.textInput).datepicker({
    keyboardNavigation: false,
    forceParse: false,
    todayHighlight: true,
    todayBtn: 'linked',
    // Convert the stripped format string to one suitable for the datepicker.
    format: DateEditor.parseSafeToCalendar(this.safeFormat)
  });
  this.autoDisposeCallback(() => this._datePickerWidget.datepicker('remove'));

  // NOTE: Datepicker interferes with normal enter and escape functionality. Add an event handler
  // to the DatePicker to prevent interference with normal behavior.
  this._datePickerWidget.on('keydown', e => {
    // If enter or escape is pressed, destroy the datepicker and re-dispatch the event.
    if (e.keyCode === 13 || e.keyCode === 27) {
      this._datePickerWidget.datepicker('remove');
      // The current target of the event will be the textarea.
      setTimeout(() => e.currentTarget.dispatchEvent(e.originalEvent), 0);
    }
  });

  // When the up/down arrow is pressed, modify the datepicker options to take control of
  // the arrow keys for date selection.
  let datepickerCommands = Object.assign({}, options.commands, {
    datepickerFocus: () => { this._allowKeyboardNav(true); }
  });
  this._datepickerCommands = this.autoDispose(commands.createGroup(datepickerCommands, this, true));

  this._datePickerWidget.on('show', () => {
    // A workaround to allow clicking in the datepicker without losing focus.
    dom(document.querySelector('.datepicker'),
      kd.attr('tabIndex', 0),                   // allows datepicker to gain focus
      kd.toggleClass('clipboard_focus', true)   // tells clipboard to not steal focus from us
    );
    // Attach command group to the input to allow switching keyboard focus to the datepicker.
    dom(this.textInput,
      // If the user inputs text into the textbox, take keyboard focus from the datepicker.
      dom.on('input', () => { this._allowKeyboardNav(false); }),
      this._datepickerCommands.attach()
    );
  });
}

dispose.makeDisposable(DateEditor);
_.extend(DateEditor.prototype, TextEditor.prototype);

/** @inheritdoc */
DateEditor.prototype.getCellValue = function() {
  let timestamp = parseDate(this.textInput.value, {
    dateFormat: this.safeFormat,
    timezone: this.timezone
  });
  return timestamp !== null ? timestamp : this.textInput.value;
};

// Helper to allow/disallow keyboard navigation within the datepicker.
DateEditor.prototype._allowKeyboardNav = function(bool) {
  if (this._keyboardNav !== bool) {
    this._keyboardNav = bool;
    $(this.textInput).data().datepicker.o.keyboardNavigation = bool;
    // Force parse must be turned on with keyboard navigation, since it forces the highlighted date
    // to be used when enter is pressed. Otherwise, keyboard date selection will have no effect.
    $(this.textInput).data().datepicker.o.forceParse = bool;
  }
};

// Moment value formatting helper.
DateEditor.prototype.formatValue = function(value, formatString) {
  if (_.isNumber(value) && formatString) {
    return moment.tz(value*1000, this.timezone).format(formatString);
  } else {
    return "";
  }
};

// Formats Moment string to remove markers unsupported by the datepicker.
// Moment reference: http://momentjs.com/docs/#/displaying/
DateEditor.parseMomentToSafe = function(mFormat) {
  // Remove markers not representing year, month, or date, and also DDD, DDDo, DDDD, d, do,
  // (and following whitespace/punctuation) since they are unsupported by the datepicker.
  mFormat = mFormat.replace(/\b(?:[^DMY\W]+|D{3,4}o*)\b\W+/g, '');
  // Convert other markers unsupported by the datepicker to similar supported markers.
  mFormat = mFormat.replace(/\b([MD])o\b/g, '$1'); // Mo -> M, Do -> D
  // Check which information the format contains. Format is only valid for editing if it
  // contains day, month and year information.
  var dayRe = /D{1,2}/g;
  var monthRe = /M{1,4}/g;
  var yearRe = /Y{2,4}/g;
  var valid = dayRe.test(mFormat) && monthRe.test(mFormat) && yearRe.test(mFormat);
  return valid ? mFormat : 'YYYY-MM-DD'; // Use basic format if given is invalid.
};

// Formats Moment string without datepicker unsupported markers for the datepicker.
// Datepicker reference: http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#format
DateEditor.parseSafeToCalendar = function(sFormat) {
  // M -> m, MM -> mm, D -> d, DD -> dd, YY -> yy, YYYY -> yyyy
  sFormat = sFormat.replace(/\b(?:[MD]{1,2}|Y{2,4})\b/g, function(x) {
    return x.toLowerCase();
  });
  sFormat = sFormat.replace(/\bM{2}(?=M{1,2}\b)/g, ''); // MMM -> M, MMMM -> MM
  sFormat = sFormat.replace(/\bddd\b/g, 'D'); // ddd -> D
  return sFormat.replace(/\bdddd\b/g, 'DD'); // dddd -> DD
};


module.exports = DateEditor;