WebFonts integration with ULS display settings.

This does not add much functionality. That will come in
future commits.

This commit has many cleanup, refactoring on the display settings,
language settings code.

Change-Id: I7fbc3ebb9b67c1afd80f159c2d82cd2a1c6bea74
This commit is contained in:
Santhosh Thottingal authored and Amir E. Aharoni committed 2012-08-14 18:01:25 +03:00
1 parent 3f4b5e4540
commit e62b50c9d8
11 files changed
+228 -75

No files matched your search

+1 -1
View File
@@ -108,7 +108,7 @@ class UniversalLanguageSelectorHooks {
$data .= "
<div class='uls-menu' data-languages=\"" . $languageData . "\">
<div class='row'>
<span class='icon-close'></span>
<span id='uls-close' class='icon-close'></span>
</div>
<div class='row'>
<div class='four columns'>
+14 -5
View File
@@ -71,7 +71,7 @@ $wgResourceModules['ext.uls.init'] = array(
'mediawiki.Uri',
'jquery.tipsy',
'jquery.uls',
'ext.uls.languagesettings',
'ext.uls.displaysettings',
),
'position' => 'top',
);
@@ -83,12 +83,21 @@ $wgResourceModules['ext.uls.languagesettings'] = array(
'remoteExtPath' => 'UniversalLanguageSelector',
);
$wgResourceModules['ext.uls.webfonts'] = array(
'scripts' => 'resources/js/ext.uls.webfonts.js',
'localBasePath' => $dir,
'remoteExtPath' => 'UniversalLanguageSelector',
'dependencies' => array(
'jquery.webfonts'
),
);
$wgResourceModules['ext.uls.displaysettings'] = array(
'scripts' => 'resources/js/ext.uls.displaysettings.js',
'localBasePath' => $dir,
'dependencies' => array(
'ext.uls.languagesettings',
'jquery.webfonts'
'ext.uls.webfonts'
),
'remoteExtPath' => 'UniversalLanguageSelector',
);
@@ -128,7 +137,7 @@ $wgResourceModules['jquery.webfonts'] = array(
);
$wgResourceModules['ext.uls.webfonts.repository'] = array(
'scripts' => 'resources/js/jquery.webfonts.repository.js',
'localBasePath' => $dir,
'remoteExtPath' => 'UniversalLanguageSelector',
'scripts' => 'resources/js/jquery.webfonts.repository.js',
'localBasePath' => $dir,
'remoteExtPath' => 'UniversalLanguageSelector',
);
+1 -1
View File
@@ -50,7 +50,7 @@
<div class="container">
<div data-languages="{&quot;aa&quot;:&quot;Afar&quot;,&quot;ab&quot;:&quot;Abkhazian&quot;,&quot;ace&quot;:&quot;Achinese&quot;,&quot;af&quot;:&quot;Afrikaans&quot;,&quot;ak&quot;:&quot;Akan&quot;,&quot;aln&quot;:&quot;Gheg Albanian&quot;,&quot;als&quot;:&quot;Alemannisch&quot;,&quot;am&quot;:&quot;Amharic&quot;,&quot;an&quot;:&quot;Aragonese&quot;,&quot;ang&quot;:&quot;Old English&quot;,&quot;anp&quot;:&quot;Angika&quot;,&quot;ar&quot;:&quot;Arabic&quot;,&quot;arc&quot;:&quot;Aramaic&quot;,&quot;arn&quot;:&quot;Araucanian&quot;,&quot;ary&quot;:&quot;Moroccan Spoken Arabic&quot;,&quot;arz&quot;:&quot;Egyptian Spoken Arabic&quot;,&quot;as&quot;:&quot;Assamese&quot;,&quot;ast&quot;:&quot;Asturian&quot;,&quot;av&quot;:&quot;Avaric&quot;,&quot;avk&quot;:&quot;Kotava&quot;,&quot;ay&quot;:&quot;Aymara&quot;,&quot;az&quot;:&quot;Azerbaijani&quot;,&quot;ba&quot;:&quot;Bashkir&quot;,&quot;bar&quot;:&quot;Bavarian&quot;,&quot;bat-smg&quot;:&quot;\u017eemait\u0117\u0161ka&quot;,&quot;bcc&quot;:&quot;Southern Balochi&quot;,&quot;bcl&quot;:&quot;Bikol Central&quot;,&quot;be&quot;:&quot;Belarusian&quot;,&quot;be-tarask&quot;:&quot;Belarusian (Tara\u0161kievica orthography)&quot;,&quot;be-x-old&quot;:&quot;\u202a\u0431\u0435\u043b\u0430\u0440\u0443\u0441\u043a\u0430\u044f (\u0442\u0430\u0440\u0430\u0448\u043a\u0435\u0432\u0456\u0446\u0430)\u202c&quot;,&quot;bg&quot;:&quot;Bulgarian&quot;,&quot;bh&quot;:&quot;Bihari&quot;,&quot;bho&quot;:&quot;Bhojpuri&quot;,&quot;bi&quot;:&quot;Bislama&quot;,&quot;bjn&quot;:&quot;Banjar&quot;,&quot;bm&quot;:&quot;Bambara&quot;,&quot;bn&quot;:&quot;Bengali&quot;,&quot;bo&quot;:&quot;Tibetan&quot;,&quot;bpy&quot;:&quot;Bishnupria Manipuri&quot;,&quot;bqi&quot;:&quot;Bakhtiari&quot;,&quot;br&quot;:&quot;Breton&quot;,&quot;brh&quot;:&quot;Brahui&quot;,&quot;bs&quot;:&quot;Bosnian&quot;,&quot;bug&quot;:&quot;Buginese&quot;,&quot;bxr&quot;:&quot;\u0431\u0443\u0440\u044f\u0430\u0434&quot;,&quot;ca&quot;:&quot;Catalan&quot;,&quot;cbk-zam&quot;:&quot;Chavacano de Zamboanga&quot;,&quot;cdo&quot;:&quot;Min Dong Chinese&quot;,&quot;ce&quot;:&quot;Chechen&quot;,&quot;ceb&quot;:&quot;Cebuano&quot;,&quot;ch&quot;:&quot;Chamorro&quot;,&quot;cho&quot;:&quot;Choctaw&quot;,&quot;chr&quot;:&quot;Cherokee&quot;,&quot;chy&quot;:&quot;Cheyenne&quot;,&quot;ckb&quot;:&quot;Sorani Kurdish&quot;,&quot;co&quot;:&quot;Corsican&quot;,&quot;cps&quot;:&quot;Capiznon&quot;,&quot;cr&quot;:&quot;Cree&quot;,&quot;crh&quot;:&quot;Crimean Turkish&quot;,&quot;crh-latn&quot;:&quot;Crimean Turkish (Latin script)&quot;,&quot;crh-cyrl&quot;:&quot;Crimean Turkish (Cyrillic script)&quot;,&quot;cs&quot;:&quot;Czech&quot;,&quot;csb&quot;:&quot;Kashubian&quot;,&quot;cu&quot;:&quot;Church Slavic&quot;,&quot;cv&quot;:&quot;Chuvash&quot;,&quot;cy&quot;:&quot;Welsh&quot;,&quot;da&quot;:&quot;Danish&quot;,&quot;de&quot;:&quot;German&quot;,&quot;de-at&quot;:&quot;Austrian German&quot;,&quot;de-ch&quot;:&quot;Swiss High German&quot;,&quot;de-formal&quot;:&quot;German (formal address)&quot;,&quot;diq&quot;:&quot;Zazaki&quot;,&quot;dsb&quot;:&quot;Lower Sorbian&quot;,&quot;dtp&quot;:&quot;Central Dusun&quot;,&quot;dv&quot;:&quot;Divehi&quot;,&quot;dz&quot;:&quot;Dzongkha&quot;,&quot;ee&quot;:&quot;Ewe&quot;,&quot;egl&quot;:&quot;Emili\u00e0n&quot;,&quot;el&quot;:&quot;Greek&quot;,&quot;eml&quot;:&quot;Emiliano-Romagnolo&quot;,&quot;en&quot;:&quot;English&quot;,&quot;en-ca&quot;:&quot;Canadian English&quot;,&quot;en-gb&quot;:&quot;British English&quot;,&quot;eo&quot;:&quot;Esperanto&quot;,&quot;es&quot;:&quot;Spanish&quot;,&quot;et&quot;:&quot;Estonian&quot;,&quot;eu&quot;:&quot;Basque&quot;,&quot;ext&quot;:&quot;Extremaduran&quot;,&quot;fa&quot;:&quot;Persian&quot;,&quot;ff&quot;:&quot;Fulah&quot;,&quot;fi&quot;:&quot;Finnish&quot;,&quot;fit&quot;:&quot;me\u00e4nkieli&quot;,&quot;fiu-vro&quot;:&quot;V\u00f5ro&quot;,&quot;fj&quot;:&quot;Fijian&quot;,&quot;fo&quot;:&quot;Faroese&quot;,&quot;fr&quot;:&quot;French&quot;,&quot;frc&quot;:&quot;Cajun French&quot;,&quot;frp&quot;:&quot;Franco-Proven\u00e7al&quot;,&quot;frr&quot;:&quot;Northern Frisian&quot;,&quot;fur&quot;:&quot;Friulian&quot;,&quot;fy&quot;:&quot;Western Frisian&quot;,&quot;ga&quot;:&quot;Irish&quot;,&quot;gag&quot;:&quot;Gagauz&quot;,&quot;gan&quot;:&quot;Gan&quot;,&quot;gan-hans&quot;:&quot;Simplified Gan script&quot;,&quot;gan-hant&quot;:&quot;Traditional Gan script&quot;,&quot;gd&quot;:&quot;Scottish Gaelic&quot;,&quot;gl&quot;:&quot;Galician&quot;,&quot;glk&quot;:&quot;Gilaki&quot;,&quot;gn&quot;:&quot;Guarani&quot;,&quot;got&quot;:&quot;Gothic&quot;,&quot;grc&quot;:&quot;Ancient Greek&quot;,&quot;gsw&quot;:&quot;Swiss German&quot;,&quot;gu&quot;:&quot;Gujarati&quot;,&quot;gv&quot;:&quot;Manx&quot;,&quot;ha&quot;:&quot;Hausa&quot;,&quot;hak&quot;:&quot;Hakka&quot;,&quot;haw&quot;:&quot;Hawaiian&quot;,&quot;he&quot;:&quot;Hebrew&quot;,&quot;hi&quot;:&quot;Hindi&quot;,&quot;hif&quot;:&quot;Fiji Hindi&quot;,&quot;hif-latn&quot;:&quot;Fiji Hindi (Latin script)&quot;,&quot;hil&quoLine truncated
<div class="row">
<span class="icon-close"></span>
<span id="uls-close" class="icon-close"></span>
</div>
<div class="row">
<div class="four columns">
+1 -1
View File
@@ -98,7 +98,7 @@
that.$element.on( 'click', $.proxy( that.click, that ) );
// Handle click on close button
$( ".icon-close" ).on( 'click', $.proxy( that.click, that ) );
$( "#uls-close" ).on( 'click', $.proxy( that.click, that ) );
// Handle key press events on the menu
that.$menu.on('keypress', $.proxy(this.keypress, this) )
+42 -37
View File
@@ -1,44 +1,14 @@
#uls-current-language-nav {
/* @embed */
background: url('../images/cog-16x16-ltr.png') no-repeat scroll right top transparent;
#uls-current-language-nav { /* @embed */
background: url('../images/cog-16x16-ltr.png') no-repeat scroll right
top transparent;
cursor: pointer;
}
#language-settings-dialog {
display: none; /* hidden initially */
/* XXX pretty random position values, just to make it visible */
bottom: 100px;
left: 200px;
/* From here on - from .uls-menu */
position: fixed;
z-index: 1000;
display: none;
min-width: 800px; /* changed */
margin-top: 1px;
width: 45%;
/* Styling */
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
/* From uls-menu, unchanged */
#uls-current-language-nav a {
color: #0088CC;
}
#uls-current-language-nav h1 {
font-weight: normal;
padding-top: 1.25em;
@@ -49,6 +19,7 @@
padding-left: 15px;
color: #777;
}
#uls-current-language-nav h2 {
font-size: 16pt;
line-height: 1.5em;
@@ -58,6 +29,7 @@
border-bottom: none;
color: #777;
}
.uls-menu h3 {
font-size: 14pt;
line-height: 1.5em;
@@ -78,12 +50,45 @@
border-left: 3px solid transparent;
display: block;
font-size: 12pt;
background: url(http://dl.dropbox.com/u/30377416/i18n/icons/WMF-Agora-Display_settings-grey.png) no-repeat scroll 15px center transparent;
}
.menu-section.active{
.menu-section.active {
color: black;
background-color: #F6F6F6;
border-left-color: #3366BB;
background-image: url(http://dl.dropbox.com/u/30377416/i18n/icons/WMF-Agora-Display_settings-blue.svg);
}
button.toggle.button {
background: #eee;
color: black;
cursor: pointer;
border-top: solid 2px #eaeaea;
border-left: solid 2px #eaeaea;
border-bottom: solid 2px #777;
border-right: solid 2px #777;
padding: 5px 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
button.toggle.button.down {
background: #bbb;
border-top: solid 2px #777;
border-left: solid 2px #777;
border-bottom: solid 2px #eaeaea;
border-right: solid 2px #eaeaea;
}
.language-settings-buttons {
border-top: solid 2px #aaa;
padding: 10px;
margin-top: 10px;
}
label.checkbox input[type="checkbox"] {
padding-left: -20px;
float: left;
}
+63 -1
View File
@@ -2,18 +2,80 @@ div#settings-block {
border-left: 1px solid #C9C9C9;
padding-left: 10px;
}
div#display-settings-block {
div#display-settings-block {
/* @embed */
background: url('../images/display.png');
background-repeat: no-repeat;
background-size: 20px auto;
padding-left: 25px;
cursor: pointer;
background-color: #F6F6F6;
}
.settings-title {
font-size: 11pt;
}
.settings-text {
color: #555555;
font-size: 9pt;
}
button.button {
display: inline-block;
padding: 0.4065em 1.2195em 0.4065em;
font: bold 0.813em Arial, sans-serif;
line-height: 1;
color: black;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.button.blue {
background-color: #3366bb;
color: white;
background-image: -moz-linear-gradient(top, #3670c8, #3366bb);
background-image: -ms-linear-gradient(top, #3670c8, #3366bb);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3670c8),
color-stop(100%, #3366bb) );
background-image: -webkit-linear-gradient(top, #3670c8, #3366bb);
background-image: linear-gradient(#3670c8, #3366bb);
border: 1px #33589f solid;
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorstr='#3670c8', endColorstr='#3366bb', GradientType=0)";
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#3670c8',
endColorstr='#3366bb', GradientType=0 );
}
button.button.blue:hover {
background-color: #3f77d7;
background-image: -moz-linear-gradient(top, #4c84da, #3f77d7);
background-image: -ms-linear-gradient(top, #4c84da, #3f77d7);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c84da),
color-stop(100%, #3f77d7) );
background-image: -webkit-linear-gradient(top, #4c84da, #3f77d7);
background-image: linear-gradient(#4c84da, #3f77d7);
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c84da', endColorstr='#3f77d7', GradientType=0)";
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#4c84da',
endColorstr='#3f77d7', GradientType=0 );
}
button.button.blue:active {
background-color: #2a549c;
background-image: -moz-linear-gradient(top, #2d5ea9, #2a549c);
background-image: -ms-linear-gradient(top, #2d5ea9, #2a549c);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2d5ea9),
color-stop(100%, #2a549c) );
background-image: -webkit-linear-gradient(top, #2d5ea9, #2a549c);
background-image: linear-gradient(#2d5ea9, #2a549c);
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorstr='#2d5ea9', endColorstr='#2a549c', GradientType=0)";
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#2d5ea9',
endColorstr='#2a549c', GradientType=0 );
}
+45 -19
View File
@@ -19,30 +19,56 @@
( function( $ ) {
"use strict";
var template = '<div><h3>Display Settings</h3></div>' +
'<div><h4>Select Language</h4></div>' +
'<div>' +
'<button>English</button>' +
'<button>Deutsch</button>' +
'<button>עברית</button>' +
'<button class="uls-trigger">...</button>' +
'</div>' +
'<div><h4>Font Settings</h4></div>' +
'<div>' +
'<input type="checkbox" id="webfonts-enable-checkbox" />' +
'<label for="webfonts-enable-checkbox">Download fonts automatically when needed</label>' +
'</div>' +
'<div><h5>Select your preferred fonts to use</h5></div>' +
'<div>Fonts for English<select></select></div>' +
'<div>Fonts for Spanish<select></select></div>' +
'<div class="language-settings-buttons"><button>Cancel</button><button>Apply changes</button></div>';
var template = '<div><h3>Display Settings</h3></div>'
+ '<div><h4>Select Language</h4></div>'
+ '<div class="row">'
+ '<button class="two columns toggle button down">English</button>'
+ '<button class="two columns offset-by-one toggle button">Deutsch</button>'
+ '<button class="two columns offset-by-one toggle button">עברית</button>'
+ '<button id="uls-more-languages" class="two columns offset-by-one toggle button"">...</button>'
+ '</div>'
+ '<div class="row"><h4>Font Settings</h4></div>'
+ '<div class="row">'
+ '<label class="checkbox"><input type="checkbox" checked id="webfonts-enable-checkbox" />'
+ '<b>Download fonts automatically when needed</b> '
+ 'Web fonts will be downloaded when text in special scripts is displayed. '
+ '<a href="#">More Information</a>'
+ '</span></label>'
+ '</div>'
+ '<div class="row"><h5>Select your preferred fonts to use</h5></div>'
+ '<div class="row">'
+ '<div class="six columns">Fonts for English</div>'
+ '<select class="three columns end uls-font-select"></select></div>'
+ '</div>'
+ '<div class="row"></div>'
+ '<div class="row language-settings-buttons">'
+ '<button class="three columns offset-by-three blue button">Cancel</button>'
+ '<button class="four columns offset-by-one active blue button">Apply changes</button>'
+ '</div>'; // FIXME too much hardcoding.
var displaySettings = {
name: "Display",
description: "Set the fonts for languages",
render: function() {
return template;
},
name: "Display",
description: "Set the fonts for languages"
listen: function() {
var $webfonts = $( 'body' ).data( 'webfonts' );
var fonts = $webfonts.list( 'en' ); // FIXME
var $fontSelector = $( 'select.uls-font-select' );
$.each( fonts, function( key, font ) {
$fontSelector.append( $( "<option></option>" )
.attr( "value", font ).text( font ) );
} );
$( "button.toggle.button" ).click( function() {
$( "button.toggle.button" ).removeClass( "down" );
$( this ).addClass( "down" );
} );
// $( '#uls-more-languages' ).uls({
// });
}
};
$.fn.languagesettings.modules = $.extend( $.fn.languagesettings.modules, {
+4
View File
@@ -57,8 +57,12 @@
$.fn.uls.Constructor.prototype = $.extend( {}, $.fn.uls.Constructor.prototype, {
render: function() {
var $displaySettings = displaySettings();
var that = this;
this.$menu.find( "div#settings-block" ).append( $displaySettings );
$displaySettings.languagesettings();
$displaySettings.on( 'click', function() {
that.hide();
} );
}
} );
+22 -10
View File
@@ -21,7 +21,7 @@
"use strict";
var closeRow = '<div class="row" id="languagesettings-close">' +
'<span class="icon-close"></span>' +
'<span id="languagesettings-close" class="icon-close"></span>' +
'</div>';
var settingsMenu = '<div class="four columns">' +
'<h1>Language settings</h1>' + // TODO i18n
@@ -61,17 +61,17 @@
var that = this;
// Register all event listeners to the ULS here.
that.$element.on( "click", $.proxy( that.click, that ) );
$( ".icon-close" ).on( "click", $.proxy( that.click, that ) );
$( "#languagesettings-close" ).on( "click", $.proxy( that.click, that ) );
},
render: function() {
// Get the name of all registered modules and list them in left side menu.
var modules = $.fn.languagesettings.modules;
var firstModuleName = this.options.defaultModule;
var firstModule = modules[this.options.defaultModule];
for ( var moduleName in modules ) {
if ( modules.hasOwnProperty( moduleName ) ) {
if ( !firstModuleName ) {
firstModuleName = moduleName;
if ( !firstModule ) {
firstModule = modules[moduleName];
}
// Call render function on the current setting module.
this.renderModule( moduleName );
@@ -79,9 +79,8 @@
}
// Show the default module
$( "#languagesettings-settings-panel" ).html(
$.fn.languagesettings.modules[firstModuleName].render()
);
$( "#languagesettings-settings-panel" ).html( firstModule.render() );
firstModule.listen();
},
renderModule: function( moduleName ) {
@@ -95,7 +94,7 @@
.addClass( "settings-text" )
.text( module.description );
var $settingsLink = $( "<div>" )
.addClass( moduleName + "-settings-block" )
.addClass( moduleName + "-settings-block menu-section" )
.prop( "id", moduleName + "-settings-block" )
.data( "module", module )
.append( $settingsTitle )
@@ -104,7 +103,10 @@
$settingsMenuItems.append( $settingsLink );
$settingsLink.on( "click", function() {
$settingsPanel.html( $( this ).data( "module" ).render() );
var module = $( this ).data( "module" );
$settingsPanel.html( module.render() );
module.listen();
$( this ).addClass( 'active' );
} );
},
@@ -112,7 +114,17 @@
if ( !this.initialized ) {
this.render();
this.initialized = true;
var pos = $.extend( {}, this.$element.offset(), {
height: this.$element[0].offsetHeight
} );
// FIXME this is not exactly correct. position may not
// be relative to the trigger.
this.$window.css( {
top: pos.top + pos.height,
left: '25%'
} );
}
this.shown = true;
this.$window.show();
},
+33
View File
@@ -0,0 +1,33 @@
/**
* ULS-Webfonts integration
*
* Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
* Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other
* contributors. See CREDITS for a list.
*
* UniversalLanguageSelector is dual licensed GPLv2 or later and MIT. You don't
* have to do anything special to choose one license or the other and you don't
* have to notify anyone which license you are using. You are free to use
* UniversalLanguageSelector in commercial projects as long as the copyright
* header is left intact. See files GPL-LICENSE and MIT-LICENSE for details.
*
* @file
* @ingroup Extensions
* @licence GNU General Public Licence 2.0 or later
* @licence MIT License
*/
( function($, mw) {
"use strict";
$( document ).ready( function() {
// FIXME Dummy repository
$( 'body' ).webfonts( {
repository : {
base : '../data/fonts/',
fonts : {},
languages : {
'en' : [ 'Sans', 'Serif' ]
}
}
} );
} );
} )( jQuery );
+2
View File
@@ -19,10 +19,12 @@
<link href="../resources/css/ext.uls.css" rel="stylesheet"/>
<!-- Libs -->
<script src="../lib/jquery.uls/examples/resources/jquery.js"></script>
<script src="../lib/jquery.webfonts.js"></script>
<!-- Source -->
<link href="../resources/css/ext.languagesettings.css" rel="stylesheet"/>
<script src="../resources/js/ext.uls.languagesettings.js"></script>
<script src="../resources/js/ext.uls.displaysettings.js"></script>
<script src="../resources/js/ext.uls.webfonts.js"></script>
<script>
$( document ).ready( function() {
$( '.uls-languagesettings-trigger' ).languagesettings();