/**
* @file
* Customization of messages.
*/
((Drupal, once) => {
/**
* Adds a close button to the message.
*
* @param {object} message
* The message object.
*/
const closeMessage = (message) => {
const messageContainer = message.querySelector('.messages__container');
const closeBtnWrapper = document.createElement('div');
closeBtnWrapper.setAttribute('class', 'messages__button');
const closeBtn = document.createElement('button');
closeBtn.setAttribute('type', 'button');
closeBtn.setAttribute('class', 'messages__close');
const closeBtnText = document.createElement('span');
closeBtnText.setAttribute('class', 'visually-hidden');
closeBtnText.innerText = Drupal.t('Close message');
messageContainer.appendChild(closeBtnWrapper);
closeBtnWrapper.appendChild(closeBtn);
closeBtn.appendChild(closeBtnText);
closeBtn.addEventListener('click', () => {
message.classList.add('hidden');
});
};
/**
* Overrides message theme function.
*
* @param {object} message
* The message object.
* @param {string} message.text
* The message text.
* @param {object} options
* The message context.
* @param {string} options.type
* The message type.
* @param {string} options.id
* ID of the message, for reference.
*
* @return {HTMLElement}
* A DOM Node.
*/
Drupal.theme.message = ({ text }, { type, id }) => {
const messagesTypes = Drupal.Message.getMessageTypeLabels();
const messageWrapper = document.createElement('div');
messageWrapper.setAttribute(
'class',
`messages-list__item messages messages--${type}`,
);
messageWrapper.setAttribute(
'role',
type === 'error' || type === 'warning' ? 'alert' : 'status',
);
messageWrapper.setAttribute('aria-labelledby', `${id}-title`);
messageWrapper.setAttribute('data-drupal-message-id', id);
messageWrapper.setAttribute('data-drupal-message-type', type);
let svg = '';
if (['error', 'warning', 'status', 'info'].indexOf(type) > -1) {
svg =
'';
}
messageWrapper.innerHTML = `
`;
closeMessage(messageWrapper);
return messageWrapper;
};
/**
* Get messages from context.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Attaches the close button behavior for messages.
*/
Drupal.behaviors.messages = {
attach(context) {
once('olivero-messages', '.messages', context).forEach(closeMessage);
},
};
})(Drupal, once);