<?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> <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: Incluya el siguiente código en el encabezado de su archivo html.
<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: al final del archivo html agregue el siguiente código ...
<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>
CÓMO UTILIZAR:
Simplemente agregue el atributo trans a cada texto, componente, etiquetas html que desee traducir.
Sintaxis: trans = "índice" índice = número de línea en el archivo de traducción restando 1; ejemplo: línea número 10 índice = 10-1 = 9
Ejemplos de código fuente HTML
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>
Cree un archivo txt para cada idioma que desee usar y guárdelo como nombre de archivo 'código para idioma.txt' usando minúsculas y el código para el idioma que es 'es' para español, 'en' para inglés, fr para francés, etc. en. Haga una búsqueda web de códigos de idiomas ...
1 El nombre del archivo se usará para mostrar la imagen de la bandera relacionada con el idioma
2 La primera línea del archivo txt define el idioma
3 La segunda línea define el nombre del idioma
4 Use una sola línea para cada texto a traducir
5 Puede incluir etiquetas html en el archivo
por ejemplo:
Esta clase procesará todos los archivos de idioma incluidos en la carpeta de idiomas y creará el archivo language.js que debe incluirse en su archivo html .
class C_writetranslationfilestojs{{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" )]);}}}$searchString= "$localPath"."*.txt";$lang=array();foreach (glob($searchString) as $flie_name){$Languagefile=file(utf8_decode($flie_name), FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);array_push($lang,array($Languagefile[0],$Languagefile[1]));foreach($Languagefile as $key => $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> <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>';{}{}{}}}}Javascript: Incluya el siguiente código en el encabezado de su archivo html.
<!-- jQuery 2.2.3 --><!-- Bootstrap 3.3.6 -->Javascript: al final del archivo html agregue el siguiente código ...
{}}}}CÓMO UTILIZAR:
Agregue la clase "flags" para mostrar lista desplegable o la clase "flagslist" para mostrar lista al html tag que quiera convertir en traductor.
Simplemente agregue el atributo trans a cada texto, componente, etiquetas html que desee traducir.
Sintaxis: trans = "índice" índice = número de línea en el archivo de traducción restando 1; ejemplo: línea número 10 índice = 10-1 = 9
Ejemplos de código fuente HTML