jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/319563 )
Change subject: Adding client-side translations for footer text.
......................................................................
Adding client-side translations for footer text.
This patch enables client-side translations for
all the content on the wikipedia portal page.
The translations for sister projects, footer text
and language button text have been available from
translatewiki for some time. Here these translations
are now utilized for the whole page and not just the
top ten links.
The dir attribute on the html tag has been removed
so that at least the text for rtl langs will be readable.
Bug: T136446
Change-Id: Ia3886baa8b5f81c119207d1e4720c12b44106320
---
M data/stats.js
A dev/wikipedia.org/assets/js/page-localized.js
M dev/wikipedia.org/assets/postcss/_localized_topten.css
M dev/wikipedia.org/controller.js
M dev/wikipedia.org/index.handlebars
M dev/wikipedia.org/other-projects.json
M dev/wikipedia.org/templates/footer.handlebars
M dev/wikipedia.org/templates/language-list-button.handlebars
M dev/wikipedia.org/templates/other-projects.item.handlebars
9 files changed, 210 insertions(+), 34 deletions(-)
Approvals:
JGirault: Looks good to me, approved
jenkins-bot: Verified
diff --git a/data/stats.js b/data/stats.js
index 79710fd..0062739 100644
--- a/data/stats.js
+++ b/data/stats.js
@@ -213,6 +213,27 @@
formatted.attrs = siteDef.attrs;
}
+ var extendedl10n = [
+ 'language-button-text',
+ 'footer-description',
+ 'wiki',
+ 'wiktionary',
+ 'wikibooks',
+ 'wikinews',
+ 'wikiquote',
+ 'wikisource',
+ 'wikiversity',
+ 'wikivoyage',
+ 'commons',
+ 'wikispecies',
+ 'wikidata',
+ 'mediawiki',
+ 'metawiki' ];
+
+ extendedl10n.forEach( function ( prop ) {
+ formatted[ prop ] = siteDef[ prop ];
+ } );
+
if ( options.stripTags ) {
// http://stackoverflow.com/a/5002161
formatted.name = formatted.name.replace(
/<\/?[^>]+(>|$)/g, '' );
diff --git a/dev/wikipedia.org/assets/js/page-localized.js
b/dev/wikipedia.org/assets/js/page-localized.js
new file mode 100644
index 0000000..a876ad3
--- /dev/null
+++ b/dev/wikipedia.org/assets/js/page-localized.js
@@ -0,0 +1,141 @@
+/* global wmTest, translationsHash, mw */
+
+/**
+ * This script localizes the page text.
+ * Text includes the footer text, language button text, sister project name &
slogan.
+ *
+ * Each localized text node is given a class name that corresponds to a
property
+ * in the translation json object.
+ *
+ * eg: the class `jsl10n_wiktionary_name` will be translated to
en.wikitionary.name value.
+ * If a translation value is missing, page will default to english.
+ */
+
+( function ( wmTest, translationsHash, mw ) {
+
+ var primaryLang = wmTest.userLangs[ 0 ],
+ storedTranslationHash,
+ storedTranslations;
+
+ /**
+ * Helper function to safely parse JSON an return empty string on error.
+ * @param {JSON} json
+ * @return {JSON}
+ */
+ function safelyParseJSON( json ) {
+ var parsed;
+ try {
+ parsed = JSON.parse( json );
+ } catch ( e ) {
+ parsed = '';
+ }
+ return parsed;
+ }
+
+ function isValidHash() {
+ var storedHash = mw.storage.get( 'translationHash' );
+ return ( translationsHash === storedHash ) ? storedHash : false;
+ }
+
+ function makePageVisible() {
+ document.body.className = document.body.className + '
jsl10n-visible';
+ }
+
+ if ( wmTest.userLangs[ 0 ] === 'en' ) {
+ makePageVisible();
+ return;
+ }
+
+ storedTranslationHash = isValidHash();
+ storedTranslations = ( storedTranslationHash ) ? safelyParseJSON(
mw.storage.get( 'storedTranslations' ) ) || {} : {};
+
+ /**
+ * Saves translation to localstorage
+ * @param {String} lang language code that acts as the key to the
translation.
+ * @param {Object} translation translation data.
+ *
+ * @return {undefined}
+ */
+ function saveTranslation( lang, translation ) {
+ var storedTranslations = safelyParseJSON( mw.storage.get(
'storedTranslations' ) ) || {};
+
+ storedTranslations[ lang ] = translation;
+ mw.storage.set( 'storedTranslations', JSON.stringify(
storedTranslations ) );
+ }
+
+ /**
+ * Takes an object and a string 'foo.bar' and returns object.foo.bar if
exists.
+ * @param {Object} obj The object to traverse.
+ * @param {String} path A string representing the dot notation of the
object.
+ *
+ * @return {Object}
+ */
+ function getPropFromPath( obj, path ) {
+
+ path = path.split( '.' );
+
+ var index = 0,
+ length = path.length;
+
+ while ( obj && index < length ) {
+ obj = obj[ path[ index++ ] ];
+ }
+ return ( index && index === length ) ? obj : undefined;
+
+ }
+
+ /**
+ * Takes the translation data object and replaces corresponding DOM
element textContent with translation values.
+ *
+ * @param {Object} l10nInfo Object containing translation data.
+ */
+ function replacel10nText( l10nInfo ) {
+ var domEls = document.querySelectorAll( '.jsl10n' );
+
+ for ( var i = 0; i < domEls.length; i++ ) {
+
+ var domEl = domEls[ i ],
+ textValue = getPropFromPath( l10nInfo,
domEl.getAttribute( 'data-jsl10n' ) );
+
+ if ( typeof textValue === 'string' && textValue.length
> 0 ) {
+ domEl.textContent = textValue;
+ }
+ }
+ makePageVisible();
+ }
+
+ /**
+ * if the primary language is not english, and the translation is
missing or outdated,
+ * fetch the latest one.
+ */
+ if ( !storedTranslations[ primaryLang ] ) {
+
+ var l10nReq = new XMLHttpRequest();
+
+ l10nReq.open( 'GET', encodeURI(
'portal/wikipedia.org/assets/l10n/' + primaryLang + '-' + translationsHash +
'.json' ), true );
+
+ l10nReq.onreadystatechange = function () {
+ if ( l10nReq.readyState === 4 ) {
+ if ( l10nReq.status === 200 ) {
+
+ var l10nInfo = safelyParseJSON(
this.responseText );
+
+ if ( l10nInfo ) {
+ saveTranslation( primaryLang,
l10nInfo );
+ replacel10nText( l10nInfo );
+ }
+
+ } else {
+ makePageVisible();
+ return;
+ }
+ }
+ };
+
+ l10nReq.send();
+ } else {
+ var l10nInfo = storedTranslations[ primaryLang ];
+ replacel10nText( l10nInfo );
+ }
+
+}( wmTest, translationsHash, mw ) );
diff --git a/dev/wikipedia.org/assets/postcss/_localized_topten.css
b/dev/wikipedia.org/assets/postcss/_localized_topten.css
index 3a3517f..a4e6239 100644
--- a/dev/wikipedia.org/assets/postcss/_localized_topten.css
+++ b/dev/wikipedia.org/assets/postcss/_localized_topten.css
@@ -6,9 +6,14 @@
* https://www.mediawiki.org/wiki/Wikipedia.org_Portal_A/B_testing
*/
+.js-enabled .jsl10n,
.js-enabled .central-featured,
.js-enabled #js-localized-slogan {
visibility: hidden;
+}
+
+.jsl10n-visible .jsl10n {
+ visibility: visible;
}
.search-container {
@@ -37,12 +42,14 @@
}
@media all and ( max-width: 480px ) {
- .central-textlogo img {
- margin-top: 8px;
- }
- .localized-slogan {
- margin-left: 18px;
- }
+ .central-textlogo img {
+ margin-top: 8px;
+ }
+
+ .localized-slogan {
+ margin-left: 18px;
+ }
+
.search-container {
margin-top: 0;
}
diff --git a/dev/wikipedia.org/controller.js b/dev/wikipedia.org/controller.js
index caef083..6c9ca24 100644
--- a/dev/wikipedia.org/controller.js
+++ b/dev/wikipedia.org/controller.js
@@ -7,7 +7,7 @@
otherProjects = require( './other-projects.json' ),
otherLanguages = require( './other-languages.json' ),
crypto = require( 'crypto' ),
- exec = require( 'child_process' ).exec,
+ exec = require( 'child_process' ).execSync,
top100000List,
top100000Dropdown,
Controller,
@@ -91,14 +91,8 @@
cachebuster = createTranslationsChecksum( siteStats );
if ( fs.existsSync( translationPath ) ) {
-
- exec( 'find ' + translationPath + ' -name *.json -delete', function (
error ) {
- if ( error ) {
- throw error;
- } else {
- createTranslationFiles( translationPath, siteStats,
cachebuster );
- }
- } );
+ exec( 'find ' + translationPath + ' -mindepth 1 -delete' );
+ createTranslationFiles( translationPath, siteStats, cachebuster );
} else {
fs.mkdirSync( translationPath );
createTranslationFiles( translationPath, siteStats, cachebuster );
diff --git a/dev/wikipedia.org/index.handlebars
b/dev/wikipedia.org/index.handlebars
index 7ec537a..f831cd9 100644
--- a/dev/wikipedia.org/index.handlebars
+++ b/dev/wikipedia.org/index.handlebars
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html lang="mul" dir="ltr" class="no-js">
+<html lang="mul" class="no-js">
<head>
<meta charset="utf-8">
<title>Wikipedia</title>
@@ -78,6 +78,7 @@
<script src="assets/js/topten-localized.js"></script>
<script src="assets/js/wm-portal.js"></script>
<script src="assets/js/lang-dropdown.js"></script>
+<script src="assets/js/page-localized.js"></script>
<!-- endbuild -->
<![endif]>
diff --git a/dev/wikipedia.org/other-projects.json
b/dev/wikipedia.org/other-projects.json
index 2213742..2dabb1f 100644
--- a/dev/wikipedia.org/other-projects.json
+++ b/dev/wikipedia.org/other-projects.json
@@ -3,72 +3,84 @@
"name": "Commons",
"url": "//commons.wikimedia.org/",
"tagline": "Freely usable photos & more",
- "img1": "Commons-logo_sister"
+ "img1": "Commons-logo_sister",
+ "key": "commons"
},
{
"name": "Wikivoyage",
"url": "//www.wikivoyage.org/",
"tagline": "Free travel guide",
- "img1": "Wikivoyage-logo_sister"
+ "img1": "Wikivoyage-logo_sister",
+ "key": "wikivoyage"
},
{
"name": "Wiktionary",
"url": "//www.wiktionary.org/",
"tagline": "Free dictionary",
- "img1": "Wiktionary-logo_sister"
+ "img1": "Wiktionary-logo_sister",
+ "key": "wiktionary"
},
{
"name": "Wikibooks",
"url": "//www.wikibooks.org/",
"tagline": "Free textbooks",
- "img1": "Wikibooks-logo_sister"
+ "img1": "Wikibooks-logo_sister",
+ "key": "wikibooks"
},
{
"name": "Wikinews",
"url": "//www.wikinews.org/",
"tagline": "Free news source",
- "img1": "Wikinews-logo_sister"
+ "img1": "Wikinews-logo_sister",
+ "key": "wikinews"
},
{
"name": "Wikidata",
"url": "//www.wikidata.org/",
"tagline": "Free knowledge base",
- "img1": "Wikidata-logo_sister"
+ "img1": "Wikidata-logo_sister",
+ "key": "wikidata"
},
{
"name": "Wikiversity",
"url": "//www.wikiversity.org/",
"tagline": "Free course materials",
- "img1": "Wikiversity-logo_sister"
+ "img1": "Wikiversity-logo_sister",
+ "key": "wikiversity"
},
{
"name": "Wikiquote",
"url": "//www.wikiquote.org/",
"tagline": "Free quote compendium",
- "img1": "Wikiquote-logo_sister"
+ "img1": "Wikiquote-logo_sister",
+ "key": "wikiquote"
},
{
"name": "MediaWiki",
"url": "//www.mediawiki.org/",
"tagline": "Free & open wiki application",
- "img1": "MediaWiki-logo_sister"
+ "img1": "MediaWiki-logo_sister",
+ "key": "mediawiki"
},
{
"name": "Wikisource",
"url": "//www.wikisource.org/",
"tagline": "Free library",
- "img1": "Wikisource-logo_sister"
+ "img1": "Wikisource-logo_sister",
+ "key": "wikisource"
},
{
"name": "Wikispecies",
"url": "//species.wikimedia.org/",
"tagline": "Free species directory",
- "img1": "Wikispecies-logo_sister"
+ "img1": "Wikispecies-logo_sister",
+ "key": "wikispecies"
},
{
"name": "Meta-Wiki",
"url": "//meta.wikimedia.org/",
"tagline": "Community coordination & documentation",
- "img1": "Meta-logo_sister"
+ "img1": "Meta-logo_sister",
+ "key": "metawiki"
}
]
diff --git a/dev/wikipedia.org/templates/footer.handlebars
b/dev/wikipedia.org/templates/footer.handlebars
index c5fa356..22bb419 100644
--- a/dev/wikipedia.org/templates/footer.handlebars
+++ b/dev/wikipedia.org/templates/footer.handlebars
@@ -4,7 +4,7 @@
<div class="footer-sidebar-content">
<div class="footer-sidebar-icon sprite-project-logos
sprite-project-logos-Wikimedia-logo-grey">
</div>
- <div class="footer-sidebar-text">
+ <div class="footer-sidebar-text jsl10n"
data-jsl10n='footer-description'>
Wikipedia is hosted by the <a
href="//wikimediafoundation.org/">Wikimedia Foundation</a>, a non-profit
organization that also hosts a range of other projects.
</div>
</div>
diff --git a/dev/wikipedia.org/templates/language-list-button.handlebars
b/dev/wikipedia.org/templates/language-list-button.handlebars
index 998c6b4..fd71910 100644
--- a/dev/wikipedia.org/templates/language-list-button.handlebars
+++ b/dev/wikipedia.org/templates/language-list-button.handlebars
@@ -2,8 +2,8 @@
<button id='js-lang-list-button' class="lang-list-button">
<i class="sprite-icons sprite-icons-translate-icon"></i>
- <span class="lang-list-button-text"> Read Wikipedia in your language
</span>
- <i class="sprite-icons sprite-icons-arrow-down-blue"></i>
+ <span class="lang-list-button-text jsl10n"
data-jsl10n="language-button-text"> Read Wikipedia in your language </span>
+ <i class="sprite-icons sprite-icons-arrow-down-bluee"></i>
</button>
</div>
diff --git a/dev/wikipedia.org/templates/other-projects.item.handlebars
b/dev/wikipedia.org/templates/other-projects.item.handlebars
index 9b68435..ee2a366 100644
--- a/dev/wikipedia.org/templates/other-projects.item.handlebars
+++ b/dev/wikipedia.org/templates/other-projects.item.handlebars
@@ -6,8 +6,8 @@
</div>
<div class="other-project-text">
- <span class="other-project-title">{{name}}</span>
- <span class="other-project-tagline">{{tagline}}</span>
+ <span class="other-project-title jsl10n"
data-jsl10n="{{key}}.name">{{name}}</span>
+ <span class="other-project-tagline jsl10n"
data-jsl10n="{{key}}.slogan">{{tagline}}</span>
</div>
</a>
-</div>
\ No newline at end of file
+</div>
--
To view, visit https://gerrit.wikimedia.org/r/319563
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ia3886baa8b5f81c119207d1e4720c12b44106320
Gerrit-PatchSet: 8
Gerrit-Project: wikimedia/portals
Gerrit-Branch: master
Gerrit-Owner: Jdrewniak <[email protected]>
Gerrit-Reviewer: JGirault <[email protected]>
Gerrit-Reviewer: Jdrewniak <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
