Skip to content

Commit

Permalink
Revise the UI translations in French and Spanish and add or repair dy…
Browse files Browse the repository at this point in the history 
…namic features #1071  (#1078)
  • Loading branch information
@Jaifroid
Jaifroid authored Aug 31, 2023
1 parent ed95be5 commit 085fbf1
Show file tree
Hide file tree
Showing 9 changed files with 314 additions and 268 deletions.
79 changes: 45 additions & 34 deletions i18n/en.json
View file

Large diffs are not rendered by default.

85 changes: 48 additions & 37 deletions i18n/es.json
View file

Large diffs are not rendered by default.

141 changes: 76 additions & 65 deletions i18n/fr.json
View file

Large diffs are not rendered by default.

8 changes: 5 additions & 3 deletions scripts/Check-OfflineFilesList.ps1
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,10 @@ $RepoRoot = $PSScriptRoot -replace '[\\/]scripts'
# List all files recursively in the /www directory, and process the FullName to remove the path up to 'www'
# and to replace any (back)slashes with forward slashes
$ListOfFSFiles = ls -r $RepoRoot/www/*.* | % { $_.FullName -replace '^.+?[\\/](?=www)', '' -replace '[\\/]', '/' }
# Select lines matching "www/.+" in service-worker.js and process the output to replace whitespace, quotation marks and commas
$ListOfSWFiles = (sls '[''"]www/.+[''"]' $RepoRoot/service-worker.js) | % { $_.Line -replace '\s*[''"],?', '' }
# Add the files in the i18n directory
$ListOfFSFiles += ls -r $RepoRoot/i18n/*.* | % { $_.FullName -replace '^.+?[\\/](?=i18n)', '' -replace '[\\/]', '/' }
# Select lines matching "www/.+" or "i18n/.+" in service-worker.js and process the output to replace whitespace, quotation marks and commas
$ListOfSWFiles = (sls '[''"](?:www|i18n)/.+[''"]' $RepoRoot/service-worker.js) | % { $_.Line -replace '\s*[''"],?', '' }
# Flag to track any missing files
$MissingFiles = $false
Write-Output ""
Expand All @@ -51,6 +53,6 @@ if ($MissingFiles) {
Write-Host "`n** Please add the missing file(s) listed above to service-worker.js **`n" -ForegroundColor Red
exit 1
} else {
Write-Host "All non-exempt files in /www are listed in $SWFile`n" -ForegroundColor Green
Write-Host "All non-exempt files in /www and /i18n are listed in $SWFile`n" -ForegroundColor Green
exit 0
}
3 changes: 2 additions & 1 deletion service-worker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
/* global chrome */

/**
* App version number - ENSURE IT MATCHES VALUE IN app.js
* App version number - ENSURE IT MATCHES VALUE IN init.js
* DEV: Changing this will cause the browser to recognize that the Service Worker has changed, and it will
* download and install a new copy; we have to hard code this here because it is needed before any other file
* is cached in APP_CACHE
Expand Down Expand Up @@ -106,6 +106,7 @@ const precacheFiles = [
'service-worker.js',
'i18n/en.json',
'i18n/es.json',
'i18n/fr.json',
'www/css/app.css',
'www/css/kiwixJS_invert.css',
'www/css/kiwixJS_mwInvert.css',
Expand Down
189 changes: 81 additions & 108 deletions www/index.html
View file

Large diffs are not rendered by default.

44 changes: 31 additions & 13 deletions www/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,19 @@ function getDefaultLanguageAndTranslateApp () {
console.log('User-selected language is: ' + params.overrideBrowserLanguage);
}
// Use the override language if set, or else use the browser default
translateUI.translateApp(params.overrideBrowserLanguage || defaultBrowserLanguage.base);
var languageCode = params.overrideBrowserLanguage || defaultBrowserLanguage.base;
translateUI.translateApp(languageCode)
.catch(function (err) {
if (languageCode !== 'en') {
var message = '<p>We cannot load the translation strings for language code <code>' + languageCode + '</code>';
if (/^file:\/\//.test(window.location.href)) {
message += ' because you are accessing Kiwix from the file system. Try using a web server instead';
}
message += '.</p>';
if (err) message += '<p>The error message is: ' + err + '</p>';
uiUtil.systemAlert(message);
}
});
}

// Add a listener for the language selection dropdown which will change the language of the app
Expand Down Expand Up @@ -519,14 +531,18 @@ document.getElementById('titleSearchRange').addEventListener('change', function
document.getElementById('titleSearchRange').addEventListener('input', function (e) {
titleSearchRangeVal.textContent = e.target.value;
});
document.getElementById('modesLink').addEventListener('click', function () {
document.getElementById('btnAbout').click();
// We have to use a timeout or the scroll is cancelled by the slide transtion animation
// @TODO This is a workaround. The regression should be fixed as it affects the Active content warning
// links as well.
setTimeout(function () {
document.getElementById('modes').scrollIntoView();
}, 600);
// Add event listeners to the About links in Configuration, so that they jump to the linked sections
document.querySelectorAll('.aboutLinks').forEach(function (link) {
link.addEventListener('click', function () {
var anchor = link.getAttribute('href');
document.getElementById('btnAbout').click();
// We have to use a timeout or the scroll is cancelled by the slide transtion animation
// @TODO This is a workaround. The regression should be fixed as it affects the Active content warning
// links as well.
setTimeout(function () {
document.querySelector(anchor).scrollIntoView();
}, 600);
});
});
// Do update checks 7s after startup
setTimeout(function () {
Expand Down Expand Up @@ -730,6 +746,8 @@ function refreshCacheStatus () {
} else {
document.documentElement.style.background = /^dark/.test(document.documentElement.dataset.theme) ? '#300000' : 'mistyrose';
}
// Hide or show the jqueryCompatibility info
document.getElementById('jqueryCompatibility').style.display = params.contentInjectionMode === 'jquery' ? '' : 'none';
// Get cache attributes, then update the UI with the obtained data
getAssetsCacheAttributes().then(function (cache) {
if (cache.type === 'cacheAPI' && ASSETS_CACHE !== cache.name) {
Expand Down Expand Up @@ -1557,7 +1575,7 @@ function readArticle (dirEntry) {
var iframeArticleContent = document.getElementById('articleContent');
iframeArticleContent.onload = function () {
// The content is fully loaded by the browser : we can hide the spinner
document.getElementById('cachingAssets').textContent = 'Caching assets...';
document.getElementById('cachingAssets').textContent = translateUI.t('spinner-caching-assets') || 'Caching assets...';
document.getElementById('cachingAssets').style.display = 'none';
document.getElementById('searchingArticles').style.display = 'none';
// Set the requested appTheme
Expand Down Expand Up @@ -1995,7 +2013,7 @@ function displayArticleContentInIframe (dirEntry, htmlArticle) {
// until all CSS content is available [kiwix-js #381]
function renderIfCSSFulfilled (title) {
if (cssFulfilled >= cssCount) {
document.getElementById('cachingAssets').textContent = 'Caching assets...';
document.getElementById('cachingAssets').textContent = translateUI.t('spinner-caching-assets') || 'Caching assets...';
document.getElementById('cachingAssets').style.display = 'none';
document.getElementById('searchingArticles').style.display = 'none';
document.getElementById('articleContent').style.display = '';
Expand Down Expand Up @@ -2071,9 +2089,9 @@ function displayArticleContentInIframe (dirEntry, htmlArticle) {
function updateCacheStatus (title) {
if (params.assetsCache && /\.css$|\.js$/i.test(title)) {
var cacheBlock = document.getElementById('cachingAssets');
cacheBlock.style.display = 'block';
cacheBlock.style.display = '';
title = title.replace(/[^/]+\//g, '').substring(0, 18);
cacheBlock.textContent = 'Caching ' + title + '...';
cacheBlock.textContent = (translateUI.t('spinner-caching') || 'Caching') + ' ' + title + '...';
}
}

Expand Down
16 changes: 14 additions & 2 deletions www/js/lib/translateUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,19 +38,30 @@ var fallback = true;
// DEV: Uncomment line below to force placeholder (useful when writing new translations)
// fallback = false;

var tried = false;
// Load the translation strings as a JSON object for a given language code
function loadTranslationStrings (langCode) {
return util.getJSONObject('../i18n/' + langCode + '.json').then(function (translations) {
currentLanguage = translations[langCode]['translation'];
tried = false;
// i18next.init({
// lng: langCode, // if you're using a language detector, do not define the lng option
// debug: true,
// resources: translations
// });
}).catch(function (err) {
console.error('Error loading translation strings for language code ' + langCode, err);
console.warn('Falling back to English');
return loadTranslationStrings('en');
if (!tried) {
console.warn('Falling back to English');
tried = true;
return loadTranslationStrings('en');
} else {
console.error('Failed to load English translation strings');
console.warn('Falling back to no translation');
currentLanguage = {};
tried = false;
throw err;
}
});
}

Expand Down Expand Up @@ -84,6 +95,7 @@ function translateApp (languageCode) {
translateString('home-prefix-placeholder') || 'Search...');
}).catch(function (err) {
console.error('Error translating the UI', err);
throw err;
});
}

Expand Down
17 changes: 12 additions & 5 deletions www/js/lib/uiUtil.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,8 @@ function systemAlert (message, label, isConfirm, declineConfirmLabel, approveCon
document.getElementById('approveConfirm').textContent = approveConfirmLabel;
document.getElementById('declineConfirm').textContent = declineConfirmLabel;
document.getElementById('closeMessage').textContent = closeMessageLabel;
document.getElementById('modalLabel').textContent = label;
// Some titles need &nbsp; or other HTML, so we have to use innerHTML
document.getElementById('modalLabel').innerHTML = label;
// Using innerHTML to set the message to allow HTML formatting
document.getElementById('modalText').innerHTML = message;
// Display buttons acc to the type of alert
Expand Down Expand Up @@ -313,7 +314,13 @@ function displayActiveContentWarning () {
thisLabel.style.borderStyle = '';
});
});
var anchor = this.getAttribute('href');
document.getElementById('btnConfigure').click();
// We have to use a timeout or the scroll is cancelled by the slide transtion animation
// @TODO This is a workaround. The regression should be fixed as it affects the aboutLinks as well
setTimeout(function () {
document.querySelector(anchor).scrollIntoView();
}, 600);
});
});
}
Expand Down Expand Up @@ -357,7 +364,7 @@ function displayFileDownloadAlert (title, download, contentType, content) {
a.textContent = filename;
var alertMessage = document.getElementById('alertMessage');
// innerHTML required as it has HTML tags
alertMessage.innerHTML = '<strong>Download</strong> If the download does not start, please tap the following link: ';
alertMessage.innerHTML = (translateUI.t('alert-download-message') || '<strong>Download</strong> If the download does not begin, please tap the following link:') + ' ';
// We have to add the anchor to a UI element for Firefox to be able to click it programmatically: see https://stackoverflow.com/a/27280611/9727685
alertMessage.appendChild(a);
try {
Expand Down Expand Up @@ -395,8 +402,8 @@ function checkUpdateStatus (appstate) {
// If we get here, then there is a cache key that does not match our version, i.e. a PWA-in-waiting
appstate.pwaUpdateNeeded = true;
updateAlert.style.display = 'block';
document.getElementById('persistentMessage').textContent = 'Version ' + key.replace(cachePrefix, '') +
' is ready to install. (Re-launch app to install.)';
document.getElementById('persistentMessage').textContent = (translateUI.t('alert-update-version') || 'Version') + ' ' + key.replace(cachePrefix, '') + ' ' +
(translateUI.t('alert-update-available') || 'is ready to install. (Re-launch app to install.)');
});
});
}
Expand Down Expand Up @@ -436,7 +443,7 @@ function spinnerDisplay (show, message) {
spinnerMessage.textContent = message;
spinnerMessage.style.display = 'block';
} else {
spinnerMessage.textContent = 'Caching assets...';
spinnerMessage.textContent = translateUI.t('spinner-caching-assets') || 'Caching assets...';
spinnerMessage.style.display = 'none';
}
}
Expand Down

0 comments on commit 085fbf1

Please sign in to comment.