bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ULS persistent preference system.

Browse Source 
Change-Id: Ieb22e09f226e770c9935b875f4226a75ffd8c46d
This commit is contained in:
Santhosh Thottingal
2012-08-16 14:45:24 +05:30
committed by Amir E. Aharoni
parent 7ab6960645
commit 1bc80d58ba
5 changed files with 197 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
UniversalLanguageSelector.php
View File

@@ -77,11 +77,24 @@ $wgResourceModules['ext.uls.init'] = array(
'position' => 'top',
);
$wgResourceModules['ext.uls.preferences'] = array(
'scripts' => 'resources/js/ext.uls.preferences.js',
'localBasePath' => $dir,
'remoteExtPath' => 'UniversalLanguageSelector',
'dependencies' => array(
'mediawiki.user',
'jquery.json',
),
);
$wgResourceModules['ext.uls.languagesettings'] = array(
'scripts' => 'resources/js/ext.uls.languagesettings.js',
'styles' => 'resources/css/ext.uls.languagesettings.css',
'localBasePath' => $dir,
'remoteExtPath' => 'UniversalLanguageSelector',
'dependencies' => array(
'ext.uls.preferences',
),
);
$wgResourceModules['ext.uls.webfonts'] = array(

69
resources/js/ext.uls.displaysettings.js
View File

@@ -40,15 +40,17 @@
+ '<div class="row"></div>'
+ '<div class="row language-settings-buttons">'
+ '<button class="three columns offset-by-three button uls-settings-close">Cancel</button>'
+ '<button class="four columns offset-by-one active blue button">Apply changes</button>'
+ '<button id="uls-displaysettings-apply" class="four columns offset-by-one active blue button">Apply changes</button>'
+ '</div>'; // FIXME i18n and too much hardcoding.
var DisplaySettings = function () {
var DisplaySettings = function ( $parent ) {
this.name = "Display";
this.description = "Set the languages of menus and fonts";
this.$template = $( template );
this.language = this.currentLanguage();
this.$webfonts = null;
this.$parent = $parent;
this.webfontPreferences = new $.fn.uls.preferences( 'webfonts' );
};
DisplaySettings.prototype = {
@@ -57,12 +59,11 @@
/**
* Render the module into a given target
* @param $target
*/
render: function ( $target ) {
$target.empty();
render: function ( ) {
this.$parent.$settingsPanel.empty();
this.$webfonts = $( 'body' ).data( 'webfonts' );
$target.append( this.$template );
this.$parent.$settingsPanel.append( this.$template );
this.prepareLanguages();
this.prepareFonts();
this.listen();
@@ -129,10 +130,18 @@
var fonts = this.$webfonts.list( this.language );
var $fontSelector = $( 'select.uls-font-select' );
$fontSelector.find( 'option' ).remove();
var savedFont = this.webfontPreferences.get( this.language );
if( fonts && fonts.length ) {
$.each( fonts, function ( key, font ) {
$fontSelector.append( $( "<option></option>" )
.attr( "value", font ).text( font ) );
var $fontOption = $( "<option>" )
.attr( "value", font ).text( font );
$fontSelector.append( $fontOption );
$fontOption.attr( 'selected', savedFont === font );
} );
}
var $systemFont = $( "<option>" ).val( 'system' ).text( 'System font' );
$fontSelector.append( $systemFont );
$systemFont.attr( 'selected', savedFont === 'system' );
var $fontLabel = $( 'label#font-selector' );
$fontLabel.text( "Select font for " + $.uls.data.autonym( this.language ) );
},
@@ -142,12 +151,15 @@
*/
listen: function () {
var that = this;
$( "button.button" ).click( function () {
$( "div.uls-ui-languages button.button" ).click( function () {
$( "button.button" ).removeClass( "down" );
$( this ).addClass( "down" );
that.language = $( this ).data( 'language' ) || that.language;
that.prepareFonts();
} );
$( '#uls-displaysettings-apply' ).on( 'click', function () {
that.apply();
} );
},
/**
@@ -164,19 +176,46 @@
},
/**
* Handle the apply button press
* Callback for save preferences
*/
apply: function () {
var $fontSelector = $( 'select.uls-font-select' );
var font = $fontSelector.find( 'option:selected' ).val();
this.$webfonts.apply( font );
onSave: function ( success ) {
if ( success ) {
this.$parent.hide();
// we delay change UI language to here, because it causes a page refresh
if ( this.language !== this.currentLanguage() ) {
this.changeLanguage( this.language );
}
} else {
// FIXME failure. what to do?!
}
},
/**
* Handle the apply button press
*/
apply: function () {
var that = this;
var $fontSelector = $( 'select.uls-font-select' );
var font = $fontSelector.find( 'option:selected' ).val();
// Live font update if current UI language match with language selection
if ( this.language === this.currentLanguage() ) {
if ( font === 'system' ) {
this.$webfonts.reset();
} else {
this.$webfonts.apply( font );
}
}
// Save the preferences
this.webfontPreferences.set( this.language, font );
this.webfontPreferences.save( function ( result ) {
// closure for not losing the scope
that.onSave( result );
} );
}
};
// Register this module to language settings modules
$.fn.languagesettings.modules = $.extend( $.fn.languagesettings.modules, {
display: new DisplaySettings()
display: DisplaySettings
} );
} ) ( jQuery );

11
resources/js/ext.uls.languagesettings.js
View File

@@ -45,6 +45,7 @@
this.$window = $( this.options.template );
this.shown = false;
this.initialized = false;
this.$settingsPanel = this.$window.find( "#languagesettings-settings-panel" );
this.init();
this.listen();
};
@@ -72,7 +73,7 @@
for ( var moduleName in modules ) {
if ( modules.hasOwnProperty( moduleName ) ) {
if ( !firstModule ) {
firstModule = modules[moduleName];
firstModule = new modules[moduleName]( this );
}
// Call render function on the current setting module.
this.renderModule( moduleName );
@@ -80,13 +81,12 @@
}
// Show the default module
firstModule.render( $( "#languagesettings-settings-panel" ) );
firstModule.render();
},
renderModule: function( moduleName ) {
var that = this;
var $settingsMenuItems = this.$window.find( ".settings-menu-items" );
var module = $.fn.languagesettings.modules[moduleName];
var module = new $.fn.languagesettings.modules[moduleName]( this );
var $settingsTitle = $( "<div>" )
.addClass( "settings-title" )
.text( module.name );
@@ -104,8 +104,7 @@
$settingsLink.on( "click", function() {
var module = $( this ).data( "module" );
var $settingsPanel = that.$window.find( "#languagesettings-settings-panel" );
module.render( $settingsPanel );
module.render();
$( this ).addClass( 'active' );
} );
},

113
resources/js/ext.uls.preferences.js Normal file
View File

@@ -0,0 +1,113 @@
/**
* ULS preferences system for MediaWiki.
* Cookies for anonymous users, preferences for logged in users.
*
* 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";
var ULSPreferences = function ( group ) {
this.cookieName = this.preferenceName = 'uls-preferences';
this.username = mw.user.getName();
this.isAnon = mw.user.isAnon();
this.preferences = null;
this.group = group;
this.init();
};
ULSPreferences.prototype = {
/**
* Initalize
*/
init: function () {
if ( this.isAnon ) {
this.cookie = $.cookie( this.cookieName );
this.preferences = $.parseJSON( this.cookie );
} else {
var options = mw.user.options.get( this.preferenceName );
this.preferences = $.parseJSON( options );
}
this.preferences = this.preferences || {};
},
/**
* Set the preference
* @param {String} key
* @param value
*/
set: function ( key, value ) {
if ( !this.preferences[this.group] ) {
this.preferences[this.group] = {};
}
this.preferences[this.group][key] = value;
},
/**
* Get a preference value for the given preference name
* @param key
* @returns
*/
get: function ( key ) {
return this.preferences[this.group] && this.preferences[this.group][key];
},
/**
* Save the preferences
*
* @param callback
*/
save: function ( callback ) {
var that = this;
callback = callback || $.noop();
if ( this.isAnon ) {
// Anonymous user- Save preferences in cookie
$.cookie( this.cookieName, $.toJSON( this.preferences ), {
expires: 30,
HttpOnly: true,
path: '/'
} );
callback.call( this, true );
} else {
// Logged in user. Use MW apis to change preferences
var api = new mw.Api();
api.post( {
action: 'tokens',
type: 'options'
} ).done( function ( result ) {
var token = result.tokens.optionstoken;
api.post( {
action: 'options',
change: 'hideminor=1',
optionname: that.preferenceName,
optionvalue: $.toJSON( that.preferences ),
token: token
} ).done( function ( result ) {
callback.call( this, true );
} ).fail( function () {
callback.call( this, false );
} );
} ).fail( function ( xhr, textStatus, exception ) {
callback.call( this, false );
} );
}
}
};
$.fn.uls.preferences = ULSPreferences;
}( jQuery, mediaWiki ) );

11
resources/js/ext.uls.webfonts.js
View File

@@ -16,7 +16,7 @@
* @licence GNU General Public Licence 2.0 or later
* @licence MIT License
*/
( function($, mw) {
( function ( $, mw ) {
"use strict";
$( document ).ready( function() {
var mediawikiFontRepository = $.webfonts.repository;
@@ -25,5 +25,14 @@
$( 'body' ).webfonts( {
repository: mediawikiFontRepository
} );
var $webfonts = $( 'body' ).data( 'webfonts' );
var webfontPreferences = new $.fn.uls.preferences( 'webfonts' );
var rememberedFont = webfontPreferences.get( mw.config.get( 'wgUserLanguage' ) );
if ( rememberedFont === 'system' ) {
$webfonts.reset();
} else {
// FIXME: jquery.webfonts should have an option to specify default font to use.
$webfonts.apply( rememberedFont );
}
} );
} )( jQuery, mediaWiki );