diff options
Diffstat (limited to '')
-rw-r--r-- | browser/components/preferences/translations.js | 270 |
1 files changed, 270 insertions, 0 deletions
diff --git a/browser/components/preferences/translations.js b/browser/components/preferences/translations.js index c9cfe472ac..1bfa021d59 100644 --- a/browser/components/preferences/translations.js +++ b/browser/components/preferences/translations.js @@ -4,6 +4,10 @@ /* import-globals-from preferences.js */ +ChromeUtils.defineESModuleGetters(this, { + TranslationsParent: "resource://gre/actors/TranslationsParent.sys.mjs", +}); + let gTranslationsPane = { init() { document @@ -11,5 +15,271 @@ let gTranslationsPane = { .addEventListener("click", function () { gotoPref("general"); }); + + document + .getElementById("translations-settings-always-translate-list") + .addEventListener("command", this.addAlwaysLanguage); + + document + .getElementById("translations-settings-never-translate-list") + .addEventListener("command", this.addNeverLanguage); + + this.buildLanguageDropDowns(); + this.buildDownloadLanguageList(); + }, + + /** + * Populate the Drop down list with the list of supported languages + * for the user to choose languages to add to Always translate and + * Never translate settings list. + */ + async buildLanguageDropDowns() { + const { fromLanguages } = await TranslationsParent.getSupportedLanguages(); + let alwaysLangPopup = document.getElementById( + "translations-settings-always-translate-popup" + ); + let neverLangPopup = document.getElementById( + "translations-settings-never-translate-popup" + ); + + for (const { langTag, displayName } of fromLanguages) { + const alwaysLang = document.createXULElement("menuitem"); + alwaysLang.setAttribute("value", langTag); + alwaysLang.setAttribute("label", displayName); + alwaysLangPopup.appendChild(alwaysLang); + const neverLang = document.createXULElement("menuitem"); + neverLang.setAttribute("value", langTag); + neverLang.setAttribute("label", displayName); + neverLangPopup.appendChild(neverLang); + } + }, + + /** + * Show a list of languages for the user to be able to install + * and uninstall language models for local translation. + */ + async buildDownloadLanguageList() { + const supportedLanguages = await TranslationsParent.getSupportedLanguages(); + const languageList = TranslationsParent.getLanguageList(supportedLanguages); + + let installList = document.querySelector( + ".translations-settings-language-list" + ); + + // The option to download "All languages" is added in xhtml. + // Here the option to download individual languages is dynamically added + // based on the supported language list + installList + .querySelector("moz-button") + .addEventListener("click", installLanguage); + + for (const language of languageList) { + const languageElement = document.createElement("div"); + languageElement.classList.add("translations-settings-language"); + + const languageLabel = document.createElement("label"); + languageLabel.textContent = language.displayName; + languageLabel.setAttribute("value", language.langTag); + // Using the language tag suffix to create unique id for each language + languageLabel.id = "translations-settings-download-" + language.langTag; + + const installButton = document.createElement("moz-button"); + installButton.classList.add("translations-settings-download-icon"); + installButton.setAttribute("type", "ghost icon"); + installButton.addEventListener("click", installLanguage); + installButton.setAttribute("aria-label", languageLabel.id); + + languageElement.appendChild(installButton); + languageElement.appendChild(languageLabel); + installList.appendChild(languageElement); + } + }, + + /** + * Event handler when the user wants to add a language to + * Always translate settings list. + */ + addAlwaysLanguage(event) { + /* TODO: + The function addLanguage adds the HTML element. + It will be moved to the observer in the next Bug - 1881259 . + It is here just to test the UI. + For now a language can be added multiple times. + + In the next bug we will maintain a local state of preferences. + When a language is added or removed, the user event updates the preferences in the Services, + This triggers the observer which compares the preferences in the local state and the + preferences in the Services and adds or removes the language in the local state and updates the + UI to reflect the updated Preferences in the Services. + */ + addLanguage( + event, + "translations-settings-always-translate-section", + deleteAlwaysLanguage + ); + }, + + /** + * Event handler when the user wants to add a language to + * Never translate settings list. + */ + addNeverLanguage(event) { + /* TODO: + The function addLanguage adds the HTML element. + It will be moved to the observer in the next Bug - 1881259 . + It is here just to test the UI. + For now a language can be added multiple times. + + In the next bug we will maintain a local state of preferences. + When a language is added or removed, the user event updates the preferences in the Services, + This triggers the observer which compares the preferences in the local state and the + preferences in the Services and adds or removes the language in the local state and updates the + UI to reflect the updated Preferences in the Services. + */ + addLanguage( + event, + "translations-settings-never-translate-section", + deleteNeverLanguage + ); }, }; + +/** + * Function to add a language selected by the user to the list of + * Always/Never translate settings list. + */ +async function addLanguage(event, listClass, delHandler) { + const translatePrefix = + listClass === "translations-settings-never-translate-section" + ? "never" + : "always"; + let translateSection = document.getElementById(listClass); + let languageList = translateSection.querySelector( + ".translations-settings-language-list" + ); + + // While adding the first language, add the Header and language List div + if (!languageList) { + let languageCard = document.createElement("div"); + languageCard.classList.add("translations-settings-languages-card"); + translateSection.appendChild(languageCard); + + let languageHeader = document.createElement("h3"); + languageCard.appendChild(languageHeader); + languageHeader.setAttribute( + "data-l10n-id", + "translations-settings-language-header" + ); + languageHeader.classList.add("translations-settings-language-header"); + + languageList = document.createElement("div"); + languageList.classList.add("translations-settings-language-list"); + languageCard.appendChild(languageList); + } + const languageElement = document.createElement("div"); + languageElement.classList.add("translations-settings-language"); + // Add the language after the Language Header + languageList.insertBefore(languageElement, languageList.firstChild); + + const languageLabel = document.createElement("label"); + languageLabel.textContent = event.target.getAttribute("label"); + languageLabel.setAttribute("value", event.target.getAttribute("value")); + // Using the language tag suffix to create unique id for each language + // add prefix for the always/never translate + languageLabel.id = + "translations-settings-language-" + + translatePrefix + + "-" + + event.target.getAttribute("value"); + + const delButton = document.createElement("moz-button"); + delButton.classList.add("translations-settings-delete-icon"); + delButton.setAttribute("type", "ghost icon"); + delButton.addEventListener("click", delHandler); + delButton.setAttribute("aria-label", languageLabel.id); + + languageElement.appendChild(delButton); + languageElement.appendChild(languageLabel); + + /* After a language is selected the menulist button display will be set to the + selected langauge. After processing the button event the + data-l10n-id of the menulist button is restored to "Add Language" */ + const menuList = translateSection.querySelector("menulist"); + await document.l10n.translateElements([menuList]); +} + +/** + * Event Handler to delete a language selected by the user from the list of + * Always translate settings list. + */ +function deleteAlwaysLanguage(event) { + /* TODO: + The function removeLanguage removes the HTML element. + It will be moved to the observer in the next Bug - 1881259 . + It is here just to test the UI. + + In the next bug we will maintain a local state of preferences. + When a language is added or removed, the user event updates the preferences in the Services, + This triggers the observer which compares the preferences in the local state and the + preferences in the Services and adds or removes the language in the local state and updates the + UI to reflect the updated Preferences in the Services. + */ + removeLanguage(event); +} + +/** + * Event Handler to delete a language selected by the user from the list of + * Never translate settings list. + */ +function deleteNeverLanguage(event) { + /* TODO: + The function removeLanguage removes the HTML element. + It will be moved to the observer in the next Bug - 1881259 . + It is here just to test the UI. + + In the next bug we will maintain a local state of preferences. + When a language is added or removed, the user event updates the preferences in the Services, + This triggers the observer which compares the preferences in the local state and the + preferences in the Services and adds or removes the language in the local state and updates the + UI to reflect the updated Preferences in the Services. + */ + removeLanguage(event); +} + +/** + * Function to delete a language selected by the user from the list of + * Always/Never translate settings list. + */ +function removeLanguage(event) { + /* Langauge section moz-card -parent of-> Language card -parent of-> + Language heading and Language list -parent of-> + Language Element -parent of-> language button and label + */ + let languageCard = event.target.parentNode.parentNode.parentNode; + event.target.parentNode.remove(); + if (languageCard.children[1].childElementCount === 0) { + // If there is no language in the list remove the + // Language Header and language list div + languageCard.remove(); + } +} + +/** + * Event Handler to install a language model selected by the user + */ +function installLanguage(event) { + event.target.classList.remove("translations-settings-download-icon"); + event.target.classList.add("translations-settings-delete-icon"); + event.target.removeEventListener("click", installLanguage); + event.target.addEventListener("click", unInstallLanguage); +} + +/** + * Event Handler to install a language model selected by the user + */ +function unInstallLanguage(event) { + event.target.classList.remove("translations-settings-delete-icon"); + event.target.classList.add("translations-settings-download-icon"); + event.target.removeEventListener("click", unInstallLanguage); + event.target.addEventListener("click", installLanguage); +} |