' )
.addClass( 'settings-title' )
.text( module.name );
$settingsText = $( '
' )
.addClass( 'settings-text' )
.text( module.description );
$settingsLink = $( '' )
.addClass( moduleName + '-settings-block menu-section' )
.prop( 'id', moduleName + '-settings-block' )
.data( 'module', module )
.append(
$settingsTitle,
$settingsText
);
$settingsMenuItems.append( $settingsLink );
$settingsLink.on( 'click', function () {
var $this = $( this );
$this.data( 'module' ).render();
// Re-position the window and scroll in to view if required.
languageSettings.position();
$settingsMenuItems.find( '.menu-section' ).removeClass( 'active' );
$this.addClass( 'active' );
} );
if ( active ) {
module.render();
$settingsLink.addClass( 'active' );
}
this.modules[moduleName] = module;
// Register cancel and apply hooks
mw.hook( 'mw.uls.settings.cancel' ).add( $.proxy( module.cancel, module ) );
mw.hook( 'mw.uls.settings.apply' ).add( $.proxy( module.apply, module ) );
},
position: function () {
var top, pos, left,
languageSettings = this;
pos = $.extend( {}, this.$element.offset(), {
height: this.$element[0].offsetHeight
} );
top = this.top || pos.top + pos.height;
left = this.left || '25%';
this.$window.css( {
top: top,
left: left
} );
setTimeout( function () {
// Don't mess up height calculations with parallel css loading
// See: http://ejohn.org/blog/how-javascript-timers-work/
languageSettings.$window.scrollIntoView();
}, 0 );
},
i18n: function () {
this.$window.i18n();
},
show: function () {
var languageSettings = this;
if ( !this.initialized ) {
this.render();
this.initialized = true;
}
// close model windows close, if they hide on page click
$( 'html' ).click();
this.i18n();
this.shown = true;
this.$window.show();
// Every time we show this window, make sure the current
// settings panels is upto date. So just click on active menu item.
this.$window.find( '.settings-menu-items > .active' ).click();
this.position();
setTimeout( function () {
// Don't mess up height calculations with parallel css loading
// See: http://ejohn.org/blog/how-javascript-timers-work/
languageSettings.visible();
}, 0 );
},
/**
* A "hook" that runs after the ULS panel becomes visible
* by using the show method.
*
* To use it, pass a function as the onVisible parameter
* in the options when initializing ULS.
*/
visible: function () {
if ( this.options.onVisible ) {
this.options.onVisible.call( this );
}
},
/**
* Hide this window.
* Will be used when moving to a different context and
* need coming back.
*/
hide: function () {
this.shown = false;
this.$window.hide();
},
/**
* Close this language settings window, and
* call onClose if defined from the previous context.
*/
close: function () {
if ( !this.shown ) {
return;
}
this.hide();
// optional callback
if ( this.options.onClose ) {
this.options.onClose();
}
},
click: function ( e ) {
e.stopPropagation();
e.preventDefault();
if ( this.shown ) {
this.hide();
} else {
this.show();
}
},
disableApplyButton: function () {
this.$window.find( 'button.uls-settings-apply' ).prop( 'disabled', true );
}
};
$.fn.languagesettings = function ( option ) {
return this.each( function () {
var $this = $( this ),
data = $this.data( 'languagesettings' ),
options = typeof option === 'object' && option;
if ( !data ) {
$this.data( 'languagesettings', ( data = new LanguageSettings( this, options ) ) );
}
if ( typeof option === 'string' ) {
data[option]();
}
} );
};
$.fn.languagesettings.modules = {};
$.fn.languagesettings.defaults = {
template: windowTemplate,
defaultModule: false, // Name of the default module
onClose: null, // An onClose event handler.
top: null, // Top position of this window
left: null, // Left position of this window
onVisible: null // A callback that runs after the ULS panel becomes visible
};
$.fn.languagesettings.Constructor = LanguageSettings;
}( jQuery, mediaWiki ) );