jquery automatic translate plugin with bing and google publish– by pkrss developer log

pkrss toolset website

auto translate in web html

Introduction

This php and javascript source can worked fine with jquery and other javascript framework.

This author want to used it in windows metro javascript application,and mobile web app and websites.

---

Feature

• Simple
• Efficient
• Convenient
• Free to modify
• Scalable

---

Download

Download source Online demo

---

Setup

(If simple usage,can skip this step)

• On server, create mysql table:

  CREATE TABLE `pkrss_kv` (
   `key` varchar(767) NOT NULL COMMENT 'key',
   `value` TEXT NOT NULL COMMENT 'value',
   PRIMARY KEY (`key`)
  ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
  

  
  
• On server, modify: config.inc.php

  <?php
  
  // if want used HTTP header referer value mixed for "ap",then set to false or undefine this.
  // it can used for share for identify the same "ap" value with different websites.
  define('PKRSS_DEBUG',true);
  
  // if want to return http header "cache-control" value.
  if(!defined('PKRSS_DEBUG') || !PKRSS_DEBUG)
  	define('PKRSS_CACHE_CONTROL',86400);
  
  //-- start mysql db setting
  define('PKRSS_DB_CONNECTIONSTRING','mysql:host=localhost;dbname=test');
  define('PKRSS_DB_USERNAME','root');
  define('PKRSS_DB_PASSWORD','');
  //-- end mysql db setting
  
  //-- start bing translate api
  // if want to used bing translage api,then uncomment bellow lines:
  if (!defined('BING_ACCOUNT_KEY')) 
  	define('BING_ACCOUNT_KEY', 'xxx');
  //-- end bing translate api
  
  //-- start google translate v2 api
  // if want to used google v2 translage api,then uncomment bellow lines:
  // if (!defined('GOOGLE_API_KEY')) {
  //	 define('GOOGLE_API_KEY', '???');
  //	 define('GOOGLE_API_APPLICATION', '???');
  // }
  //-- end google translate v2 api
  

  
  
• On client, see this demo with: client/index.html

---

Usage

simple usage

in your html,add some line:(If my website allow cross domain)

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
window.pkTOptions = {"apname":"your_demo_name"};
</script>
<script type="text/javascript" src="http://toolset.pkrss.com/toolset/translate/client/language.js" async="async"></script>

Used your language.js and server.php:

<script type="text/javascript">
window.pkTOptions = {"url":"../server/server.php","apname":"your_demo_name"};
</script>
<script type="text/javascript" src="language.js" async="async"></script>

---

For want to translated dom,add class "pkT":

<span class="pkT">This is one example line!</span>

It looks like this:(If your browser language is not english)

This is one example line!

---

Advanced usage 1

Not auto translate:

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="//toolset.pkrss.com/toolset/translate/client/language.js" async="async"></script>

And,want to do it in any time:

<script type="text/javascript">
if(_demo_usaged == 2){
	window.pkTOptions = {"apname":"your_demo_name"};
	window.pkTOptions._user_interval = window.setInterval(function(){
	
		if(!window.pkTranslateCls)
			return;
			
		window.clearInterval(window.pkTOptions._user_interval);
		window.pkTOptions._user_interval = null;
		
		if(!window.pkTOptions.objT){
			window.pkTOptions.objT = new window.pkTranslateCls(window.pkTOptions);
			window.pkTOptions.objT.start();
		}
	},1000);
}
</script>

Advanced usage 2

Dynamic translate dynamic doms

After that,want to translate by dynamic add dom elements:

<script type="text/javascript">	
if(window.pkTOptions.objT)
	window.pkTOptions.objT.refreshUITextByLanguage();
</script>

After that,want to show all support languages:

<script type="text/javascript">	
if(window.pkTOptions.objT)
	window.pkTOptions.objT.languages(function(result){
		if(result && result.langs)
			;// result.result current is ["zh_CN","en","ja","ko"...]
			// it will be modify by next timer,i will changed my news website:http://news.pkrss.com
			// and will publish one country locale flag plugin with this plugin.
			// wait for me...
	});
</script>

Output languages:(result.langs)

---

And,there are javascript options manual:

window.pkTranslateCls = function(options) {
	var extend = null;
	if(options){
		if(options.fn && options.fn.extend){
			extend = options.fn.extend;
		}
	}
	
	// array item/object attribute, merge function
	if(!extend)
		extend = jQuery.extend;
	
    this.options = extend({
    	"service":"bing",			// bing or google or other your server implement.
    	"delayToServer":3000,		// in this microseconds,can merge many translate request in one,and sended one request to server.
    	"delayToDb":3000,			// delay to save local storage
    	"currentUILanguage":null,   // client browser language, if not set, plugin will auto detect this value.
    	"defaultHtmlLanguage":"en",	// default html language code.if your html source not used english,then can changed this value.
		"clsOnline":window.pkTCls,	// you can custom implement pkTCls
		"loadfun":this._loadfun,	// load cached data to local storage,default used:window.localStorage.getItem()
		"savefun":this._savefun,	// save cached data to local storage,default used:window.localStorage.setItem()
		"selector":".pkT",			// dom selector,by this value,doms will work translated by this plugin.
		"datakey":"pkTO",  			// if dom has this attribute, and options.fn.querytext is not null, and options.fn.setattr is not null,then will auto set this attribute
		"donekey":"pkTD",  			// if translate dom,then set this attrbute.
		"apname":'pkrss_demo',		// ap name,can used in difference application.
		"curretrytimer":1,			// current retry timer.in network not fine condition.
		"retrytimer":3,				// total retry timer.in network not fine condition.
		"url":'//toolset.pkrss.com/toolset/translate/server/server.php',				// translate server url
		"startedCB":null,			// if started,then call this function.ex: function cb(ok,objT){}
    	}, 
    	options);
    
    // if your not used jquery,then need set this value in options.fn.
    if(!this.options.fn)
    	this.options.fn = {};
    
    // log function,can worked in ie6-
    if(!this.options.fn.log){
    	this.options.fn.log = function(s){
    		if(window.console && window.console.log)
    			window.console.log(s);
		}
	}
    // network ajax function
    if(!this.options.fn.ajax)
    	this.options.fn.ajax = jQuery.ajax;
    
    // query dom function
    if(!this.options.fn.querydom)
    	this.options.fn.querydom = jQuery;
    
    // query dom attribute function
    if(!this.options.fn.queryattr){
    	this.options.fn.queryattr = function(obj,name){
    		return obj.prop(name);
        };
    }
    
    // set dom attribute function
    if(!this.options.fn.setattr){
    	this.options.fn.setattr = function(obj,name,val){
    		return obj.prop(name,val);
        };
    }
    
    // query dom text function
    if(!this.options.fn.querytext){
    	this.options.fn.querytext = function(obj){
    		return obj.text();
        };
    }
    
    // set dom text function
    if(!this.options.fn.settext){
    	this.options.fn.settext = function(obj,txt){
    		return obj.text(txt);
        };
    }
    
	this.data = {};
	this.queryed = {};
	this.prepareList = [];
};

---

Appendix

Bing translate languages Google translate languages

contact us

sitemap news blog shop api
IRC EMAIL