Compacting the interlanguage links with the ULS

Displays a shorter version of the language list with the languages that are more relevant to you.
More info at https://www.mediawiki.org/wiki/Universal_Language_Selector/Design/Interlanguage_links

Due to a problem with duplicate patchsets we had to create a new one. 
The history and info on code and security revisions is available at
https://gerrit.wikimedia.org/r/#/c/104793/

Change-Id: I109bfb10f6181b6408aab170db5e8ca32493d657
This commit is contained in:
Niharika Kohli
2014-01-29 05:07:50 +00:00
committed by Pginer
parent d4454c6588
commit 5ca0d5d400
12 changed files with 313 additions and 3 deletions

View File

@@ -146,6 +146,17 @@ $wgResourceModules['ext.uls.preferences'] = array(
),
) + $resourcePaths;
$wgResourceModules['ext.uls.compactlinks'] = array(
'scripts' => 'resources/js/ext.uls.compactlinks.js',
'styles' => 'resources/css/ext.uls.compactlinks.css',
'dependencies' => array(
'ext.uls.mediawiki',
'ext.uls.init',
'jquery.uls.compact',
'mediawiki.ui.button',
),
) + $resourcePaths;
$wgResourceModules['ext.uls.webfonts'] = array(
'scripts' => 'resources/js/ext.uls.webfonts.js',
'dependencies' => array(

View File

@@ -62,6 +62,13 @@ class UniversalLanguageSelectorHooks {
// If the extension is enabled, basic features (API, language data) available.
$out->addModules( 'ext.uls.init' );
// If compact ULS beta feature is enabled
if ( class_exists( 'BetaFeatures' ) &&
BetaFeatures::isFeatureEnabled( $out->getUser(), 'uls-compact-links' )
) {
$out->addModules( 'ext.uls.compactlinks' );
}
if ( is_string( $wgULSGeoService ) ) {
$out->addModules( 'ext.uls.geoclient' );
}
@@ -327,6 +334,20 @@ class UniversalLanguageSelectorHooks {
return true;
}
public static function onGetBetaFeaturePreferences( $user, &$prefs ) {
global $wgExtensionAssetsPath;
$prefs['uls-compact-links'] = array(
'label-message' => 'uls-betafeature-label',
'desc-message' => 'uls-betafeature-desc',
'screenshot' => $wgExtensionAssetsPath .
'/UniversalLanguageSelector/resources/images/compact-links-ltr.png',
'info-link' =>
'https://www.mediawiki.org/wiki/Universal_Language_Selector/Design/Interlanguage_links',
'discussion-link' =>
'https://www.mediawiki.org/wiki/Talk:Universal_Language_Selector/Design/Interlanguage_links',
);
}
/**
* Hook: SkinTemplateOutputPageBeforeExec
* @param Skin $skin

View File

@@ -26,6 +26,7 @@ $messages = array();
* @author Amire80
* @author Nike
* @author Kunal Mehta
* @author Niharika
*/
$messages['en'] = array(
'UniversalLanguageSelector' => 'Universal Language Selector',
@@ -36,6 +37,8 @@ $messages['en'] = array(
'ext-uls-select-language-settings-icon-tooltip' => 'Language settings',
'ext-uls-undo-language-tooltip-text' => 'Language changed from $1',
'ext-uls-language-settings-preferences-link' => 'More language settings',
'uls-betafeature-label' => 'Compacting interlanguage links',
'uls-betafeature-desc' => 'Displays a shorter version of the language list with the languages that are more relevant to you.',
);
/** Message documentation (Message documentation)
@@ -58,6 +61,8 @@ This title is shown when there are no interlanguage links there, but an icon tha
'ext-uls-undo-language-tooltip-text' => 'Text for the tooltip appearing when language is changed. Parameters:
* $1 - the previous language acronym',
'ext-uls-language-settings-preferences-link' => 'Text for the link showin in user preference screen',
'uls-betafeature-label' => 'Title for the compact interlanguage links beta feature',
'uls-betafeature-desc' => 'Description for the compact interlanguage links beta feature'
);
/** Arabic (العربية)

View File

@@ -203,6 +203,8 @@ $GLOBALS['wgHooks']['EnterMobileMode'][] = 'UniversalLanguageSelectorHooks::onEn
$GLOBALS['wgDefaultUserOptions']['uls-preferences'] = '';
$GLOBALS['wgHooks']['GetPreferences'][] = 'UniversalLanguageSelectorHooks::onGetPreferences';
$GLOBALS['wgHooks']['GetBetaFeaturePreferences'][] =
'UniversalLanguageSelectorHooks::onGetBetaFeaturePreferences';
$GLOBALS['wgExtensionFunctions'][] = function () {
global $wgHooks, $wgResourceModules, $wgULSEventLogging, $wgULSGeoService;

View File

@@ -48,5 +48,6 @@
"ext-uls-input-disable-notification-undo": "Undo",
"ext-uls-input-disable-notification-info-personal": "You can enable the input tools at any time from the language settings.",
"ext-uls-input-disable-notification-info-interlanguage": "You can enable the input tools at any time from the language settings next to the language list.",
"ext-uls-language-settings-applying": "Applying..."
"ext-uls-language-settings-applying": "Applying...",
"ext-uls-compact-link-count": "{{PLURAL:$1|One more language|$1 more languages}}"
}

View File

@@ -50,5 +50,7 @@
"ext-uls-input-disable-notification-undo": "Undo link text in the input method disable notification bubble.\n\nPreceded by the notification message {{msg-mw|Jquery-uls-ext-uls-input-disable-notification}}.\n{{Identical|Undo}}",
"ext-uls-input-disable-notification-info-personal": "Notification bubble text when input methods are disabled, appears if the ULS is at personal toolbar",
"ext-uls-input-disable-notification-info-interlanguage": "Notification bubble text when input methods are disabled, appears if the ULS is at interlanguage toolbar",
"ext-uls-language-settings-applying": "Label for apply settings button in language settings screen, while settings being saved. Please keep it short."
}
"ext-uls-language-settings-applying": "Label for apply settings button in language settings screen, while settings being saved. Please keep it short.",
"ext-uls-language-settings-preferences-link": "Text for the link showing in user preference screen",
"ext-uls-compact-link-count": "Message next to list of languages which indicates that there are more languages than the ones shown. Parameters:\n* $1 - number of languages"
}

View File

@@ -0,0 +1,38 @@
#more-lang-label {
color: #8b8989;
font-size: 12px;
display: block;
}
#p-lang-list .uls-trigger {
background-image: none;
padding: 0;
}
.mw-interlanguage-selector {
cursor: pointer;
margin: 2px 0;
padding: 0 8px;
}
.interlanguage-uls-menu:after,
.interlanguage-uls-menu:before {
right: 100%;
content: " ";
position: absolute;
border: 1px solid black;
}
.interlanguage-uls-menu:after {
border-color: transparent;
border-right-color: #FCFCFC;
border-width: 20px;
top: 250px;
}
.interlanguage-uls-menu:before {
border-color: transparent;
border-right-color: #555555;
border-width: 20px;
top: 250px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="264" height="162" viewBox="0 0 264 162"><g><path fill="#fff" d="M13.366 161.357l-12.866-9.608v-151.249h263v151.749l-9 6.705v-116.454h-39v112.6l-4.393-3.731-7.607 5.33v-114.199h-155v110.85l-9.751 8.03-13.916-10.019z"/><path d="M263 1v150.998l-8 5.96v-115.958h-40v112.02l-3.274-2.781-.589-.498-.633.441-6.504 4.556v-113.738h-156v111.1l-9.257 7.66-13.295-9.57-.645-.463-.598.521-10.864 9.47-12.341-9.219v-150.499h262m1-1h-264v152l13.391 10 11.474-10 13.891 10 10.244-8.4v-110.6h154v114.66l8.078-5.66 4.922 4.18v-113.18h38v116.95l10-7.45v-152.5z" fill="#e5e5e5"/></g><path d="M203 157.66v-114.66h-154v110.6l2.145-1.6 12.555 10 13.809-10 14.229 10 12.972-10 12.973 10 13.811-10 12.136 10 13.391-10 14.229 10 12.972-10 12.974 10 5.804-4.34z" fill="#e5e5e5"/><path d="M11 36c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14z" fill="#e5e5e5"/><path d="M254 159.95v-116.95h-38v113.18l7.551 5.82 13.811-10 13.891 10 2.747-2.05z" fill="#e5e5e5"/><path d="M38 107v-35h-25v35h25z" fill="#e5e5e5"/><path d="M232.51 5h26v6h-26v-6z" fill="#e5e5e5"/><path fill="#e5e5e5" d="M208.51 5h22v6h-22z"/><path d="M142 6v4h-92v-4h92m1-1h-94v6h94v-6z" fill="#e5e5e5"/><path fill="#e5e5e5" d="M184.51 5h22v6h-22z"/><path fill="#e5e5e5" d="M161.51 5h13v6h-13z"/><path fill="#e5e5e5" d="M176.51 5h6v6h-6z"/><path fill="#e5e5e5" d="M153.51 5h6v6h-6z"/><path fill="#e5e5e5" d="M9 5h32v6h-32z"/><path d="M2 14.5h260" fill="#e5e5e5" stroke="#e5e5e5"/><path fill="#e5e5e5" d="M52 7h2v2h-2z"/><path d="M38 59v-5h-25v5h25z" fill="#e5e5e5"/><path d="M38 132.625v-35h-25v35h25z" fill="#8acdff"/><rect width="20.438" height="2.176" rx=".151" ry=".107" x="15.281" y="108.59" fill="#fff"/><rect width="20.438" height="2.176" rx=".151" ry=".107" x="15.281" y="113.831" fill="#fff"/><rect width="20.438" height="6.188" rx=".151" ry=".303" x="15.281" y="124.313" fill="#2693ff"/><g transform="matrix(.747 0 0 .747 7.295 33.453)" fill="#fff"><rect width="1.823" height="1.882" rx=".013" ry=".092" x="20.273" y="125.738"/><rect width="1.823" height="1.882" rx=".013" ry=".092" x="26.655" y="125.738"/><rect width="1.823" height="1.882" rx=".013" ry=".092" x="23.464" y="125.738"/></g><rect width="20.438" height="2.176" rx=".151" ry=".107" x="15.281" y="103.349" fill="#fff"/><rect width="20.438" height="2.176" rx=".151" ry=".107" x="15.281" y="119.072" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="264" height="162" viewBox="0 0 264 162"><g><path fill="#fff" d="M.5.5v151.749l9 6.705v-116.454h39v112.6l4.393-3.731 7.607 5.33v-114.199h155v110.85l9.751 8.03 13.916-10.019 11.467 9.996 12.866-9.608v-151.249z"/><path d="M1 1v150.998l8 5.96v-115.958h40v112.02l3.274-2.781.589-.498.633.441 6.504 4.556v-113.738h156v111.1l9.257 7.66 13.295-9.57.645-.463.598.521 10.864 9.47 12.341-9.219v-150.499h-262m-1-1h264v152l-13.391 10-11.474-10-13.891 10-10.244-8.4v-110.6h-154v114.66l-8.078-5.66-4.922 4.18v-113.18h-38v116.95l-10-7.45v-152.5z" fill="#e5e5e5"/></g><path d="M61 157.66v-114.66h154v110.6l-2.145-1.6-12.555 10-13.809-10-14.229 10-12.972-10-12.973 10-13.811-10-12.136 10-13.391-10-14.229 10-12.972-10-12.974 10-5.804-4.34z" fill="#e5e5e5"/><path d="M253 36c0-7.732-6.268-14-14-14s-14 6.268-14 14 6.268 14 14 14 14-6.268 14-14z" fill="#e5e5e5"/><path d="M10 159.95v-116.95h38v113.18l-7.551 5.82-13.811-10-13.891 10-2.747-2.05z" fill="#e5e5e5"/><path d="M226 107v-35h25v35h-25z" fill="#e5e5e5"/><path d="M31.49 5h-26v6h26v-6z" fill="#e5e5e5"/><path fill="#e5e5e5" d="M55.49 5h-22v6h22z"/><path d="M122 6v4h92v-4h-92m-1-1h94v6h-94v-6z" fill="#e5e5e5"/><path fill="#e5e5e5" d="M79.49 5h-22v6h22z"/><path fill="#e5e5e5" d="M102.49 5h-13v6h13z"/><path fill="#e5e5e5" d="M87.49 5h-6v6h6z"/><path fill="#e5e5e5" d="M110.49 5h-6v6h6z"/><path fill="#e5e5e5" d="M255 5h-32v6h32z"/><path d="M262 14.5h-260" fill="#e5e5e5" stroke="#e5e5e5"/><path fill="#e5e5e5" d="M212 7h-2v2h2z"/><path d="M226 59v-5h25v5h-25z" fill="#e5e5e5"/><path d="M226 132.625v-35h25v35h-25z" fill="#8acdff"/><rect width="20.438" height="2.176" rx=".151" ry=".107" x="-248.719" y="108.59" transform="scale(-1 1)" fill="#fff"/><rect width="20.438" height="2.176" rx=".151" ry=".107" x="-248.719" y="113.831" transform="scale(-1 1)" fill="#fff"/><rect width="20.438" height="6.188" rx=".151" ry=".303" x="-248.719" y="124.313" transform="scale(-1 1)" fill="#2693ff"/><g transform="matrix(-.747 0 0 .747 256.705 33.453)" fill="#fff"><rect width="1.823" height="1.882" rx=".013" ry=".092" x="20.273" y="125.738"/><rect width="1.823" height="1.882" rx=".013" ry=".092" x="26.655" y="125.738"/><rect width="1.823" height="1.882" rx=".013" ry=".092" x="23.464" y="125.738"/></g><rect width="20.438" height="2.176" rx=".151" ry=".107" x="-248.719" y="103.349" transform="scale(-1 1)" fill="#fff"/><rect width="20.438" height="2.176" rx=".151" ry=".107" x="-248.719" y="119.072" transform="scale(-1 1)" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@@ -0,0 +1,228 @@
/**
* Compact the interlanguage links in the sidebar
*
* Copyright (C) 2012-2014 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
* Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland, Niharika Kohli
* 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 GPL-2.0+
* @licence MIT License
*/
( function ( $, mw ) {
'use strict';
/**
* Add a language to the interlanguage list
* @param {string} name Name of language in Autonym font
* @param {string} url Link of the article in the respective language wiki
*/
function addLanguage( name, url ) {
var $linkNode,
$listNode,
$interlanguageList;
$linkNode = $( '<a>' )
.addClass( 'active' )
.attr( 'href', url )
.text( name );
$listNode = $( '<li>' )
.append( $linkNode );
$interlanguageList = $( '#p-lang > div > ul' );
$interlanguageList.append( $listNode );
}
/**
* Find out the existing languages supported
* by article and fetch their href
* @return {Object} List of exiting language codes and their hrefs
*/
function getInterlanguageList() {
var interlangList = {},
selectedElement;
$( '#p-lang > div > ul > li > a' ).each( function() {
selectedElement = $( this );
interlangList[ selectedElement.attr( 'lang' ) ] = selectedElement.attr( 'href' );
} );
return interlangList;
}
/**
* Fetch list of language names(in Autonym) which are supported by the article
* @return {Object} List of Language names in Autonym supported by article
*/
function getCurrentLanguages() {
var acceptedLanglist = {},
interlangList = getInterlanguageList(), i;
for ( i in interlangList ) {
if( interlangList.hasOwnProperty( i ) ) {
acceptedLanglist[ i ] = $.uls.data.getAutonym(i);
}
}
return acceptedLanglist;
}
/**
* Frequently spoken languages which are supported by the article for
* the Common Languages section of the ULS
* @return {Array} List of those language codes which are supported by article and appears
* in the Common Languages section of ULS
*/
function getCommonLanguages() {
// From ext.uls.init.js
var frequentLang = mw.uls.getFrequentLanguageList(),
$acceptedLang = $.map( getCurrentLanguages(), function ( element, index ) {
return index;
} ),
commonLanguages = [], i;
for ( i = 0; i < frequentLang.length; i++ ) {
if ( $.inArray( frequentLang[i], $acceptedLang ) >= 0 ) {
commonLanguages.push( frequentLang[i] );
}
}
return commonLanguages;
}
/**
* Add a ULS trigger beneath the interlanguage links
*/
function addULSlink() {
var $newLinknode,
$interlanguageList,
supportedLangs,
posOfTrigger;
$newLinknode = $( '<div>' )
.addClass( 'mw-interlanguage-selector mw-ui-button active' )
.html( '&#8230' )
.append( $newLinknode );
$interlanguageList = $( '#p-lang > div > ul' );
$interlanguageList.append( $newLinknode );
posOfTrigger = $newLinknode.offset();
$( '.mw-interlanguage-selector' ).uls( {
onReady: function() {
this.$menu.addClass( 'interlanguage-uls-menu' );
},
onSelect: function( language ) {
supportedLangs = getInterlanguageList();
window.location.href = supportedLangs[language];
},
compact: true,
left: posOfTrigger.left + $newLinknode.width() + 50 + 'px',
top: posOfTrigger.top - $newLinknode.height()/2 - 250 + 'px',
languages: getCurrentLanguages(),
quickList: getCommonLanguages()
} );
}
/**
* Hide existing languages displayed on the page
*/
function hideLanguages() {
var $languages = $( '.interlanguage-link' );
$languages.hide();
}
/**
* Returns all languages returned by the commonLanguages function
* and randomly some more if the number falls short of numberOfLanguagesToShow parameter
* @param {number} numberOfLanguagesToShow Number of languages to be shown in sidebar
* @return {Array} Language codes of the final list to be displayed
*/
function displayLanguages( numberOfLanguagesToShow ) {
var commonLang = getCommonLanguages(),
currentLangs = getInterlanguageList(), i,
count,
finalList = [];
// Check existing languages for ones in common, and add them to final list
for ( i = 0; i < commonLang.length; i++ ) {
finalList.push( commonLang[i] );
}
count = commonLang.length;
if ( count < numberOfLanguagesToShow ) {
for ( i in currentLangs ) {
if ( $.inArray( i, commonLang ) === -1 ) {
finalList.push( i );
count++;
if ( count === numberOfLanguagesToShow ) {
break;
}
}
}
}
// Sorting the language list in alphabetical order of ISO codes
finalList = finalList.sort();
return finalList;
}
/*
* Adds a label stating the number of more languages
* beneath the ULS link
* @param {Number} numberOfLanguagesSupported Number of languages supported by article
* @param {Number} numberOfLanguagesToShow Number of languages to be shown in the sidebar
*/
function addLabel( numberOfLanguagesSupported, numberOfLanguagesToShow ) {
var $interlanguageList = $( '#p-lang > div > ul' ),
newLabel = $( '<label>' )
.attr( 'id', 'more-lang-label' ),
numberOfLanguagesHidden = numberOfLanguagesSupported - numberOfLanguagesToShow;
newLabel.text( $.i18n( 'ext-uls-compact-link-count', numberOfLanguagesHidden ) );
$interlanguageList.append( newLabel );
}
/*
* Driver function to manipulate interlanguage list
* Computes number of languages to be shown
* and passes appropriate parameters to displayLanguages
* and addLabel functions
*/
function manageInterlaguageList() {
var $numOfLangCurrently = $( '.interlanguage-link' ).length,
currentLangs = getInterlanguageList(),
numLanguages = 9,
minLanguages = 7,
flagForNumberOfLangs = 0, i,
finalList; //Final list of languages to be displayed on page
if ( $numOfLangCurrently > 9) {
hideLanguages();
if ( $numOfLangCurrently > 9 && $numOfLangCurrently <= 12 ) {
finalList = displayLanguages( minLanguages );
} else {
flagForNumberOfLangs = 1;
finalList = displayLanguages( numLanguages );
}
for ( i in finalList ) {
addLanguage( $.uls.data.getAutonym( finalList[i] ), currentLangs[ finalList[i] ] );
}
addULSlink();
if ( !flagForNumberOfLangs ) {
addLabel( $numOfLangCurrently, minLanguages );
} else {
addLabel( $numOfLangCurrently, numLanguages );
}
}
}
$( document ).ready( manageInterlaguageList() );
}( jQuery, mediaWiki ) );