It's a example of the component showing a list of languages
It's a example of the component showing a dropdown list of languages
Download Code
<![CDATA[
0 en
1 english
2 <span style="font-size:20px;color:red;" trans="15">This is a code expample used in this demo</span>
3 ...
4 ...
]]>
<![CDATA[
<?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();
?>
]]>
<![CDATA[
<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>
]]>
<![CDATA[
<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>
]]>
<![CDATA[
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>
]]>
