Skip to content

Commit

Permalink
feat(mega-menu): Adding blur handler on featured links - FRONT-4544 (#…
Browse files Browse the repository at this point in the history 
…3531)
  • Loading branch information
@planctus
planctus authored Jul 30, 2024
1 parent f526b26 commit ac3c7a2
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 11 deletions.
32 changes: 32 additions & 0 deletions src/implementations/twig/components/mega-menu/__snapshots__/mega-menu.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -383,6 +383,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 1
Expand All @@ -393,6 +394,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 2
Expand Down Expand Up @@ -948,6 +950,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 1
Expand All @@ -958,6 +961,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 2
Expand Down Expand Up @@ -1449,6 +1453,7 @@ exports[`Mega Menu Default renders correctly with external items in the first le
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 1
Expand All @@ -1459,6 +1464,7 @@ exports[`Mega Menu Default renders correctly with external items in the first le
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 2
Expand Down Expand Up @@ -2014,6 +2020,7 @@ exports[`Mega Menu Default renders correctly with external items in the first le
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 1
Expand All @@ -2024,6 +2031,7 @@ exports[`Mega Menu Default renders correctly with external items in the first le
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 2
Expand Down Expand Up @@ -2517,6 +2525,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 1
Expand All @@ -2527,6 +2536,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 2
Expand Down Expand Up @@ -3082,6 +3092,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 1
Expand All @@ -3092,6 +3103,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 2
Expand Down Expand Up @@ -3583,6 +3595,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 1
Expand All @@ -3593,6 +3606,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
test-featured="testing value"
>
Expand Down Expand Up @@ -4149,6 +4163,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 1
Expand All @@ -4159,6 +4174,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 2
Expand Down Expand Up @@ -4651,6 +4667,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 1
Expand All @@ -4661,6 +4678,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 2
Expand Down Expand Up @@ -5216,6 +5234,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 1
Expand All @@ -5226,6 +5245,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 2
Expand Down Expand Up @@ -5718,6 +5738,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 1
Expand All @@ -5728,6 +5749,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 2
Expand Down Expand Up @@ -6283,6 +6305,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 1
Expand All @@ -6293,6 +6316,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 2
Expand Down Expand Up @@ -6784,6 +6808,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 1
Expand All @@ -6794,6 +6819,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 2
Expand Down Expand Up @@ -7349,6 +7375,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 1
Expand All @@ -7359,6 +7386,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 2
Expand Down Expand Up @@ -7850,6 +7878,7 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 1
Expand All @@ -7860,6 +7889,7 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 2
Expand Down Expand Up @@ -8415,6 +8445,7 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 1
Expand All @@ -8425,6 +8456,7 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
>
<a
class="ecl-link ecl-link--standalone"
data-ecl-mega-menu-featured-link=""
href="/example"
>
Featured link 2
Expand Down
3 changes: 2 additions & 1 deletion src/implementations/twig/components/mega-menu/mega-menu-item.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -346,7 +346,8 @@
<li class="ecl-mega-menu__featured-list__item">
{% include '@ecl/link/link.html.twig' with {
link: item|merge({ type: 'standalone', icon_path: _icon_path }),
extra_attributes: item.extra_attributes|default([]),
extra_attributes: [{ name: 'data-ecl-mega-menu-featured-link' }]|merge(item.extra_attributes|default([])),
extra_classes: item.extra_classes|default(''),
} only %}
</li>
{% endfor %}
Expand Down
68 changes: 58 additions & 10 deletions src/implementations/vanilla/components/mega-menu/mega-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ export class MegaMenu {
containerSelector = '[data-ecl-has-container]',
subItemSelector = '[data-ecl-mega-menu-subitem]',
featuredAttribute = '[data-ecl-mega-menu-featured]',
featuredLinkAttribute = '[data-ecl-mega-menu-featured-link]',
labelOpenAttribute = 'data-ecl-mega-menu-label-open',
labelCloseAttribute = 'data-ecl-mega-menu-label-close',
attachClickListener = true,
Expand Down Expand Up @@ -115,6 +116,7 @@ export class MegaMenu {
this.attachKeyListener = attachKeyListener;
this.attachResizeListener = attachResizeListener;
this.featuredAttribute = featuredAttribute;
this.featuredLinkAttribute = featuredLinkAttribute;

// Private variables
this.direction = 'ltr';
Expand All @@ -136,6 +138,9 @@ export class MegaMenu {
this.totalItemsWidth = 0;
this.breakpointL = 996;
this.openPanel = { num: 0, item: {} };
this.infoLinks = null;
this.seeAllLinks = null;
this.featuredLinks = null;

// Bind `this` for use in callbacks
this.handleClickOnOpen = this.handleClickOnOpen.bind(this);
Expand Down Expand Up @@ -230,19 +235,34 @@ export class MegaMenu {
});
}

const infoLinks = queryAll('.ecl-mega-menu__info-link ', this.element);
if (infoLinks.length > 0) {
infoLinks.forEach((infoLink) => {
infoLink.addEventListener('keyup', this.handleKeyboard);
infoLink.addEventListener('blur', this.handleFocusOut);
this.infoLinks = queryAll('.ecl-mega-menu__info-link a', this.element);
if (this.infoLinks.length > 0) {
this.infoLinks.forEach((infoLink) => {
if (this.attachKeyListener) {
infoLink.addEventListener('keyup', this.handleKeyboard);
}
if (this.attachFocusListener) {
infoLink.addEventListener('blur', this.handleFocusOut);
}
});
}

this.seeAllLinks = queryAll('.ecl-mega-menu__see-all a', this.element);
if (this.seeAllLinks.length > 0) {
this.seeAllLinks.forEach((seeAll) => {
if (this.attachKeyListener) {
seeAll.addEventListener('keyup', this.handleKeyboard);
}
if (this.attachFocusListener) {
seeAll.addEventListener('blur', this.handleFocusOut);
}
});
}

const seeAllLinks = queryAll('.ecl-mega-menu__see-all a', this.element);
if (seeAllLinks.length > 0) {
seeAllLinks.forEach((seeAll) => {
seeAll.addEventListener('keyup', this.handleKeyboard);
seeAll.addEventListener('blur', this.handleFocusOut);
this.featuredLinks = queryAll(this.featuredLinkAttribute, this.element);
if (this.featuredLinks.length > 0 && this.attachFocusListener) {
this.featuredLinks.forEach((featured) => {
featured.addEventListener('blur', this.handleFocusOut);
});
}

Expand Down Expand Up @@ -366,6 +386,34 @@ export class MegaMenu {
});
}

if (this.infoLinks) {
this.infoLinks.forEach((infoLink) => {
if (this.attachFocusListener) {
infoLink.removeEventListener('blur', this.handleFocusOut);
}
if (this.attachKeyListener) {
infoLink.removeEventListener('keyup', this.handleKeyboard);
}
});
}

if (this.seeAllLinks) {
this.seeAllLinks.forEach((seeAll) => {
if (this.attachFocusListener) {
seeAll.removeEventListener('blur', this.handleFocusOut);
}
if (this.attachKeyListener) {
seeAll.removeEventListener('keyup', this.handleKeyboard);
}
});
}

if (this.featuredLinks && this.attachFocusListener) {
this.featuredLinks.forEach((featuredLink) => {
featuredLink.removeEventListener('blur', this.handleFocusOut);
});
}

if (this.attachKeyListener) {
document.removeEventListener('keyup', this.handleKeyboardGlobal);
}
Expand Down

1 comment on commit ac3c7a2

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://v4-dev--europa-component-library.netlify.app

Please sign in to comment.