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

Resolve #3214515 "Js messages fix"

parent 6a2f7899
No related branches found
No related tags found
1 merge request!418Resolve #3214515 "Js messages fix"
Pipeline #164756 passed
Stage: build
Stage: test
Hide whitespace changes
Inline Side-by-side
dist/js/messages.js
+ 13
− 7
View file @ 3eb8abc7
((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-hide" title="${Drupal.t("Hide")}">\n <span class="icon-close"></span>\n ${Drupal.t("Hide")}\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-hide", 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
gin.info.yml
+ 2
− 0
View file @ 3eb8abc7
......@@ -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:
......
gin.libraries.yml
+ 1
− 1
View file @ 3eb8abc7
......@@ -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:
......
js/messages.js
+ 59
− 7
View file @ 3eb8abc7
......@@ -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-hide" title="${Drupal.t('Hide')}">
<span class="icon-close"></span>
${Drupal.t('Hide')}
</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-hide', 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);
templates/misc/status-messages.html.twig
+ 21
− 25
View file @ 3eb8abc7
......@@ -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,30 @@
%}
<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-hide" title="{{ 'Hide'|t }}">
<span class="icon-close"></span>
{{ 'Hide'|t }}
</button>
</div>
{# Remove type specific classes. #}
{% set attributes = attributes.removeClass(classes) %}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment