EC System

Language select (Page) - Primary

Documentation • Demo

Language selector | Page level

Why and how to use this component

The language selector offers the alternative language versions of the page’s main content.

The current language is indicated and the user can easily select a different language. It appears below the breadcrumb and above the page header.

When to use this component

  • on every page for which the user’s preferred language is not available

Do not use this component

  • if the site is only in one language, the language selector must not be implemented at the page level
  • if the site is translated, implementation of the corporate language selector is optional (in case of technical complexity)
{#
  Parameters:
    - "unavailable" (string) (default: 'English'): unavailable language
    - "current" (string) (default: ''): current language
    - "is_primary" (string) (default: false)
    - "dropdown_label" (string) (default: 'Choose your language'): if a the component is a dropdown, this option will set the aria-label
    - "options" (array) (default: []): array of objects [
        {
          - "href" (string)
          - "hreflang" (string)
          - "label" (string)
          - "lang" (string)
        }
      ]
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-lang-select-page' with {
  'unavailable': unavailable|default('English'),
  'current': current|default(''),
  'is_primary': is_primary|default(false),
  'dropdown_label': dropdown_label|default(''),
  'options': options|default([]),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([])
} only %}
 
{
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () {\n        ECL.eclLangSelectPages({\n          dropdownOnChange: function (event) { alert('language changed to: ' + event.target.value ) }\n        });\n      });"
  },
  "unavailable": "français",
  "current": "Nederlands",
  "options": [
    {
      "href": "/en",
      "hreflang": "en",
      "label": "English",
      "lang": "en"
    },
    {
      "href": "/hr",
      "hreflang": "hr",
      "label": "hrvatski",
      "lang": "hr"
    },
    {
      "href": "/it",
      "hreflang": "it",
      "label": "italiano",
      "lang": "it"
    },
    {
      "href": "/lv",
      "hreflang": "lv",
      "label": "latviesu",
      "lang": "lv"
    },
    {
      "href": "/hu",
      "hreflang": "hu",
      "label": "magyar",
      "lang": "hu"
    }
  ],
  "is_primary": true
}
 
<section class="ecl-lang-select-page ecl-lang-select-page--primary">
  <span class="ecl-icon ecl-icon--generic-lang ecl-lang-select-page__icon"></span>
  <span class="ecl-lang-select-page__unavailable">français</span>
  <select class="ecl-lang-select-page__dropdown" aria-label="Choose your language">
    <option class="ecl-lang-select-page__dropdown-option" value="" selected>Nederlands</option>
    <option class="ecl-lang-select-page__dropdown-option" value="en" lang="en">English</option>
    <option class="ecl-lang-select-page__dropdown-option" value="hr" lang="hr">hrvatski</option>
    <option class="ecl-lang-select-page__dropdown-option" value="it" lang="it">italiano</option>
    <option class="ecl-lang-select-page__dropdown-option" value="lv" lang="lv">latviesu</option>
    <option class="ecl-lang-select-page__dropdown-option" value="hu" lang="hu">magyar</option>
  </select>
  <ul class="ecl-lang-select-page__list">
    <li class="ecl-lang-select-page__option ecl-lang-select-page__option--is-selected">Nederlands</li>
    <li class="ecl-lang-select-page__option">

      <a class="ecl-link ecl-link--inverted" href="/en" hreflang="en" lang="en" rel="alternate">English</a>
    </li>
    <li class="ecl-lang-select-page__option">

      <a class="ecl-link ecl-link--inverted" href="/hr" hreflang="hr" lang="hr" rel="alternate">hrvatski</a>
    </li>
    <li class="ecl-lang-select-page__option">

      <a class="ecl-link ecl-link--inverted" href="/it" hreflang="it" lang="it" rel="alternate">italiano</a>
    </li>
    <li class="ecl-lang-select-page__option">

      <a class="ecl-link ecl-link--inverted" href="/lv" hreflang="lv" lang="lv" rel="alternate">latviesu</a>
    </li>
    <li class="ecl-lang-select-page__option">

      <a class="ecl-link ecl-link--inverted" href="/hu" hreflang="hu" lang="hu" rel="alternate">magyar</a>
    </li>
  </ul>
</section>
  • Content: 
    import debounce from 'lodash.debounce';
import { queryAll } from '@ecl/ec-base/helpers/dom';

export const eclLangSelectPages = ({
  selector: selector = '.ecl-lang-select-page',
  toggleClass: toggleClass = 'ecl-lang-select-page--dropdown',
  listSelector: listSelector = '.ecl-lang-select-page__list',
  dropdownSelector: dropdownSelector = '.ecl-lang-select-page__dropdown',
  dropdownOnChange: dropdownOnChange = undefined,
} = {}) => {
  // SUPPORTS
  if (
    !('querySelector' in document) ||
    !('addEventListener' in window) ||
    !document.documentElement.classList
  )
    return null;

  const langSelectPagesContainers = queryAll(selector);

  function toggle(lsp) {
    if (!lsp) return null;

    const list = queryAll(listSelector, lsp)[0];

    if (!lsp.classList.contains(toggleClass)) {
      if (list && list.offsetLeft + list.offsetWidth > lsp.offsetWidth) {
        lsp.classList.add(toggleClass);
      }
    } else {
      const dropdown = queryAll(dropdownSelector, lsp)[0];
      if (dropdown.offsetLeft + list.offsetWidth < lsp.offsetWidth) {
        lsp.classList.remove(toggleClass);
      }
    }

    return true;
  }

  function init() {
    // On load
    langSelectPagesContainers.forEach(lsp => {
      toggle(lsp);

      if (dropdownOnChange) {
        const dropdown = queryAll(dropdownSelector, lsp)[0];

        if (dropdown) {
          dropdown.addEventListener('change', dropdownOnChange);
        }
      }
    });

    window.addEventListener(
      'resize',
      debounce(
        () => {
          langSelectPagesContainers.forEach(toggle);
        },
        100,
        { maxWait: 300 }
      )
    );
  }

  return init();
};

export default eclLangSelectPages;
  • URL: /components/raw/ec-component-lang-select-page/ec-component-lang-select-page.js
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-lang-select-page/ec-component-lang-select-page.js
  • Size: 1.7 KB
  • Content: 
    /*
 * Language selector (page level)
 * @define lang-select-page
 *
 * Note: `.ecl-lang-select-page--dropdown` is automatically added/removed (JS)
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-component-lang-select-page/generic-component-lang-select-page';
@import '@ecl/ec-component-form-select/ec-component-form-select';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(('ec-style-icon', 'ec-component-link'));

// Use generic mixin
@include exports('ec-component-lang-select-page') {
  @include ecl-lang-select-page();
}
  • URL: /components/raw/ec-component-lang-select-page/ec-component-lang-select-page.scss
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-lang-select-page/ec-component-lang-select-page.scss
  • Size: 605 Bytes
  • Handle: @ecl/ec-component-lang-select-page--primary
  • Tags: molecule
  • Variants (2): Default , Primary
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-lang-select-page/ec-component-lang-select-page.twig