Run Anywhere

The JavaScript library could be added to any website no matter what framework or language is being used.

Easy To Use

The easiest way it could possibly be, developers don't even have to read the documentation to start implementation.

Instant Translation

Translate website and save its status without the need of reloading.

RTL CSS

Support for right-to-left languages by automatically updating CSS and inline styling.

CDN

The JavaScript file is backed up with CDN support.

Open Source

Source code is available on GitHub.com for contribution and review.

Contribution

https://github.com/angrymonkeycloud/CloudTranslation.git

check out more on GitHub

IDE

The project is created using Visual Studio Code, you can get it for free on code.visualstudio.com.

Coding

For the coding language, TypeScript is used to create Typed Based JavaScript. Check out more on typescriptlang.org.

Distribution

We're using Gulp to convert the code into distribution files. Run gulp into the VS Code terminal to generate the final output. Check it out on gulpjs.com.

Implementation

Requirements

jQuery 2.x or 3.x: jQuery CDN, Download jQuery.

Cloud Translation JavaScript

Cloud Translation download: Uncompressed, Compressed.

Cloud Translation CDN Uncompressed:
    
 <script src="https://cdn.amcapi.com/translation/cloudtranslation-1.0.0.js" crossorigin="anonymous"></script> 
        
    
Cloud Translation CDN Compressed:
    
 <script src="https://cdn.amcapi.com/translation/cloudtranslation-1.0.0.min.js" crossorigin="anonymous"></script> 
        
    

Configuration

JSON configuration file must be included within the website head as follows:
            
 <script type="application/json" id="CloudTranslationConfig">
    {
        "Settings": {
            // Should be included within the Languages section
            "DefaultLanguage": "en",

            // Empty string or Subdirectory (ex: www.website.com/en/)
            "UrlLanguageLocation": "Subdirectory",

            // Empty string or Azure (more providers should be added later)
            "TranslatorProvider": "Azure",

            // Please use your own key, Microsoft Azure provides a free tier.
            "TranslatorProviderKey": "5900190c91074f94b1baea93fa1be549",

            // To log automatically translated text within the console, this way you
            // could add them directly into the Translations section so the website
            // loads faster without the need of a translator provider
            "LogTranslationsFromProvider": true
        },
        "Languages": [
            {
                "Code": "en",
                "DisplayName": "English"
            },
            {
                "Code": "es",
                "DisplayName": "Spanish"
            },
            {
                "Code": "fr",
                "DisplayName": "Français"
            },
            {
                "Code": "fr-ca",
                "DisplayName": "Français (Canada)"
            },
            {
                "Code": "ar",
                "DisplayName": "العربية",
                "Direction": "rtl"
            }
        ],
        "Translations": [
            {
                "en": "Welcome",
                "ar": "اهلا وسهلا",
                "fr": "Bienvenu"
            },
            {
                "en": "Home",
                "ar": "الصفحة الرئيسية"
            }
        ]
    }
 <script>
                
            

Languages Select (Optional)

You can add an empty select into your website having the class "CloudTranslationSelect", which will be filled in with the predefined languages automatically.
    
 <select class="CloudTranslationSelect"></select> 
        
    

Prevent Text Translation

Specify HTML attribute translate="no" to prevent the translation of inside text, check out more on MDN web docs.
    
 <div translate="no">Don't translate this text.</div>