");
- 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 : '',
+ menu : '.uls-menu',
};
$.fn.uls.Constructor = ULS;
-} )( jQuery );
+} )( jQuery, mediaWiki );
diff --git a/resources/ext.uls.init.js b/resources/ext.uls.init.js
index 57fb3462..5c50cd6d 100644
--- a/resources/ext.uls.init.js
+++ b/resources/ext.uls.init.js
@@ -3,12 +3,6 @@
*/
( function( $ ) {
$( document ).ready( function() {
- /* Create a trigger somewhere in the page.
- $trigger = $("
")
- .addClass( 'uls-trigger' )
- .text("English"); // FIXME proper trigger text to go here.
- $('#mw-head').append( $trigger );*/
- // Bind ULS to the trigger.
- $('.uls-trigger').uls();
+ $( '.uls-trigger' ).uls();
} );
} )( jQuery );
diff --git a/resources/ext.uls.languagefilter.js b/resources/ext.uls.languagefilter.js
new file mode 100644
index 00000000..4af9ec60
--- /dev/null
+++ b/resources/ext.uls.languagefilter.js
@@ -0,0 +1,83 @@
+/*
+ * @author Santhosh Thottingal
+ * jQuery autocomplete based language filter widget
+ * Usage: $('inputbox').languagefilter();
+ * The values for autocompletion is from the data-languages of the element.
+ * the data is in the format of languagecode:languagename format.
+ * Credits: http://jqueryui.com/demos/autocomplete
+ */
+jQuery( function( $ ) {
+ "use strict";
+
+ $.widget( "ui.languagefilter", {
+ options: {
+ $target: null, // where to append the results
+ languages: null, // languages as code:name format. default values is from data-languages
+ clickhandler: null
+ },
+ _create: function() {
+ var self = this.element,
+ options = this.options;
+ $( self ).autocomplete( {
+ delay: 0,
+ minLength: 0,
+ // Move the default dropdown for suggestions to somewhere
+ // where it is not visible, since we don't use it.
+ position: { offset: "-10000 -10000" },
+ source: function( request, response ) {
+ var term = request.term;
+ var matcher = new RegExp( $.ui.autocomplete.escapeRegex( term ), 'i' );
+ var languages = options.languages;
+
+ if ( languages === null ) {
+ // Apparently .data automatically parses valid looking JSON
+ languages = $( self ).data( 'languages' );
+ }
+
+ response( $.map( languages, function ( name, code ) {
+ if ( matcher.test( name ) ) {
+ return {
+ label: name.replace(
+ new RegExp(
+ "(?![^&;]+;)(?!<[^<>]*)(" +
+ $.ui.autocomplete.escapeRegex( term ) +
+ ")(?![^<>]*>)(?![^&;]+;)", "gi"
+ ), "$1" ),
+ value: code
+ };
+ }
+ } ) );
+ },
+ search: function ( event, ui ) {
+ if ( options.$target ){
+ options.$target.empty();
+ }
+ }
+ } ); // /autocomplete
+
+ $( self ).data( "autocomplete" )._renderItem = function ( ul, item ) {
+ var $target = ul;
+ if ( options.$target ) {
+ $target = options.$target;
+ } else {
+ return;
+ }
+ var $li = $( "" )
+ .data( "item.autocomplete", item )
+ .append( $( "" ).prop( 'href', '#' ). html( item.label ) )
+ .appendTo( $target );
+ if ( options.clickhandler ) {
+ $li.click( function() {
+ options.clickhandler.call( this, item );
+ } );
+ }
+ return $li;
+
+ };
+ }, // End of _create
+
+ destroy: function() {
+ $.Widget.prototype.destroy.call( this );
+ }
+ } );
+} );
diff --git a/resources/images/close.png b/resources/images/close.png
new file mode 100644
index 00000000..02e125a5
Binary files /dev/null and b/resources/images/close.png differ
diff --git a/resources/images/search.png b/resources/images/search.png
new file mode 100644
index 00000000..1db2eb24
Binary files /dev/null and b/resources/images/search.png differ