使用 Ctrl+L 立即翻譯所選文本。支持所有語言並自動檢測所選語言，將其翻譯為瀏覽器的默認語言。簡單、快速、高效。
目前為
// ==UserScript==
// @name Ultimate Text Selection Translator – Instantly Translate Any Selected Text
// @name:fr Ultimate Text Selection Translator – Traduisez instantanément n'importe quel texte sélectionné
// @name:es Ultimate Text Selection Translator – Traduce instantáneamente cualquier texto seleccionado
// @name:de Ultimate Text Selection Translator – Übersetzen Sie jeden ausgewählten Text sofort
// @name:ru Ultimate Text Selection Translator – Мгновенно переводите любой выделенный текст
// @name:zh-CN Ultimate Text Selection Translator – 立即翻译任何选定的文本
// @name:zh-TW Ultimate Text Selection Translator – 立即翻譯任何選定的文本
// @name:ja Ultimate Text Selection Translator – 選択したテキストを即座に翻訳
// @name:pt Ultimate Text Selection Translator – Traduza instantaneamente qualquer texto selecionado
// @name:it Ultimate Text Selection Translator – Traduci istantaneamente qualsiasi testo selezionato
// @name:ar Ultimate Text Selection Translator – ترجمة فورية لأي نص محدد
// @name:be Ultimate Text Selection Translator – Імгненна перакладайце любы выбраны тэкст
// @name:bg Ultimate Text Selection Translator – Незабавен превод на всеки избран текст
// @name:cs Ultimate Text Selection Translator – Okamžitě přeložte jakýkoli vybraný text
// @name:da Ultimate Text Selection Translator – Oversæt øjeblikkeligt enhver valgt tekst
// @name:el Ultimate Text Selection Translator – Μεταφράστε άμεσα οποιοδήποτε επιλεγμένο κείμενο
// @name:eo Ultimate Text Selection Translator – Tuj Traduku Iun Elektitan Tekston
// @name:fi Ultimate Text Selection Translator – Käännä välittömästi kaikki valitut tekstit
// @name:he Ultimate Text Selection Translator – תרגם באופן מיידי כל טקסט שנבחר
// @name:hr Ultimate Text Selection Translator – Trenutačno prevedite bilo koji odabrani tekst
// @name:hu Ultimate Text Selection Translator – Azonnal lefordíthatja a kiválasztott szöveget
// @name:id Ultimate Text Selection Translator – Terjemahkan Teks yang Dipilih Secara Instan
// @name:ka Ultimate Text Selection Translator – მყისიერად თარგმნეთ ნებისმიერი არჩეული ტექსტი
// @name:ko Ultimate Text Selection Translator – 선택한 텍스트를 즉시 번역하세요
// @name:mr Ultimate Text Selection Translator – कोणताही निवडलेला मजकूर त्वरित अनुवादित करा
// @name:nl Ultimate Text Selection Translator – Vertaal onmiddellijk elke geselecteerde tekst
// @name:nb Ultimate Text Selection Translator – Oversett alle valgt tekst umiddelbart
// @name:pl Ultimate Text Selection Translator – Natychmiast przetłumacz dowolny zaznaczony tekst
// @name:pt-BR Ultimate Text Selection Translator – Traduza instantaneamente qualquer texto selecionado
// @name:ro Ultimate Text Selection Translator – Traduceți instantaneu orice text selectat
// @name:sk Ultimate Text Selection Translator – Okamžite preložte akýkoľvek vybraný text
// @name:sr Ultimate Text Selection Translator – Одмах преведите било који одабрани текст
// @name:sv Ultimate Text Selection Translator – Översätt direkt valfri text
// @name:th Ultimate Text Selection Translator – แปลข้อความที่เลือกทันที
// @name:tr Ultimate Text Selection Translator – Seçilen Metni Anında Çevir
// @name:ug Ultimate Text Selection Translator – تاللانغان تېكىستنى دەرھال تەرجىمە قىلىڭ
// @name:uk Ultimate Text Selection Translator – Миттєво перекладіть будь-який виділений текст
// @name:vi Ultimate Text Selection Translator – Dịch ngay lập tức mọi văn bản đã chọn
// @name:fr-CA Ultimate Text Selection Translator – Traduisez instantanément n'importe quel texte sélectionné
// @name:ckb Ultimate Text Selection Translator – Her Nivîsarek Hilbijartî tavilê Wergerîne
// @name:es-419 Ultimate Text Selection Translator – Traduce instantáneamente cualquier texto seleccionado
// @description Translate selected text instantly using Ctrl+L. Supports all languages and automatically detects the selected language, translating it into your browser's default language. Simple, fast, and efficient.
// @description:fr Traduisez instantanément le texte sélectionné à l’aide de Ctrl+L. Prend en charge toutes les langues et détecte automatiquement la langue sélectionnée, la traduisant dans la langue par défaut de votre navigateur. Simple, rapide et efficace.
// @description:es Traduce el texto seleccionado al instante usando Ctrl+L. Admite todos los idiomas y detecta automáticamente el idioma seleccionado, traduciéndolo al idioma predeterminado de su navegador. Sencillo, rápido y eficiente.
// @description:de Übersetzen Sie den ausgewählten Text sofort mit Strg+L. Unterstützt alle Sprachen, erkennt die ausgewählte Sprache automatisch und übersetzt sie in die Standardsprache Ihres Browsers. Einfach, schnell und effizient.
// @description:ru Мгновенно переводите выделенный текст с помощью Ctrl+L. Поддерживает все языки и автоматически определяет выбранный язык, переводя его на язык вашего браузера по умолчанию. Просто, быстро и эффективно.
// @description:zh-CN 使用 Ctrl+L 立即翻译所选文本。支持所有语言并自动检测所选语言，将其翻译为浏览器的默认语言。简单、快速、高效。
// @description:zh-TW 使用 Ctrl+L 立即翻譯所選文本。支持所有語言並自動檢測所選語言，將其翻譯為瀏覽器的默認語言。簡單、快速、高效。
// @description:ja Ctrl+L を使用して、選択したテキストを即座に翻訳します。すべての言語をサポートし、選択した言語を自動的に検出し、ブラウザのデフォルト言語に翻訳します。シンプル、高速、効率的です。
// @description:pt Traduza o texto selecionado instantaneamente usando Ctrl+L. Suporta todos os idiomas e detecta automaticamente o idioma selecionado, traduzindo-o para o idioma padrão do seu navegador. Simples, rápido e eficiente.
// @description:it Traduci istantaneamente il testo selezionato utilizzando Ctrl+L. Supporta tutte le lingue e rileva automaticamente la lingua selezionata, traducendola nella lingua predefinita del tuo browser. Semplice, veloce ed efficiente.
// @description:ar ترجمة النص المحدد على الفور باستخدام Ctrl+L. يدعم جميع اللغات ويكتشف اللغة المحددة تلقائيًا، ويترجمها إلى اللغة الافتراضية للمتصفح الخاص بك. بسيطة وسريعة وفعالة.
// @description:be Перакладзіце вылучаны тэкст імгненна, выкарыстоўваючы Ctrl+L. Падтрымлівае ўсе мовы і аўтаматычна вызначае выбраную мову, перакладаючы яе на мову вашага браўзера па змаўчанні. Проста, хутка і эфектыўна.
// @description:bg Превеждайте незабавно избрания текст с помощта на Ctrl+L. Поддържа всички езици и автоматично открива избрания език, превеждайки го на езика по подразбиране на вашия браузър. Просто, бързо и ефективно.
// @description:cs Okamžitě přeložte vybraný text pomocí Ctrl+L. Podporuje všechny jazyky a automaticky detekuje vybraný jazyk a překládá jej do výchozího jazyka vašeho prohlížeče. Jednoduché, rychlé a efektivní.
// @description:da Oversæt valgt tekst øjeblikkeligt ved hjælp af Ctrl+L. Understøtter alle sprog og registrerer automatisk det valgte sprog og oversætter det til din browsers standardsprog. Enkel, hurtig og effektiv.
// @description:el Μεταφράστε το επιλεγμένο κείμενο άμεσα χρησιμοποιώντας Ctrl+L. Υποστηρίζει όλες τις γλώσσες και εντοπίζει αυτόματα την επιλεγμένη γλώσσα, μεταφράζοντάς την στην προεπιλεγμένη γλώσσα του προγράμματος περιήγησής σας. Απλό, γρήγορο και αποτελεσματικό.
// @description:eo Traduku elektitan tekston tuj uzante Ctrl+L. Subtenas ĉiujn lingvojn kaj aŭtomate detektas la elektitan lingvon, tradukante ĝin al la defaŭlta lingvo de via retumilo. Simpla, rapida kaj efika.
// @description:fi Käännä valittu teksti välittömästi painamalla Ctrl+L. Tukee kaikkia kieliä ja tunnistaa automaattisesti valitun kielen kääntäen sen selaimesi oletuskielelle. Yksinkertaista, nopeaa ja tehokasta.
// @description:he תרגם טקסט נבחר באופן מיידי באמצעות Ctrl+L. תומך בכל השפות ומזהה אוטומטית את השפה הנבחרת, ומתרגם אותה לשפת ברירת המחדל של הדפדפן שלך. פשוט, מהיר ויעיל.
// @description:hr Trenutačno prevedite odabrani tekst pomoću Ctrl+L. Podržava sve jezike i automatski otkriva odabrani jezik, prevodeći ga na zadani jezik vašeg preglednika. Jednostavno, brzo i učinkovito.
// @description:hu A kijelölt szöveget azonnal lefordíthatja a Ctrl+L billentyűkombinációval. Támogatja az összes nyelvet, és automatikusan felismeri a kiválasztott nyelvet, lefordítva azt a böngésző alapértelmezett nyelvére. Egyszerű, gyors és hatékony.
// @description:id Terjemahkan teks yang dipilih secara instan menggunakan Ctrl+L. Mendukung semua bahasa dan secara otomatis mendeteksi bahasa yang dipilih, menerjemahkannya ke bahasa default browser Anda. Sederhana, cepat, dan efisien.
// @description:ka შერჩეული ტექსტის თარგმნა მყისიერად Ctrl+L-ის გამოყენებით. მხარს უჭერს ყველა ენას და ავტომატურად ამოიცნობს არჩეულ ენას, თარგმნის მას თქვენი ბრაუზერის ნაგულისხმევ ენაზე. მარტივი, სწრაფი და ეფექტური.
// @description:ko Ctrl+L을 사용하여 선택한 텍스트를 즉시 번역하세요. 모든 언어를 지원하고 선택한 언어를 자동으로 감지하여 브라우저의 기본 언어로 번역합니다. 간단하고 빠르며 효율적입니다.
// @description:mr Ctrl+L वापरून निवडलेल्या मजकुराचे झटपट भाषांतर करा. सर्व भाषांना सपोर्ट करते आणि निवडलेली भाषा आपोआप ओळखते, ती तुमच्या ब्राउझरच्या डीफॉल्ट भाषेत अनुवादित करते. साधे, जलद आणि कार्यक्षम.
// @description:nl Vertaal geselecteerde tekst onmiddellijk met Ctrl+L. Ondersteunt alle talen en detecteert automatisch de geselecteerde taal en vertaalt deze naar de standaardtaal van uw browser. Eenvoudig, snel en efficiënt.
// @description:nb Oversett valgt tekst umiddelbart ved å bruke Ctrl+L. Støtter alle språk og oppdager automatisk det valgte språket, og oversetter det til nettleserens standardspråk. Enkelt, raskt og effektivt.
// @description:pl Przetłumacz zaznaczony tekst natychmiast, używając Ctrl+L. Obsługuje wszystkie języki i automatycznie wykrywa wybrany język, tłumacząc go na domyślny język Twojej przeglądarki. Prosto, szybko i skutecznie.
// @description:pt-BR Traduza o texto selecionado instantaneamente usando Ctrl+L. Suporta todos os idiomas e detecta automaticamente o idioma selecionado, traduzindo-o para o idioma padrão do seu navegador. Simples, rápido e eficiente.
// @description:ro Traduceți textul selectat instantaneu folosind Ctrl+L. Acceptă toate limbile și detectează automat limba selectată, traducând-o în limba implicită a browserului. Simplu, rapid și eficient.
// @description:sk Preložte vybraný text okamžite pomocou Ctrl+L. Podporuje všetky jazyky a automaticky rozpozná vybraný jazyk a preloží ho do predvoleného jazyka prehliadača. Jednoduché, rýchle a efektívne.
// @description:sr Одмах преведите изабрани текст користећи Цтрл+Л. Подржава све језике и аутоматски детектује изабрани језик, преводећи га на подразумевани језик вашег претраживача. Једноставно, брзо и ефикасно.
// @description:sv Översätt markerad text direkt med Ctrl+L. Stöder alla språk och upptäcker automatiskt det valda språket och översätter det till din webbläsares standardspråk. Enkelt, snabbt och effektivt.
// @description:th แปลข้อความที่เลือกทันทีโดยใช้ Ctrl+L รองรับทุกภาษาและตรวจจับภาษาที่เลือกโดยอัตโนมัติ โดยแปลเป็นภาษาเริ่มต้นของเบราว์เซอร์ของคุณ ง่าย รวดเร็ว และมีประสิทธิภาพ
// @description:tr Seçilen metni Ctrl+L tuşlarını kullanarak anında çevirin. Tüm dilleri destekler ve seçilen dili otomatik olarak algılayarak tarayıcınızın varsayılan diline çevirir. Basit, hızlı ve verimli.
// @description:ug تاللانغان تېكىستنى دەرھال CTRL + L ئارقىلىق تەرجىمە قىلىڭ. بارلىق تىللارنى قوللايدۇ ھەمدە تاللانغان تىلنى ئاپتوماتىك چەكلىنىدۇ, ئۇنى توركۆرگۈنىڭ سۈكۈتتىكى ھالەتتە تەرجىمە قىلىدۇ. ئاددىي, تېز ۋە ئۈنۈملۈك.
// @description:uk Миттєво перекладіть виділений текст за допомогою Ctrl+L. Підтримує всі мови та автоматично визначає вибрану мову, перекладаючи її на мову вашого браузера за умовчанням. Просто, швидко та ефективно.
// @description:vi Dịch văn bản đã chọn ngay lập tức bằng Ctrl+L. Hỗ trợ tất cả các ngôn ngữ và tự động phát hiện ngôn ngữ đã chọn, dịch ngôn ngữ đó sang ngôn ngữ mặc định của trình duyệt của bạn. Đơn giản, nhanh chóng và hiệu quả.
// @description:fr-CA Traduisez instantanément le texte sélectionné à l’aide de Ctrl+L. Prend en charge toutes les langues et détecte automatiquement la langue sélectionnée, la traduisant dans la langue par défaut de votre navigateur. Simple, rapide et efficace.
// @description:ckb Nivîsara hilbijartî yekser bi karanîna Ctrl+L wergerîne. Hemî zimanan piştgirî dike û bixweber zimanê hilbijartî tespît dike, wî werdigerîne zimanê xwerû yê geroka we. Hêsan, zû û bikêrhatî.
// @description:es-419 Traduce instantáneamente el texto seleccionado usando Ctrl+L. Admite todos los idiomas y detecta automáticamente el idioma seleccionado, traduciéndolo al idioma predeterminado de tu navegador. Simple, rápido y eficiente.
// @namespace https://github.com/DREwX-code
// @author Dℝ∃wX
// @copyright 2025 Dℝ∃wX
// @license Apache-2.0
// @require https://update.greasyfork.org/scripts/556911/1702254/UTST%20Translation%20Library.js
// @grant GM_xmlhttpRequest
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_addStyle
// @connect translate.googleapis.com
// @match *://*/*
// @run-at document-start
// @version 1.3.6
// @icon https://raw.githubusercontent.com/DREwX-code/Ultimate-Text-Selection-Translator/refs/heads/main/assets/icons/Icon_Translate_Script.png
// @tag translation
// @tag text selection
// @tag translate
// @tag google translate
// @tag shortcut
// @tag productivity
// @tag accessibility
// @tag language
// @tag multilingual
// ==/UserScript==
/*
Copyright 2025 Dℝ∃wX
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
(function () {
'use strict';
function bootstrap() {
GM_addStyle(`
#closeButton:hover svg {
stroke: #ff0000 !important;
transform: scale(1.1);
transition: all 0.2s ease;
}
.utst-scroll {
scrollbar-width: thin !important;
scrollbar-color: #4A90E2 rgba(20,20,20,0.4) !important;
}
.utst-scroll::-webkit-scrollbar {
width: 6px !important;
}
.utst-scroll::-webkit-scrollbar-track {
background: rgba(20,20,20,0.4) !important;
}
.utst-scroll::-webkit-scrollbar-thumb {
background: #4A90E2 !important;
border-radius: 4px !important;
}
.utst-scroll::-webkit-scrollbar-thumb:hover {
background: #6AB0FF !important;
}
`);
const translationLibrary = (typeof window !== 'undefined' ? window.TraductionOutilTranslator : null)
|| (typeof globalThis !== 'undefined' ? globalThis.TraductionOutilTranslator : null);
if (!translationLibrary || !translationLibrary.languageNames) {
console.error('[Ultimate Translator] Missing TraductionOutilTranslator language library.');
return;
}
const browserLang = navigator.language.split('-')[0];
const languageNames = translationLibrary.languageNames;
const englishLangNames = languageNames.en || {};
const supportedUiLanguages = Array.isArray(translationLibrary.supportedUiLanguages) && translationLibrary.supportedUiLanguages.length
? translationLibrary.supportedUiLanguages
: Object.keys(languageNames);
const storedToolLangPref = GM_getValue('defaultToolLang', 'browser');
const normalizedToolLangPref = (storedToolLangPref === 'browser' || supportedUiLanguages.includes(storedToolLangPref))
? storedToolLangPref
: 'browser';
if (normalizedToolLangPref !== storedToolLangPref) {
GM_setValue('defaultToolLang', normalizedToolLangPref);
}
function resolveUiLang(preference) {
if (preference === 'browser') {
return languageNames[browserLang] ? browserLang : 'en';
}
return languageNames[preference] ? preference : (languageNames[browserLang] ? browserLang : 'en');
}
let toolLanguagePreference = normalizedToolLangPref;
const uiLang = resolveUiLang(toolLanguagePreference);
let langNames = languageNames[uiLang];
let errors = langNames.errors;
let tooltips = langNames.tooltips;
let dragHandleLabel = langNames.dragHandleLabel || languageNames.en.dragHandleLabel;
let overlayLabels = langNames.overlay || languageNames.en.overlay;
let settingsTitle = langNames.settingsTitle || languageNames.en.settingsTitle;
let settingsDefaultLabel = langNames.settingsDefaultLabel || languageNames.en.settingsDefaultLabel;
let settingsToolLabel = langNames.settingsToolLabel || languageNames.en.settingsToolLabel;
const languages = [
{ code: 'auto', name: englishLangNames.auto || langNames.auto },
{ code: 'en', name: englishLangNames.en || 'English' },
{ code: 'fr', name: englishLangNames.fr || 'French' },
{ code: 'es', name: englishLangNames.es || 'Spanish' },
{ code: 'de', name: englishLangNames.de || 'German' },
{ code: 'it', name: englishLangNames.it || 'Italian' },
{ code: 'pt', name: englishLangNames.pt || 'Portuguese' },
{ code: 'ru', name: englishLangNames.ru || 'Russian' },
{ code: 'zh-CN', name: englishLangNames['zh-CN'] || 'Chinese (Simplified)' },
{ code: 'ja', name: englishLangNames.ja || 'Japanese' },
{ code: 'navigator', name: englishLangNames.navigator || 'Browser language' }
];
const googleTranslateLanguages = {
'af': 'Afrikaans',
'sq': 'Albanian',
'am': 'Amharic',
'ar': 'Arabic',
'hy': 'Armenian',
'az': 'Azerbaijani',
'eu': 'Basque',
'be': 'Belarusian',
'bn': 'Bengali',
'bs': 'Bosnian',
'bg': 'Bulgarian',
'ca': 'Catalan',
'ceb': 'Cebuano',
'ny': 'Chichewa',
'zh-CN': 'Chinese (Simplified)',
'zh-TW': 'Chinese (Traditional)',
'co': 'Corsican',
'hr': 'Croatian',
'cs': 'Czech',
'da': 'Danish',
'nl': 'Dutch',
'en': 'English',
'eo': 'Esperanto',
'et': 'Estonian',
'tl': 'Filipino',
'fi': 'Finnish',
'fr': 'French',
'gl': 'Galician',
'ka': 'Georgian',
'de': 'German',
'el': 'Greek',
'gu': 'Gujarati',
'ht': 'Haitian Creole',
'ha': 'Hausa',
'haw': 'Hawaiian',
'he': 'Hebrew',
'hi': 'Hindi',
'hmn': 'Hmong',
'hu': 'Hungarian',
'is': 'Icelandic',
'ig': 'Igbo',
'id': 'Indonesian',
'ga': 'Irish',
'it': 'Italian',
'ja': 'Japanese',
'jw': 'Javanese',
'kn': 'Kannada',
'kk': 'Kazakh',
'km': 'Khmer',
'rw': 'Kinyarwanda',
'ko': 'Korean',
'ku': 'Kurdish',
'ky': 'Kyrgyz',
'lo': 'Lao',
'la': 'Latin',
'lv': 'Latvian',
'lt': 'Lithuanian',
'lb': 'Luxembourgish',
'mk': 'Macedonian',
'mg': 'Malagasy',
'ms': 'Malay',
'ml': 'Malayalam',
'mt': 'Maltese',
'mi': 'Maori',
'mr': 'Marathi',
'mn': 'Mongolian',
'my': 'Myanmar',
'ne': 'Nepali',
'no': 'Norwegian',
'or': 'Odia',
'ps': 'Pashto',
'fa': 'Persian',
'pl': 'Polish',
'pt': 'Portuguese',
'pa': 'Punjabi',
'ro': 'Romanian',
'ru': 'Russian',
'sm': 'Samoan',
'gd': 'Scots Gaelic',
'sr': 'Serbian',
'st': 'Sesotho',
'sn': 'Shona',
'sd': 'Sindhi',
'si': 'Sinhala',
'sk': 'Slovak',
'sl': 'Slovenian',
'so': 'Somali',
'es': 'Spanish',
'su': 'Sundanese',
'sw': 'Swahili',
'sv': 'Swedish',
'tg': 'Tajik',
'ta': 'Tamil',
'tt': 'Tatar',
'te': 'Telugu',
'th': 'Thai',
'tr': 'Turkish',
'tk': 'Turkmen',
'uk': 'Ukrainian',
'ur': 'Urdu',
'ug': 'Uyghur',
'uz': 'Uzbek',
'vi': 'Vietnamese',
'cy': 'Welsh',
'xh': 'Xhosa',
'yi': 'Yiddish',
'yo': 'Yoruba',
'zu': 'Zulu'
};
const defaultTargetLang = languages.some(lang => lang.code === browserLang && lang.code !== 'auto') ? browserLang : 'en';
const commonFavoriteTargetLangs = ['en', 'fr', 'es', 'de', 'it', 'pt', 'ru', 'zh-CN', 'ja'];
const favoriteTargetLangs = ['navigator'];
if (googleTranslateLanguages[browserLang] && !favoriteTargetLangs.includes(browserLang)) {
favoriteTargetLangs.push(browserLang);
}
commonFavoriteTargetLangs.forEach(code => {
if (!favoriteTargetLangs.includes(code)) {
favoriteTargetLangs.push(code);
}
});
const sortedGoogleLanguageEntries = Object.entries(googleTranslateLanguages)
.sort(([, nameA], [, nameB]) => nameA.localeCompare(nameB));
function getLanguageLabel(code) {
if (code === 'navigator') {
return englishLangNames.navigator || 'Browser language';
}
return englishLangNames[code] || googleTranslateLanguages[code] || code;
}
function buildTargetLanguageOptions(includeNavigator = false) {
const favorites = favoriteTargetLangs
.filter(code => code === 'navigator' ? includeNavigator : googleTranslateLanguages[code])
.map(code => {
const optionValue = code === 'navigator' ? 'navigator' : code;
return `<option value="${optionValue}">${getLanguageLabel(optionValue)}</option>`;
})
.join('');
const favoriteCodes = new Set(favoriteTargetLangs.filter(code => code !== 'navigator'));
const others = sortedGoogleLanguageEntries
.filter(([code]) => !favoriteCodes.has(code))
.map(([code, name]) => `<option value="${code}">${name}</option>`)
.join('');
const parts = [];
if (favorites) {
parts.push(favorites);
}
if (others) {
if (favorites) {
parts.push('<option value="" disabled>--------------------</option>');
}
parts.push(others);
}
return parts.join('');
}
function getToolLanguageLabel(code) {
if (code === 'browser') {
return englishLangNames.navigator || 'Browser language';
}
return englishLangNames[code] || languageNames.en[code] || code;
}
function buildToolLanguageOptionsHtml() {
return ['browser', ...supportedUiLanguages]
.map(code => `<option value="${code}">${getToolLanguageLabel(code)}</option>`)
.join('');
}
function buildSourceLanguageOptionsHtml() {
const entries = Object.entries(googleTranslateLanguages)
.sort(([, a], [, b]) => a.localeCompare(b));
const options = entries
.map(([code, name]) => `<option value="${code}">${name}</option>`)
.join('');
return `<option value="auto">${langNames.auto}</option>${options}`;
}
const toolLanguageOptionsHtml = buildToolLanguageOptionsHtml();
let sourceLanguageOptionsHtml = buildSourceLanguageOptionsHtml();
const targetLanguageOptionsHtml = buildTargetLanguageOptions(true);
const translationBox = document.createElement('div');
translationBox.style.cssText = `
position: absolute;
background: linear-gradient(135deg, #1e1e2f 0%, #2a2a4a 100%);
color: #ffffff;
padding: 20px;
padding-top: 40px;
border-radius: 12px;
z-index: 9999;
display: none;
min-width: 370px;
max-width: 420px;
min-height: 200px;
max-height: 260px;
overflow-y: auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.3s ease;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
`;
document.body.appendChild(translationBox);
translationBox.innerHTML = `
<div id="dragHandle" style="position:absolute; top:0; left:0; right:0; height:28px; background: linear-gradient(120deg, #3a3a3f, #4b4b52); border-radius: 12px 12px 0 0; cursor: move; display:flex; align-items:center; gap:8px; padding:0 12px; color:#e5e5e5; font-size:12px; font-weight:600; letter-spacing:0.3px; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08); user-select: none;">
<div style="width:44px; height:4px; border-radius:4px; background:rgba(255,255,255,0.4);"></div>
<span style="opacity:0.9;">${dragHandleLabel}</span>
</div>
<div style="
position: absolute;
top: 6px;
right: 8px;
background: none;
border: none;
color: #ff4d4d;
font-size: 18px;
font-weight: bold;
cursor: pointer;
line-height: 1;">
<div id="closeButton" style="cursor: pointer;" title="Fermer">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ff4d4d" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</div>
</div>
<div id="settingsHeader" style="position: absolute; top: 34px; left: 8px; display:none; align-items: center; gap: 8px; cursor: default;">
<div id="backButton" style="cursor: pointer;" title="Back">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</div>
<span id="settingsHeaderTitle" style="color:#fff; font-size:14px; font-weight:600; letter-spacing:0.3px;">${settingsTitle}</span>
</div>
<div id="translatorPanel">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;user-select: none;">
<select id="sourceLang" style="background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; padding: 6px; font-size: 13px; cursor: pointer;">
<option value="auto">Detect language</option>
${Object.entries(googleTranslateLanguages).map(([code, name]) =>
`<option value="${code}">${name}</option>`).join('')}
</select>
<span style="color: #a0a0c0; margin: 0 8px;">→</span>
<select id="targetLang"
style="background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; padding: 6px; font-size: 13px; cursor: pointer;">
${targetLanguageOptionsHtml}
</select>
</div>
<div id="translationText"
style="background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 8px; min-height: 110px; height: 110px; max-height: 110px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; overflow-y: auto;">
</div>
<div style="display: flex; justify-content: flex-end; margin-top: 12px; gap: 10px; margin-bottom: 12px;">
<div id="speakButton" style="position: relative; cursor: pointer;">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M11 5L6 9H2v6h4l5 4V5z"></path>
<path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
</svg>
<div id="speakTooltip"
style="display: none; position: absolute; bottom: 100%; right: 0; background: rgba(0, 0, 0, 0.8); color: #fff; padding: 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 10000;">
<div id="speakTranslated" style="padding: 6px 10px; cursor: pointer; border-radius:3px; transition: background 0.15s ease;">${tooltips.listenTranslated}</div>
<div id="speakOriginal" style="padding: 6px 10px; cursor: pointer; border-radius:3px; transition: background 0.15s ease;">${tooltips.listenOriginal}</div>
</div>
</div>
<div id="copyButton" style="cursor: pointer;" title="Copy translation">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
</div>
<div id="fullscreenToggle" style="cursor: pointer;" title="${overlayLabels.open}">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 3 21 3 21 9"></polyline>
<polyline points="9 21 3 21 3 15"></polyline>
<line x1="21" y1="3" x2="14" y2="10"></line>
<line x1="3" y1="21" x2="10" y2="14"></line>
</svg>
</div>
<div id="settingsButton" style="cursor: pointer;" title="Settings">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 15.5C13.933 15.5 15.5 13.933 15.5 12C15.5 10.067 13.933 8.5 12 8.5C10.067 8.5 8.5 10.067 8.5 12C8.5 13.933 10.067 15.5 12 15.5Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
<path
d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
</svg>
</div>
</div>
</div>
<div id="settingsPanel" style="display:none; padding:31px 20px 20px; min-height:176px; max-height:200px; min-width:370px; max-width:370px;">
<label for="defaultTranslateLang" style="color:#fff; font-size:14px; display:block; margin-bottom:4px;">
${settingsDefaultLabel}
</label>
<select id="defaultTranslateLang" style="display:block; width:100%; max-width:260px; margin:0 auto; padding:5px 6px; border-radius:6px; background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.2); font-size:13px; cursor: pointer;">
${targetLanguageOptionsHtml}
</select>
<label for="toolLanguage" style="color:#fff; font-size:14px; display:block; margin:12px 0 4px;">
${settingsToolLabel}
</label>
<select id="toolLanguage" style="display:block; width:100%; max-width:260px; margin:0 auto; padding:5px 6px; border-radius:6px; background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.2); font-size:13px; cursor: pointer;">
${toolLanguageOptionsHtml}
</select>
</div>
`;
translationBox.classList.add("utst-scroll");
const fullscreenOverlay = document.createElement('div');
fullscreenOverlay.id = 'fullscreenOverlay';
fullscreenOverlay.style.cssText = `
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(8px);
z-index: 10001;
padding: 18px;
`;
fullscreenOverlay.innerHTML = `
<div id="fullscreenPanel" style="width: min(1100px, 95vw); min-height: 40vh; background: linear-gradient(135deg, #1e1e2f 0%, #2a2a4a 100%); color: #fff; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 12px 32px rgba(0,0,0,0.45); padding: 22px 22px 16px; position: relative;">
<div style="display:flex; align-items:center; justify-content: space-between; margin-bottom: 14px;">
<div id="fullscreenTitle" style="font-size:16px; font-weight:700; letter-spacing:0.4px; color:#e7e9ff; cursor: default;">${overlayLabels.title}</div>
<div id="fullscreenClose" style="cursor:pointer; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:8px; transition: background 0.15s ease;">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</div>
</div>
<div style="display:flex; gap: 16px; min-height: 280px; flex-wrap: wrap;">
<div style="flex:1; min-width:280px; display:flex; flex-direction:column; gap:8px;">
<div style="display:flex; align-items:center; justify-content:space-between; gap:8px;">
<label id="fullscreenSourceLabel" style="color:#cfd3ff; font-size:13px; font-weight:600; letter-spacing:0.2px;">${overlayLabels.source}</label>
<div id="fullscreenSourcePicker" style="position:relative;">
<button id="fullscreenSourceLangTrigger" style="display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:#fff; cursor:pointer; font-size:12px;">
<span id="fullscreenSourceLangCurrent">${langNames.auto}</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div id="fullscreenSourceLangPanel" style="display:none; position:absolute; top:110%; right:0; width:280px; max-height:260px; background: rgba(30,30,47,0.98); border:1px solid rgba(255,255,255,0.12); box-shadow:0 10px 24px rgba(0,0,0,0.35); border-radius:10px; padding:8px; z-index:10002;">
<input id="fullscreenSourceLangSearch" placeholder="${langNames.navigator}" style="width:100%; max-width:100%; box-sizing:border-box; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.08); color:#fff; font-size:13px; outline:none;" />
<div id="fullscreenSourceLangGrid" style="display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:6px; max-height:190px; overflow-y:auto; padding-top:8px;"></div>
</div>
</div>
</div>
<select id="fullscreenSourceLang" style="display:none;">${sourceLanguageOptionsHtml}</select>
<textarea id="fullscreenSource" style="flex:1; min-height:200px; padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color:#fff; font-size:14px; line-height:1.5; resize: vertical; outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);"></textarea>
<div style="display:flex; gap:8px; margin-top:6px;">
<div id="fullscreenSourceCopy" style="width:38px; height:38px; border-radius:9px; border:1px solid rgba(255,255,255,0.16); display:flex; align-items:center; justify-content:center; cursor:pointer; background: rgba(255,255,255,0.06);">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
</div>
<div id="fullscreenSourceSpeak" style="width:38px; height:38px; border-radius:9px; border:1px solid rgba(255,255,255,0.16); display:flex; align-items:center; justify-content:center; cursor:pointer; background: rgba(255,255,255,0.06);">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M11 5L6 9H2v6h4l5 4V5z"></path>
<path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
</svg>
</div>
</div>
</div>
<div id="fullscreenSwap" title="Swap" style="align-self:center; width:40px; height:40px; border-radius:10px; background: rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: background 0.15s ease, transform 0.2s ease;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="17 1 21 5 17 9"></polyline>
<line x1="3" y1="5" x2="21" y2="5"></line>
<polyline points="7 23 3 19 7 15"></polyline>
<line x1="21" y1="19" x2="3" y2="19"></line>
</svg>
</div>
<div style="flex:1; min-width:280px; display:flex; flex-direction:column; gap:8px;">
<div style="display:flex; align-items:center; justify-content:space-between; gap:8px;">
<label id="fullscreenTargetLabel" style="color:#cfd3ff; font-size:13px; font-weight:600; letter-spacing:0.2px;">${overlayLabels.target}</label>
<div id="fullscreenTargetPicker" style="position:relative;">
<button id="fullscreenTargetLangTrigger" style="display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:#fff; cursor:pointer; font-size:12px;">
<span id="fullscreenTargetLangCurrent">${getLanguageLabel(defaultTargetLang)}</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div id="fullscreenTargetLangPanel" style="display:none; position:absolute; top:110%; right:0; width:280px; max-height:260px; background: rgba(30,30,47,0.98); border:1px solid rgba(255,255,255,0.12); box-shadow:0 10px 24px rgba(0,0,0,0.35); border-radius:10px; padding:8px; z-index:10002;">
<input id="fullscreenTargetLangSearch" placeholder="${langNames.navigator}" style="width:100%; max-width:100%; box-sizing:border-box; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.08); color:#fff; font-size:13px; outline:none;" />
<div id="fullscreenTargetLangGrid" style="display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:6px; max-height:190px; overflow-y:auto; padding-top:8px;"></div>
</div>
</div>
</div>
<select id="fullscreenTargetLang" style="display:none;">${targetLanguageOptionsHtml}</select>
<textarea id="fullscreenTarget" style="flex:1; min-height:200px; padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color:#fff; font-size:14px; line-height:1.5; resize: vertical; outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);"></textarea>
<div style="display:flex; gap:8px; margin-top:6px;">
<div id="fullscreenTargetCopy" style="width:38px; height:38px; border-radius:9px; border:1px solid rgba(255,255,255,0.16); display:flex; align-items:center; justify-content:center; cursor:pointer; background: rgba(255,255,255,0.06);">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
</div>
<div id="fullscreenTargetSpeak" style="width:38px; height:38px; border-radius:9px; border:1px solid rgba(255,255,255,0.16); display:flex; align-items:center; justify-content:center; cursor:pointer; background: rgba(255,255,255,0.06);">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M11 5L6 9H2v6h4l5 4V5z"></path>
<path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
`;
fullscreenOverlay.classList.add("utst-scroll");
document.body.appendChild(fullscreenOverlay);
const BOX_W = 420;
const BOX_H = 260;
const MARGIN = 10;
function placeBoxAtSelection() {
const sel = window.getSelection();
if (!sel || !sel.rangeCount) return;
const rect = sel.getRangeAt(0).getBoundingClientRect();
const scrollX = window.scrollX || document.documentElement.scrollLeft || 0;
const scrollY = window.scrollY || document.documentElement.scrollTop || 0;
let left = rect.left + scrollX;
const topBelow = rect.bottom + scrollY + MARGIN;
const topAbove = rect.top + scrollY - BOX_H - MARGIN;
const vpLeft = scrollX + MARGIN;
const vpRight = scrollX + window.innerWidth - MARGIN;
const vpBottom = scrollY + window.innerHeight - MARGIN;
if (left + BOX_W > vpRight) left = vpRight - BOX_W;
if (left < vpLeft) left = vpLeft;
let top;
if (topBelow + BOX_H <= vpBottom) {
top = topBelow;
} else {
top = Math.max(topAbove, scrollY + MARGIN);
}
translationBox.style.left = `${left}px`;
translationBox.style.top = `${top}px`;
}
const dragHandle = translationBox.querySelector('#dragHandle');
let isDragging = false;
let dragStartMouseX = 0;
let dragStartMouseY = 0;
let dragStartLeft = 0;
let dragStartTop = 0;
let previousUserSelect = '';
function clampBoxPosition(left, top) {
const width = translationBox.offsetWidth || BOX_W;
const height = translationBox.offsetHeight || BOX_H;
const scrollX = window.scrollX || document.documentElement.scrollLeft || 0;
const scrollY = window.scrollY || document.documentElement.scrollTop || 0;
const minLeft = scrollX + MARGIN;
const maxLeft = scrollX + window.innerWidth - width - MARGIN;
const minTop = scrollY + MARGIN;
const maxTop = scrollY + window.innerHeight - height - MARGIN;
return {
left: Math.min(Math.max(minLeft, left), maxLeft),
top: Math.min(Math.max(minTop, top), maxTop)
};
}
window.addEventListener('resize', () => {
if (translationBox.style.display === 'block') placeBoxAtSelection();
});
if (dragHandle) {
dragHandle.addEventListener('mousedown', (e) => {
isDragging = true;
const rect = translationBox.getBoundingClientRect();
const scrollX = window.scrollX || document.documentElement.scrollLeft || 0;
const scrollY = window.scrollY || document.documentElement.scrollTop || 0;
dragStartMouseX = e.clientX;
dragStartMouseY = e.clientY;
dragStartLeft = parseFloat(translationBox.style.left) || rect.left + scrollX;
dragStartTop = parseFloat(translationBox.style.top) || rect.top + scrollY;
previousUserSelect = document.body.style.userSelect;
document.body.style.userSelect = 'none';
});
}
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const newLeft = dragStartLeft + (e.clientX - dragStartMouseX);
const newTop = dragStartTop + (e.clientY - dragStartMouseY);
const { left, top } = clampBoxPosition(newLeft, newTop);
translationBox.style.left = `${left}px`;
translationBox.style.top = `${top}px`;
});
document.addEventListener('mouseup', () => {
if (!isDragging) return;
isDragging = false;
document.body.style.userSelect = previousUserSelect;
});
const sourceLangSelect = translationBox.querySelector('#sourceLang');
const targetLangSelect = translationBox.querySelector('#targetLang');
const translationText = translationBox.querySelector('#translationText');
const speakButton = translationBox.querySelector('#speakButton');
const speakTooltip = translationBox.querySelector('#speakTooltip');
const speakTranslated = translationBox.querySelector('#speakTranslated');
const speakOriginal = translationBox.querySelector('#speakOriginal');
const copyButton = translationBox.querySelector('#copyButton');
const settingsButton = translationBox.querySelector('#settingsButton');
const backButton = translationBox.querySelector('#backButton');
const defaultTranslateLangSelect = translationBox.querySelector('#defaultTranslateLang');
const toolLanguageSelect = translationBox.querySelector('#toolLanguage');
const defaultTranslateLangLabel = translationBox.querySelector('label[for="defaultTranslateLang"]');
const toolLanguageLabel = translationBox.querySelector('label[for="toolLanguage"]');
const sourceAutoOption = sourceLangSelect.querySelector('option[value="auto"]');
const settingsHeader = translationBox.querySelector('#settingsHeader');
const settingsHeaderTitle = translationBox.querySelector('#settingsHeaderTitle');
const fullscreenTitleEl = fullscreenOverlay.querySelector('#fullscreenTitle');
const fullscreenClose = fullscreenOverlay.querySelector('#fullscreenClose');
const fullscreenSourceLangSelect = fullscreenOverlay.querySelector('#fullscreenSourceLang');
const fullscreenTargetLangSelect = fullscreenOverlay.querySelector('#fullscreenTargetLang');
const fullscreenSourceLangCurrent = fullscreenOverlay.querySelector('#fullscreenSourceLangCurrent');
const fullscreenTargetLangCurrent = fullscreenOverlay.querySelector('#fullscreenTargetLangCurrent');
const fullscreenSourceLangSearch = fullscreenOverlay.querySelector('#fullscreenSourceLangSearch');
const fullscreenTargetLangSearch = fullscreenOverlay.querySelector('#fullscreenTargetLangSearch');
const fullscreenSourceLangGrid = fullscreenOverlay.querySelector('#fullscreenSourceLangGrid');
const fullscreenTargetLangGrid = fullscreenOverlay.querySelector('#fullscreenTargetLangGrid');
const fullscreenSourceLangPanel = fullscreenOverlay.querySelector('#fullscreenSourceLangPanel');
const fullscreenTargetLangPanel = fullscreenOverlay.querySelector('#fullscreenTargetLangPanel');
const fullscreenSourceLangTrigger = fullscreenOverlay.querySelector('#fullscreenSourceLangTrigger');
const fullscreenTargetLangTrigger = fullscreenOverlay.querySelector('#fullscreenTargetLangTrigger');
const fullscreenSourceLabel = fullscreenOverlay.querySelector('#fullscreenSourceLabel');
const fullscreenTargetLabel = fullscreenOverlay.querySelector('#fullscreenTargetLabel');
const fullscreenSwap = fullscreenOverlay.querySelector('#fullscreenSwap');
const fullscreenSource = fullscreenOverlay.querySelector('#fullscreenSource');
const fullscreenTarget = fullscreenOverlay.querySelector('#fullscreenTarget');
const fullscreenSourceCopy = fullscreenOverlay.querySelector('#fullscreenSourceCopy');
const fullscreenSourceSpeak = fullscreenOverlay.querySelector('#fullscreenSourceSpeak');
const fullscreenTargetCopy = fullscreenOverlay.querySelector('#fullscreenTargetCopy');
const fullscreenTargetSpeak = fullscreenOverlay.querySelector('#fullscreenTargetSpeak');
const fullscreenToggle = translationBox.querySelector('#fullscreenToggle');
sourceLangSelect.value = 'auto';
const inlineLanguagePanels = [];
let fullscreenSwapRotation = 0;
let currentSelectedText = '';
let currentTranslatedText = '';
let detectedSourceLang = 'auto';
let currentResolvedTargetLang = browserLang;
let fullscreenTranslateTimer = null;
function getSelectedText() {
return window.getSelection().toString().trim();
}
function ensureSelectValue(selectEl, lang) {
if (selectEl.querySelector(`option[value="${lang}"]`)) {
selectEl.value = lang;
return lang;
}
selectEl.value = defaultTargetLang;
return defaultTargetLang;
}
function getSavedTargetLanguage() {
const saved = GM_getValue('defaultTranslateLang', defaultTargetLang);
if (!targetLangSelect.querySelector(`option[value="${saved}"]`)) {
GM_setValue('defaultTranslateLang', defaultTargetLang);
return defaultTargetLang;
}
return saved;
}
function persistDefaultTargetLanguage(lang) {
const valueToPersist = defaultTranslateLangSelect.querySelector(`option[value="${lang}"]`)
? lang
: defaultTargetLang;
GM_setValue('defaultTranslateLang', valueToPersist);
return valueToPersist;
}
function applyToolLanguage(preference, { persist = false } = {}) {
const normalizedSelection = (preference === 'browser' || supportedUiLanguages.includes(preference))
? preference
: 'browser';
if (persist) {
GM_setValue('defaultToolLang', normalizedSelection);
}
const previousErrors = errors;
toolLanguagePreference = normalizedSelection;
const newUiLang = resolveUiLang(normalizedSelection);
langNames = languageNames[newUiLang];
errors = langNames.errors;
tooltips = langNames.tooltips;
dragHandleLabel = langNames.dragHandleLabel || languageNames.en.dragHandleLabel;
overlayLabels = langNames.overlay || languageNames.en.overlay;
settingsTitle = langNames.settingsTitle || languageNames.en.settingsTitle;
settingsDefaultLabel = langNames.settingsDefaultLabel || languageNames.en.settingsDefaultLabel;
settingsToolLabel = langNames.settingsToolLabel || languageNames.en.settingsToolLabel;
if (settingsHeaderTitle) settingsHeaderTitle.textContent = settingsTitle;
if (defaultTranslateLangLabel) defaultTranslateLangLabel.textContent = settingsDefaultLabel;
if (toolLanguageLabel) toolLanguageLabel.textContent = settingsToolLabel;
if (settingsButton) settingsButton.title = settingsTitle;
if (sourceAutoOption) sourceAutoOption.textContent = langNames.auto;
if (speakTranslated) speakTranslated.textContent = tooltips.listenTranslated;
if (speakOriginal) speakOriginal.textContent = tooltips.listenOriginal;
const dragLabelEl = translationBox.querySelector('#dragHandle span');
if (dragLabelEl) dragLabelEl.textContent = dragHandleLabel;
if (fullscreenTitleEl) fullscreenTitleEl.textContent = overlayLabels.title;
if (fullscreenSourceLabel) fullscreenSourceLabel.textContent = overlayLabels.source;
if (fullscreenTargetLabel) fullscreenTargetLabel.textContent = overlayLabels.target;
if (fullscreenToggle) fullscreenToggle.title = overlayLabels.open;
if (fullscreenSourceLangSelect) {
const prev = fullscreenSourceLangSelect.value || 'auto';
sourceLanguageOptionsHtml = buildSourceLanguageOptionsHtml();
fullscreenSourceLangSelect.innerHTML = sourceLanguageOptionsHtml;
fullscreenSourceLangSelect.value = fullscreenSourceLangSelect.querySelector(`option[value="${prev}"]`) ? prev : 'auto';
}
if (fullscreenTargetLangSelect) {
const prev = fullscreenTargetLangSelect.value || defaultTargetLang;
const refreshedTargetOptionsOverlay = buildTargetLanguageOptions(true);
fullscreenTargetLangSelect.innerHTML = refreshedTargetOptionsOverlay;
ensureSelectValue(fullscreenTargetLangSelect, prev);
}
if (toolLanguageSelect) {
toolLanguageSelect.innerHTML = buildToolLanguageOptionsHtml();
toolLanguageSelect.value = normalizedSelection;
}
if (translationText && previousErrors && translationText.textContent === previousErrors.noText) {
translationText.textContent = errors.noText;
}
const currentTargetValue = targetLangSelect.value;
const savedDefaultValue = GM_getValue('defaultTranslateLang', defaultTargetLang);
const refreshedTargetOptions = buildTargetLanguageOptions(true);
targetLangSelect.innerHTML = refreshedTargetOptions;
ensureSelectValue(targetLangSelect, currentTargetValue);
defaultTranslateLangSelect.innerHTML = refreshedTargetOptions;
ensureSelectValue(defaultTranslateLangSelect, savedDefaultValue);
}
const initialTargetLang = getSavedTargetLanguage();
ensureSelectValue(targetLangSelect, initialTargetLang);
ensureSelectValue(defaultTranslateLangSelect, initialTargetLang);
currentResolvedTargetLang = initialTargetLang === 'navigator' ? browserLang : initialTargetLang;
if (toolLanguageSelect) {
toolLanguageSelect.value = toolLanguagePreference;
}
defaultTranslateLangSelect.addEventListener('change', () => {
const persisted = persistDefaultTargetLanguage(defaultTranslateLangSelect.value);
ensureSelectValue(targetLangSelect, persisted);
currentResolvedTargetLang = persisted === 'navigator' ? browserLang : persisted;
handleLanguageChange();
});
if (toolLanguageSelect) {
toolLanguageSelect.addEventListener('change', () => {
const selected = toolLanguageSelect.value || 'browser';
const normalizedSelection = (selected === 'browser' || supportedUiLanguages.includes(selected)) ? selected : 'browser';
applyToolLanguage(normalizedSelection, { persist: true });
});
}
applyToolLanguage(toolLanguagePreference);
function splitSentences(text) {
const regex = /(\.\s+|\.\n|\.)/;
let parts = text.split(regex);
let sentences = [];
let currentSentence = '';
for (let i = 0; i < parts.length; i++) {
currentSentence += parts[i];
if (parts[i].match(regex) || i === parts.length - 1) {
if (currentSentence.trim()) {
sentences.push(currentSentence.trim());
}
currentSentence = '';
}
}
return sentences.length ? sentences : [text];
}
function translateSentence(text, sourceLang, targetLang, callback) {
if (!text.trim()) {
callback(text, null);
return;
}
const match = text.match(/([\s\S]*?)(?:(\.\s+|\.\n|\.)|$)/);
const textToTranslate = match ? (match[1] || text) : text;
const delimiter = match && match[2] ? match[2] : '';
function chunkBySize(s, size = 1000) {
const out = [];
for (let i = 0; i < s.length; i += size) out.push(s.slice(i, i + size));
return out;
}
let sentences = splitSentences(text).flatMap(seg =>
seg.length > 1000 ? chunkBySize(seg) : [seg]
);
GM_xmlhttpRequest({
method: 'GET',
url: `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${sourceLang}&tl=${targetLang}&dt=t&q=${encodeURIComponent(textToTranslate.trim())}`,
onload: function (response) {
try {
const data = JSON.parse(response.responseText);
let detected = sourceLang;
if (sourceLang === 'auto') {
if (data[2]) {
detected = data[2];
} else if (data[8] && data[8][0] && data[8][0][0]) {
detected = data[8][0][0];
} else {
detected = '';
}
}
const translation = (data && data[0] && data[0][0] && data[0][0][0])
? data[0][0][0] + delimiter
: '' + delimiter;
callback(translation, detected || null);
} catch (e) {
callback(errors.translation + delimiter, null);
}
},
onerror: function () {
callback(errors.connection + delimiter, null);
}
});
}
function translateText(text, sourceLang, targetLang, callback, position) {
if (!text) {
callback(errors.noText, position, null);
return;
}
if (!sourceLang || sourceLang === '') sourceLang = 'auto';
let resolvedTargetLang = targetLang;
if (resolvedTargetLang === 'navigator') {
resolvedTargetLang = browserLang;
}
if (!resolvedTargetLang || resolvedTargetLang === '') {
let fallback = getSavedTargetLanguage();
if (fallback === 'navigator') fallback = browserLang;
resolvedTargetLang = fallback || defaultTargetLang;
}
const sentences = splitSentences(text);
let translatedSentences = [];
let completed = 0;
let runDetectedLang = null;
sentences.forEach((sentence, index) => {
translateSentence(sentence, sourceLang, resolvedTargetLang, (translation, detected) => {
translatedSentences[index] = translation;
if (!runDetectedLang && detected && googleTranslateLanguages[detected]) {
runDetectedLang = detected;
}
completed++;
if (completed === sentences.length) {
if (runDetectedLang && sourceLangSelect.querySelector(`option[value="${runDetectedLang}"]`)) {
sourceLangSelect.value = runDetectedLang;
detectedSourceLang = runDetectedLang;
} else {
sourceLangSelect.value = 'auto';
detectedSourceLang = 'auto';
}
const fullTranslation = translatedSentences.join('');
callback(fullTranslation, position, resolvedTargetLang);
}
});
});
}
let currentUtterance = null;
let currentSpeakerId = null;
let speechPlaying = false;
function stopSpeaking() {
speechPlaying = false;
if (window.speechSynthesis.speaking || window.speechSynthesis.pending) {
window.speechSynthesis.cancel();
}
currentUtterance = null;
currentSpeakerId = null;
}
function speak(text, lang, speakerId = null) {
if (!text) return;
const normalizedLang = lang || browserLang;
const engineSpeaking = speechPlaying || window.speechSynthesis.speaking || window.speechSynthesis.pending || !!currentUtterance;
const sameSpeaker = speakerId && speakerId === currentSpeakerId;
if (sameSpeaker) {
stopSpeaking();
return;
}
if (engineSpeaking) {
stopSpeaking();
}
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = normalizedLang;
currentUtterance = utterance;
currentSpeakerId = speakerId;
speechPlaying = true;
utterance.onend = utterance.onerror = () => {
currentUtterance = null;
currentSpeakerId = null;
speechPlaying = false;
};
window.speechSynthesis.speak(utterance);
}
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key.toLowerCase() === 'l' && !e.altKey && !e.metaKey && !e.shiftKey) {
e.preventDefault();
sourceLangSelect.value = 'auto';
detectedSourceLang = 'auto';
const translatorPanel = document.getElementById('translatorPanel');
const settingsPanel = document.getElementById('settingsPanel');
if (translatorPanel) translatorPanel.style.display = 'block';
if (settingsPanel) settingsPanel.style.display = 'none';
if (settingsHeader) settingsHeader.style.display = 'none';
const selectedText = getSelectedText();
if (!selectedText) {
translationText.textContent = errors.noText;
translationBox.style.display = 'block';
translationBox.style.left = `${window.innerWidth / 2 - 150}px`;
translationBox.style.top = `${window.innerHeight / 2 - 50}px`;
translationBox.style.opacity = '1';
translationBox.style.transform = 'translateY(0)';
return;
}
currentSelectedText = selectedText;
const selection = window.getSelection();
let position = { x: 0, y: 0 };
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const rect = range.getBoundingClientRect();
position = {
x: rect.left + window.scrollX,
y: rect.bottom + window.scrollY
};
}
const savedTargetLang = getSavedTargetLanguage();
const targetLangForSession = ensureSelectValue(targetLangSelect, savedTargetLang);
ensureSelectValue(defaultTranslateLangSelect, savedTargetLang);
translateText(selectedText, 'auto', targetLangForSession, (translation, pos, resolvedTargetLang) => {
currentTranslatedText = translation;
translationText.textContent = translation;
currentResolvedTargetLang = resolvedTargetLang || currentResolvedTargetLang;
placeBoxAtSelection();
translationBox.style.display = 'block';
translationBox.style.opacity = '1';
translationBox.style.transform = 'translateY(0)';
}, position);
}
});
function handleLanguageChange() {
if (currentSelectedText) {
translateText(currentSelectedText, sourceLangSelect.value, targetLangSelect.value, (translation, pos, resolvedTargetLang) => {
currentTranslatedText = translation;
translationText.textContent = translation;
currentResolvedTargetLang = resolvedTargetLang || currentResolvedTargetLang;
}, { x: parseFloat(translationBox.style.left), y: parseFloat(translationBox.style.top) });
}
}
sourceLangSelect.addEventListener('change', handleLanguageChange);
targetLangSelect.addEventListener('change', () => {
ensureSelectValue(targetLangSelect, targetLangSelect.value);
handleLanguageChange();
});
speakButton.addEventListener('mouseenter', () => {
speakTooltip.style.display = 'block';
});
speakButton.addEventListener('mouseleave', () => {
speakTooltip.style.display = 'none';
});
[speakTranslated, speakOriginal].forEach(el => {
if (!el) return;
el.addEventListener('mouseenter', () => {
el.style.background = 'rgba(255,255,255,0.12)';
});
el.addEventListener('mouseleave', () => {
el.style.background = 'transparent';
});
});
speakTranslated.addEventListener('click', () => {
if (currentTranslatedText) {
const langForSpeech = currentResolvedTargetLang || (targetLangSelect.value === 'navigator' ? browserLang : targetLangSelect.value);
speak(currentTranslatedText, langForSpeech, 'panel-translated');
}
});
speakOriginal.addEventListener('click', () => {
if (currentSelectedText) {
speak(currentSelectedText, detectedSourceLang, 'panel-original');
}
});
copyButton.addEventListener('click', () => {
if (currentTranslatedText) {
navigator.clipboard.writeText(currentTranslatedText);
copyButton.querySelector('svg').style.stroke = '#00ff00';
setTimeout(() => {
copyButton.querySelector('svg').style.stroke = '#ffffff';
}, 1000);
}
});
function openFullscreenOverlay() {
fullscreenOverlay.style.display = 'flex';
fullscreenSource.value = currentSelectedText || '';
fullscreenTarget.value = currentTranslatedText || '';
if (fullscreenSourceLangSelect) {
const srcVal = sourceLangSelect ? sourceLangSelect.value : 'auto';
fullscreenSourceLangSelect.value = fullscreenSourceLangSelect.querySelector(`option[value="${srcVal}"]`) ? srcVal : 'auto';
}
if (fullscreenTargetLangSelect) {
const tgtVal = targetLangSelect ? targetLangSelect.value : defaultTargetLang;
ensureSelectValue(fullscreenTargetLangSelect, tgtVal);
}
hideLanguagePanels();
renderLanguageGrid(fullscreenSourceLangGrid, fullscreenSourceLangSearch, fullscreenSourceLangSelect, fullscreenSourceLangCurrent, fullscreenSourceLangPanel);
renderLanguageGrid(fullscreenTargetLangGrid, fullscreenTargetLangSearch, fullscreenTargetLangSelect, fullscreenTargetLangCurrent, fullscreenTargetLangPanel);
scheduleFullscreenTranslate(0);
}
function closeFullscreenOverlay() {
fullscreenOverlay.style.display = 'none';
stopSpeaking();
}
function translateInFullscreen() {
const text = fullscreenSource.value.trim();
const target = fullscreenTargetLangSelect ? fullscreenTargetLangSelect.value : (targetLangSelect ? targetLangSelect.value : defaultTargetLang);
const srcLang = fullscreenSourceLangSelect ? fullscreenSourceLangSelect.value || 'auto' : 'auto';
translateText(text, srcLang, target, (translation, pos, resolvedTargetLang) => {
fullscreenTarget.value = translation;
currentResolvedTargetLang = resolvedTargetLang || currentResolvedTargetLang;
}, { x: 0, y: 0 });
}
function scheduleFullscreenTranslate(delay = 250) {
if (fullscreenTranslateTimer) clearTimeout(fullscreenTranslateTimer);
fullscreenTranslateTimer = setTimeout(() => {
fullscreenTranslateTimer = null;
translateInFullscreen();
}, delay);
}
function hideLanguagePanels() {
if (fullscreenSourceLangPanel) fullscreenSourceLangPanel.style.display = 'none';
if (fullscreenTargetLangPanel) fullscreenTargetLangPanel.style.display = 'none';
}
function renderLanguageGrid(gridEl, searchEl, selectEl, currentLabelEl, panelEl, customOptions) {
if (!gridEl || !selectEl) return;
const query = (searchEl && searchEl.value || '').toLowerCase();
const btns = [];
const current = selectEl.value || 'auto';
const pushBtn = (code, name) => {
const active = code === current;
btns.push(`<button data-code="${code}" style="
padding:6px 8px;
text-align:left;
border-radius:8px;
border:1px solid ${active ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,0.12)'};
background:${active ? 'rgba(255,255,255,0.15)' : 'rgba(255,255,255,0.04)'};
color:#fff;
cursor:pointer;
font-size:12px;
transition:background 0.15s ease, border 0.15s ease;
">${name}</button>`);
};
if (customOptions && customOptions.length) {
customOptions.forEach(({ value, label }) => {
const code = value;
const name = label;
if (query && !name.toLowerCase().includes(query) && !code.toLowerCase().includes(query)) return;
pushBtn(code, name);
});
} else {
const entries = [['auto', langNames.auto], ...Object.entries(googleTranslateLanguages).sort(([, a], [, b]) => a.localeCompare(b))];
entries.forEach(([code, name]) => {
if (query && !name.toLowerCase().includes(query) && !code.toLowerCase().includes(query)) return;
pushBtn(code, name);
});
}
gridEl.innerHTML = btns.join('');
gridEl.querySelectorAll('button').forEach(btn => {
btn.addEventListener('click', () => {
const code = btn.getAttribute('data-code');
selectEl.value = code;
if (currentLabelEl) currentLabelEl.textContent = getLanguageLabel(code);
renderLanguageGrid(gridEl, searchEl, selectEl, currentLabelEl, panelEl);
if (panelEl) panelEl.style.display = 'none';
scheduleFullscreenTranslate(0);
});
});
if (currentLabelEl) currentLabelEl.textContent = getLanguageLabel(current);
}
if (fullscreenSourceCopy) fullscreenSourceCopy.addEventListener('click', () => {
const text = fullscreenSource.value || '';
if (!text) return;
navigator.clipboard.writeText(text);
const svg = fullscreenSourceCopy.querySelector('svg');
if (svg) {
svg.style.stroke = '#00ff99';
setTimeout(() => { svg.style.stroke = '#ffffff'; }, 900);
}
});
if (fullscreenTargetCopy) fullscreenTargetCopy.addEventListener('click', () => {
const text = fullscreenTarget.value || '';
if (!text) return;
navigator.clipboard.writeText(text);
const svg = fullscreenTargetCopy.querySelector('svg');
if (svg) {
svg.style.stroke = '#00ff99';
setTimeout(() => { svg.style.stroke = '#ffffff'; }, 900);
}
});
if (fullscreenSourceSpeak) fullscreenSourceSpeak.addEventListener('click', () => {
const text = fullscreenSource.value.trim();
if (!text) return;
const selectedSrc = fullscreenSourceLangSelect ? fullscreenSourceLangSelect.value : 'auto';
const langForSpeech = (selectedSrc && selectedSrc !== 'auto') ? selectedSrc
: (detectedSourceLang && detectedSourceLang !== 'auto') ? detectedSourceLang
: (sourceLangSelect.value && sourceLangSelect.value !== 'auto' ? sourceLangSelect.value : browserLang);
speak(text, langForSpeech, 'fs-source');
});
if (fullscreenTargetSpeak) fullscreenTargetSpeak.addEventListener('click', () => {
const text = fullscreenTarget.value.trim();
if (!text) return;
let tgtLang = fullscreenTargetLangSelect ? fullscreenTargetLangSelect.value : (targetLangSelect ? targetLangSelect.value : defaultTargetLang);
if (tgtLang === 'navigator') tgtLang = browserLang;
speak(text, tgtLang || browserLang, 'fs-target');
});
if (fullscreenSourceLangSearch) fullscreenSourceLangSearch.addEventListener('input', () => {
renderLanguageGrid(fullscreenSourceLangGrid, fullscreenSourceLangSearch, fullscreenSourceLangSelect, fullscreenSourceLangCurrent, fullscreenSourceLangPanel);
});
if (fullscreenTargetLangSearch) fullscreenTargetLangSearch.addEventListener('input', () => {
renderLanguageGrid(fullscreenTargetLangGrid, fullscreenTargetLangSearch, fullscreenTargetLangSelect, fullscreenTargetLangCurrent, fullscreenTargetLangPanel);
});
if (fullscreenSource) fullscreenSource.addEventListener('input', () => scheduleFullscreenTranslate());
if (fullscreenSourceLangSelect) fullscreenSourceLangSelect.addEventListener('change', () => scheduleFullscreenTranslate(0));
if (fullscreenTargetLangSelect) fullscreenTargetLangSelect.addEventListener('change', () => scheduleFullscreenTranslate(0));
function swapFullscreenContent() {
if (!fullscreenSource || !fullscreenTarget || !fullscreenSourceLangSelect || !fullscreenTargetLangSelect) return;
const srcText = fullscreenSource.value;
fullscreenSource.value = fullscreenTarget.value;
fullscreenTarget.value = srcText;
const srcLang = fullscreenSourceLangSelect.value || 'auto';
const tgtLang = fullscreenTargetLangSelect.value || defaultTargetLang;
fullscreenSourceLangSelect.value = tgtLang;
fullscreenTargetLangSelect.value = srcLang;
if (fullscreenSourceLangCurrent) fullscreenSourceLangCurrent.textContent = getLanguageLabel(fullscreenSourceLangSelect.value);
if (fullscreenTargetLangCurrent) fullscreenTargetLangCurrent.textContent = getLanguageLabel(fullscreenTargetLangSelect.value);
scheduleFullscreenTranslate(0);
}
if (fullscreenSwap) {
fullscreenSwap.addEventListener('click', () => {
swapFullscreenContent();
fullscreenSwapRotation += 360;
fullscreenSwap.style.transform = `rotate(${fullscreenSwapRotation}deg)`;
});
}
function togglePanel(panelEl, otherPanel) {
if (!panelEl) return;
const isOpen = panelEl.style.display === 'block';
hideLanguagePanels();
panelEl.style.display = isOpen ? 'none' : 'block';
}
if (fullscreenSourceLangTrigger) fullscreenSourceLangTrigger.addEventListener('click', (e) => {
e.stopPropagation();
togglePanel(fullscreenSourceLangPanel, fullscreenTargetLangPanel);
renderLanguageGrid(fullscreenSourceLangGrid, fullscreenSourceLangSearch, fullscreenSourceLangSelect, fullscreenSourceLangCurrent, fullscreenSourceLangPanel);
});
if (fullscreenTargetLangTrigger) fullscreenTargetLangTrigger.addEventListener('click', (e) => {
e.stopPropagation();
togglePanel(fullscreenTargetLangPanel, fullscreenSourceLangPanel);
renderLanguageGrid(fullscreenTargetLangGrid, fullscreenTargetLangSearch, fullscreenTargetLangSelect, fullscreenTargetLangCurrent, fullscreenTargetLangPanel);
});
document.addEventListener('mousedown', (e) => {
if (fullscreenSourceLangPanel && !fullscreenSourceLangPanel.contains(e.target) && fullscreenSourceLangTrigger && !fullscreenSourceLangTrigger.contains(e.target)) {
fullscreenSourceLangPanel.style.display = 'none';
}
if (fullscreenTargetLangPanel && !fullscreenTargetLangPanel.contains(e.target) && fullscreenTargetLangTrigger && !fullscreenTargetLangTrigger.contains(e.target)) {
fullscreenTargetLangPanel.style.display = 'none';
}
inlineLanguagePanels.forEach(({ panel, selectEl }) => {
if (!panel.contains(e.target) && !selectEl.contains(e.target)) {
panel.style.display = 'none';
}
});
});
function hideInlinePanels(except) {
inlineLanguagePanels.forEach(p => {
if (p.panel === except) return;
p.panel.style.display = 'none';
});
}
function positionInlinePanel(panel, selectEl) {
if (!panel || panel.style.display !== 'block' || !selectEl) return;
const rect = selectEl.getBoundingClientRect();
const scrollX = window.scrollX || document.documentElement.scrollLeft || 0;
const scrollY = window.scrollY || document.documentElement.scrollTop || 0;
const panelWidth = panel.offsetWidth || 280;
const left = Math.min(rect.left + scrollX, scrollX + window.innerWidth - panelWidth - 10);
const top = rect.bottom + scrollY + 4;
panel.style.left = `${left}px`;
panel.style.top = `${top}px`;
}
function updateInlinePanelsPosition() {
inlineLanguagePanels.forEach(({ panel, selectEl }) => {
positionInlinePanel(panel, selectEl);
});
}
function buildInlinePanel(selectEl, placeholder = langNames.navigator) {
const panel = document.createElement('div');
panel.style.cssText = `
display:none;
position: absolute;
width: 280px;
max-height: 260px;
background: rgba(30,30,47,0.98);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 10px 24px rgba(0,0,0,0.35);
border-radius: 10px;
padding: 8px;
z-index: 2147483646;
`;
panel.innerHTML = `
<input class="inlineLangSearch" placeholder="${placeholder}" style="width:100%; max-width:100%; box-sizing:border-box; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.08); color:#fff; font-size:13px; outline:none;" />
<div class="inlineLangGrid" style="display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:6px; max-height:190px; overflow-y:auto; padding-top:8px;"></div>
`;
panel.classList.add("utst-scroll");
document.body.appendChild(panel);
inlineLanguagePanels.push({ panel, selectEl });
return panel;
}
function attachInlineLanguagePanel(selectEl) {
if (!selectEl) return;
const panel = buildInlinePanel(selectEl);
const searchEl = panel.querySelector('.inlineLangSearch');
const gridEl = panel.querySelector('.inlineLangGrid');
function render() {
const opts = Array.from(selectEl.options)
.filter(o => !o.disabled)
.map(o => ({ value: o.value, label: o.textContent || o.value }));
renderLanguageGrid(gridEl, searchEl, selectEl, null, panel, opts);
gridEl.querySelectorAll('button').forEach(btn => {
btn.addEventListener('click', () => {
const code = btn.getAttribute('data-code');
selectEl.value = code;
selectEl.dispatchEvent(new Event('change', { bubbles: true }));
hideInlinePanels();
});
});
}
if (searchEl) searchEl.addEventListener('input', render);
const openInlinePanel = (e) => {
e.preventDefault();
e.stopPropagation();
const isOpen = panel.style.display === 'block';
hideInlinePanels(panel);
if (isOpen) {
panel.style.display = 'none';
return;
}
render();
panel.style.display = 'block';
positionInlinePanel(panel, selectEl);
};
selectEl.addEventListener('pointerdown', openInlinePanel, { capture: true });
selectEl.addEventListener('mousedown', openInlinePanel);
selectEl.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
openInlinePanel(e);
}
});
}
attachInlineLanguagePanel(sourceLangSelect);
attachInlineLanguagePanel(targetLangSelect);
attachInlineLanguagePanel(defaultTranslateLangSelect);
attachInlineLanguagePanel(toolLanguageSelect);
if (fullscreenToggle) fullscreenToggle.addEventListener('click', openFullscreenOverlay);
if (fullscreenClose) fullscreenClose.addEventListener('click', closeFullscreenOverlay);
const closeButton = translationBox.querySelector('#closeButton');
closeButton.addEventListener('click', () => {
translationBox.style.display = 'none';
translationBox.style.opacity = '0';
translationBox.style.transform = 'translateY(10px)';
sourceLangSelect.value = 'auto';
detectedSourceLang = 'auto';
stopSpeaking();
const translatorPanel = document.getElementById('translatorPanel');
const settingsPanel = document.getElementById('settingsPanel');
if (translatorPanel) translatorPanel.style.display = 'block';
if (settingsPanel) settingsPanel.style.display = 'none';
if (settingsHeader) settingsHeader.style.display = 'none';
});
settingsButton.addEventListener('click', () => {
const translatorPanel = document.getElementById('translatorPanel');
const settingsPanel = document.getElementById('settingsPanel');
if (translatorPanel) translatorPanel.style.display = 'none';
if (settingsPanel) settingsPanel.style.display = 'block';
if (settingsHeaderTitle) settingsHeaderTitle.textContent = settingsTitle;
if (settingsHeader) settingsHeader.style.display = 'flex';
});
backButton.addEventListener('click', () => {
const translatorPanel = document.getElementById('translatorPanel');
const settingsPanel = document.getElementById('settingsPanel');
if (translatorPanel) translatorPanel.style.display = 'block';
if (settingsPanel) settingsPanel.style.display = 'none';
if (settingsHeader) settingsHeader.style.display = 'none';
});
document.addEventListener('mousedown', (e) => {
const clickInInlinePanel = inlineLanguagePanels.some(({ panel, selectEl }) =>
panel.contains(e.target) || selectEl.contains(e.target)
);
const clickInFullscreenLangPanel =
(fullscreenSourceLangPanel && fullscreenSourceLangPanel.contains(e.target)) ||
(fullscreenTargetLangPanel && fullscreenTargetLangPanel.contains(e.target)) ||
(fullscreenSourceLangTrigger && fullscreenSourceLangTrigger.contains(e.target)) ||
(fullscreenTargetLangTrigger && fullscreenTargetLangTrigger.contains(e.target));
const clickInFullscreenOverlay = fullscreenOverlay && fullscreenOverlay.contains(e.target);
if (clickInInlinePanel || clickInFullscreenLangPanel || clickInFullscreenOverlay) return;
if (!translationBox.contains(e.target)) {
translationBox.style.display = 'none';
translationBox.style.opacity = '0';
translationBox.style.transform = 'translateY(10px)';
sourceLangSelect.value = 'auto';
detectedSourceLang = 'auto';
if (settingsHeader) settingsHeader.style.display = 'none';
stopSpeaking();
}
});
function adjustBoxPosition() {
const rect = translationBox.getBoundingClientRect();
if (rect.right > window.innerWidth) {
translationBox.style.left = `${window.innerWidth - rect.width - 10}px`;
}
if (rect.bottom > window.innerHeight) {
translationBox.style.top = `${window.innerHeight - rect.height - 10}px`;
}
}
translationBox.addEventListener('transitionend', adjustBoxPosition);
window.addEventListener('scroll', updateInlinePanelsPosition, true);
window.addEventListener('resize', updateInlinePanelsPosition);
}
if (document.body) {
bootstrap();
} else {
window.addEventListener('DOMContentLoaded', bootstrap);
}
})();