diff --git a/UniversalLanguageSelector.php b/UniversalLanguageSelector.php
index a9548c1d..40cb79a5 100644
--- a/UniversalLanguageSelector.php
+++ b/UniversalLanguageSelector.php
@@ -63,7 +63,8 @@ $wgAPIModules['languagesearch'] = 'ApiLanguageSearch';
$wgHooks['UserGetLanguageObject'][] = 'UniversalLanguageSelectorHooks::getLanguage';
$wgResourceModules['ext.uls.init'] = array(
- 'scripts' => 'resources/ext.uls.init.js',
+ 'scripts' => 'resources/js/ext.uls.init.js',
+ 'styles' => 'resources/css/ext.uls.css',
'localBasePath' => $dir,
'remoteExtPath' => 'UniversalLanguageSelector',
'dependencies' => array(
diff --git a/lib/jquery.uls/examples/index.html b/lib/jquery.uls/examples/index.html
index 7cb42700..28454c90 100644
--- a/lib/jquery.uls/examples/index.html
+++ b/lib/jquery.uls/examples/index.html
@@ -108,14 +108,8 @@
No results found for "Esapnol"
-
You can search by language name, script name, ISO code of language or you can browse by region:
- America,
- Europe,
- Middle East,
- Africa,
- Asia,
- Pacific or
- Worldwide languages.
+
+ You can search by language name, script name, ISO code of language or you can browse by region: America, Europe, Middle East, Africa, Asia, Pacific or Worldwide languages.
diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css
new file mode 100644
index 00000000..fe71d35e
--- /dev/null
+++ b/resources/css/ext.uls.css
@@ -0,0 +1,19 @@
+div#settings-block {
+ border-left: 1px solid #C9C9C9;
+ padding-left: 10px;
+}
+div#display-settings-block {
+ /* @embed */
+ background: url('../images/display.png');
+ background-repeat: no-repeat;
+ background-size: 20px auto;
+ padding-left: 25px;
+ cursor: pointer;
+}
+.settings-title {
+ font-size: 11pt;
+}
+.settings-text {
+ color: #555555;
+ font-size: 9pt;
+}
\ No newline at end of file
diff --git a/resources/images/display.png b/resources/images/display.png
new file mode 100644
index 00000000..6638099e
Binary files /dev/null and b/resources/images/display.png differ
diff --git a/resources/ext.uls.init.js b/resources/js/ext.uls.init.js
similarity index 74%
rename from resources/ext.uls.init.js
rename to resources/js/ext.uls.init.js
index 7ad120df..c4770146 100644
--- a/resources/ext.uls.init.js
+++ b/resources/js/ext.uls.init.js
@@ -17,25 +17,52 @@
* @licence MIT License
*/
-( function( $ ) {
+( function( $, mw ) {
"use strict";
$( document ).ready( function( ) {
var $ulsTrigger = $( '.uls-trigger' ),
previousLang = $.cookie( 'uls-previous-language' ),
currentLang = mw.config.get( 'wgUserLanguage' );
+
/**
* Change the language of wiki using setlang URL parameter
* @param {String} language
*/
- var changeLanguage = function( language ) {
+ function changeLanguage( language ) {
$.cookie( 'uls-previous-language', currentLang );
var uri = new mw.Uri( window.location.href );
uri.extend( {
setlang: language
} );
window.location.href = uri.toString();
- };
+ }
+
+ function displaySettings() {
+ var $displaySettingsTitle = $( '' )
+ .addClass( 'settings-title' )
+ .text( 'Display settings' ),
+ $displaySettingsText = $( '
' )
+ .addClass( 'settings-text' )
+ .text( 'Set language for menus and fonts.' ),
+ $displaySettings = $( '' )
+ .addClass( 'display-settings-block' )
+ .prop( 'id', 'display-settings-block' )
+ .append( $displaySettingsTitle )
+ .append( $displaySettingsText );
+ $displaySettings.on( 'click', function() {
+ // TODO: Show language settings window with display settings highlighted
+ } );
+ return $displaySettings;
+ }
+
+ // Extend the render api of ULS to add display and input settings.
+ $.fn.uls.Constructor.prototype = $.extend( {}, $.fn.uls.Constructor.prototype, {
+ render: function() {
+ var $displaySettings = displaySettings();
+ this.$menu.find("div#settings-block").append($displaySettings);
+ }
+ } );
$ulsTrigger.uls( {
onSelect: function( language ) {
@@ -101,4 +128,4 @@
changeLanguage( $(this).attr( 'lang' ) );
} );
} );
-} )( jQuery );
+} )( jQuery, mediaWiki );