Introduce display settings link at the top of ULS
Extend $.fn.uls render method to add additional rendering of display settings link. Add css for the new element. Add display.png icon from the Agora icon set. Change-Id: I7a29b4892be02526969b0dd786c74bdb7551c074
This commit is contained in:
committed by
Amir E. Aharoni
parent
8855af1428
commit
1648899c45
@@ -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(
|
||||
|
||||
@@ -108,14 +108,8 @@
|
||||
<h2 class="ten columns end offset-by-one">No results found for "<span id="uls-no-found-search-term">Esapnol</span>"</h2>
|
||||
<div id="uls-no-found-more">
|
||||
<div class="ten columns end offset-by-one">
|
||||
<p>You can search by language name, script name, ISO code of language or you can browse by region:
|
||||
<a class="uls-region-link" data-region="NA" href="#">America</a>,
|
||||
<a class="uls-region-link" data-region="EU" href="#">Europe</a>,
|
||||
<a class="uls-region-link" data-region="ME" href="#">Middle East</a>,
|
||||
<a class="uls-region-link" data-region="AF" href="#">Africa</a>,
|
||||
<a class="uls-region-link" data-region="AS" href="#">Asia</a>,
|
||||
<a class="uls-region-link" data-region="PA" href="#">Pacific</a> or
|
||||
<a class="uls-region-link" data-region="WW" href="#">Worldwide languages</a>.
|
||||
<p>
|
||||
You can search by language name, script name, ISO code of language or you can browse by region: <a class="uls-region-link" data-region="NA" href="#">America</a>, <a class="uls-region-link" data-region="EU" href="#">Europe</a>, <a class="uls-region-link" data-region="ME" href="#">Middle East</a>, <a class="uls-region-link" data-region="AF" href="#">Africa</a>, <a class="uls-region-link" data-region="AS" href="#">Asia</a>, <a class="uls-region-link" data-region="PA" href="#">Pacific</a> or <a class="uls-region-link" data-region="WW" href="#">Worldwide languages</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
19
resources/css/ext.uls.css
Normal file
19
resources/css/ext.uls.css
Normal file
@@ -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;
|
||||
}
|
||||
BIN
resources/images/display.png
Normal file
BIN
resources/images/display.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@@ -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 = $( '<div>' )
|
||||
.addClass( 'settings-title' )
|
||||
.text( 'Display settings' ),
|
||||
$displaySettingsText = $( '<span>' )
|
||||
.addClass( 'settings-text' )
|
||||
.text( 'Set language for menus and fonts.' ),
|
||||
$displaySettings = $( '<div>' )
|
||||
.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 );
|
||||
Reference in New Issue
Block a user