Skip to content
Snippets Groups Projects
Commit 39ae6394 authored by Sascha Eggenberger's avatar Sascha Eggenberger
Browse files

Fix JS messages dismiss button

parent 6a2f7899
No related branches found
No related tags found
No related merge requests found
((Drupal, once) => {
Drupal.behaviors.ginMessages = {
Drupal.theme.message = (_ref, _ref2) => {
let {text} = _ref, {type, id} = _ref2;
const messagesTypes = Drupal.Message.getMessageTypeLabels(), messageWrapper = document.createElement("div");
return messageWrapper.setAttribute("class", `messages-list__item messages messages--${type}`),
messageWrapper.setAttribute("role", "error" === type || "warning" === type ? "alert" : "status"),
messageWrapper.setAttribute("data-drupal-message-id", id), messageWrapper.setAttribute("data-drupal-message-type", type),
messageWrapper.setAttribute("aria-label", messagesTypes[type]), messageWrapper.innerHTML = `\n <div class="messages__header">\n <h2 id="${id}-title" class="messages__title">\n ${messagesTypes[type]}\n </h2>\n </div>\n <div class="messages__content">\n ${text}\n </div>\n <button type="button" class="button button--dismiss js-message-button-close" title="${Drupal.t("Dismiss")}">\n <span class="icon-close"></span>\n ${Drupal.t("Close")}\n </button>\n `,
Drupal.ginMessages.dismissMessages(messageWrapper), messageWrapper;
}, Drupal.behaviors.ginMessages = {
attach: context => {
Drupal.ginMessages.dismissMessages(context);
}
}, Drupal.ginMessages = {
dismissMessages: function() {
let context = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : document;
once("gin-messages-dismiss", ".messages .button--dismiss", context).forEach((dismissButton => {
once("gin-messages-dismiss", ".js-message-button-close", context).forEach((dismissButton => {
dismissButton.addEventListener("click", (e => {
e.preventDefault();
const message = e.currentTarget.closest(".messages-list__item");
Drupal.ginMessages.hideMessage(message);
const message = dismissButton.parentNode;
message.classList.contains("messages-list__item") && (message.style.opacity = 0,
message.classList.add("visually-hidden"));
}));
}));
},
hideMessage: message => {
message.style.opacity = 0, message.classList.add("visually-hidden");
}
};
})(Drupal, once);
\ No newline at end of file
......@@ -42,6 +42,8 @@ libraries-override:
css/theme/colors.css: false
libraries-extend:
core/drupal.message:
- gin/messages
core/drupal.tableselect:
- gin/tableselect
core/drupal.tableheader:
......
......@@ -148,7 +148,7 @@ gin_description_toggle:
js:
dist/js/description_toggle.js: { minified: false }
gin_messages:
messages:
js:
dist/js/messages.js: { minified: false }
dependencies:
......
......@@ -6,6 +6,58 @@
/* eslint-disable func-names, no-mutable-exports, comma-dangle, strict */
((Drupal, once) => {
/**
* 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('data-drupal-message-id', id);
messageWrapper.setAttribute('data-drupal-message-type', type);
messageWrapper.setAttribute('aria-label', messagesTypes[type]);
messageWrapper.innerHTML = `
<div class="messages__header">
<h2 id="${id}-title" class="messages__title">
${messagesTypes[type]}
</h2>
</div>
<div class="messages__content">
${text}
</div>
<button type="button" class="button button--dismiss js-message-button-close" title="${Drupal.t('Dismiss')}">
<span class="icon-close"></span>
${Drupal.t('Close')}
</button>
`;
// Attach event listener
Drupal.ginMessages.dismissMessages(messageWrapper);
return messageWrapper;
};
Drupal.behaviors.ginMessages = {
attach: (context) => {
Drupal.ginMessages.dismissMessages(context);
......@@ -14,18 +66,18 @@
Drupal.ginMessages = {
dismissMessages: (context = document) => {
once('gin-messages-dismiss', '.messages .button--dismiss', context).forEach(dismissButton => {
once('gin-messages-dismiss', '.js-message-button-close', context).forEach(dismissButton => {
dismissButton.addEventListener('click', e => {
e.preventDefault();
const message = e.currentTarget.closest('.messages-list__item');
Drupal.ginMessages.hideMessage(message);
const message = dismissButton.parentNode;
if (message.classList.contains('messages-list__item')) {
message.style.opacity = 0;
message.classList.add('visually-hidden');
}
});
});
},
hideMessage: (message) => {
message.style.opacity = 0;
message.classList.add('visually-hidden');
},
};
})(Drupal, once);
......@@ -22,7 +22,6 @@
* @see claro_preprocess_status_messages().
*/
#}
{{ attach_library('gin/gin_messages') }}
<div data-drupal-messages class="messages-list">
<div class="messages__wrapper">
{% for type, messages in message_list %}
......@@ -41,33 +40,27 @@
%}
<div role="contentinfo" aria-labelledby="{{ title_ids[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>
{% if type == 'error' %}
<div role="alert">
{% endif %}
{% if is_message_with_title or is_message_with_icon %}
<div class="messages__header">
{% if is_message_with_title %}
<h2 id="{{ title_ids[type] }}" class="messages__title">
{{ status_headings[type] }}
</h2>
{% endif %}
</div>
{% endif %}
<button type="button" class="button button--dismiss" title="{{ 'Dismiss'|t }}"><span class="icon-close"></span>{{ 'Close'|t }}</button>
<div class="messages__content">
{% if messages|length > 1 %}
<ul class="messages__list">
{% for message in messages %}
<li class="messages__item">{{ message }}</li>
{% endfor %}
</ul>
{% else %}
{{ messages|first }}
{% if is_message_with_title or is_message_with_icon %}
<div class="messages__header">
{% if is_message_with_title %}
<h2 id="{{ title_ids[type] }}" class="messages__title">
{{ status_headings[type] }}
</h2>
{% endif %}
</div>
{% if type == 'error' %}
</div>
{% endif %}
<div class="messages__content">
{% if messages|length > 1 %}
<ul class="messages__list">
{% for message in messages %}
<li class="messages__item">{{ message }}</li>
{% endfor %}
</ul>
{% else %}
{{ messages|first }}
{% endif %}
</div>
<button type="button" class="button button--dismiss js-message-button-close" title="{{ 'Dismiss'|t }}"><span class="icon-close"></span>{{ 'Close'|t }}</button>
</div>
{# Remove type specific classes. #}
{% set attributes = attributes.removeClass(classes) %}
......
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