Add Language settings dialog
Change-Id: Ie3455f32ac6ceff3c52d79643a6f7f82106ab7f1
This commit is contained in:
Amir E. Aharoni
committed by
Santhosh Thottingal
Santhosh Thottingal
parent
e2af6470fb
commit
a3ab65906a
51
resources/js/ext.uls.displaysettings.js
Normal file
51
resources/js/ext.uls.displaysettings.js
Normal file
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* ULS-based display settings panel
|
||||
*
|
||||
* 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( $ ) {
|
||||
"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 displaySettings = {
|
||||
render: function() {
|
||||
return template;
|
||||
},
|
||||
name: "Display",
|
||||
description: "Set the fonts for languages"
|
||||
};
|
||||
|
||||
$.fn.languagesettings.modules = $.extend( $.fn.languagesettings.modules, {
|
||||
display: displaySettings
|
||||
} );
|
||||
} ) ( jQuery );
|
||||
161
resources/js/ext.uls.languagesettings.js
Normal file
161
resources/js/ext.uls.languagesettings.js
Normal file
@@ -0,0 +1,161 @@
|
||||
/**
|
||||
* ULS-based language settings dialog for MediaWiki.
|
||||
*
|
||||
* 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( $ ) {
|
||||
"use strict";
|
||||
|
||||
var closeRow = '<div class="row" id="languagesettings-close">' +
|
||||
'<span class="icon-close"></span>' +
|
||||
'</div>';
|
||||
var settingsMenu = '<div class="four columns">' +
|
||||
'<h1>Language settings</h1>' + // TODO i18n
|
||||
'<div class="settings-menu-items">' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
var settingsPanel = '<div id="languagesettings-settings-panel" class="eight columns">' +
|
||||
'</div>';
|
||||
var panelsRow = '<div class="row" id="languagesettings-panels">' +
|
||||
settingsMenu +
|
||||
settingsPanel +
|
||||
'</div>';
|
||||
var windowTemplate = '<div style="display: block;" id="language-settings-dialog" class="uls-menu">' +
|
||||
closeRow +
|
||||
panelsRow +
|
||||
'</div>';
|
||||
|
||||
var LanguageSettings = function ( element, options ) {
|
||||
this.$element = $( element );
|
||||
this.options = $.extend( {}, $.fn.languagesettings.defaults, options );
|
||||
this.$window = $( this.options.template );
|
||||
this.shown = false;
|
||||
this.initialized = false;
|
||||
this.init();
|
||||
this.listen();
|
||||
};
|
||||
|
||||
LanguageSettings.prototype = {
|
||||
constructor: LanguageSettings,
|
||||
|
||||
init: function(){
|
||||
$( "body" ).append( this.$window );
|
||||
this.hide();
|
||||
},
|
||||
|
||||
listen: function() {
|
||||
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 ) );
|
||||
},
|
||||
|
||||
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;
|
||||
for ( var moduleName in modules ) {
|
||||
if ( modules.hasOwnProperty( moduleName ) ) {
|
||||
if ( !firstModuleName ) {
|
||||
firstModuleName = moduleName;
|
||||
}
|
||||
// Call render function on the current setting module.
|
||||
this.renderModule( moduleName );
|
||||
}
|
||||
}
|
||||
|
||||
// Show the default module
|
||||
$( "#languagesettings-settings-panel" ).html(
|
||||
$.fn.languagesettings.modules[firstModuleName].render()
|
||||
);
|
||||
},
|
||||
|
||||
renderModule: function( moduleName ) {
|
||||
var $settingsMenuItems = this.$window.find( ".settings-menu-items" );
|
||||
var $settingsPanel = this.$window.find( "#languagesettings-settings-panel" );
|
||||
var module = $.fn.languagesettings.modules[moduleName];
|
||||
var $settingsTitle = $( "<div>" )
|
||||
.addClass( "settings-title" )
|
||||
.text( module.name );
|
||||
var $settingsText = $( "<span>" )
|
||||
.addClass( "settings-text" )
|
||||
.text( module.description );
|
||||
var $settingsLink = $( "<div>" )
|
||||
.addClass( moduleName + "-settings-block" )
|
||||
.prop( "id", moduleName + "-settings-block" )
|
||||
.data( "module", module )
|
||||
.append( $settingsTitle )
|
||||
.append( $settingsText );
|
||||
|
||||
$settingsMenuItems.append( $settingsLink );
|
||||
|
||||
$settingsLink.on( "click", function() {
|
||||
$settingsPanel.html( $( this ).data( "module" ).render() );
|
||||
} );
|
||||
},
|
||||
|
||||
show: function() {
|
||||
if ( !this.initialized ) {
|
||||
this.render();
|
||||
this.initialized = true;
|
||||
}
|
||||
this.shown = true;
|
||||
this.$window.show();
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
this.shown = false;
|
||||
this.$window.hide();
|
||||
},
|
||||
|
||||
click: function( e ) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
if ( !this.shown ) {
|
||||
this.show();
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.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 = {
|
||||
settings: {},
|
||||
template: windowTemplate,
|
||||
modules: {},
|
||||
defaultModule: false
|
||||
};
|
||||
|
||||
$.fn.languagesettings.Constructor = LanguageSettings;
|
||||
|
||||
} )( jQuery );
|
||||
Reference in New Issue
Block a user