Unverified Commit 4814a98d authored by lauriii's avatar lauriii

Issue #3173900 by mherchel, kuldeep_mehra27, Spokje, nod_, mglaman, droplet:...

Issue #3173900 by mherchel, kuldeep_mehra27, Spokje, nod_, mglaman, droplet: Refactor Olivero's JavaScript Drupal behaviors to use once()
parent 4d65de51
......@@ -3,7 +3,7 @@
* Messages.
*/
((Drupal) => {
((Drupal, once) => {
/**
* Adds close button to the message.
*
......@@ -28,8 +28,6 @@
closeBtnWrapper.appendChild(closeBtn);
closeBtn.appendChild(closeBtnText);
message.classList.add('messages-processed');
closeBtn.addEventListener('click', () => {
message.classList.add('hidden');
});
......@@ -58,7 +56,7 @@
messageWrapper.setAttribute(
'class',
`messages-list__item messages messages--${type} messages-processed`,
`messages-list__item messages messages--${type}`,
);
messageWrapper.setAttribute(
'role',
......@@ -114,13 +112,7 @@
*/
Drupal.behaviors.messages = {
attach(context) {
const messages = context.querySelectorAll(
'.messages:not(.messages-processed)',
);
messages.forEach((message) => {
closeMessage(message);
});
once('olivero-messages', '.messages', context).forEach(closeMessage);
},
};
})(Drupal);
})(Drupal, once);
......@@ -5,7 +5,7 @@
* @preserve
**/
(function (Drupal) {
(function (Drupal, once) {
var closeMessage = function closeMessage(message) {
var messageContainer = message.querySelector('.messages__container');
var closeBtnWrapper = document.createElement('div');
......@@ -19,7 +19,6 @@
messageContainer.appendChild(closeBtnWrapper);
closeBtnWrapper.appendChild(closeBtn);
closeBtn.appendChild(closeBtnText);
message.classList.add('messages-processed');
closeBtn.addEventListener('click', function () {
message.classList.add('hidden');
});
......@@ -31,7 +30,7 @@
id = _ref2.id;
var messagesTypes = Drupal.Message.getMessageTypeLabels();
var messageWrapper = document.createElement('div');
messageWrapper.setAttribute('class', "messages-list__item messages messages--".concat(type, " messages-processed"));
messageWrapper.setAttribute('class', "messages-list__item messages messages--".concat(type));
messageWrapper.setAttribute('role', type === 'error' || type === 'warning' ? 'alert' : 'status');
messageWrapper.setAttribute('aria-labelledby', "".concat(id, "-title"));
messageWrapper.setAttribute('data-drupal-message-id', id);
......@@ -63,10 +62,7 @@
Drupal.behaviors.messages = {
attach: function attach(context) {
var messages = context.querySelectorAll('.messages:not(.messages-processed)');
messages.forEach(function (message) {
closeMessage(message);
});
once('olivero-messages', '.messages', context).forEach(closeMessage);
}
};
})(Drupal);
\ No newline at end of file
})(Drupal, once);
\ No newline at end of file
((Drupal) => {
((Drupal, once) => {
/**
* Checks if navWrapper contains "is-active" class.
* @param {object} navWrapper
......@@ -103,13 +103,15 @@
* Initialize the navigation JS.
*/
Drupal.behaviors.oliveroNavigation = {
attach(context, settings) {
attach(context) {
const navWrapperId = 'header-nav';
const navWrapper = context.querySelector(
`#${navWrapperId}:not(.${navWrapperId}-processed)`,
);
const navWrapper = once(
'olivero-navigation',
`#${navWrapperId}`,
context,
).shift();
if (navWrapper) {
navWrapper.classList.add(`${navWrapperId}-processed`);
const { olivero } = Drupal;
const navButton = context.querySelector('.mobile-nav-button');
const body = context.querySelector('body');
......@@ -122,7 +124,6 @@
focusableNavElements[focusableNavElements.length - 1];
init({
settings,
olivero,
navWrapperId,
navWrapper,
......@@ -135,4 +136,4 @@
}
},
};
})(Drupal);
})(Drupal, once);
......@@ -5,7 +5,7 @@
* @preserve
**/
(function (Drupal) {
(function (Drupal, once) {
function isNavOpen(navWrapper) {
return navWrapper.classList.contains('is-active');
}
......@@ -71,12 +71,11 @@
}
Drupal.behaviors.oliveroNavigation = {
attach: function attach(context, settings) {
attach: function attach(context) {
var navWrapperId = 'header-nav';
var navWrapper = context.querySelector("#".concat(navWrapperId, ":not(.").concat(navWrapperId, "-processed)"));
var navWrapper = once('olivero-navigation', "#".concat(navWrapperId), context).shift();
if (navWrapper) {
navWrapper.classList.add("".concat(navWrapperId, "-processed"));
var olivero = Drupal.olivero;
var navButton = context.querySelector('.mobile-nav-button');
var body = context.querySelector('body');
......@@ -85,7 +84,6 @@
var firstFocusableEl = focusableNavElements[0];
var lastFocusableEl = focusableNavElements[focusableNavElements.length - 1];
init({
settings: settings,
olivero: olivero,
navWrapperId: navWrapperId,
navWrapper: navWrapper,
......@@ -98,4 +96,4 @@
}
}
};
})(Drupal);
\ No newline at end of file
})(Drupal, once);
\ No newline at end of file
((Drupal) => {
((Drupal, once) => {
function init(el) {
const tabs = el.querySelector('.tabs');
const expandedClass = 'is-expanded';
......@@ -32,9 +32,7 @@
Drupal.behaviors.tabs = {
attach(context) {
context
.querySelectorAll('[data-drupal-nav-tabs]')
.forEach((el) => init(el));
once('olivero-tabs', '[data-drupal-nav-tabs]', context).forEach(init);
},
};
})(Drupal);
})(Drupal, once);
......@@ -5,7 +5,7 @@
* @preserve
**/
(function (Drupal) {
(function (Drupal, once) {
function init(el) {
var tabs = el.querySelector('.tabs');
var expandedClass = 'is-expanded';
......@@ -37,9 +37,7 @@
Drupal.behaviors.tabs = {
attach: function attach(context) {
context.querySelectorAll('[data-drupal-nav-tabs]').forEach(function (el) {
return init(el);
});
once('olivero-tabs', '[data-drupal-nav-tabs]', context).forEach(init);
}
};
})(Drupal);
\ No newline at end of file
})(Drupal, once);
\ No newline at end of file
......@@ -64,6 +64,7 @@ global-styling:
- core/drupal.element.matches
- core/drupal.nodelist.foreach
- core/drupal
- core/once
book:
css:
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment