Basic language selector

* uses setlang attribute in URL to switch language
* introduced a language filter widget by extending
  jquery.ui.autocomplete
* UI rendering is done by using SkinAfterContent hook

Change-Id: Ifa63a04ba1d060b6db8fba14bb868045cf6b97c3
This commit is contained in:
Santhosh Thottingal
2012-06-19 15:04:24 +05:30
parent 8527e33475
commit 9087825e6d
9 changed files with 302 additions and 71 deletions

View File

@@ -1,48 +1,59 @@
(function($) {
(function ( $, mw ) {
"use strict";
var ULS = function(element, options) {
var ULS = function( element, options ) {
this.$element = $( element );
this.options = $.extend( {}, $.fn.uls.defaults, options );
this.$menu = $( this.options.menu ).appendTo( 'body' );
this.$menu = $( this.options.menu );
this.shown = false;
this.render();
this.listen();
}
};
ULS.prototype = {
constructor : ULS,
show : function() {
constructor: ULS,
show: function() {
var pos = $.extend( {}, this.$element.offset(), {
height : this.$element[0].offsetHeight
height: this.$element[0].offsetHeight
} );
this.$menu.css( {
top : pos.top + pos.height,
left : '25%' //pos.left // FIXME
top: pos.top + pos.height,
left: '25%' //pos.left // FIXME
} );
this.$menu.show();
this.shown = true;
return this;
},
hide : function() {
hide: function() {
this.$menu.hide();
this.shown = false;
return this;
},
render: function(){
// TODO : All UI construction code to go here.
var $heading = $("<h2>").text(mw.msg("uls-select-content-language"));
this.$menu.append($heading);
var $wordldMap = $("<div id='worldmap'>");
this.$menu.append($wordldMap);
render: function() {
// Rendering stuff here
},
listen : function() {
listen: function() {
// Register all event listeners to the ULS here.
this.$element.on( 'click', $.proxy( this.click, this ) );
this.$menu.on( 'keyup', $.proxy( this.click, this ) )
.on( 'keypress', $.proxy( this.click, this ) );
$( ".icon-close" ).on( 'click', $.proxy( this.click, this ) );
$( "#languagefilter" ).languagefilter( {
$target: $( 'ul.uls-language-filter-result' ),
clickhandler: function( item ) {
// TODO: dependency on MediaWiki
var uri = new mw.Uri( window.location.href );
uri.extend( { setlang: item.value } );
window.location.href = uri.toString();
}
} );
$( '.uls-region' ).live( 'click', function () {
$( this ).parent().find( '.uls-region' ).removeClass( 'active' );
$( this ).addClass( 'active' );
} );
// trigger a search for all languages.
$( "#languagefilter" ).autocomplete( "search" );
},
keyup : function(e) {
switch(e.keyCode) {
@@ -53,15 +64,15 @@
}
break;
}
e.stopPropagation();
e.preventDefault();
},
keypress : function(e) {
if (!this.shown )
keypress: function( e ) {
if ( !this.shown ) {
return;
}
switch(e.keyCode) {
switch( e.keyCode ) {
case 27:
// escape
e.preventDefault();
@@ -69,7 +80,7 @@
}
e.stopPropagation();
},
click : function(e) {
click: function( e ) {
e.stopPropagation();
e.preventDefault();
if ( !this.shown ) {
@@ -78,26 +89,27 @@
this.hide();
}
},
}
};
/* ULS PLUGIN DEFINITION
* =========================== */
$.fn.uls = function(option) {
$.fn.uls = function( option ) {
return this.each( function() {
var $this = $( this ), data = $this.data( 'uls' ), options = typeof option == 'object' && option;
if (!data )
$this.data( 'uls', ( data = new ULS(this, options)) );
if ( typeof option == 'string' )
if ( !data ) {
$this.data( 'uls', ( data = new ULS( this, options ) ) );
}
if ( typeof option === 'string' ) {
data[option]();
} )
}
} );
};
$.fn.uls.defaults = {
// FIXME Menu template. Can it come from PHP?
menu : '<div class="uls-menu"><a class="close button">x</a></div>',
menu : '.uls-menu',
};
$.fn.uls.Constructor = ULS;
} )( jQuery );
} )( jQuery, mediaWiki );