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

Basic language selector

Browse Source 
* uses setlang attribute in URL to switch language
* introduced a language filter widget by extending
  jquery.ui.autocomplete
* UI rendering is done by using SkinAfterContent hook

Change-Id: Ifa63a04ba1d060b6db8fba14bb868045cf6b97c3
This commit is contained in:
Santhosh Thottingal
2012-06-19 15:04:24 +05:30
parent 8527e33475
commit 9087825e6d
9 changed files with 302 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
UniversalLanguageSelector.hooks.php
View File

@@ -48,5 +48,50 @@ class UniversalLanguageSelectorHooks {
) ) + $personal_urls;
return true;
}
/**
* Add the template for the ULS to the body.
* Hooks: SkinAfterContent
* TODO: move to JavaScript side
* TODO: hardcoded English
*/
public static function addTemplate( &$data, $skin ) {
global $wgContLang;
$languages = Language::fetchLanguageNames( $wgContLang->getCode() );
$languageData = htmlspecialchars( FormatJSON::encode( $languages ) );
$data .= "
<div class=\"uls-menu\">
<span class=\"icon-close\"></span>
<div class=\"uls-menu-header\">
<div class=\"uls-menu-header-left\">
<h1>" . wfMsgHtml( 'uls-select-content-language' ) . "</h1>
</div>
<div class=\"uls-menu-header-right\">
<div class='uls-worldmap'>
<div class='uls-region' id='uls-region-1'>
<a>North America<br>Latin America<br>South America</a>
</div>
<div class='uls-region' id='uls-region-2'>
<a>Europe<br>Middle East<br>Africa</a>
</div>
<div class='uls-region' id='uls-region-3'>
<a>Asia<br>Australia<br>Pacific</a>
</div>
</div>
</div>
</div>
<div style=\"clear: both\"></div>
<div class=\"uls-lang-selector\">
<form action=\"#\" class=\"filterform\">
<input type=\"text\" placeholder=\"Language search\" id=\"languagefilter\"
class=\"filterinput\" data-languages=\"" . $languageData . "\">
<span class=\"search-button\"></span>
</form>
<div class=\"uls-language-list\" >
<ul class=\"uls-language-filter-result\" >
</ul>
</div>
</div>
</div>";
return true;
}
}

18
UniversalLanguageSelector.i18n.php
View File

@@ -8,11 +8,21 @@
$messages = array();
/** English
/**
* English
* @author santhosh
*/
*/
$messages['en'] = array(
'UniversalLanguageSelector' => 'Universal Language Selector',
'uls-desc' => 'Universal Language Selector',
'uls-select-content-language' => 'Select Content Language',
'uls-desc' => 'Universal Language Selector',
'uls-select-content-language' => 'Select language',
);
/**
* Message documentation
* @author santhosh
*/
$messages['qqq'] = array(
'UniversalLanguageSelector' => 'Extension name',
'uls-desc' => 'Extension description',
'uls-select-content-language' => 'Main heading in the language selector popup.',
);

12
UniversalLanguageSelector.php
View File

@@ -1,7 +1,7 @@
<?php
/**
* Universal Language Selector extension
* https://www.mediawiki.org/wiki/UniversalLanguageSelector
* https://www.mediawiki.org/wiki/Universal_Language_Selector
*
* @file
* @ingroup Extensions
@@ -24,7 +24,7 @@ $wgExtensionCredits['other'][] = array(
'descriptionmsg' => 'uls-desc',
);
$dir = dirname( __FILE__ );
$dir = __DIR__ ;
// Internationalization
$wgExtensionMessagesFiles['UniversalLanguageSelector'] = "$dir/UniversalLanguageSelector.i18n.php";
@@ -34,6 +34,7 @@ $wgAutoloadClasses['UniversalLanguageSelectorHooks'] = "$dir/UniversalLanguageSe
$wgHooks['BeforePageDisplay'][] = 'UniversalLanguageSelectorHooks::addModules';
$wgHooks['PersonalUrls'][] = 'UniversalLanguageSelectorHooks::addTrigger';
$wgHooks['SkinAfterContent'][] = 'UniversalLanguageSelectorHooks::addTemplate';
$wgResourceModules['ext.uls.init'] = array(
'scripts' => 'resources/ext.uls.init.js',
@@ -44,15 +45,14 @@ $wgResourceModules['ext.uls.init'] = array(
);
$wgResourceModules['ext.uls.core'] = array(
'scripts' => array( 'resources/ext.uls.core.js' ),
'scripts' => array( 'resources/ext.uls.core.js', 'resources/ext.uls.languagefilter.js' ),
'styles' => 'resources/css/ext.uls.css',
'localBasePath' => $dir,
'remoteExtPath' => 'UniversalLanguageSelector',
'dependencies' => array(
'mediawiki.util',
),
'messages' => array(
'uls-select-content-language',
'mediawiki.Uri',
'jquery.ui.autocomplete'
),
'position' => 'top',
);

127
resources/css/ext.uls.css
View File

@@ -5,17 +5,15 @@
}
.uls-menu {
position: absolute;
top: 100%;
left: 0;
position: fixed;
z-index: 1000;
display: none;
float: left;
min-width: 400px;
min-height: 400px;
padding: 4px 0;
margin: 1px 0 0;
list-style: none;
min-width: 600px;
min-height: 500px;
margin-top: 1px;
width: 50%;
/* Styling */
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
@@ -30,20 +28,109 @@
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
width: 50%
}
.uls-menu h2 {
float:left;
}
a.close{
float: right;
padding: 10px;
}
div#worldmap {
.uls-menu-header {
margin: 2%;
margin-top: 20px;
}
.uls-lang-selector {
margin: 2%;
}
.uls-menu-header-left {
float: left;
}
.uls-menu-header-left h1 {
font-weight: bold;
padding-top: 12px;
border:none;
padding-bottom: 3px;
}
.uls-menu-header-right {
float: right;
}
.uls-worldmap {
/* @embed */
background: url('../images/world_map.png') no-repeat scroll left center transparent;
float: right;
width: 400px;
height: 200px;
height: 197px;
}
.uls-region {
float: left;
cursor: pointer;
text-align: center;
width: 133px;
padding: 0;
margin: 0;
height: 197px;
}
.uls-region:hover {
outline: 1px solid #0E90D2;
background: black;
opacity: 0.4;
}
.uls-region.active {
background: black;
opacity: 0.4;
}
.icon-close {
/* @embed */
background: url('../images/close.png') no-repeat scroll left center transparent;
float: right;
padding: 10px;
cursor: pointer;
}
/* Language list */
.uls-language-list {
height: 300px;
overflow: auto;
margin-top: 2%;
}
.uls-language-list ul {
list-style: none;
margin-left: 0;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.uls-language-list ul li {
font-weight: bold;
}
.uls-language-list strong {
text-decoration: underline;
}
.uls-language-list a {
color: #0645AD;
}
input#languagefilter {
height: 20px;
border: 1px solid #0E90D2;
border-right: none;
width: 95%;
}
span.search-button {
/* @embed */
background: url('../images/search.png') no-repeat scroll left center transparent;
cursor: pointer;
height: 22px;
border: 1px solid #0E90D2;
position: absolute;
width: 20px;
border-left: none;
}

78
resources/ext.uls.core.js
View File

@@ -1,48 +1,59 @@
(function($) {
(function ( $, mw ) {
"use strict";
var ULS = function(element, options) {
var ULS = function( element, options ) {
this.$element = $( element );
this.options = $.extend( {}, $.fn.uls.defaults, options );
this.$menu = $( this.options.menu ).appendTo( 'body' );
this.$menu = $( this.options.menu );
this.shown = false;
this.render();
this.listen();
}
};
ULS.prototype = {
constructor : ULS,
show : function() {
constructor: ULS,
show: function() {
var pos = $.extend( {}, this.$element.offset(), {
height : this.$element[0].offsetHeight
height: this.$element[0].offsetHeight
} );
this.$menu.css( {
top : pos.top + pos.height,
left : '25%' //pos.left // FIXME
top: pos.top + pos.height,
left: '25%' //pos.left // FIXME
} );
this.$menu.show();
this.shown = true;
return this;
},
hide : function() {
hide: function() {
this.$menu.hide();
this.shown = false;
return this;
},
render: function(){
// TODO : All UI construction code to go here.
var $heading = $("<h2>").text(mw.msg("uls-select-content-language"));
this.$menu.append($heading);
var $wordldMap = $("<div id='worldmap'>");
this.$menu.append($wordldMap);
render: function() {
// Rendering stuff here
},
listen : function() {
listen: function() {
// Register all event listeners to the ULS here.
this.$element.on( 'click', $.proxy( this.click, this ) );
this.$menu.on( 'keyup', $.proxy( this.click, this ) )
.on( 'keypress', $.proxy( this.click, this ) );
$( ".icon-close" ).on( 'click', $.proxy( this.click, this ) );
$( "#languagefilter" ).languagefilter( {
$target: $( 'ul.uls-language-filter-result' ),
clickhandler: function( item ) {
// TODO: dependency on MediaWiki
var uri = new mw.Uri( window.location.href );
uri.extend( { setlang: item.value } );
window.location.href = uri.toString();
}
} );
$( '.uls-region' ).live( 'click', function () {
$( this ).parent().find( '.uls-region' ).removeClass( 'active' );
$( this ).addClass( 'active' );
} );
// trigger a search for all languages.
$( "#languagefilter" ).autocomplete( "search" );
},
keyup : function(e) {
switch(e.keyCode) {
@@ -53,15 +64,15 @@
}
break;
}
e.stopPropagation();
e.preventDefault();
},
keypress : function(e) {
if (!this.shown )
keypress: function( e ) {
if ( !this.shown ) {
return;
}
switch(e.keyCode) {
switch( e.keyCode ) {
case 27:
// escape
e.preventDefault();
@@ -69,7 +80,7 @@
}
e.stopPropagation();
},
click : function(e) {
click: function( e ) {
e.stopPropagation();
e.preventDefault();
if ( !this.shown ) {
@@ -78,26 +89,27 @@
this.hide();
}
},
}
};
/* ULS PLUGIN DEFINITION
* =========================== */
$.fn.uls = function(option) {
$.fn.uls = function( option ) {
return this.each( function() {
var $this = $( this ), data = $this.data( 'uls' ), options = typeof option == 'object' && option;
if (!data )
$this.data( 'uls', ( data = new ULS(this, options)) );
if ( typeof option == 'string' )
if ( !data ) {
$this.data( 'uls', ( data = new ULS( this, options ) ) );
}
if ( typeof option === 'string' ) {
data[option]();
} )
}
} );
};
$.fn.uls.defaults = {
// FIXME Menu template. Can it come from PHP?
menu : '<div class="uls-menu"><a class="close button">x</a></div>',
menu : '.uls-menu',
};
$.fn.uls.Constructor = ULS;
} )( jQuery );
} )( jQuery, mediaWiki );

8
resources/ext.uls.init.js
View File

@@ -3,12 +3,6 @@
*/
( function( $ ) {
$( document ).ready( function() {
/* Create a trigger somewhere in the page.
$trigger = $("<a href='#'>")
.addClass( 'uls-trigger' )
.text("English"); // FIXME proper trigger text to go here.
$('#mw-head').append( $trigger );*/
// Bind ULS to the trigger.
$('.uls-trigger').uls();
$( '.uls-trigger' ).uls();
} );
} )( jQuery );

83
resources/ext.uls.languagefilter.js Normal file
View File

@@ -0,0 +1,83 @@
/*
* @author Santhosh Thottingal
* jQuery autocomplete based language filter widget
* Usage: $('inputbox').languagefilter();
* The values for autocompletion is from the data-languages of the element.
* the data is in the format of languagecode:languagename format.
* Credits: http://jqueryui.com/demos/autocomplete
*/
jQuery( function( $ ) {
"use strict";
$.widget( "ui.languagefilter", {
options: {
$target: null, // where to append the results
languages: null, // languages as code:name format. default values is from data-languages
clickhandler: null
},
_create: function() {
var self = this.element,
options = this.options;
$( self ).autocomplete( {
delay: 0,
minLength: 0,
// Move the default dropdown for suggestions to somewhere
// where it is not visible, since we don't use it.
position: { offset: "-10000 -10000" },
source: function( request, response ) {
var term = request.term;
var matcher = new RegExp( $.ui.autocomplete.escapeRegex( term ), 'i' );
var languages = options.languages;
if ( languages === null ) {
// Apparently .data automatically parses valid looking JSON
languages = $( self ).data( 'languages' );
}
response( $.map( languages, function ( name, code ) {
if ( matcher.test( name ) ) {
return {
label: name.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex( term ) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>" ),
value: code
};
}
} ) );
},
search: function ( event, ui ) {
if ( options.$target ){
options.$target.empty();
}
}
} ); // /autocomplete
$( self ).data( "autocomplete" )._renderItem = function ( ul, item ) {
var $target = ul;
if ( options.$target ) {
$target = options.$target;
} else {
return;
}
var $li = $( "<li>" )
.data( "item.autocomplete", item )
.append( $( "<a>" ).prop( 'href', '#' ). html( item.label ) )
.appendTo( $target );
if ( options.clickhandler ) {
$li.click( function() {
options.clickhandler.call( this, item );
} );
}
return $li;
};
}, // End of _create
destroy: function() {
$.Widget.prototype.destroy.call( this );
}
} );
} );

BIN
resources/images/close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 637 B

BIN
resources/images/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 214 B