Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(language switcher): add resize event - FRONT-4013 #2933

Merged
merged 1 commit into from
Jul 5, 2023
Merged

feat(language switcher): add resize event - FRONT-4013 #2933

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 38 additions & 7 deletions src/implementations/vanilla/components/site-header/site-header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { createFocusTrap } from 'focus-trap';
* @param {String} options.loginBoxSelector
* @param {Boolean} options.attachClickListener Whether or not to bind click events
* @param {Boolean} options.attachKeyListener Whether or not to bind keyboard events
* @param {Boolean} options.attachResizeListener Whether or not to bind resize events
*/
export class SiteHeader {
/**
Expand Down Expand Up @@ -47,6 +48,7 @@ export class SiteHeader {
loginBoxSelector = '[data-ecl-login-box]',
attachClickListener = true,
attachKeyListener = true,
attachResizeListener = true,
} = {}
) {
// Check element
Expand All @@ -71,6 +73,7 @@ export class SiteHeader {
this.loginBoxSelector = loginBoxSelector;
this.attachClickListener = attachClickListener;
this.attachKeyListener = attachKeyListener;
this.attachResizeListener = attachResizeListener;

// Private variables
this.languageMaxColumnItems = 8;
Expand All @@ -84,6 +87,7 @@ export class SiteHeader {
this.searchForm = null;
this.loginToggle = null;
this.loginBox = null;
this.resizeTimer = null;

// Bind `this` for use in callbacks
this.openOverlay = this.openOverlay.bind(this);
Expand All @@ -94,6 +98,7 @@ export class SiteHeader {
this.handleKeyboardLanguage = this.handleKeyboardLanguage.bind(this);
this.handleKeyboardGlobal = this.handleKeyboardGlobal.bind(this);
this.handleClickGlobal = this.handleClickGlobal.bind(this);
this.handleResize = this.handleResize.bind(this);
}

/**
Expand All @@ -107,6 +112,9 @@ export class SiteHeader {
if (this.attachClickListener) {
document.addEventListener('click', this.handleClickGlobal);
}
if (this.attachResizeListener) {
window.addEventListener('resize', this.handleResize);
}

// Site header elements
this.container = queryOne(this.containerSelector);
Expand Down Expand Up @@ -195,15 +203,19 @@ export class SiteHeader {
document.removeEventListener('click', this.handleClickGlobal);
}

if (this.attachResizeListener) {
window.removeEventListener('resize', this.handleResize);
}

if (this.element) {
this.element.removeAttribute('data-ecl-auto-initialized');
}
}

/**
* Shows the modal language list overlay.
* Update display of the modal language list overlay.
*/
openOverlay() {
updateOverlay() {
// Check number of items and adapt display
let columnsEu = 1;
let columnsNonEu = 1;
Expand Down Expand Up @@ -242,11 +254,6 @@ export class SiteHeader {
}
}

// Display language list
this.languageListOverlay.hidden = false;
this.languageListOverlay.setAttribute('aria-modal', 'true');
this.languageLink.setAttribute('aria-expanded', 'true');

// Check total width, and change display if needed
this.languageListEu.parentNode.classList.remove(
'ecl-site-header__language-content--stack'
Expand Down Expand Up @@ -333,6 +340,16 @@ export class SiteHeader {
}
}

/**
* Shows the modal language list overlay.
*/
openOverlay() {
// Display language list
this.languageListOverlay.hidden = false;
this.languageListOverlay.setAttribute('aria-modal', 'true');
this.languageLink.setAttribute('aria-expanded', 'true');
}

/**
* Hides the modal language list overlay.
*/
Expand All @@ -354,12 +371,26 @@ export class SiteHeader {

if (this.languageListOverlay.hasAttribute('hidden')) {
this.openOverlay();
this.updateOverlay();
this.focusTrap.activate();
} else {
this.focusTrap.deactivate();
}
}

/**
* Trigger events on resize
* Uses a debounce, for performance
*/
handleResize() {
if (this.languageListOverlay.hasAttribute('hidden')) return;

clearTimeout(this.resizeTimer);
this.resizeTimer = setTimeout(() => {
this.updateOverlay();
}, 200);
}

/**
* Handles keyboard events specific to the language list.
*
Expand Down