\
+
\
Select language
\
\
\
@@ -105,6 +105,8 @@
delete this.languages[code];
}
}
+ this.left = this.options.left;
+ this.top = this.options.top;
this.shown = false;
this.initialized = false;
this.$languageFilter = this.$menu.find( 'input#languagefilter' );
@@ -120,7 +122,9 @@
constructor: ULS,
ready: function() {
- // Currently empty, can be overridden for anything useful.
+ if ( this.options.onReady ) {
+ this.options.onReady( this );
+ }
},
/**
@@ -133,8 +137,8 @@
height: this.$element[0].offsetHeight
} );
return {
- top: pos.top + pos.height,
- left: '25%'
+ top: this.top || pos.top + pos.height,
+ left: this.left || '25%'
};
},
@@ -256,6 +260,7 @@
* @param langCode
*/
onSelect: function( langCode ) {
+ this.hide();
if ( this.options.onSelect ) {
this.options.onSelect.call( this, langCode );
}
@@ -292,8 +297,6 @@
e.preventDefault();
if ( !this.shown ) {
this.show();
- } else {
- this.hide();
}
}
diff --git a/resources/js/ext.uls.displaysettings.js b/resources/js/ext.uls.displaysettings.js
index 666bb31c..e600aff6 100644
--- a/resources/js/ext.uls.displaysettings.js
+++ b/resources/js/ext.uls.displaysettings.js
@@ -68,7 +68,6 @@
this.$parent.$settingsPanel.empty();
this.$webfonts = $( 'body' ).data( 'webfonts' );
this.$parent.$settingsPanel.append( this.$template );
- $( 'select.uls-font-select' ).val( );
this.prepareLanguages();
this.prepareFonts();
this.prepareWebfontsCheckbox();
@@ -83,19 +82,23 @@
if ( enable === undefined ) {
enable = true;
}
- $( '#webfonts-enable-checkbox' ).prop( 'checked', enable );
+ this.$template.find( '#webfonts-enable-checkbox' ).prop( 'checked', enable );
},
/**
* Prepare the UI language selector
*/
prepareLanguages: function () {
- var $languages = $( 'div.uls-ui-languages' );
+ var $languages = this.$template.find( 'div.uls-ui-languages' );
$languages.empty();
var previousLanguages = this.previousLanguages();
var languages = [this.language];
- $.merge( languages, previousLanguages);
- $.unique( languages );
+ for ( var lang in previousLanguages ) {
+ if ( previousLanguages[lang] === this.language ) {
+ continue;
+ }
+ languages.push( previousLanguages[lang] );
+ }
for ( var i = 0; i < 3; i++ ) {
var language = languages[i];
@@ -143,7 +146,7 @@
*/
prepareFonts: function () {
var fonts = this.$webfonts.list( this.language );
- var $fontSelector = $( 'select.uls-font-select' );
+ var $fontSelector = this.$template.find( 'select.uls-font-select' );
$fontSelector.find( 'option' ).remove();
var savedFont = this.webfontPreferences.get( this.language );
@@ -165,7 +168,7 @@
},
selectedFont: function () {
- return $( 'select.uls-font-select' ).find( 'option:selected' ).val();
+ return this.$template.find( 'select.uls-font-select' ).find( 'option:selected' ).val();
},
/**
@@ -174,24 +177,55 @@
listen: function () {
var that = this;
- $( "div.uls-ui-languages button.button" ).click( function () {
- $( "button.button" ).removeClass( "down" );
+ this.$template.find( "div.uls-ui-languages button.button" ).click( function () {
+ $( "div.uls-ui-languages button.button" ).removeClass( "down" );
$( this ).addClass( "down" );
that.language = $( this ).data( 'language' ) || that.language;
that.prepareFonts();
} );
- $( '#uls-displaysettings-apply' ).on( 'click', function () {
+ this.$template.find( '#uls-displaysettings-apply' ).on( 'click', function () {
that.apply();
} );
- $( '#webfonts-enable-checkbox' ).on( 'click', function () {
+ this.$template.find( '#webfonts-enable-checkbox' ).on( 'click', function () {
if ( this.checked ) {
that.$webfonts.apply( that.selectedFont() );
} else {
that.$webfonts.reset();
}
} );
+
+ this.$template.find( 'button#uls-more-languages').on( 'click', function () {
+ that.$parent.hide();
+ } );
+
+ // Show the long language list to select a language for display settings
+ this.$template.find( 'button#uls-more-languages').uls( {
+ left: that.$parent.left,
+ top: that.$parent.top,
+
+ onReady: function( uls ) {
+ var $back = $( '
' )
+ .prop( 'href', '#' )
+ .prop( 'title', 'Back to display settings' )
+ .text( '← Back to display settings' );
+
+ $back.click( function() {
+ uls.hide();
+ that.$parent.show();
+ } );
+
+ uls.$menu.find( 'div.uls-title' ).append( $back );
+ uls.show();
+ },
+
+ onSelect: function( langCode ) {
+ that.language = langCode;
+ that.$parent.show();
+ that.prepareFonts();
+ }
+ } );
},
/**
@@ -241,7 +275,7 @@
// Save the preferences
this.webfontPreferences.set( this.language, font );
this.webfontPreferences.set( 'webfontsEnabled',
- $( '#webfonts-enable-checkbox' ).prop( 'checked' ) ? true : false );
+ this.$template.find( '#webfonts-enable-checkbox' ).prop( 'checked' ) ? true : false );
this.webfontPreferences.save( function ( result ) {
// closure for not losing the scope
that.onSave( result );
diff --git a/resources/js/ext.uls.init.js b/resources/js/ext.uls.init.js
index f7c02e2c..e37bae18 100644
--- a/resources/js/ext.uls.init.js
+++ b/resources/js/ext.uls.init.js
@@ -53,24 +53,23 @@
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();
- var that = this;
- this.$menu.find( "div#settings-block" ).append( $displaySettings );
- var position = this.position();
- $displaySettings.languagesettings( {
- top: position.top,
- left: position.left
- } );
- $displaySettings.on( 'click', function() {
- that.hide();
- } );
- }
- } );
+ function addDisplaySettings( uls ) {
+ var $displaySettings = displaySettings();
+ uls.$menu.find( "div#settings-block" ).append( $displaySettings );
+ var position = uls.position();
+ $displaySettings.languagesettings( {
+ top: position.top,
+ left: position.left
+ } );
+ $displaySettings.on( 'click', function() {
+ uls.hide();
+ } );
+ }
$ulsTrigger.uls( {
+ onReady: function ( uls ) {
+ addDisplaySettings( uls );
+ },
onSelect: function( language ) {
changeLanguage( language );
},
diff --git a/resources/js/ext.uls.languagesettings.js b/resources/js/ext.uls.languagesettings.js
index b07f7ca4..4a185441 100644
--- a/resources/js/ext.uls.languagesettings.js
+++ b/resources/js/ext.uls.languagesettings.js
@@ -45,6 +45,8 @@
this.$window = $( this.options.template );
this.shown = false;
this.initialized = false;
+ this.left = this.options.left;
+ this.top = this.options.top;
this.$settingsPanel = this.$window.find( "#languagesettings-settings-panel" );
this.init();
this.listen();
@@ -61,9 +63,9 @@
listen: function() {
var that = this;
// Register all event listeners to the ULS language settings here.
- that.$element.on( "click", $.proxy( that.click, that ) );
- $( '#languagesettings-close' ).on( "click", $.proxy( that.click, that ) );
- $( '.uls-settings-close' ).on( "click", $.proxy( that.click, that ) );
+ that.$element.on( "click", $.proxy( that.show, that ) );
+ $( '#languagesettings-close' ).on( "click", $.proxy( that.hide, that ) );
+ $( '.uls-settings-close' ).on( "click", $.proxy( that.hide, that ) );
},
render: function() {
@@ -116,8 +118,8 @@
var pos = $.extend( {}, this.$element.offset(), {
height: this.$element[0].offsetHeight
} );
- var top = this.options.top || pos.top + pos.height;
- var left = this.options.left || '25%';
+ var top = this.top || pos.top + pos.height;
+ var left = this.left || '25%';
// FIXME this is not exactly correct. position may not
// be relative to the trigger.
this.$window.css( {
@@ -140,8 +142,6 @@
e.preventDefault();
if ( !this.shown ) {
this.show();
- } else {
- this.hide();
}
}
};