PHP Classes

Ez PHP Website Translator Script: Generate JavaScript for translated applications

Recommend this page to a friend!
  Info   Documentation   View files Files   Install with Composer Install with Composer   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 88 All time: 9,980 This week: 37Up
Version License PHP version Categories
eztranslator 1.0.0GNU General Publi...5HTML, Localization, PHP 5
Description 

Author

This class can generate JavaScript for translated applications.

It can traverse a directory looking for text files with all the text strings that a Web sites needs to use.

The class can generate a JavaScript file with code that can loaded by Web page, to replace text in HTML tags to display translations of the page texts to the current language.

Translate your web pages easily, no more need to create a copy of your web pages in different languages only one page can be easily translate to all language using this code.

Innovation Award
PHP Programming Innovation award nominee
May 2021
Number 5
Many sites are visited by users from all over the world that prefer different languages. For those users, it is better to show texts in their own preferred language.

This class provides a solution that can generate texts for sites in different languages. It generates JavaScript that may dynamically alter the texts of certain parts of the pages in a language that the user prefers.

Manuel Lemos
Picture of MHCSoft Development
Name: MHCSoft Development <contact>
Classes: 2 packages by
Country: United States United States
Age: ???
All time rank: 4220536 in United States United States
Week rank: 197 Up20 in United States United States Up
Innovation award
Innovation award
Nominee: 1x

Documentation

Eztranslator

Translate your web pages easily

HOW TO CONFIGURE:

Create a txt file for each language you want to use and save it into languages folder under filename 'code for language.txt' using lowercase an the code for language thats it 'es' for spanish, 'en' for english, fr for french, and so on. Make a web search for languages codes... - You can now translate one of those languages files, for instance 'en.txt', to the rest of the languages with google translator using the function translate files. - The name of the file will be used to show the flag image related to the language - The fisrt line of the txt file define the language - The second line define the language name - Use a single line for each text to translate - You can include html tags in the file for example:

1 en
2 english
3 <span style="font-size:20px;color:red;" trans="15">This is a code expample used in this demo</span>
4 ...
5 ...

Once you done crating those languages files run the php file class_traslationfilestojs.php located in php folder. This class will process all language files included in languages folder and will create the language.js file that have to be include in your html file.

<?php header("Access-Control-Allow-Origin: *");
class C_writetranslationfilestojs{
    var $translationFile;
    var $varname='';

    function __construct()
    {
        $translatefn='
		function setCookie(cname, cvalue, exdays) {
		  var d = new Date();
		  //(exdays 24 60 60 1000)
		  document.cookie = cname + "=" + cvalue + ";expires=Fri, 09 Aug 2013 04:35:50 GMT;path=/";
		  d.setTime(d.getTime() + exdays);
		  var expires = "expires="+d.toUTCString();
		  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
		}
        function translate(alang){
            setCookie("lang", alang, (365 24 60 60 1000));
            lang=alang;
            translatables =$("[trans]");
            if (translatables.length>0){
                for (i=0;i<translatables.length;i++){
                    if($(translatables[i]).attr("placeholder")){
                        $(translatables[i]).attr("placeholder",window[alang][$(translatables[i]).attr( "trans" )]);
                    }else if($(translatables[i]).attr("data-toggle")=="tooltip"){
                        $(translatables[i]).attr("title",window[alang][$(translatables[i]).attr( "trans" )]);
                        $(translatables[i]).attr("data-original-title",window[alang][$(translatables[i]).attr( "trans" )]);
                        if ($(translatables[i]).hasClass("fa-ban")){
                            $(translatables[i]).attr("title",window[alang][$(translatables[i]).attr( "trans" )]);
                            $(translatables[i]).attr("data-original-title",window[alang][$(translatables[i]).attr( "trans" )]);
                        }
                    }else if ($(translatables[i]).attr("data-toggle")!="tooltip"){$(translatables[i]).html(window[alang][$(translatables[i]).attr( "trans" )]);}
                }
            }
            $(\'.selectlang\').val(lang);
            $(\'.selectlang\').selectpicker(\'render\');
            $(\'[data-toggle="tooltip"]\').tooltip();
        }';
        $localPath='./languages/';
        $searchString= "$localPath"."*.txt";
        $compile='';
        $lang=array();
        foreach (glob($searchString) as $flie_name){

            $Languagefile=file(utf8_decode($flie_name), FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
            $jscontext='';
            array_push($lang,array($Languagefile[0],$Languagefile[1]));
            foreach($Languagefile as $key => $value)
            {
                $jscontext.="'".str_replace("'","\'",$value)."',";
            }
            $jscontext=substr($jscontext,0,strlen($jscontext)-1);
            $this->varname=str_replace($localPath,"",str_replace(".txt","",$flie_name));
            echo "archivo: ".$Languagefile[0].".txt (".$Languagefile[1].") procesado <br>";
            $jscontext=$this->varname."=[".$jscontext."]";
            $compile.=$jscontext.";\n";
        }
            $selectlanguages='<a><i class="fas fa-language"></i>&nbsp;&nbsp;&nbsp;<span trans="none"><SELECT name="lang"  id="selectlang" onchange="trans(this.value)" changed.bs.select="trans(this.value)" style="background-color:#ecf0f5;text-transform:capitalize;" data-width="fit" class="selectlang"></a>';
            for ($i=0;$i<count($lang);$i++)
            {
                $selectlanguages.='<option data-thumbnail="./langImages/'.$lang[$i][0].'.png" value="'.$lang[$i][0].'" style="text-transform:capitalize;">'.$lang[$i][1].'</option>';
            }
            $selectlanguages.='</SELECT></span></a>';
            $image_size="24px";
            $flags='<div style="margin: auto;">';
            for ($i=0;$i<count($lang);$i++)
    		{
    		    $flags.= '<img type="image" src="./langImages/'.trim($lang[$i][0]).'.png" width="'.$image_size.'" height="'.$image_size.'" id="lang_'.$i.'" name="'.trim($lang[$i][0]).'" style="cursor:pointer;" onclick="trans('."\'".$lang[$i][0]."\'".')" title= "'.$lang[$i][1].'" alt= "'.$lang[$i][1].'"/>';
    		}
            $flags.= '</div>';
            $compile.="flagsSelector='$flags';\n\nlangDownLst='$selectlanguages';\n\n $translatefn";
            $this->translationFile=$localPath."languages.js";

            if (!$handle = fopen($this->translationFile, 'w'))
            {
                echo "Can not crate (".$this->translationFile.")...";
                exit;
            }
            if (fwrite($handle, $compile) === FALSE) {
                echo "Can not write (".$this->translationFile.")";
                exit;
            }
            fclose($handle);
    }
}
$writeConfig = new  C_writetranslationfilestojs();
?>

Javascript: Include the following code in the head of your html file

    <head>
    ...
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./css/bootstrap-select.css">
  <!-- jQuery 2.2.3 -->
	<script src="./js/jquery-2.2.3.min.js"></script>
	<!-- Bootstrap 3.3.6 -->
	<script src="./js/bootstrap-3.1.1.min.js"></script>
  <script src="./js/bootstrap-select.js"></script>
  <script type="text/javascript" src="./languages/languages.js"></script>
  <style>
	.selectlang{ display:none; /Prevent FOUC/}
  </style>
    ...
    </head>

Javascript: At the end of the html file add the folowing code...

<script>
 $(document).ready(function () {
	$('.flagslist').html(flagsSelector);
	$('.flags').html(langDownLst);
    lang = (navigator.language || navigator.userLanguage).substr(0,2);
    cookies=(document.cookie).split(';');
    for(i=0;i<cookies.length;i++)
    {
       acookie=cookies[i].split("=");
       if (((acookie[0]).trim()).trim()=='lang'){
           if (acookie[1]!='undefined'){
                lang=acookie[1];
           }
       }
    }
	translate(lang);
});

	function trans(alang){
		translate(alang);
	}
</script>

HOW TO USE:

Add the class "flags" to show dropdown list or the class "flagslist" to show list to the html tag you want to convert into translator.

Simply add the attr trans to every text, component, html tags you want to translate. Syntax: trans="index" index = line number in translation file subtratting 1; example: line number 10 index =10-1=9 HTML souce code examples

Input with placeholder translated <input class="form-control" trans="11" placeholder="" value="">

Input textarea with value translated <textarea trans="13"></textarea>

Button with tooltip value translated <button data-toggle="tooltip" trans="15" title="">A button</button>

  Files folder image Files (56)  
File Role Description
Files folder imagecss (3 files)
Files folder imagejs (4 files)
Files folder imagelangImages (43 files)
Files folder imagelanguages (3 files)
Files folder imagephp (1 file)
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file README.md Doc. Read Me

  Files folder image Files (56)  /  css  
File Role Description
  Accessible without login Plain text file bootstrap-select.css Data Auxiliary data
  Accessible without login Plain text file bootstrap.css Data Auxiliary data
  Accessible without login Plain text file bootstrap.css.map Data Auxiliary data

  Files folder image Files (56)  /  js  
File Role Description
  Accessible without login Plain text file bootstrap-3.1.1.min.js Data Auxiliary data
  Accessible without login Plain text file bootstrap-select.js Data Auxiliary data
  Accessible without login Plain text file jquery-2.1.4.min.js Data Auxiliary data
  Accessible without login Plain text file jquery-2.2.3.min.js Data Auxiliary data

  Files folder image Files (56)  /  langImages  
File Role Description
  Accessible without login Image file ar.jpg Icon Icon image
  Accessible without login Image file ar.png Icon Icon image
  Accessible without login Image file bg.jpg Icon Icon image
  Accessible without login Image file bg.png Icon Icon image
  Accessible without login Image file cs.jpg Icon Icon image
  Accessible without login Image file cs.png Icon Icon image
  Accessible without login Image file de.jpg Icon Icon image
  Accessible without login Image file de.png Icon Icon image
  Accessible without login Image file el.jpg Icon Icon image
  Accessible without login Image file el.png Icon Icon image
  Accessible without login Image file en.jpg Icon Icon image
  Accessible without login Image file en.png Icon Icon image
  Accessible without login Image file es.jpg Icon Icon image
  Accessible without login Image file es.png Icon Icon image
  Accessible without login Image file fr.jpg Icon Icon image
  Accessible without login Image file fr.png Icon Icon image
  Accessible without login Image file hu.jpg Icon Icon image
  Accessible without login Image file hu.png Icon Icon image
  Accessible without login Image file it.jpg Icon Icon image
  Accessible without login Image file it.png Icon Icon image
  Accessible without login Image file ja.jpg Icon Icon image
  Accessible without login Image file jp.png Icon Icon image
  Accessible without login Image file ko.jpg Icon Icon image
  Accessible without login Image file ko.png Icon Icon image
  Accessible without login Image file languages.png Icon Icon image
  Accessible without login Image file nl.jpg Icon Icon image
  Accessible without login Image file nl.png Icon Icon image
  Accessible without login Image file pl.jpg Icon Icon image
  Accessible without login Image file pl.png Icon Icon image
  Accessible without login Image file pt.jpg Icon Icon image
  Accessible without login Image file pt.png Icon Icon image
  Accessible without login Image file ro.jpg Icon Icon image
  Accessible without login Image file ro.png Icon Icon image
  Accessible without login Image file ru.jpg Icon Icon image
  Accessible without login Image file ru.png Icon Icon image
  Accessible without login Image file sv.jpg Icon Icon image
  Accessible without login Image file sv.png Icon Icon image
  Accessible without login Image file us.jpg Icon Icon image
  Accessible without login Image file us.png Icon Icon image
  Accessible without login Image file vi.jpg Icon Icon image
  Accessible without login Image file vi.png Icon Icon image
  Accessible without login Image file zh.jpg Icon Icon image
  Accessible without login Image file zh.png Icon Icon image

  Files folder image Files (56)  /  languages  
File Role Description
  Accessible without login Plain text file en.txt Doc. Documentation
  Accessible without login Plain text file es.txt Doc. Documentation
  Accessible without login Plain text file languages.js Data Auxiliary data

  Files folder image Files (56)  /  php  
File Role Description
  Plain text file class_traslationfilestojs.php Class Class source

The PHP Classes site has supported package installation using the Composer tool since 2013, as you may verify by reading this instructions page.
Install with Composer Install with Composer
 Version Control Unique User Downloads Download Rankings  
 100%
Total:88
This week:0
All time:9,980
This week:37Up