Mozilla Protocol
  • 22.0.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>