feat(language-list): Making the list scrollable - FRONT-4564 (#3557)

ec-europa · Aug 12, 2024 · e1bcb5b · e1bcb5b · github-actions · Aug 12, 2024
1 parent bd4bd19
commit e1bcb5b
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 1 deletion.
diff --git a/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap b/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap
@@ -143,6 +143,7 @@ exports[`Site Header EC renders correctly 1`] = `
                     </div>
                     <div
                       class="ecl-site-header__language-content"
+                      data-ecl-language-list-content=""
                     >
                       <div
                         class="ecl-site-header__language-category"
@@ -1224,6 +1225,7 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
                     </div>
                     <div
                       class="ecl-site-header__language-content"
+                      data-ecl-language-list-content=""
                     >
                       <div
                         class="ecl-site-header__language-category"
@@ -2285,6 +2287,7 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
                     </div>
                     <div
                       class="ecl-site-header__language-content"
+                      data-ecl-language-list-content=""
                     >
                       <div
                         class="ecl-site-header__language-category"
@@ -3344,6 +3347,7 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
                     </div>
                     <div
                       class="ecl-site-header__language-content"
+                      data-ecl-language-list-content=""
                     >
                       <div
                         class="ecl-site-header__language-category"
@@ -4403,6 +4407,7 @@ exports[`Site Header EU renders correctly 1`] = `
                     </div>
                     <div
                       class="ecl-site-header__language-content"
+                      data-ecl-language-list-content=""
                     >
                       <div
                         class="ecl-site-header__language-category"

diff --git a/src/implementations/twig/components/site-header/site-header-language-switcher.html.twig b/src/implementations/twig/components/site-header/site-header-language-switcher.html.twig
@@ -97,7 +97,10 @@
       {% endif %}
     </div>
 
-    <div class="ecl-site-header__language-content">
+    <div
+      class="ecl-site-header__language-content"
+      data-ecl-language-list-content
+    >
       {# EU languages #}
       {% if _language_selector.overlay.items is not empty and _language_selector.overlay.items is iterable %}
       <div class="ecl-site-header__language-category" data-ecl-language-list-eu>

diff --git a/src/implementations/vanilla/components/site-header/_site-header-language-switcher.scss b/src/implementations/vanilla/components/site-header/_site-header-language-switcher.scss
@@ -11,6 +11,12 @@ $language-list: null !default;
   position: static;
 }
 
+@mixin with-scrollbar {
+  overflow-y: auto;
+  scrollbar-color: var(--c-n) rgba(0, 0, 0, 0);
+  scrollbar-width: thin;
+}
+
 @mixin arrow-up {
   background-color: map.get($theme, 'color', 'white');
   border: map.get($language-switcher, 'arrow-border');
@@ -82,6 +88,8 @@ $language-list: null !default;
 .ecl-site-header__language-content {
   display: flex;
   flex-direction: column;
+
+  @include with-scrollbar;
 }
 
 .ecl-site-header__language-category-title {

diff --git a/src/implementations/vanilla/components/site-header/site-header.js b/src/implementations/vanilla/components/site-header/site-header.js
@@ -41,6 +41,7 @@ export class SiteHeader {
       languageListOverlaySelector = '[data-ecl-language-list-overlay]',
       languageListEuSelector = '[data-ecl-language-list-eu]',
       languageListNonEuSelector = '[data-ecl-language-list-non-eu]',
+      languageListContentSelector = '[data-ecl-language-list-content]',
       closeOverlaySelector = '[data-ecl-language-list-close]',
       searchToggleSelector = '[data-ecl-search-toggle]',
       searchFormSelector = '[data-ecl-search-form]',
@@ -66,6 +67,7 @@ export class SiteHeader {
     this.languageListOverlaySelector = languageListOverlaySelector;
     this.languageListEuSelector = languageListEuSelector;
     this.languageListNonEuSelector = languageListNonEuSelector;
+    this.languageListContentSelector = languageListContentSelector;
     this.closeOverlaySelector = closeOverlaySelector;
     this.searchToggleSelector = searchToggleSelector;
     this.searchFormSelector = searchFormSelector;
@@ -81,6 +83,7 @@ export class SiteHeader {
     this.languageListOverlay = null;
     this.languageListEu = null;
     this.languageListNonEu = null;
+    this.languageListContent = null;
     this.close = null;
     this.focusTrap = null;
     this.searchToggle = null;
@@ -101,6 +104,7 @@ export class SiteHeader {
     this.handleKeyboardGlobal = this.handleKeyboardGlobal.bind(this);
     this.handleClickGlobal = this.handleClickGlobal.bind(this);
     this.handleResize = this.handleResize.bind(this);
+    this.setLanguageListHeight = this.setLanguageListHeight.bind(this);
   }
 
   /**
@@ -131,6 +135,7 @@ export class SiteHeader {
     this.languageListOverlay = queryOne(this.languageListOverlaySelector);
     this.languageListEu = queryOne(this.languageListEuSelector);
     this.languageListNonEu = queryOne(this.languageListNonEuSelector);
+    this.languageListContent = queryOne(this.languageListContentSelector);
     this.close = queryOne(this.closeOverlaySelector);
 
     // Create focus trap
@@ -373,6 +378,22 @@ export class SiteHeader {
     }
   }
 
+  /**
+   * Set a max height for the language list content
+   */
+  setLanguageListHeight() {
+    const viewportHeight = window.innerHeight;
+
+    if (this.languageListContent) {
+      const listTop = this.languageListContent.getBoundingClientRect().top;
+
+      const availableSpace = viewportHeight - listTop;
+      if (availableSpace > 0) {
+        this.languageListContent.style.maxHeight = `${availableSpace}px`;
+      }
+    }
+  }
+
   /**
    * Shows the modal language list overlay.
    */
@@ -381,6 +402,7 @@ export class SiteHeader {
     this.languageListOverlay.hidden = false;
     this.languageListOverlay.setAttribute('aria-modal', 'true');
     this.languageLink.setAttribute('aria-expanded', 'true');
+    this.setLanguageListHeight();
   }
 
   /**