// ==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.icu/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.5 // @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 // @downloadURL none // ==/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'; 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 ``; }) .join(''); const favoriteCodes = new Set(favoriteTargetLangs.filter(code => code !== 'navigator')); const others = sortedGoogleLanguageEntries .filter(([code]) => !favoriteCodes.has(code)) .map(([code, name]) => ``) .join(''); const parts = []; if (favorites) { parts.push(favorites); } if (others) { if (favorites) { parts.push(''); } 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 => ``) .join(''); } function buildSourceLanguageOptionsHtml() { const entries = Object.entries(googleTranslateLanguages) .sort(([, a], [, b]) => a.localeCompare(b)); const options = entries .map(([code, name]) => ``) .join(''); return `${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 = `
${dragHandleLabel}
→
`; 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 = `
${overlayLabels.title}
`; 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(``); }; 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 = `
`; 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); })();