TranslateForMe

Offer a translation system to your users, a plugin capable of translating your website, simply and efficiently!

View Demo · Report Bug · Request Feature

About The Project

A little about:

• I looked a lot about some plugin that did the same function but I couldn't find it, so I decided to do my own!
• All tags and classes were created with random names, not to affect your site and its styles.
• The project was structured entirely with pure javascript, only Google translate is instantiated

Comum area

Usage

Add a script section with attribute "translate="forme""

Example:

<script translate="forme" src="translateforme.google.js"></script>

This attribute is mandatory for the plugin to work.

Launch the plugin

<script>
document.addEventListener('DOMContentLoaded', function () {
      new TranslateForMe.init({
        languages: ['en', 'pt'],
        saveLanguage: true,
        fonts: true
      });
    });
</script>

To work properly, instantiate the class only after the DOM is loaded.

API

init([options])

<script translate="forme" src="translateforme.google.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
      new TranslateForMe.init({
        languages: ['en', 'pt'],
        saveLanguage: true,
        fonts: true
      });
    });
</script>

Options:

• languages

  Type: Array[]
  Default: ['all languages ​​available']

  Languages that will be added in the menu List

• saveLanguage

  Type: Boolean
  Default: false

  Enables the save language mode, if activated, create a checkbox in the menu, if true, all pages will be translated according to the selected language.

• fonts

  Type: Boolean
  Default: true

  If true, load Open Sans font style, for better menu look. (If it already exists, it will not be loaded.)

More

languages: ["en","pt","bn","zh-CN","zh-TW","es","fr","ja","ru"] More languages will be added soon.

Developer area

Built With

For development mode, here is a list of used frameworks/libraries

• TypeScript
• Csso

Google translator was not included due to being an external module

Starting

Install all modules.

• npm

  npm install

Commands

• Build

  npm run build
  
  Output:
  > translateforme@version build
  > npx tsc && npx ts-node src/addons/csso.ts && npx ts-node src/addons/json.ts

  All files will be created in the ./build folder

• Json

   npm run json
   
   Output:
   > translateforme@version json
   > npx ts-node src/addons/json.ts

  It will create a minified version of the translateforme.flags.json file, found in ./build

• Csso

   npm run csso
   
   Output:
   > translateforme@version csso
   > npx ts-node src/addons/csso.ts

  It will create a minified version of the translateforme.google.css file, found in ./build

...

Sorry for the little information, soon add more details about each function of the script.

Contact

Eduardo Castro - eduh.castro19@gmail.com