Language select (Page) - Default

Documentation • Demo

Ready

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)

View
Context
HTML
Code
Info


        {#
  Accepts:
    - "unavailable" (string): unavailable language
    - "current" (string): current language
    - "theme" (string): empty or "primary"
    - "dropdown_label" (string): if a the component is a dropdown, this option will set the aria-label
    - "options" (array): array of objects
      - "href" (string)
      - "hreflang" (string)
      - "label" (string)
      - "lang" (string)
#}

{# Internal properties #}

{% set _css_class = 'ecl-lang-select-page' %}
{% set _extra_attributes = '' %}
{% set _unavailable = unavailable|default('English') %}
{% set _dropdown_label = dropdown_label|default('Choose your language') %}

{# Internal logic - Process properties #}

{% if theme is defined %}
  {% set _css_class = _css_class ~ ' ecl-lang-select-page--' ~ theme %}
{% endif %}

{% if extra_class is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_class %}
{% endif %}

{% if extra_attributes is defined %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
  {% endfor %}
{% endif %}

<section class="{{ _css_class }}" {{ _extra_attributes|raw }}>
  <span class="ecl-icon ecl-icon--generic-lang ecl-lang-select-page__icon"></span>
  <span class="ecl-lang-select-page__unavailable">{{ _unavailable }}</span>
  <select class="ecl-lang-select-page__dropdown" aria-label="{{ _dropdown_label }}">
    <option class="ecl-lang-select-page__dropdown-option" value="" selected>{{ current }}</option>
    {% for opt in options %}
      <option class="ecl-lang-select-page__dropdown-option" value="{{ opt.lang }}" lang="{{ opt.lang }}">{{ opt.label }}</option>
    {% endfor %}
  </select>
  <ul class="ecl-lang-select-page__list">
    <li class="ecl-lang-select-page__option ecl-lang-select-page__option--is-selected">{{ current }}</li>
    {% for opt in options %}
    <li class="ecl-lang-select-page__option">
      {% set link_variant = '' %}
      {% if theme is defined and theme == 'primary' %}
        {% set link_variant = 'inverted' %}
      {% endif %}

      {% include '@ec-europa/ecl-links' with {
        'extra_attributes': [
          { 'name': 'hreflang', 'value': opt.hreflang },
          { 'name': 'lang', 'value': opt.lang },
          { 'name': 'rel', 'value': 'alternate' },
        ],
        'variant': link_variant
        }|merge(opt)
      %}
    </li>
    {% endfor %}
  </ul>
</section>


        
            
            {
  "_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"
    }
  ]
}


        
        <section class="ecl-lang-select-page">
  <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" href="/en" hreflang="en" lang="en" rel="alternate">English</a>
    </li>
    <li class="ecl-lang-select-page__option">

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

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

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

      <a class="ecl-link" href="/hu" hreflang="hu" lang="hu" rel="alternate">magyar</a>
    </li>
  </ul>
</section>

File:

Content:


                                /*
 * Language selector (page level)
 * @define lang-select-page
 *
 * Note: `.ecl-lang-select-page--dropdown` is automatically added/removed (JS)
 */

// TODO: SWITCH ecl-lang-select-page--dropdown with JS

@import '~@ec-europa/ecl-forms-selects/mixins';

.ecl-lang-select-page {
  @include ecl-hidden-print();

  align-items: center;
  background-color: map-get($ecl-colors, 'grey-5');
  border-bottom: 1px solid map-get($ecl-colors, 'grey-50');
  color: $ecl-color-shade;
  display: flex;
  flex-wrap: nowrap;
  font-size: map-get($ecl-font-size, 'xs');
  margin: 0;
  min-height: 3rem;
  overflow: hidden;

  .no-js & {
    flex-wrap: wrap;
  }
}

.ecl-lang-select-page__icon {
  @include ecl-hidden-print();

  flex-grow: 0;
  flex-shrink: 0;
  font-size: map-get($ecl-font-size, 'xl');
}

.ecl-lang-select-page__unavailable {
  padding: map-get($ecl-spacing, 's') map-get($ecl-spacing, 'xs');
  text-decoration: line-through;

  @include ecl-media-breakpoint-up(sm) {
    margin-right: map-get($ecl-spacing, 'l');
  }
}

.ecl-lang-select-page__list {
  align-items: stretch;
  align-self: stretch;
  display: flex;
  flex-wrap: no-wrap;
  margin: 0;
  padding: 0;

  .ecl-lang-select-page--dropdown & {
    position: absolute;
    visibility: hidden;
  }

  .no-js & {
    flex-grow: 1;
    flex-wrap: wrap;
  }
}

.ecl-lang-select-page__option {
  align-items: center;
  display: flex;
  list-style: none;
  padding: map-get($ecl-spacing, 's') map-get($ecl-spacing, 'xs');
}

.ecl-lang-select-page__option--is-selected {
  background-color: map-get($ecl-colors, 'yellow-100');
  color: #000;
  font-weight: bold;
}

.ecl-lang-select-page__dropdown {
  @include ecl-hidden-print();
  @include ecl-select-list-arrow($background-color: transparent, $arrow-grey: true);

  align-self: stretch;
  appearance: none;
  border: 0;
  border-radius: 0;
  color: $ecl-color-shade;
  cursor: pointer;
  font-size: map-get($ecl-font-size, 'xs');
  font-weight: bold;
  padding: map-get($ecl-spacing, 's') map-get($ecl-spacing, 'l')
    map-get($ecl-spacing, 's') map-get($ecl-spacing, 's');
  position: absolute;
  visibility: hidden;

  // Fix for IE 10+.
  &::-ms-expand {
    display: none;
  }

  .ecl-lang-select-page--dropdown & {
    position: static;
    visibility: visible;
  }
}

// Useful in Firefox
.ecl-lang-select-page__dropdown-option {
  padding: map-get($ecl-spacing, 'xxs');
}

/* Variant */

.ecl-lang-select-page--primary {
  background-color: $ecl-color-primary;
  border-bottom: 1px solid #fff;
  color: #fff;

  .ecl-lang-select-page__dropdown {
    @include ecl-select-list-arrow($background-color: map-get($ecl-colors, 'blue-110'), $arrow-grey: false);

    background-color: map-get($ecl-colors, 'blue-110');
    color: #fff;
  }
}

URL: /components/raw/ecl-lang-select-pages/_lang-select-pages.scss
Filesystem Path: framework/components/ecl-lang-select-pages/_lang-select-pages.scss
Size: 2.8 KB

Content:


                                import debounce from 'lodash.debounce';
import { queryAll } from '@ec-europa/ecl-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/ecl-lang-select-pages/lang-select-pages.js
Filesystem Path: framework/components/ecl-lang-select-pages/lang-select-pages.js
Size: 1.7 KB

Handle: @ec-europa/ecl-lang-select-pages--default
Tags: molecule
Variants (2): Default , Primary
Preview:
- With layout
- Component only
Filesystem Path: framework/components/ecl-lang-select-pages/ecl-lang-select-pages.twig