تنزيل googleTranslate - تنزيل كود مصدر googleTranslate

googleTranslate

googleTranslate عبارة عن "مكتبة" جافا سكريبت تستخدم مع Google Cloud Translation API (v3beta1) لترجمة صفحات الويب. والمقصود منه هو توفير بديل/بديل لترجمة Google لمواقع الويب التي تم إيقافها الآن: https://translate.google.com/intl/en/about/website.

لا يتعامل googleTranslate مع مصادقة API. ستحتاج إلى تزويد googleTranslate بعنوان URL للوكيل كجزء من التكوين، أي apiProxy . يجب أن يعيد عنوان URL هذا توجيه حمولة POST الواردة من googleTranslate إلى جانب رؤوس OAuth 2.0 الصالحة ومعلمة مفتاح API إذا تم تعيينها لتكون مطلوبة بواسطة Google Cloud Translation API.

مثال على حمولة POST المرسلة بواسطة googleTranslate إلى نقطة نهاية proxyApi :

{
    "sourceLanguageCode" : " en " ,
    "targetLanguageCode" : " fr " ,
    "mimeType" : " text/plain " ,
    "contents" :[
        " Hello " ,
        " World "
    ]
}

الاستجابة المتوقعة من proxyApi :

{
  "translations" : [
    {
      "translatedText" : " Bonjour "
    },
    {
      "translatedText" : " Monde "
    }
  ]
}

الاستخدام

تضمين البرنامج النصي

قم بتضمين googleTranslate على موقع الويب الخاص بك (من الأفضل أن تكون في قسم <HEAD> ) باستخدام علامة البرنامج النصي:

 < script type =" text/javascript " src =" ./path/googleTranslate.js " > </ script >

تهيئة ترجمة جوجل

استدعاء أسلوب init وتمرير التكوين المطلوب:

 googleTranslate . init ( {
    apiProxy : "URL_to_authenticated_API_endpoint" ,
    sourceLanguage : "en" ,
} ) ;

يترجم

لتغيير اللغة، اتصل بأسلوب googleTranslate.setTargetLanguage باستخدام رمز اللغة الهدف. على سبيل المثال للغة الفرنسية:

 googleTranslate . setTargetLanguage ( 'fr' ) ;

تقوم طريقة googleTranslate.setTargetLanguage بإرجاع وعد يمكن استخدامه لاكتشاف اكتمال إجراء ترجمة الصفحة. يمكن أن يكون هذا مفيدًا إذا كنت تريد إظهار شاشة تحميل أو رسم، حيث يمكن أن يستغرق تطبيق googleTranslate بضع ثوانٍ لإكمال عملية الترجمة.

يؤدي ضبط الترجمة مرة أخرى إلى اللغة المصدر بعد الترجمة إلى إعادة تحميل الصفحة.

تفضيل اللغة المستمر

يتم تخزين تفضيلات اللغة في localStorage باستخدام مفتاح gTranslate_lang . يعد هذا مفيدًا للحفاظ على تفضيلات المستخدم ثابتة أثناء تنقله من صفحة إلى أخرى على موقع الويب الخاص بك. لاسترداد تفضيلات اللغة، ما عليك سوى تشغيل:

 var langPreference = localStorage . getItem ( 'gTranslate_lang' ) ;

التعامل مع تغيير اللغة

يوضح المثال التالي كيف يمكن للمستخدم تبديل اللغة بناءً على حقل <select> :

HTML

 < select id =" select-lang " >
    < option value =" en " > English </ option >
    < option value =" fr " > French </ option >
    < option value =" ru " > Russian </ option >
</ select >

جافا سكريبت

 //get <select id="select-lang"> element
var langSelectField = document . getElementById ( 'select-lang' ) ;

//get language preference and set it as default value for language `<select>` field
langSelectField . value = localStorage . getItem ( 'gTranslate_lang' ) ;

//listen for `<select>` change event
langSelectField . addEventListener ( 'change' , function ( e ) {

    //translate page
    var translatePromise = googleTranslate . setTargetLanguage ( e . target . value ) ;
    console . log ( "translating..." ) ;

    //promise returns a boolean
    //indicating success/failure of translation
    translatePromise . then ( function ( response ) {

      if ( response ) {
          console . log ( 'translation completed' )
      } else {
          console . log ( 'translation failed' ) ;
      }

    } ) ;
} ) ;

مثال جافا سكريبت أكثر اكتمالا

قم بالتضمين في الترميز الخاص بك (قبل البرنامج النصي googleTranslate)

 < script >
    window . googleTranslateApiProxy = "https://authenticated_api_endpoint" ;
</ script >

جافا سكريبت في ملف البرامج النصية الرئيسي (بعد البرنامج النصي googleTranslate)

 window . addEventListener ( "load" , event => {
    
    //append translation in progress popup to body
    document . body . innerHTML +=
        '<div id="google_translate_popup">Translating...</div>' ;

    if ( document . getElementById ( "select-lang" ) !== null ) {
        //init google translate library
        var gtranslateInit = googleTranslate . init ( {
            apiProxy : window . googleTranslateApiProxy ,
            excludeElements : [ document . getElementById ( "select-lang" ) ] ,
            sourceLanguage : "en"
        } ) ;

        //when translation completes
        gtranslateInit . then ( function ( response ) {
            document . getElementById ( "google_translate_popup" ) . style . display =
                "none" ;
            if ( ! response ) {
                alert (
                    "There was a problem with translating this page. Please refresh the page and try again. If the problem persists, please contact the website administrator."
                ) ;
            }
        } ) ;

        var langSelectField = document . getElementById ( "select-lang" ) ;

        //check language preference in localStorage
        if (
            localStorage . getItem ( "gTranslate_lang" ) !== null &&
            localStorage . getItem ( "gTranslate_lang" ) !== ""
        ) {
            langSelectField . value = localStorage . getItem ( "gTranslate_lang" ) ;
        }

        //on language preference change
        langSelectField . addEventListener ( "change" , function ( e ) {
            if ( e . target . value !== "" && e . target . value !== "Select language" ) {
                var translatePromise = googleTranslate . setTargetLanguage (
                    e . target . value
                ) ;
                document . getElementById (
                    "google_translate_popup"
                ) . style . display = "block" ;
                translatePromise . then ( function ( response ) {
                    document . getElementById (
                        "google_translate_popup"
                    ) . style . display = "none" ;

                    if ( ! response ) {
                        alert (
                            "There was a problem with translating this page. Please refresh the page and try again. If the problem persists, please contact the website administrator."
                        ) ;
                    }
                } ) ;
            }
        } ) ;
    }
} ) ;

CSS لتحديد نمط النافذة المنبثقة "ترجمة...".

 # google_translate_popup {
    position : fixed;
    z-index : 999 ;
    background : white;
    top : 0 ;
    right : 50 % ;
    padding : 1 rem ;
    border : 1 px solid # fafafa ;
    display : none;
}

خيارات التكوين

المعلمة	يكتب	تقصير	وصف	مثال
`apiProxy`	خيط	`empty`	عنوان URL لنقطة النهاية `required` : يجب أن يعيد عنوان URL هذا توجيه حمولة POST الواردة من googleTranslate إلى جانب رؤوس OAuth 2.0 الصالحة ومعلمة مفتاح API إذا تم تعيينها لتكون مطلوبة بواسطة Google Cloud Translation API.	`https://www.domain.com/google-translate-api`
`translationNode`	هدف	`document.body`	عنصر HTML الذي يتطلب الترجمة.	`document.getElementById("#banner")`
`observeMutationsOn`	مصفوفة الكائن	`[]`	مصفوفة من عناصر HTML التي يجب ترجمتها إذا تحورت.	`[document.getElementById("#banner"), document.getElementById("#main-content") ]`
`excludeElements`	مصفوفة الكائن	`[]`	مجموعة من العناصر التي لا ينبغي ترجمتها.	`[document.getElementById("#user-profile"), document.getElementById("#hidden-element") ]`
`sourceLanguage`	خيط	`empty`	`optional but recommended` . رمز اللغة BCP-47 لنص الإدخال إذا كان معروفًا، على سبيل المثال، "en-US" أو "sr-Latn". يتم إدراج رموز اللغات المدعومة في دعم اللغة في Google Cloud Translate. إذا لم يتم تحديد اللغة المصدر، فستحاول واجهة برمجة التطبيقات (API) تحديد اللغة المصدر تلقائيًا وإرجاع اللغة المصدر ضمن الاستجابة.	`en`
`targetLanguage`	خيط	`empty`	`required` استخدام رمز اللغة BCP-47 لترجمة نص الإدخال، ويتم تعيينه على أحد رموز اللغة المدرجة في دعم اللغة في Google Cloud Translate.	`fr`

حقل اختيار الترجمة

فيما يلي مثال لحقل محدد يحتوي على جميع اللغات المدعومة مع رموزها (اعتبارًا من 8 أكتوبر 2019):

 < select name =" translate " id =" select-lang " >
    < option selected =" selected " > Select language </ option >
    < option value =" af " > Afrikaans </ option >
    < option value =" sq " > Albanian </ option >
    < option value =" am " > Amharic </ option >
    < option value =" ar " > Arabic </ option >
    < option value =" hy " > Armenian </ option >
    < option value =" az " > Azerbaijani </ option >
    < option value =" eu " > Basque </ option >
    < option value =" be " > Belarusian </ option >
    < option value =" bn " > Bengali </ option >
    < option value =" bs " > Bosnian </ option >
    < option value =" bg " > Bulgarian </ option >
    < option value =" ca " > Catalan </ option >
    < option value =" ceb " > Cebuano </ option >
    < option value =" zh-CN " > Chinese (Simplified) </ option >
    < option value =" zh-TW " > Chinese (Traditional) </ option >
    < option value =" co " > Corsican </ option >
    < option value =" hr " > Croatian </ option >
    < option value =" cs " > Czech </ option >
    < option value =" da " > Danish </ option >
    < option value =" nl " > Dutch </ option >
    < option value =" en " > English </ option >
    < option value =" eo " > Esperanto </ option >
    < option value =" et " > Estonian </ option >
    < option value =" fi " > Finnish </ option >
    < option value =" fr " > French </ option >
    < option value =" fy " > Frisian </ option >
    < option value =" gl " > Galician </ option >
    < option value =" ka " > Georgian </ option >
    < option value =" de " > German </ option >
    < option value =" el " > Greek </ option >
    < option value =" gu " > Gujarati </ option >
    < option value =" ht " > Haitian Creole </ option >
    < option value =" ha " > Hausa </ option >
    < option value =" haw " > Hawaiian </ option >
    < option value =" he " > Hebrew </ option >
    < option value =" hi " > Hindi </ option >
    < option value =" hmn " > Hmong </ option >
    < option value =" hu " > Hungarian </ option >
    < option value =" is " > Icelandic </ option >
    < option value =" ig " > Igbo </ option >
    < option value =" id " > Indonesian </ option >
    < option value =" ga " > Irish </ option >
    < option value =" it " > Italian </ option >
    < option value =" ja " > Japanese </ option >
    < option value =" jw " > Javanese </ option >
    < option value =" kn " > Kannada </ option >
    < option value =" kk " > Kazakh </ option >
    < option value =" km " > Khmer </ option >
    < option value =" ko " > Korean </ option >
    < option value =" ku " > Kurdish </ option >
    < option value =" ky " > Kyrgyz </ option >
    < option value =" lo " > Lao </ option >
    < option value =" la " > Latin </ option >
    < option value =" lv " > Latvian </ option >
    < option value =" lt " > Lithuanian </ option >
    < option value =" lb " > Luxembourgish </ option >
    < option value =" mk " > Macedonian </ option >
    < option value =" mg " > Malagasy </ option >
    < option value =" ms " > Malay </ option >
    < option value =" ml " > Malayalam </ option >
    < option value =" mt " > Maltese </ option >
    < option value =" mi " > Maori </ option >
    < option value =" mr " > Marathi </ option >
    < option value =" mn " > Mongolian </ option >
    < option value =" my " > Myanmar (Burmese) </ option >
    < option value =" ne " > Nepali </ option >
    < option value =" no " > Norwegian </ option >
    < option value =" ny " > Nyanja (Chichewa) </ option >
    < option value =" ps " > Pashto </ option >
    < option value =" fa " > Persian </ option >
    < option value =" pl " > Polish </ option >
    < option value =" pt " > Portuguese (Portugal, Brazil) </ option >
    < option value =" pa " > Punjabi </ option >
    < option value =" ro " > Romanian </ option >
    < option value =" ru " > Russian </ option >
    < option value =" sm " > Samoan </ option >
    < option value =" gd " > Scots Gaelic </ option >
    < option value =" sr " > Serbian </ option >
    < option value =" st " > Sesotho </ option >
    < option value =" sn " > Shona </ option >
    < option value =" sd " > Sindhi </ option >
    < option value =" si " > Sinhala (Sinhalese) </ option >
    < option value =" sk " > Slovak </ option >
    < option value =" sl " > Slovenian </ option >
    < option value =" so " > Somali </ option >
    < option value =" es " > Spanish </ option >
    < option value =" su " > Sundanese </ option >
    < option value =" sw " > Swahili </ option >
    < option value =" sv " > Swedish </ option >
    < option value =" tl " > Tagalog (Filipino) </ option >
    < option value =" tg " > Tajik </ option >
    < option value =" ta " > Tamil </ option >
    < option value =" te " > Telugu </ option >
    < option value =" th " > Thai </ option >
    < option value =" tr " > Turkish </ option >
    < option value =" uk " > Ukrainian </ option >
    < option value =" ur " > Urdu </ option >
    < option value =" uz " > Uzbek </ option >
    < option value =" vi " > Vietnamese </ option >
    < option value =" cy " > Welsh </ option >
    < option value =" xh " > Xhosa </ option >
    < option value =" yi " > Yiddish </ option >
    < option value =" yo " > Yoruba </ option >
    < option value =" zu " > Zulu </ option >
</ select