Mozilla Protocol
  • 21.1.0

Language Switcher

A component for changing the language of the current page.

Usage

Import using Webpack as an ES module:

import MzpLangSwitcher from '@mozilla-protocol/core/protocol/js/lang-switcher';

Import using Webpack as CommonJS:

const MzpLangSwitcher = require('@mozilla-protocol/core/protocol/js/lang-switcher');

Import as a global variable via a <script> tag:

const MzpLangSwitcher = window.MzpLangSwitcher;

You can then initialize the component using init().

MzpLangSwitcher.init();

You can also pass a custom callback for when a language selection takes place:

MzpLangSwitcher.init((previousLanguage, newLanguage) => {
  console.log('Previous language:', previousLanguage);
  console.log('New language:', newLanguage)
});

Tips

  • Make sure to initialize the component after the DOM has loaded.
  • Assumes the first path in the page URL immediately after hostname is a valid locale code e.g. https://www.mozilla.org/en-US/firefox/.
  • This component can be displayed inside the Footer component, but could also be used elsewhere if more appropriate.
  • The link mzp-c-cta-link is optional, and should be used only if a website has a page dedicated to language selection. If omitted, the form <label> will be displayed visually instead
  • An optional theme class mzp-t-dark can be applied for use on dark backgrounds.
<form class="mzp-c-language-switcher" method="get" action="#">

    <label for="mzp-c-language-switcher-select">Language</label>
    <select name="language" id="mzp-c-language-switcher-select" class="mzp-js-language-switcher-select">
        <option value="en">English</option>
        <option value="de">Deutsch</option>
        <option value="es">Español</option>
        <option value="fr">Français</option>
        <option value="hi-IN">हिन्दी (भारत)</option>
        <option value="ja">日本語</option>
    </select>

    <!-- form submit button is shown when JavaScript is not enabled -->
    <button type="submit">Go</button>
</form>

<script src="../../protocol/js/lang-switcher.js"></script>

<script>
    (function() {
        'use strict';
        // a custom callback can be passed to the lang switcher for analytics purposes.
        MzpLangSwitcher.init(function(previousLanguage, newLanguage) {
            console.log('Previous language:', previousLanguage);
            console.log('New language:', newLanguage);
        });
    })();
</script>