Universal Language Selector jQuery Plugin

Wikimedia February 12, 2023

$universal-language-selector-jquery-plugin$

Wikimedia Universal Language Selector(ULS) is a jQuery plugin that allows you to implement a clean Wikimedia Universal Language Selector on your website.

Universal Language Selector(ULS) jQuery Plugin Implementation

Include the latest jQuery library on your website

Include necessary jQuery ULS files on the page

Create a container for the Language Selector

Select Language

Initialize the plugin on the trigger element

$(document).ready(function(){
  $('.uls-trigger').uls({
    onSelect: function(language){
      var languageName = $.uls.data.getAutonym(language);
      $( '.uls-trigger' ).text( languageName );
    },
    quickList: ['en', 'hi', 'he', 'ml', 'ta', 'fr']
  });
});

All default options

{
    // CSS top position for the dialog
    top: undefined,
    // CSS left position for the dialog
    left: undefined,
    // Callback function when user selects a language
    onSelect: undefined,
    // Callback function when the dialog is closed without selecting a language
    onCancel: undefined,
    // Callback function when ULS has initialized
    onReady: undefined,
    // Callback function when ULS dialog is shown
    onVisible: undefined,
    // Languages to be used for ULS, default is all languages
    languages: $.uls.data.getAutonyms(),
    // The options are wide (4 columns), medium (2 columns), and narrow (1 column).
    // If not specified, it will be set automatically.
    menuWidth: undefined,
    // What is this ULS used for.
    // Should be set for distinguishing between different instances of ULS
    // in the same application.
    ulsPurpose: '',
    // Used by LCD
    quickList: [],
    // Used by LCD
    showRegions: undefined,
    // Used by LCD
    languageDecorator: undefined,
    // Used by LCD
    noResultsTemplate: undefined,
    // Used by LCD
    itemsPerColumn: undefined,
    // Used by LCD
    groupByRegion: undefined,
    // Used by LanguageFilter
    searchAPI: undefined
}