Club Drupal

(function ($) {

Drupal.behaviors.dateYearRange = {};

Drupal.behaviors.dateYearRange.attach = function (context, settings) {

  var $textfield, $textfields, i;

  // Turn the years back and forward fieldsets into dropdowns.

  $textfields = $('input.select-list-with-custom-option', context).once('date-year-range');

  for (i = 0; i < $textfields.length; i++) {

    $textfield = $($textfields[i]);

    new Drupal.dateYearRange.SelectListWithCustomOption($textfield);

  }

};

Drupal.dateYearRange = {};

/**

 * Constructor for the SelectListWithCustomOption object.

 *

 * This object is responsible for turning the years back and forward textfields

 * into dropdowns with an 'other' option that lets the user enter a custom

 * value.

 */

Drupal.dateYearRange.SelectListWithCustomOption = function ($textfield) {

  this.$textfield = $textfield;

  this.$description = $textfield.next('div.description');

  this.defaultValue = $textfield.val();

  this.$dropdown = this.createDropdown();

  this.$dropdown.insertBefore($textfield);

};

/**

 * Get the value of the textfield as it existed on page load.

 *

 * @param {String} type

 *   The type of the variable to be returned. Defaults to string.

 * @return

 *   The original value of the textfield. Returned as an integer, if the type

 *   parameter was 'int'.

 */

Drupal.dateYearRange.SelectListWithCustomOption.prototype.getOriginal = function (type) {

  var original;

  if (type === 'int') {

    original = parseInt(this.defaultValue, 10);

    if (window.isNaN(original)) {

      original = 0;

    }

  }

  else {

    original = this.defaultValue;

  }

  return original;

};

/**

 * Get the correct first value for the dropdown.

 */

Drupal.dateYearRange.SelectListWithCustomOption.prototype.getStartValue = function () {

  var direction = this.getDirection();

  var start;

  switch (direction) {

    case 'back':

      // For the 'years back' dropdown, the first option should be -10, unless

      // the default value of the textfield is even smaller than that.

      start = Math.min(this.getOriginal('int'), -10);

      break;

    case 'forward':

      start = 0;

      break;

  }

  return start;

};

/**

 * Get the correct last value for the dropdown.

 */

Drupal.dateYearRange.SelectListWithCustomOption.prototype.getEndValue = function () {

  var direction = this.getDirection();

  var end;

  var originalString = this.getOriginal();

  switch (direction) {

    case 'back':

      end = 0;

      break;

    case 'forward':

      // If the original value of the textfield is an absolute year such as

      // 2020, don't try to include it in the dropdown.

      if (originalString.indexOf('+') === -1) {

        end = 10;

      }

      // If the original value is a relative value (+x), we want it to be

      // included in the possible dropdown values.

      else {

        end = Math.max(this.getOriginal('int'), 10);

      }

      break;

  }

  return end;

};

/**

 * Create a dropdown select list with the correct options for this textfield.

 */

Drupal.dateYearRange.SelectListWithCustomOption.prototype.createDropdown = function () {

  var $dropdown = $('<select>').addClass('form-select date-year-range-select');

  var $option, i, value;

  var start = this.getStartValue();

  var end = this.getEndValue();

  var direction = this.getDirection();

  for (i = start; i <= end; i++) {

    // Make sure we include the +/- sign in the option value.

    value = i;

    if (i > 0) {

      value = '+' + i;

    }

    // Zero values must have a + or - in front.

    if (i === 0) {

      if (direction === 'back') {

        value = '-' + i;

      }

      else {

        value = '+' + i;

      }

    }

    $option = $('<option>' + Drupal.formatPlural(value, '@count year from now', '@count years from now') + '</option>').val(value);

    $dropdown.append($option);

  }

  // Create an 'Other' option.

  $option = $('<option class="custom-option">' + Drupal.t('Other') + '</option>').val('');

  $dropdown.append($option);

  // When the user changes the selected option in the dropdown, perform

  // appropriate actions (such as showing or hiding the textfield).

  $dropdown.bind('change', $.proxy(this.handleDropdownChange, this));

  // Set the initial value of the dropdown.

  this._setInitialDropdownValue($dropdown);

  return $dropdown;

};

Drupal.dateYearRange.SelectListWithCustomOption.prototype._setInitialDropdownValue = function ($dropdown) {

  var textfieldValue = this.getOriginal();

  // Determine whether the original textfield value exists in the dropdown.

  var possible = $dropdown.find('option[value="' + textfieldValue + '"]');

  // If the original textfield value is one of the dropdown options, preselect

  // it and hide the 'other' textfield.

  if (possible.length) {

    $dropdown.val(textfieldValue);

    this.hideTextfield();

  }

  // If the original textfield value isn't one of the dropdown options, choose

  // the 'Other' option in the dropdown.

  else {

    $dropdown.val('');

  }

};

/**

 * Determine whether this is the "years back" or "years forward" textfield.

 */

Drupal.dateYearRange.SelectListWithCustomOption.prototype.getDirection = function () {

  if (this.direction) {

    return this.direction;

  }

  var direction;

  if (this.$textfield.hasClass('back')) {

    direction = 'back';

  }

  else if (this.$textfield.hasClass('forward')) {

    direction = 'forward';

  }

  this.direction = direction;

  return direction;

};

/**

 * Change handler for the dropdown, to modify the textfield as appropriate.

 */

Drupal.dateYearRange.SelectListWithCustomOption.prototype.handleDropdownChange = function () {

  // Since the dropdown changed, we need to make the content of the textfield

  // match the (new) selected option.

  this.syncTextfield();

  // Show the textfield if the 'Other' option was selected, and hide it if one

  // of the preset options was selected.

  if ($(':selected', this.$dropdown).hasClass('custom-option')) {

    this.revealTextfield();

  }

  else {

    this.hideTextfield();

  }

};

/**

 * Display the textfield and its description.

 */

Drupal.dateYearRange.SelectListWithCustomOption.prototype.revealTextfield = function () {

  this.$textfield.show();

  this.$description.show();

};

/**

 * Hide the textfield and its description.

 */

Drupal.dateYearRange.SelectListWithCustomOption.prototype.hideTextfield = function () {

  this.$textfield.hide();

  this.$description.hide();

};

/**

 * Copy the selected value of the dropdown to the textfield.

 *

 * FAPI doesn't know about the JS-only dropdown, so the textfield needs to

 * reflect the value of the dropdown.

 */

Drupal.dateYearRange.SelectListWithCustomOption.prototype.syncTextfield = function () {

  var value = this.$dropdown.val();

  this.$textfield.val(value);

};

})(jQuery);