diff options
Diffstat (limited to 'src/js/i18n.js')
| -rw-r--r-- | src/js/i18n.js | 346 |
1 files changed, 346 insertions, 0 deletions
diff --git a/src/js/i18n.js b/src/js/i18n.js new file mode 100644 index 0000000..6302b35 --- /dev/null +++ b/src/js/i18n.js @@ -0,0 +1,346 @@ +/******************************************************************************* + + uBlock Origin - a comprehensive, efficient content blocker + Copyright (C) 2014-present Raymond Hill + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with this program. If not, see {http://www.gnu.org/licenses/}. + + Home: https://github.com/gorhill/uBlock +*/ + +'use strict'; + +/******************************************************************************/ + +const i18n = + self.browser instanceof Object && + self.browser instanceof Element === false + ? self.browser.i18n + : self.chrome.i18n; + +/******************************************************************************/ + +function i18n$(...args) { + return i18n.getMessage(...args); +} + +/******************************************************************************/ + +const isBackgroundProcess = document.title === 'uBlock Origin Background Page'; + +if ( isBackgroundProcess !== true ) { + + // http://www.w3.org/International/questions/qa-scripts#directions + document.body.setAttribute( + 'dir', + ['ar', 'he', 'fa', 'ps', 'ur'].indexOf(i18n$('@@ui_locale')) !== -1 + ? 'rtl' + : 'ltr' + ); + + // https://github.com/gorhill/uBlock/issues/2084 + // Anything else than <a>, <b>, <code>, <em>, <i>, and <span> will + // be rendered as plain text. + // For <a>, only href attribute must be present, and it MUST starts with + // `https://`, and includes no single- or double-quotes. + // No HTML entities are allowed, there is code to handle existing HTML + // entities already present in translation files until they are all gone. + + const allowedTags = new Set([ + 'a', + 'b', + 'code', + 'em', + 'i', + 'span', + 'u', + ]); + + const expandHtmlEntities = (( ) => { + const entities = new Map([ + // TODO: Remove quote entities once no longer present in translation + // files. Other entities must stay. + [ '­', '\u00AD' ], + [ '“', '“' ], + [ '”', '”' ], + [ '‘', '‘' ], + [ '’', '’' ], + [ '<', '<' ], + [ '>', '>' ], + ]); + const decodeEntities = match => { + return entities.get(match) || match; + }; + return function(text) { + if ( text.indexOf('&') !== -1 ) { + text = text.replace(/&[a-z]+;/g, decodeEntities); + } + return text; + }; + })(); + + const safeTextToTextNode = function(text) { + return document.createTextNode(expandHtmlEntities(text)); + }; + + const sanitizeElement = function(node) { + if ( allowedTags.has(node.localName) === false ) { return null; } + node.removeAttribute('style'); + let child = node.firstElementChild; + while ( child !== null ) { + const next = child.nextElementSibling; + if ( sanitizeElement(child) === null ) { + child.remove(); + } + child = next; + } + return node; + }; + + const safeTextToDOM = function(text, parent) { + if ( text === '' ) { return; } + + // Fast path (most common). + if ( text.indexOf('<') === -1 ) { + const toInsert = safeTextToTextNode(text); + let toReplace = parent.childCount !== 0 + ? parent.firstChild + : null; + while ( toReplace !== null ) { + if ( toReplace.nodeType === 3 && toReplace.nodeValue === '_' ) { + break; + } + toReplace = toReplace.nextSibling; + } + if ( toReplace !== null ) { + parent.replaceChild(toInsert, toReplace); + } else { + parent.appendChild(toInsert); + } + return; + } + + // Slow path. + // `<p>` no longer allowed. Code below can be removed once all <p>'s are + // gone from translation files. + text = text.replace(/^<p>|<\/p>/g, '') + .replace(/<p>/g, '\n\n'); + // Parse allowed HTML tags. + const domParser = new DOMParser(); + const parsedDoc = domParser.parseFromString(text, 'text/html'); + let node = parsedDoc.body.firstChild; + while ( node !== null ) { + const next = node.nextSibling; + switch ( node.nodeType ) { + case 1: // element + if ( sanitizeElement(node) === null ) { break; } + parent.appendChild(node); + break; + case 3: // text + parent.appendChild(node); + break; + default: + break; + } + node = next; + } + }; + + i18n.safeTemplateToDOM = function(id, dict, parent) { + if ( parent === undefined ) { + parent = document.createDocumentFragment(); + } + let textin = i18n$(id); + if ( textin === '' ) { + return parent; + } + if ( textin.indexOf('{{') === -1 ) { + safeTextToDOM(textin, parent); + return parent; + } + const re = /\{\{\w+\}\}/g; + let textout = ''; + for (;;) { + let match = re.exec(textin); + if ( match === null ) { + textout += textin; + break; + } + textout += textin.slice(0, match.index); + let prop = match[0].slice(2, -2); + if ( dict.hasOwnProperty(prop) ) { + textout += dict[prop].replace(/</g, '<') + .replace(/>/g, '>'); + } else { + textout += prop; + } + textin = textin.slice(re.lastIndex); + } + safeTextToDOM(textout, parent); + return parent; + }; + + // Helper to deal with the i18n'ing of HTML files. + i18n.render = function(context) { + const docu = document; + const root = context || docu; + + for ( const elem of root.querySelectorAll('[data-i18n]') ) { + let text = i18n$(elem.getAttribute('data-i18n')); + if ( !text ) { continue; } + if ( text.indexOf('{{') === -1 ) { + safeTextToDOM(text, elem); + continue; + } + // Handle selector-based placeholders: these placeholders tell where + // existing child DOM element are to be positioned relative to the + // localized text nodes. + const parts = text.split(/(\{\{[^}]+\}\})/); + const fragment = document.createDocumentFragment(); + let textBefore = ''; + for ( let part of parts ) { + if ( part === '' ) { continue; } + if ( part.startsWith('{{') && part.endsWith('}}') ) { + // TODO: remove detection of ':' once it no longer appears + // in translation files. + const pos = part.indexOf(':'); + if ( pos !== -1 ) { + part = part.slice(0, pos) + part.slice(-2); + } + const selector = part.slice(2, -2); + let node; + // Ideally, the i18n strings explicitly refer to the + // class of the element to insert. However for now we + // will create a class from what is currently found in + // the placeholder and first try to lookup the resulting + // selector. This way we don't have to revisit all + // translations just for the sake of declaring the proper + // selector in the placeholder field. + if ( selector.charCodeAt(0) !== 0x2E /* '.' */ ) { + node = elem.querySelector(`.${selector}`); + } + if ( node instanceof Element === false ) { + node = elem.querySelector(selector); + } + if ( node instanceof Element ) { + safeTextToDOM(textBefore, fragment); + fragment.appendChild(node); + textBefore = ''; + continue; + } + } + textBefore += part; + } + if ( textBefore !== '' ) { + safeTextToDOM(textBefore, fragment); + } + elem.appendChild(fragment); + } + + for ( const elem of root.querySelectorAll('[data-i18n-title]') ) { + const text = i18n$(elem.getAttribute('data-i18n-title')); + if ( !text ) { continue; } + elem.setAttribute('title', expandHtmlEntities(text)); + } + + for ( const elem of root.querySelectorAll('[placeholder]') ) { + const text = i18n$(elem.getAttribute('placeholder')); + if ( text === '' ) { continue; } + elem.setAttribute('placeholder', text); + } + + for ( const elem of root.querySelectorAll('[data-i18n-tip]') ) { + const text = i18n$(elem.getAttribute('data-i18n-tip')) + .replace(/<br>/g, '\n') + .replace(/\n{3,}/g, '\n\n'); + elem.setAttribute('data-tip', text); + if ( elem.getAttribute('aria-label') === 'data-tip' ) { + elem.setAttribute('aria-label', text); + } + } + }; + + i18n.renderElapsedTimeToString = function(tstamp) { + let value = (Date.now() - tstamp) / 60000; + if ( value < 2 ) { + return i18n$('elapsedOneMinuteAgo'); + } + if ( value < 60 ) { + return i18n$('elapsedManyMinutesAgo').replace('{{value}}', Math.floor(value).toLocaleString()); + } + value /= 60; + if ( value < 2 ) { + return i18n$('elapsedOneHourAgo'); + } + if ( value < 24 ) { + return i18n$('elapsedManyHoursAgo').replace('{{value}}', Math.floor(value).toLocaleString()); + } + value /= 24; + if ( value < 2 ) { + return i18n$('elapsedOneDayAgo'); + } + return i18n$('elapsedManyDaysAgo').replace('{{value}}', Math.floor(value).toLocaleString()); + }; + + const unicodeFlagToImageSrc = new Map([ + [ '🇦🇱', 'al' ], [ '🇦🇷', 'ar' ], [ '🇦🇹', 'at' ], [ '🇧🇦', 'ba' ], + [ '🇧🇬', 'bg' ], [ '🇧🇷', 'br' ], [ '🇨🇦', 'ca' ], [ '🇨🇭', 'ch' ], + [ '🇨🇳', 'cn' ], [ '🇨🇴', 'co' ], [ '🇨🇾', 'cy' ], [ '🇨🇿', 'cz' ], + [ '🇩🇪', 'de' ], [ '🇩🇰', 'dk' ], [ '🇩🇿', 'dz' ], [ '🇪🇪', 'ee' ], + [ '🇪🇬', 'eg' ], [ '🇪🇸', 'es' ], [ '🇫🇮', 'fi' ], [ '🇫🇴', 'fo' ], + [ '🇫🇷', 'fr' ], [ '🇬🇷', 'gr' ], [ '🇭🇷', 'hr' ], [ '🇭🇺', 'hu' ], + [ '🇮🇩', 'id' ], [ '🇮🇱', 'il' ], [ '🇮🇳', 'in' ], [ '🇮🇷', 'ir' ], + [ '🇮🇸', 'is' ], [ '🇮🇹', 'it' ], [ '🇯🇵', 'jp' ], [ '🇰🇷', 'kr' ], + [ '🇰🇿', 'kz' ], [ '🇱🇰', 'lk' ], [ '🇱🇹', 'lt' ], [ '🇱🇻', 'lv' ], + [ '🇲🇦', 'ma' ], [ '🇲🇩', 'md' ], [ '🇲🇰', 'mk' ], [ '🇲🇽', 'mx' ], + [ '🇲🇾', 'my' ], [ '🇳🇱', 'nl' ], [ '🇳🇴', 'no' ], [ '🇳🇵', 'np' ], + [ '🇵🇱', 'pl' ], [ '🇵🇹', 'pt' ], [ '🇷🇴', 'ro' ], [ '🇷🇸', 'rs' ], + [ '🇷🇺', 'ru' ], [ '🇸🇦', 'sa' ], [ '🇸🇮', 'si' ], [ '🇸🇰', 'sk' ], + [ '🇸🇪', 'se' ], [ '🇸🇷', 'sr' ], [ '🇹🇭', 'th' ], [ '🇹🇯', 'tj' ], + [ '🇹🇼', 'tw' ], [ '🇹🇷', 'tr' ], [ '🇺🇦', 'ua' ], [ '🇺🇿', 'uz' ], + [ '🇻🇳', 'vn' ], [ '🇽🇰', 'xk' ], + ]); + const reUnicodeFlags = new RegExp( + Array.from(unicodeFlagToImageSrc).map(a => a[0]).join('|'), + 'gu' + ); + i18n.patchUnicodeFlags = function(text) { + const fragment = document.createDocumentFragment(); + let i = 0; + for (;;) { + const match = reUnicodeFlags.exec(text); + if ( match === null ) { break; } + if ( match.index > i ) { + fragment.append(text.slice(i, match.index)); + } + const img = document.createElement('img'); + const countryCode = unicodeFlagToImageSrc.get(match[0]); + img.src = `/img/flags-of-the-world/${countryCode}.png`; + img.title = countryCode; + img.classList.add('countryFlag'); + fragment.append(img, '\u200A'); + i = reUnicodeFlags.lastIndex; + } + if ( i < text.length ) { + fragment.append(text.slice(i)); + } + return fragment; + }; + + i18n.render(); +} + +/******************************************************************************/ + +export { i18n, i18n$ }; |