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

Overview

Logo

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: '<unknown>'

    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: ["pt","en"] More languages will be added soon.

Developer area

Built With

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

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 - [email protected]

You might also like...

Translate text in images using Vision API, Translation API and React with Canvas

manga-translator Manga translator app using Vision API, Translation API Rendered using React and canvas Installation Create a Google Cloud project, en

Oct 26, 2022

To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. I build a simple website that allows for doing that, and I do it using ES6 and Webpack!

To-do list

Project Name : TO-Do list "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mar

Aug 22, 2022

"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. You will build a simple website that allows for doing that, and you will do it using ES6 and Webpack!

To-do-list Description "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark t

Oct 18, 2022

This tool allows you to draw up plans for facilities from Foxhole's new Inferno update. It takes power and resource needs into account to help you efficiently design your facilities.

This tool allows you to draw up plans for facilities from Foxhole's new Inferno update. It takes power and resource needs into account to help you efficiently design your facilities.

Foxhole Facility Planner This tool allows you to draw up plans for facilities from Foxhole's new Inferno update. It takes power and resource needs int

Dec 23, 2022

Japanese translation of vitejs.dev

Vite Docs JA Vite ドキュメントの日本語翻訳レポジトリです。現状、本レポジトリは翻訳作業用のものとして一時的に用意されています。将来的に、本レポジトリは別場所に移動される可能性があります。 貢献ガイド Vite 日本語翻訳ガイド を一読お願いします! はじめかた 本ドキュメントは V

Dec 14, 2022

PDF translation add-on for Zotero 6

PDF translation add-on for Zotero 6

Zotero PDF Translate This is an add-on for Zotero 6. It provides PDF translation for Zotero's built-in PDF reader. Quick Start Guide Install Download

Jan 8, 2023

Font-end app to test the transformer model translation from Cape Verdian Creole to English

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Sep 28, 2022
Releases(0.0.3)
Owner
Eduardo Castro
I love terminals <3
Eduardo Castro
This project focuses on increasing the efficiency of a hospital's patient waitlist by creating an algorithm to generate an ordered list of 10 patients with the highest chance of accepting an appointment offer.

Patients-Facility Technical Interview Requirements This application was built on Node.JS v12.14. It has not been tested on other versions. You will al

Rwubakwanayo Olivier 4 Mar 20, 2023
Help Ukrainian people find jobs in the EU, navigate visas and translating CVs.

We invite Ukrainians to Europe Since the beginning of war in Ukraine, more than 3.7 million people have left Ukraine, while an estimated seven (7) mil

Dejan Jacimovic 14 Nov 12, 2022
The Frontend of Escobar's Inventory Management System, Employee Management System, Ordering System, and Income & Expense System

Usage Create an App # with npx $ npx create-nextron-app my-app --example with-javascript # with yarn $ yarn create nextron-app my-app --example with-

Viver Bungag 4 Jan 2, 2023
Utilities for auto-translating the Tera DataCenter based on XML files

xml-dc-translator Requires latest version of node.js, download here: https://nodejs.org/. Utility for auto-translating the Tera DataCenter based on XM

JKQ 6 Sep 6, 2022
Web UI kit following simply superb.'s design system, based on Tailwind CSS.

ui-kit TailwindCSS powered UI kit following simply superb.'s design system. ➡️ Demo available here Why I am building few applications (iOS / Android /

simply superb. 8 Mar 4, 2022
A personal semantic search engine capable of surfacing relevant bookmarks, journal entries, notes, blogs, contacts, and more, built on an efficient document embedding algorithm and Monocle's personal search index.

Revery ?? Revery is a semantic search engine that operates on my Monocle search index. While Revery lets me search through the same database of tens o

Linus Lee 215 Dec 30, 2022
Full dynamic tool kit that is capable of deobfuscating and producing a javascript representation of Shape's Virtual Machine obfuscation

Shape Security Decompiler Tool-Kit This tool kit is capable of dynamically deobfuscating all versions of shape security's virtual machine interpreter

null 25 Dec 15, 2022
Translate text in images using Vision API, Translation API and Jimp

translate-image-text Translate text in images using Vision API, Translation API Rendered using React and canvas Installation Create a Google Cloud pro

Huy Le 4 Oct 26, 2022