| |
@@ -1,444 +0,0 @@
|
| |
- /**
|
| |
- * Universal Language Selector
|
| |
- * ULS core component.
|
| |
- *
|
| |
- * Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
|
| |
- * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other
|
| |
- * contributors. See CREDITS for a list.
|
| |
- *
|
| |
- * UniversalLanguageSelector is dual licensed GPLv2 or later and MIT. You don't
|
| |
- * have to do anything special to choose one license or the other and you don't
|
| |
- * have to notify anyone which license you are using. You are free to use
|
| |
- * UniversalLanguageSelector in commercial projects as long as the copyright
|
| |
- * header is left intact. See files GPL-LICENSE and MIT-LICENSE for details.
|
| |
- *
|
| |
- * @file
|
| |
- * @ingroup Extensions
|
| |
- * @licence GNU General Public Licence 2.0 or later
|
| |
- * @licence MIT License
|
| |
- */
|
| |
-
|
| |
- ( function ( $ ) {
|
| |
- 'use strict';
|
| |
-
|
| |
- var template, ULS;
|
| |
-
|
| |
- // Region numbers in id attributes also appear in the langdb.
|
| |
- /*jshint multistr:true */
|
| |
- template = '<div class="grid uls-menu uls-wide"> \
|
| |
- <div class="row"> \
|
| |
- <span id="uls-close" class="uls-icon-close"></span> \
|
| |
- </div> \
|
| |
- <div class="row"> \
|
| |
- <div class="uls-title-region seven columns">\
|
| |
- <h1 data-i18n="uls-select-language" class="uls-title">Select Language</h1>\
|
| |
- </div>\
|
| |
- <div class="five columns uls-map-block" id="uls-map-block">\
|
| |
- <div class="row">\
|
| |
- <div data-regiongroup="1" id="uls-region-1" class="three columns uls-region uls-region-1">\
|
| |
- <a data-i18n="uls-region-WW">Worldwide</a>\
|
| |
- </div>\
|
| |
- <div class="nine columns">\
|
| |
- <div class="row uls-worldmap">\
|
| |
- <div data-regiongroup="2" id="uls-region-2" class="four columns uls-region">\
|
| |
- <a data-i18n="uls-region-AM">America</a>\
|
| |
- </div>\
|
| |
- <div data-regiongroup="3" id="uls-region-3" class="four columns uls-region">\
|
| |
- <a><span data-i18n="uls-region-EU">Europe</span><br>\
|
| |
- <span data-i18n="uls-region-ME">Middle East</span><br>\
|
| |
- <span data-i18n="uls-region-AF">Africa</span></a>\
|
| |
- </div>\
|
| |
- <div data-regiongroup="4" id="uls-region-4" class="four columns uls-region">\
|
| |
- <a><span data-i18n="uls-region-AS">Asia</span><br>\
|
| |
- <span data-i18n="uls-region-PA">Pacific</span></a>\
|
| |
- </div>\
|
| |
- </div>\
|
| |
- </div>\
|
| |
- </div>\
|
| |
- </div>\
|
| |
- </div>\
|
| |
- <div id="search" class="row uls-search"> \
|
| |
- <div class="one column">\
|
| |
- <span class="uls-search-label"></span>\
|
| |
- </div>\
|
| |
- <div class="ten columns">\
|
| |
- <div id="uls-search-input-block" class="uls-search-input-block">\
|
| |
- <input type="text" class="uls-filterinput uls-filtersuggestion" id="uls-filtersuggestion" disabled="true"\
|
| |
- autocomplete="off" /> <input type="text" class="uls-filterinput uls-languagefilter" id="uls-languagefilter"\
|
| |
- data-clear="uls-languagefilter-clear" data-suggestion="uls-filtersuggestion"\
|
| |
- placeholder="Language search" autocomplete="off" />\
|
| |
- </div>\
|
| |
- </div>\
|
| |
- <div class="one column">\
|
| |
- <span id="uls-languagefilter-clear" class="uls-languagefilter-clear"></span>\
|
| |
- </div>\
|
| |
- </div>\
|
| |
- <div class="row uls-language-list"></div>\
|
| |
- <div class="row" id="uls-settings-block"></div>\
|
| |
- </div>';
|
| |
- /*jshint multistr:false */
|
| |
-
|
| |
- /**
|
| |
- * ULS Public class definition
|
| |
- */
|
| |
- ULS = function ( element, options ) {
|
| |
- this.$element = $( element );
|
| |
- this.options = $.extend( {}, $.fn.uls.defaults, options );
|
| |
- this.$menu = $( template );
|
| |
- this.languages = this.options.languages;
|
| |
-
|
| |
- for ( var code in this.languages ) {
|
| |
- if ( $.uls.data.languages[code] === undefined ) {
|
| |
- // Language is unknown to ULS.
|
| |
- delete this.languages[code];
|
| |
- }
|
| |
- }
|
| |
-
|
| |
- this.left = this.options.left;
|
| |
- this.top = this.options.top;
|
| |
- this.shown = false;
|
| |
- this.initialized = false;
|
| |
-
|
| |
- this.$languageFilter = this.$menu.find( '#uls-languagefilter' );
|
| |
- this.$regionFilters = this.$menu.find( '.uls-region' );
|
| |
- this.$resultsView = this.$menu.find( 'div.uls-language-list' );
|
| |
-
|
| |
- this.render();
|
| |
- this.listen();
|
| |
- this.ready();
|
| |
- };
|
| |
-
|
| |
- ULS.prototype = {
|
| |
- constructor: ULS,
|
| |
-
|
| |
- /**
|
| |
- * A "hook" that runs after the ULS constructor.
|
| |
- * At this point it is not guaranteed that the ULS has its dimensions
|
| |
- * and that the languages lists are initialized.
|
| |
- *
|
| |
- * To use it, pass a function as the onReady parameter
|
| |
- * in the options when initializing ULS.
|
| |
- */
|
| |
- ready: function () {
|
| |
- if ( this.options.onReady ) {
|
| |
- this.options.onReady.call( this );
|
| |
- }
|
| |
- },
|
| |
-
|
| |
- /**
|
| |
- * A "hook" that runs after the ULS panel becomes visible
|
| |
- * by using the show method.
|
| |
- *
|
| |
- * To use it, pass a function as the onVisible parameter
|
| |
- * in the options when initializing ULS.
|
| |
- */
|
| |
- visible: function () {
|
| |
- if ( this.options.onVisible ) {
|
| |
- this.options.onVisible.call( this );
|
| |
- }
|
| |
- },
|
| |
-
|
| |
- /**
|
| |
- * Calculate the position of ULS
|
| |
- * Returns an object with top and left properties.
|
| |
- * @returns {Object}
|
| |
- * position is set by setting also window height and margin
|
| |
- */
|
| |
- position: function () {
|
| |
- var pos = $.extend( {}, this.$element.offset(), {
|
| |
- height: this.$element[0].offsetHeight
|
| |
- } );
|
| |
- return {
|
| |
- top: this.top !== undefined ? this.top : pos.top - (447+10),
|
| |
- left: this.left !== undefined ? this.left : '25%'
|
| |
- };
|
| |
- },
|
| |
-
|
| |
- /**
|
| |
- * Show the ULS window
|
| |
- */
|
| |
- show: function () {
|
| |
- this.$menu.css( this.position() );
|
| |
-
|
| |
- if ( this.options.compact ) {
|
| |
- this.$menu.addClass( 'uls-compact' );
|
| |
- }
|
| |
-
|
| |
- if ( !this.initialized ) {
|
| |
- $( 'body' ).prepend( this.$menu );
|
| |
- this.i18n();
|
| |
-
|
| |
- // Initialize with a full search.
|
| |
- // This happens on first time click of uls trigger.
|
| |
- this.defaultSearch();
|
| |
-
|
| |
- this.initialized = true;
|
| |
- }
|
| |
-
|
| |
- // hide any other visible ULS
|
| |
- $( '.uls-menu' ).hide();
|
| |
-
|
| |
- this.$menu.show();
|
| |
- this.$menu.scrollIntoView();
|
| |
- this.shown = true;
|
| |
-
|
| |
- if ( !this.isMobile() ) {
|
| |
- this.$languageFilter.focus();
|
| |
- }
|
| |
-
|
| |
- this.visible();
|
| |
- },
|
| |
-
|
| |
- i18n: function () {
|
| |
- if ( $.i18n ) {
|
| |
- this.$menu.find( '[data-i18n]' ).i18n();
|
| |
- this.$languageFilter.prop( 'placeholder', $.i18n( 'uls-search-placeholder' ) );
|
| |
- }
|
| |
- },
|
| |
-
|
| |
- defaultSearch: function () {
|
| |
- this.$resultsView.lcd( 'empty' );
|
| |
-
|
| |
- this.$regionFilters.regionselector( 'show' );
|
| |
- },
|
| |
-
|
| |
- /**
|
| |
- * Hide the ULS window
|
| |
- */
|
| |
- hide: function () {
|
| |
- this.$menu.hide();
|
| |
- this.shown = false;
|
| |
- },
|
| |
-
|
| |
- /**
|
| |
- * Render the UI elements.
|
| |
- * Does nothing by default. Can be used for customization.
|
| |
- */
|
| |
- render: function () {
|
| |
- // Rendering stuff here
|
| |
- },
|
| |
-
|
| |
- /**
|
| |
- * Callback for no results found context.
|
| |
- */
|
| |
- noresults: function () {
|
| |
- $( '.regionselector' ).removeClass( 'active' );
|
| |
- this.$resultsView.lcd( 'noResults' );
|
| |
- },
|
| |
-
|
| |
- /**
|
| |
- * callback for results found context.
|
| |
- */
|
| |
- success: function () {
|
| |
- $( '.regionselector' ).removeClass( 'active' );
|
| |
- this.$resultsView.show();
|
| |
- },
|
| |
-
|
| |
- /**
|
| |
- * Bind the UI elements with their event listeners
|
| |
- */
|
| |
- listen: function () {
|
| |
- var lcd,
|
| |
- uls = this;
|
| |
-
|
| |
- // Register all event listeners to the ULS here.
|
| |
- this.$element.on( 'click', $.proxy( this.click, this ) );
|
| |
-
|
| |
- this.$languageFilter.on( 'searchclear.uls', $.proxy( this.defaultSearch, this ) );
|
| |
- this.$languageFilter.on( 'noresults.uls', $.proxy( this.noresults, this ) );
|
| |
- this.$languageFilter.on( 'resultsfound.uls', $.proxy( this.success, this ) );
|
| |
-
|
| |
- // Close when clicking on the close button
|
| |
- this.$menu.find( '#uls-close' ).on( 'click', $.proxy( this.cancel, this ) );
|
| |
- // Don't do anything if pressing on empty space in the ULS
|
| |
- this.$menu.on( 'click', function ( e ) {
|
| |
- e.stopPropagation();
|
| |
- } );
|
| |
-
|
| |
- // Handle key press events on the menu
|
| |
- this.$menu.on( 'keypress', $.proxy( this.keypress, this ) )
|
| |
- .on( 'keyup', $.proxy( this.keyup, this ) );
|
| |
-
|
| |
- if ( this.eventSupported( 'keydown' ) ) {
|
| |
- this.$menu.on( 'keydown', $.proxy( this.keypress, this ) );
|
| |
- }
|
| |
-
|
| |
- lcd = this.$resultsView.lcd( {
|
| |
- languages: this.languages,
|
| |
- quickList: this.options.quickList,
|
| |
- clickhandler: $.proxy( this.select, this ),
|
| |
- source: this.$languageFilter,
|
| |
- showRegions: this.options.showRegions,
|
| |
- languageDecorator: this.options.languageDecorator
|
| |
- } ).data( 'lcd' );
|
| |
-
|
| |
- this.$languageFilter.languagefilter( {
|
| |
- $target: lcd,
|
| |
- languages: this.languages,
|
| |
- searchAPI: this.options.searchAPI,
|
| |
- onSelect: $.proxy( this.select, this )
|
| |
- } );
|
| |
-
|
| |
- // Create region selectors, one per region
|
| |
- this.$menu.find( '.uls-region, .uls-region-link' ).regionselector( {
|
| |
- $target: lcd,
|
| |
- languages: this.languages,
|
| |
- success: function ( regionfilter ) {
|
| |
- // Deactivate search filtering
|
| |
- uls.$languageFilter.languagefilter( 'deactivate' );
|
| |
-
|
| |
- // If it is the WW region, show the quicklist
|
| |
- if ( regionfilter.regionGroup === 1 ) {
|
| |
- lcd.quicklist();
|
| |
- }
|
| |
-
|
| |
- // Show 'results view' if we are in no results mode
|
| |
- uls.success();
|
| |
- },
|
| |
- noresults: function () {
|
| |
- uls.$languageFilter.languagefilter( 'clear' );
|
| |
- }
|
| |
- } );
|
| |
-
|
| |
- $( 'html' ).click( $.proxy( this.cancel, this ) );
|
| |
- },
|
| |
-
|
| |
- /**
|
| |
- * On select handler for search results
|
| |
- * @param langCode
|
| |
- */
|
| |
- select: function ( langCode ) {
|
| |
- this.hide();
|
| |
- this.$languageFilter.trigger( 'searchclear' );
|
| |
- if ( this.options.onSelect ) {
|
| |
- this.options.onSelect.call( this, langCode );
|
| |
- }
|
| |
- },
|
| |
-
|
| |
- /**
|
| |
- * On cancel handler for the uls menu
|
| |
- */
|
| |
- cancel: function () {
|
| |
- this.hide();
|
| |
-
|
| |
- if ( this.options.onCancel ) {
|
| |
- this.options.onCancel.call( this );
|
| |
- }
|
| |
- },
|
| |
-
|
| |
- keyup: function ( e ) {
|
| |
- if ( !this.shown ) {
|
| |
- return;
|
| |
- }
|
| |
-
|
| |
- if ( e.keyCode === 27 ) { // escape
|
| |
- this.cancel();
|
| |
- e.preventDefault();
|
| |
- e.stopPropagation();
|
| |
- }
|
| |
- },
|
| |
-
|
| |
- keypress: function ( e ) {
|
| |
- if ( !this.shown ) {
|
| |
- return;
|
| |
- }
|
| |
-
|
| |
- if ( e.keyCode === 27 ) { // escape
|
| |
- this.cancel();
|
| |
- e.preventDefault();
|
| |
- e.stopPropagation();
|
| |
- }
|
| |
- },
|
| |
-
|
| |
- click: function ( e ) {
|
| |
- e.stopPropagation();
|
| |
- e.preventDefault();
|
| |
-
|
| |
- if ( this.shown ) {
|
| |
- this.hide();
|
| |
- } else {
|
| |
- this.show();
|
| |
- }
|
| |
- },
|
| |
-
|
| |
- eventSupported: function ( eventName ) {
|
| |
- var isSupported = eventName in this.$menu;
|
| |
-
|
| |
- if ( !isSupported ) {
|
| |
- this.$element.setAttribute( eventName, 'return;' );
|
| |
- isSupported = typeof this.$element[eventName] === 'function';
|
| |
- }
|
| |
-
|
| |
- return isSupported;
|
| |
- },
|
| |
-
|
| |
- isMobile: function () {
|
| |
- return navigator.userAgent.match( /(iPhone|iPod|iPad|Android|BlackBerry)/ );
|
| |
- }
|
| |
- };
|
| |
-
|
| |
- /* ULS PLUGIN DEFINITION
|
| |
- * =========================== */
|
| |
-
|
| |
- $.fn.uls = function ( option ) {
|
| |