onSelect callback option for ULS

* Correct the dependencies for ext.uls.core, it need not depend on
mediawiki.Uri.
* Move the setlang function out of ULS core js.
* Add a callback function to the example.

Change-Id: Ie3598236b2a884580092194c57558ec109d20803
This commit is contained in:
Santhosh Thottingal
2012-07-23 17:42:00 +05:30
parent b1b7c2feb3
commit 964f508533
4 changed files with 33 additions and 20 deletions

View File

@@ -49,7 +49,10 @@ $wgResourceModules['ext.uls.init'] = array(
'scripts' => 'resources/ext.uls.init.js', 'scripts' => 'resources/ext.uls.init.js',
'localBasePath' => $dir, 'localBasePath' => $dir,
'remoteExtPath' => 'UniversalLanguageSelector', 'remoteExtPath' => 'UniversalLanguageSelector',
'dependencies' => 'ext.uls.core', 'dependencies' => array(
'mediawiki.Uri',
'ext.uls.core',
),
'position' => 'top', 'position' => 'top',
); );
@@ -79,7 +82,6 @@ $wgResourceModules['ext.uls.core'] = array(
'localBasePath' => $dir, 'localBasePath' => $dir,
'remoteExtPath' => 'UniversalLanguageSelector', 'remoteExtPath' => 'UniversalLanguageSelector',
'dependencies' => array( 'dependencies' => array(
'mediawiki.Uri',
'ext.uls.data', 'ext.uls.data',
'ext.uls.lcd', 'ext.uls.lcd',
), ),

View File

@@ -22,17 +22,26 @@
<script src="../resources/ext.uls.lcd.js"></script> <script src="../resources/ext.uls.lcd.js"></script>
<script src="../resources/ext.uls.languagefilter.js"></script> <script src="../resources/ext.uls.languagefilter.js"></script>
<script src="../resources/ext.uls.core.js"></script> <script src="../resources/ext.uls.core.js"></script>
<script src="../resources/ext.uls.init.js"></script>
<link href="../resources/css/ext.uls.css" rel="stylesheet"/> <link href="../resources/css/ext.uls.css" rel="stylesheet"/>
<link href="../resources/css/ext.uls.grid.css" rel="stylesheet"/> <link href="../resources/css/ext.uls.grid.css" rel="stylesheet"/>
<link href="../resources/css/ext.uls.lcd.css" rel="stylesheet"/> <link href="../resources/css/ext.uls.lcd.css" rel="stylesheet"/>
<!-- demo --> <!-- demo -->
<link href="resources/demo.css" rel="stylesheet"/> <link href="resources/demo.css" rel="stylesheet"/>
<script>
$( document ).ready( function() {
$( '.uls-trigger' ).uls( {
onSelect : function( language ) {
var languageName = $.uls.data.autonym( language );
$('a#pageLanguage').text( languageName );
}
} );
} );
</script>
</head> </head>
<body> <body>
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<span class="active uls-trigger"> <a href="#">Select Language</a> </span> <span class="active uls-trigger"> <a id="pageLanguage" href="#">Select Language</a> </span>
<h1>Universal Language Selector</h1> <h1>Universal Language Selector</h1>
<p> <p>
Demonstration of jquery plugin Demonstration of jquery plugin
@@ -47,8 +56,7 @@
<div class="four columns"> <div class="four columns">
<h1> Select language </h1> <h1> Select language </h1>
</div> </div>
<div class="three columns" id="settings-block"> <div class="three columns" id="settings-block"></div>
</div>
<div class="five columns" id="map-block"> <div class="five columns" id="map-block">
<div class="row"> <div class="row">
<div data-regiongroup="4" id="uls-region-4" class="three columns uls-region"> <div data-regiongroup="4" id="uls-region-4" class="three columns uls-region">
@@ -92,8 +100,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row uls-language-list"> <div class="row uls-language-list"></div>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -66,23 +66,18 @@
// Rendering stuff here // Rendering stuff here
}, },
setLang: function( langCode ) {
// TODO: dependency on MediaWiki
var uri = new mw.Uri( window.location.href );
uri.extend( { setlang: langCode } );
window.location.href = uri.toString();
},
listen: function() { listen: function() {
var that = this; var that = this, $lcd;
// Register all event listeners to the ULS here. // Register all event listeners to the ULS here.
that.$element.on( 'click', $.proxy( that.click, that ) ); that.$element.on( 'click', $.proxy( that.click, that ) );
$( ".icon-close" ).on( 'click', $.proxy( that.click, that ) ); $( ".icon-close" ).on( 'click', $.proxy( that.click, that ) );
var $lcd = $( "div.uls-language-list" ).lcd( { $lcd = $( "div.uls-language-list" ).lcd( {
languages: that.languages, languages: that.languages,
clickhandler: function( langCode ) { clickhandler: function( langCode ) {
that.setLang( langCode ); if ( that.options.onSelect ) {
that.options.onSelect.call( this, langCode );
}
} }
} ).data( "lcd" ); } ).data( "lcd" );
$( "#languagefilter" ).languagefilter( { $( "#languagefilter" ).languagefilter( {
@@ -160,7 +155,8 @@
}; };
$.fn.uls.defaults = { $.fn.uls.defaults = {
menu: '.uls-menu' menu: '.uls-menu',
onSelect: null // Callback function to be called when a language is selected
}; };
$.fn.uls.Constructor = ULS; $.fn.uls.Constructor = ULS;

View File

@@ -19,6 +19,14 @@
( function( $ ) { ( function( $ ) {
$( document ).ready( function() { $( document ).ready( function() {
$( '.uls-trigger' ).uls(); $( '.uls-trigger' ).uls( {
onSelect : function( language ) {
var uri = new mw.Uri( window.location.href );
uri.extend( {
setlang : language
} );
window.location.href = uri.toString();
}
} );
} ); } );
} )( jQuery ); } )( jQuery );