drupal/core/misc/date.js

85 lines
2.8 KiB
JavaScript

/**
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
(function (Modernizr, Drupal, once) {
Drupal.behaviors.date = {
attach(context, settings) {
if (Modernizr.inputtypes.date === false) {
once('datepicker', '[data-drupal-field-elements="date-time"]').forEach(dateTime => {
const dateInput = dateTime.querySelector('input[type="date"]');
const timeInput = dateTime.querySelector('input[type="time"]');
const help = Drupal.theme.dateTimeHelp({
dateId: `${dateInput.id}--description`,
dateDesc: dateInput.dataset.help,
timeId: `${timeInput.id}--description`,
timeDesc: timeInput.dataset.help
});
[dateInput, timeInput].forEach(input => {
input.setAttribute('aria-describedby', `${input.id}--description`);
input.setAttribute('type', 'text');
});
Drupal.DatepickerPolyfill.attachDescription(dateTime, help);
});
once('datepicker', '[data-drupal-field-elements="date"]').forEach(date => {
const dateInput = date.querySelector('input[type="date"]');
const help = Drupal.theme.dateHelp({
dateDesc: dateInput.dataset.help
});
const id = `${date.id}--description`;
dateInput.setAttribute('aria-describedby', id);
dateInput.setAttribute('type', 'text');
Drupal.DatepickerPolyfill.attachDescription(date, help, id);
});
}
}
};
Drupal.DatepickerPolyfill = class {
static attachDescription(element, help, id) {
let description = element.nextElementSibling;
if (!(description && description.getAttribute('data-drupal-field-elements') === 'description')) {
description = Drupal.DatepickerPolyfill.descriptionWrapperElement(id);
element.parentNode.insertBefore(description, element.nextSibling);
}
description.insertAdjacentHTML('beforeend', help);
}
static descriptionWrapperElement(id) {
const description = document.createElement('div');
description.classList.add('description');
description.setAttribute('data-drupal-field-elements', 'description');
if (id) {
description.setAttribute('id', id);
}
return description;
}
};
Drupal.theme.dateHelp = _ref => {
let {
dateDesc
} = _ref;
return `<div class="no-native-datepicker-help">${dateDesc}</div>`;
};
Drupal.theme.dateTimeHelp = _ref2 => {
let {
dateId,
timeId,
dateDesc,
timeDesc
} = _ref2;
return `<div class="no-native-datepicker-help">
<span id="${dateId}">${dateDesc}</span> <span id="${timeId}">${timeDesc}</span>
</div>`;
};
})(Modernizr, Drupal, once);