Skip to content
Snippets Groups Projects
Commit 9900e751 authored by Ivica Puljic's avatar Ivica Puljic
Browse files

Issue #3484771 by pivica: Drupal messages are broken in Drupal 10.3

parent 7cd0beee
No related branches found
No related tags found
1 merge request!8Issue #3484771 by pivica: Drupal messages are broken in Drupal 10.3
......@@ -28,6 +28,9 @@ libraries:
- bs_bootstrap/global-styling
libraries-extend:
core/drupal.message:
- bs_lib/messages
- bs_bootstrap/messages
core/drupal.tabledrag:
- bs_bootstrap/tabledrag
entity_browser/tabs:
......
......@@ -36,6 +36,10 @@ maintenance-page:
component:
css/layout/maintenance-page.css: {}
messages:
js:
js/messages.js: {}
tabledrag:
js:
js/tabledrag.js: {}
......
/**
* @file
* Message template overrides.
*/
((Drupal) => {
const statusClasses = {
'status': 'success',
'error': 'danger',
'warning': 'warning',
'info': 'info',
};
/**
* Overrides messageInternalWrapper static function.
*
*/
Drupal.Message.messageInternalWrapper = function(messageWrapper) {
const innerWrapper = document.createElement('div');
innerWrapper.setAttribute('class', 'alerts__wrapper');
messageWrapper.insertAdjacentElement('afterbegin', innerWrapper);
return innerWrapper;
}
/**
* 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',
`alert alert-${statusClasses[type]} alert-dismissible fade show`,
);
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);
messageWrapper.innerHTML = `
<button type="button" class="close" data-dismiss="alert" aria-label="${Drupal.t('Close')}">
<span aria-hidden="true">&times;</span>
</button>
<h2 id="${id}-title" class="sr-only">
${messagesTypes[type]}
</h2>
${text}
`;
return messageWrapper;
};
})(Drupal);
......@@ -54,7 +54,9 @@
%}
{% block message %}
<div{{ attributes.addClass(classes) }} role="alert">
<a href="#" role="button" class="close" data-dismiss="alert" aria-label="{{ 'Close'|t }}"><span aria-hidden="true">&times;</span></a>
<button href="#" role="button" class="close" data-dismiss="alert" aria-label="{{ 'Close'|t }}">
<span aria-hidden="true">&times;</span>
</button>
{% if status_headings[type] %}
<h2 class="sr-only">{{ status_headings[type] }}</h2>
{% endif %}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment